문서의 선택한 두 판 사이의 차이를 보여줍니다.
| 양쪽 이전 판이전 판다음 판 | 이전 판 | ||
| typescript:destructuring [2018/08/03 15:50] – [Object Destructuring] taekgu | typescript:destructuring [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1 | ||
|---|---|---|---|
| 줄 170: | 줄 170: | ||
| 첫번째로 생각할 수 있는 응용은 ECMAScript 2015에서 제공되는 Iteration Protocol과의 연계사용입니다. 아주 쉽게 생각하면 Map사용에 응용할 수 있다 정도로 보시면 됩니다. Map 자료구조는 key와 value의 쌍으로 데이터를 저장하는 구조이고 다음과 같은 형태로 Destructuring과 함께 이용할 수 있습니다. | 첫번째로 생각할 수 있는 응용은 ECMAScript 2015에서 제공되는 Iteration Protocol과의 연계사용입니다. 아주 쉽게 생각하면 Map사용에 응용할 수 있다 정도로 보시면 됩니다. Map 자료구조는 key와 value의 쌍으로 데이터를 저장하는 구조이고 다음과 같은 형태로 Destructuring과 함께 이용할 수 있습니다. | ||
| + | <code javascript> | ||
| let map = new Map(); | let map = new Map(); | ||
| 줄 189: | 줄 189: | ||
| // 모든 value 값만을 출력할 수 있습니다. | // 모든 value 값만을 출력할 수 있습니다. | ||
| console.log(`${value}`); | console.log(`${value}`); | ||
| - | } | + | }</ |
| 두번째는 함수의 리턴값에 응용하는 것입니다. 리턴값이 두개 이상 필요할 때 우리는 배열형태나 객체형태로 리턴을 받게 되는데 Destructuring을 이용하면 편합니다. | 두번째는 함수의 리턴값에 응용하는 것입니다. 리턴값이 두개 이상 필요할 때 우리는 배열형태나 객체형태로 리턴을 받게 되는데 Destructuring을 이용하면 편합니다. | ||
| 다음은 배열을 리턴받는 경우입니다. | 다음은 배열을 리턴받는 경우입니다. | ||
| + | <code javascript> | ||
| function myFunc(): string[] { | function myFunc(): string[] { | ||
| let arr: string[] = []; | let arr: string[] = []; | ||
| 줄 206: | 줄 206: | ||
| console.log(result1); | console.log(result1); | ||
| - | console.log(result2); | + | console.log(result2); |
| 다음은 객체를 리턴받는 경우입니다. | 다음은 객체를 리턴받는 경우입니다. | ||
| + | <code javascript> | ||
| function myFunc(): {result1: | function myFunc(): {result1: | ||
| 줄 225: | 줄 225: | ||
| console.log(first); | console.log(first); | ||
| - | console.log(second); | + | console.log(second); |
| 꼭 사용해야 할 필요는 없지만 알아두면 편하고 좋은 Destructuring에 대해서 알아보았습니다. | 꼭 사용해야 할 필요는 없지만 알아두면 편하고 좋은 Destructuring에 대해서 알아보았습니다. | ||