typescript:destructuring

차이

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

차이 보기로 링크

--- typescript:destructuring [2018/08/03 15:48] – [Object Destructuring] taekgu
+++ typescript:destructuring [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
@@ 줄 165: / 줄 165: @@
 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에 대해서 알아보았습니다.

typescript/destructuring.1533311280.txt.gz · 마지막으로 수정됨: 2025/04/15 10:05 (바깥 편집)