차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- typescript:destructuring [2018/08/03 15:42] – taekgu
+++ typescript:destructuring [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
@@ 줄 81: / 줄 81: @@
 </code>
 ==== Object Destructuring ====
+이번에는 객체를 비구조할당을 통해 이용해 보도록 하겠습니다.
+<code javascript>
+let obj = {
+    key1 : "Hello World",
+    key2 : 100,
+    key3 : "TypeScript"
+};
+let { key1:a, key2:b } = obj;
+console.log(a);    // Hello World 출력
+console.log(b);    // 100 출력</code>
+새로운 변수 a와 b가 생성되고 obj.key1의 값의 key1:a에 의해서 a 변수에 대입됩니다. 마찬가지로 obj.key2의 값이 key2:b에 매칭되서 b 변수에 값이 할당되는 것이구요. obj.key3는 당연히 무시됩니다. 변수를 선언할 때 [ ]가 아닌 { }를 이용한다는 것에 주의하셔야 합니다.
+만약 객체의 Key( 위의 예제에서는 key1, key2, key3 )가 비구조 객체에 쓰이는 변수의 이름과 동일하다면 간소화된 형태로 이용할 수 있습니다. 아래의 예처럼 말이죠.
+<code javascript>
+let obj = {
+    key1 : "Hello World",
+    key2 : 100,
+    key3 : "TypeScript"
+};
+let { key1, key2 } = obj;
+console.log(key1);    // Hello World 출력
+console.log(key2);    // 100 출력</code>
+그러면 다음과 같이 표현할 수 도 있겠네요.
+<code javascript>
+let { a, b } = { a: "Hello World", b: 100 };
+console.log(a);    // Hello World 출력
+console.log(b);    // 100 출력</code>
+조금 헷갈리긴 하지만 익숙해지면 할 만 합니다. ^^;
+아까 위에서 나왔던 ...을 기억하시나요? 배열의 나머지를 가지고 서브배열을 생성할 때 사용했었습니다. Object Destructuring에서도 ...을 이용할 수 있습니다. 아래의 코드를 살펴보도록 하죠.
+<code javascript>
+let obj = {
+    myName: "홍길동",
+    myAddress: "서울",
+    myAge: 30
+};
+let { myName, ...otherInfo} = obj;
+console.log(`이름은 : ${myName}`);
+console.log(`나이는 : ${otherInfo.myAge}`);</code>
+객체의 property의 이름을 다른 것으로 바꿀 수 있습니다. 아래의 코드를 보시죠
+<code javascript>
+let obj = {
+    a: "홍길동",
+    b: "서울",
+    c: 30
+};
+let { a:myName, b:myAddress } = obj;
+console.log(`이름은 : ${myName}`);     // 홍길동 출력
+console.log(`주소는 : ${myAddress}`);  // 서울 출력</code>
+위의 코드에서 주의해야 할 점은 a:myName, b:myAddress에서 :의 의미가 data type을 지정하는 것으로 사용된 것이 아니라는 것입니다. 만약 데이터 타입을 지정해서 사용하려면 다음과 같이 사용하셔야 합니다.
+<code javascript>
+let obj = {
+    a: "홍길동",
+    b: "서울",
+    c: 30
+};
+let { a:myName, b:myAddress }: {a:string, b:string} = obj;
+console.log(`이름은 : ${myName}`);     // 홍길동 출력
+console.log(`주소는 : ${myAddress}`);  // 서울 출력</code>
+점점 복잡해 지는군요. 한가지 주의해야 할 점은 ECMAScript 2015(ES6)에서의 Destructuring과 TypeScript의 Destructuring이 완벽하게 똑같지는 않다는 것입니다.
+이번에 살펴볼 것은 default 값입니다. Destructuring하려는 속성이 존재하지 않을 때를 대비해서 default값을 지정할 수 있습니다. 아래의 예를 보시죠.
+<code javascript>
+let obj: {myName:string, myAge?:number} = {
+    myName : "홍길동",
+};
+let { myName:uNmae, myAge:uAge = 30 } = obj;
+console.log(uNmae);  // 홍길동
+console.log(uAge);   // 30</code>
+위의 예에서 myAge?:number 부분의 ?의 의미는 해당 property가 있을 수도 있고 없을 수도 있다는것을 의미합니다. myAge:uAge = 30 부분이 default value를 사용한 부분입니다.
+==== 어디에 쓰면 좋을까요? ====
+간단하게 Destructuring이 무엇인지를 살펴보았는데 그럼 도데체 이걸 어디에 써 먹어야 할까요? 이런식의 응용이 가능하구나 하는 정도로 가볍게 보시면 될 듯 합니다.
+첫번째로 생각할 수 있는 응용은 ECMAScript 2015에서 제공되는 Iteration Protocol과의 연계사용입니다. 아주 쉽게 생각하면 Map사용에 응용할 수 있다 정도로 보시면 됩니다. Map 자료구조는 key와 value의 쌍으로 데이터를 저장하는 구조이고 다음과 같은 형태로 Destructuring과 함께 이용할 수 있습니다.
+<code javascript>
+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}`);
+}</code>
+두번째는 함수의 리턴값에 응용하는 것입니다. 리턴값이 두개 이상 필요할 때 우리는 배열형태나 객체형태로 리턴을 받게 되는데 Destructuring을 이용하면 편합니다.
+다음은 배열을 리턴받는 경우입니다.
+<code javascript>
+function myFunc(): string[] {
+    let arr: string[] = [];
+    // 로직처리 ...
+    arr[0] = "첫번째 결과값";
+    arr[1] = "두번째 결과값";
+    return arr;
+}
+let [result1, result2] = myFunc();
+console.log(result1);
+console.log(result2);</code>
+다음은 객체를 리턴받는 경우입니다.
+<code javascript>
+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);</code>
+꼭 사용해야 할 필요는 없지만 알아두면 편하고 좋은 Destructuring에 대해서 알아보았습니다.

GaramX

사용자 도구

사이트 도구

차이

문서 도구