TypeScript 강좌(5) - Destructuring
TypeScript 강좌는 여러 절로 구성되어 있습니다.
- TypeScript 강좌(1) - Introduction
- TypeScript 강좌(2) - Data Type(Part 1)
- TypeScript 강좌(3) - Data Type(Part 2)
- TypeScript 강좌(4) - 변수 선언
- TypeScript 강좌(5) - Destructuring
- TypeScript 강좌(6) - Interface
- TypeScript 강좌(7) - Class
TypeScript Destructuring
이번 포스트의 내용은 Destructuring 입니다.
Destructuring은 ECMAScript 2015 문법인데 TypeScript에서도 지원합니다.
아래의 예제를 정상적으로 실행해보실려면
tsconfig.json에서compilerOptions의target속성을es6로 해 주셔야 합니다.
일반적으로 Destructuring Assignment(비구조할당)라고 하는데 쉽게 말하자면 배열의 요소나 객체의 속성을
배열 literal 혹은 객체 literal과 유사한 형태의 문법을 이용하여
변수에 할당하는 기법입니다. 잘 알아두면 코드를 좀 더 쉽게 작성할 수 있습니다.
Array Destructuring
다음과 같이 배열이 있을 경우 각 배열의 원소값을 가지는 변수를 만들려고 합니다. 아마도 코드는 다음처럼 써야 할 듯 보입니다.
let myArr: string[] = ["Hello", "World", "Moon"];
let first: string = myArr[0];
let second: string = myArr[1];
let third: string = myArr[2];
console.log(first); // "Hello" 출력
console.log(second); // "World" 출력
console.log(third); // "Moon" 출력
이 코드를 Destructuring Assignment(비구조할당)를 이용하면 다음과 같이 표현할 수 있습니다.
let myArr: string[] = ["Hello", "World", "Moon"];
let [first, second, third] = myArr;
console.log(first); // "Hello" 출력
console.log(second); // "World" 출력
console.log(third); // "Moon" 출력
위의 코드에서 [first, second, third] 형태를 Destructuring Array(비구조배열)이라고 합니다.
즉, let [first, second, third] 구문은 변수 선언과 동시에 Destructuring Array(비구조배열)을 생성한 것입니다.
만약 Destructuring Array(비구조배열)에 data type을 지정하고 싶은경우는 다음과 같이 하시면 됩니다.
let myArr: string[] = ["Hello", "World", "Moon"];
let [first, second, third]: string[] = myArr;
간단한 응용을 보도록 하죠. 두개의 변수에 대한 swap처리입니다. 기본적으로는 임시변수가 있어야 두 변수의 값을 swap처리 할 수 있지만 Destructuring Assignment를 이용하면 보다 간단하게 할 수 있습니다.
let myArr: string[] = ["Hello", "World"];
let [first, second] = myArr;
console.log(first); // "Hello" 출력
console.log(second); // "World" 출력
[second, first] = [first, second]; // swap 처리
console.log(first); // "World" 출력
console.log(second); // "Hello" 출력
이런 방식은 함수에 parameter를 전달할 때도 사용할 수 있습니다.
function myFunc([x, y]: [number, number]): void {
console.log(`x의 값은 ${x}`);
console.log(`y의 값은 ${y}`);
}
myFunc([10,20]);
나머지 몇몇 응용에 대해서 알아보겟습니다. ...을 이용하면 다음과 같은 형태로 서브배열을
생성할 수 있습니다.
let myArr: number[] = [1, 2, 3, 4];
let [first, ...others] = myArr;
console.log(first); // 1 출력
console.log(others); // [2, 3, 4] 출력 ( 서브배열 )
다음과 같은 형태로 Destructuring Array를 이용할 수 있습니다.
let myArr: number[] = [1, 2, 3, 4];
let [first] = myArr;
let [,second, ,fourth] = myArr;
console.log(first); // 1 출력
console.log(second); // 2 출력
console.log(fourth); // 4 출력
Object Destructuring
이번에는 객체를 비구조할당을 통해 이용해 보도록 하겠습니다.
let obj = {
key1 : "Hello World",
key2 : 100,
key3 : "TypeScript"
};
let { key1:a, key2:b } = obj;
console.log(a); // Hello World 출력
console.log(b); // 100 출력
새로운 변수 a와 b가 생성되고 obj.key1의 값의 key1:a에 의해서 a 변수에 대입됩니다.
마찬가지로 obj.key2의 값이 key2:b에 매칭되서 b 변수에 값이 할당되는 것이구요. obj.key3는 당연히 무시됩니다.
변수를 선언할 때 [ ]가 아닌 { }를 이용한다는 것에 주의하셔야 합니다.
만약 객체의 Key( 위의 예제에서는 key1, key2, key3 )가 비구조 객체에 쓰이는 변수의 이름과 동일하다면
간소화된 형태로 이용할 수 있습니다. 아래의 예처럼 말이죠.
let obj = {
key1 : "Hello World",
key2 : 100,
key3 : "TypeScript"
};
let { key1, key2 } = obj;
console.log(key1); // Hello World 출력
console.log(key2); // 100 출력
그러면 다음과 같이 표현할 수 도 있겠네요.
let { a, b } = { a: "Hello World", b: 100 };
console.log(a); // Hello World 출력
console.log(b); // 100 출력
조금 헷갈리긴 하지만 익숙해지면 할 만 합니다. ^^;
아까 위에서 나왔던 ...을 기억하시나요? 배열의 나머지를 가지고 서브배열을 생성할 때 사용했었습니다.
Object Destructuring에서도 ...을 이용할 수 있습니다. 아래의 코드를 살펴보도록 하죠.
let obj = {
myName: "홍길동",
myAddress: "서울",
myAge: 30
};
let { myName, ...otherInfo} = obj;
console.log(`이름은 : ${myName}`);
console.log(`나이는 : ${otherInfo.myAge}`);
객체의 property의 이름을 다른 것으로 바꿀 수 있습니다. 아래의 코드를 보시죠
let obj = {
a: "홍길동",
b: "서울",
c: 30
};
let { a:myName, b:myAddress } = obj;
console.log(`이름은 : ${myName}`); // 홍길동 출력
console.log(`주소는 : ${myAddress}`); // 서울 출력
위의 코드에서 주의해야 할 점은 a:myName, b:myAddress에서 :의 의미가 data type을 지정하는 것으로
사용된 것이 아니라는 것입니다. 만약 데이터 타입을 지정해서 사용하려면 다음과 같이 사용하셔야 합니다.
let obj = {
a: "홍길동",
b: "서울",
c: 30
};
let { a:myName, b:myAddress }: {a:string, b:string} = obj;
console.log(`이름은 : ${myName}`); // 홍길동 출력
console.log(`주소는 : ${myAddress}`); // 서울 출력
점점 복잡해 지는군요. 한가지 주의해야 할 점은 ECMAScript 2015(ES6)에서의 Destructuring과 TypeScript의 Destructuring이 완벽하게 똑같지는 않다는 것입니다.
이번에 살펴볼 것은 default 값입니다. Destructuring하려는 속성이 존재하지 않을 때를 대비해서 default값을
지정할 수 있습니다. 아래의 예를 보시죠.
let obj: {myName:string, myAge?:number} = {
myName : "홍길동",
};
let { myName:uNmae, myAge:uAge = 30 } = obj;
console.log(uNmae); // 홍길동
console.log(uAge); // 30
위의 예에서 myAge?:number 부분의 ?의 의미는 해당 property가 있을 수도 있고 없을 수도 있다는것을 의미합니다.
myAge:uAge = 30 부분이 default value를 사용한 부분입니다.
어디에 쓰면 좋을까요?
간단하게 Destructuring이 무엇인지를 살펴보았는데 그럼 도데체 이걸 어디에 써 먹어야 할까요? 이런식의 응용이 가능하구나 하는 정도로 가볍게 보시면 될 듯 합니다.
첫번째로 생각할 수 있는 응용은 ECMAScript 2015에서 제공되는 Iteration Protocol과의 연계사용입니다.
아주 쉽게 생각하면 Map사용에 응용할 수 있다 정도로 보시면 됩니다. Map 자료구조는 key와 value의 쌍으로
데이터를 저장하는 구조이고 다음과 같은 형태로 Destructuring과 함께 이용할 수 있습니다.
let map = new Map();
map.set("myName","홍길동");
map.set("myAddress","서울");
map.set("myAge",30);
for(let [key, value] of map) {
console.log(`${key} 의 값은 ${value} 입니다.`);
}
for(let [key] of map ) {
// 모든 key 값만을 출력할 수 있습니다.
console.log(`${key}`);
}
for(let [,value] of map ) {
// 모든 value 값만을 출력할 수 있습니다.
console.log(`${value}`);
}
두번째는 함수의 리턴값에 응용하는 것입니다. 리턴값이 두개 이상 필요할 때 우리는 배열형태나 객체형태로 리턴을 받게 되는데 Destructuring을 이용하면 편합니다.
다음은 배열을 리턴받는 경우입니다.
function myFunc(): string[] {
let arr: string[] = [];
// 로직처리 ...
arr[0] = "첫번째 결과값";
arr[1] = "두번째 결과값";
return arr;
}
let [result1, result2] = myFunc();
console.log(result1);
console.log(result2);
다음은 객체를 리턴받는 경우입니다.
function myFunc(): {result1:string, result2?:number} {
let obj = {
result1 : "",
result2 : 0
};
// 로직처리 ...
obj.result1 = "첫번째 결과값";
obj.result2 = 100;
return obj;
}
let {result1:first, result2:second} = myFunc();
console.log(first);
console.log(second);
꼭 사용해야 할 필요는 없지만 알아두면 편하고 좋은 Destructuring에 대해서 알아보았습니다.
End.
이 포스트의 내용은 아래의 사이트를 참조했습니다. 조금 더 자세한 사항을 알고 싶으시면 해당 사이트를 방문하세요!!