GaramX

아래의 예제를 정상적으로 실행해보실려면 tsconfig.json에서 compilerOptions의 target 속성을 es6로 해 주셔야 합니다.

일반적으로 Destructuring Assignment(비구조할당)라고 하는데 쉽게 말하자면 배열의 요소나 객체의 속성을 배열 literal 혹은 객체 literal과 유사한 형태의 문법을 이용하여 변수에 할당하는 기법입니다. 잘 알아두면 코드를 좀 더 쉽게 작성할 수 있습니다.

다음과 같이 배열이 있을 경우 각 배열의 원소값을 가지는 변수를 만들려고 합니다. 아마도 코드는 다음처럼 써야 할 듯 보입니다.

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 출력

이번에는 객체를 비구조할당을 통해 이용해 보도록 하겠습니다.

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에 대해서 알아보았습니다.