GaramX

사용자 도구

사이트 도구

현재 위치: home » typescript » destructuring
추적: • clone • angular6 • html5 • first
typescript:destructuring

차이

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

차이 보기로 링크

다음 판		이전 판
typescript:destructuring [2018/08/03 15:38] – 만듦 taekgutypescript:destructuring [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
줄 4: 줄 4:
  
 일반적으로 Destructuring Assignment(비구조할당)라고 하는데 쉽게 말하자면 배열의 요소나 객체의 속성을 배열 literal 혹은 객체 literal과 유사한 형태의 문법을 이용하여 변수에 할당하는 기법입니다. 잘 알아두면 코드를 좀 더 쉽게 작성할 수 있습니다. 일반적으로 Destructuring Assignment(비구조할당)라고 하는데 쉽게 말하자면 배열의 요소나 객체의 속성을 배열 literal 혹은 객체 literal과 유사한 형태의 문법을 이용하여 변수에 할당하는 기법입니다. 잘 알아두면 코드를 좀 더 쉽게 작성할 수 있습니다.
 +
 +==== Array Destructuring ====
 +다음과 같이 배열이 있을 경우 각 배열의 원소값을 가지는 변수를 만들려고 합니다. 아마도 코드는 다음처럼 써야 할 듯 보입니다.
 +<code javascript>
 +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" 출력
 +</code>
 +이 코드를 Destructuring Assignment(비구조할당)를 이용하면 다음과 같이 표현할 수 있습니다.
 +<code javascript>
 +let myArr: string[] = ["Hello", "World", "Moon"];
 +
 +let [first, second, third] = myArr;
 +
 +console.log(first);     // "Hello" 출력
 +console.log(second);    // "World" 출력
 +console.log(third);     // "Moon" 출력
 +</code>
 +위의 코드에서 [first, second, third] 형태를 Destructuring Array(비구조배열)이라고 합니다. 즉, let [first, second, third] 구문은 변수 선언과 동시에 Destructuring Array(비구조배열)을 생성한 것입니다.
 +
 +만약 Destructuring Array(비구조배열)에 data type을 지정하고 싶은경우는 다음과 같이 하시면 됩니다.
 +<code javascript>
 +let myArr: string[] = ["Hello", "World", "Moon"];
 +
 +let [first, second, third]: string[] = myArr;
 +</code>
 +간단한 응용을 보도록 하죠. 두개의 변수에 대한 swap처리입니다. 기본적으로는 임시변수가 있어야 두 변수의 값을 swap처리 할 수 있지만 Destructuring Assignment를 이용하면 보다 간단하게 할 수 있습니다.
 +<code javascript>
 +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" 출력
 +</code>
 +이런 방식은 함수에 parameter를 전달할 때도 사용할 수 있습니다.
 +<code javascript>
 +function myFunc([x, y]: [number, number]): void {
 +    console.log(`x의 값은 ${x}`);
 +    console.log(`y의 값은 ${y}`);
 +}
 +
 +myFunc([10,20]);
 +</code>
 +나머지 몇몇 응용에 대해서 알아보겟습니다. ...을 이용하면 다음과 같은 형태로 서브배열을 생성할 수 있습니다.
 +<code javascript>
 +let myArr: number[] = [1, 2, 3, 4];
 +
 +let [first, ...others] = myArr;
 +
 +console.log(first);    // 1 출력
 +console.log(others);   // [2, 3, 4] 출력 ( 서브배열 )
 +</code>
 +다음과 같은 형태로 Destructuring Array를 이용할 수 있습니다.
 +<code javascript>
 +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 출력
 +</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에 대해서 알아보았습니다.
typescript/destructuring.1533310684.txt.gz · 마지막으로 수정됨: 2025/04/15 10:05 (바깥 편집)

문서 도구