[TypeScript] 객체 디스트럭처링

객체 디스트럭처링:

객체 리터럴에서 변수명에 대응하는 속성값을 추출해 변수로 할당하는데 유용

let { id, country = 88 } = { id: "happy" }
console.log(id) <- happy
console.log(country) <- 88

let { id: newName1, country: newName2 } = { id: "happy", country: 88 }
console.log(newName1) <- happy

타입 obj = {
	name:String
	nationality:String
}

function printProfile(파라미터:obj){

}

function printProfile({ name, nationality = "none" } = { name: "anonymous" }) {
    console.log(name, nationality);
}

printProfile(); -> anonymous none
printProfile({ name: "happy" }); // nationality는 디폴트 값인 ?가 정해졌으므로 생략 가능
printProfile({ name: "happy", nationality: "korea" });

// printProfile({}); // name은 디폴트 값이 없으므로 생략 불가능
// printProfile({ nationality: "korea" }); // name은 디폴트 값이 없으므로 생략 불가능

type C = { a: string, b?: number }
function fruit({ a, b }: C): void {
    console.log(a, b);
}

fruit({ a: "apple", b: 10 });
fruit({ a: "apple" });

->a 는 string type 생략 불가능 b는 생략 가능

배열 디스트럭처링:

let numbers = ["one", "two", "three", "four", "five"];
let [nums1, nums2] = numbers; // 위치에 따라 순서대로 디스트럭처링 수행
console.log(nums1, nums2); -> one two

let [,,nums3,nums4,] = numbers; // ,를 이용해 부분 생략 가능
console.log(nums3, nums4); -> three four

[nums4, nums3] = [nums3, nums4]; // 디스트럭처링을 이용해 변수 값을 교체
console.log(nums3, nums4); -> four three

let [color1, color2="blue"] = ["black"]; // 기본값 지정 가능
console.log(color1, color2);

function f([first, second]: [number, string]) {
    console.log(first);
    console.log(second);
}
f([100, "hello"]); ->배열의 요소를 함수의 디스트럭처링 매개변수로 전달

전개연산자 …

얕은 복사방법으로 obj2 객체로 복사한다

let obj2 = { a:1, b:2, ...obj }

거꾸로도 활용 가능

let numGroup = { n1: 1, n2: 2, n3: 3 };
let { n2, ...n13 } = numGroup;
console.log(n2, n13) <-n2 속성 외의 나머지 속성을 n13이 객체로 받아진다

 

출처: 퀵스타트 타입스크립트