ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [2019.03.27] 구조분해할당 개념
    개발 블로깅/Modern script 2019. 3. 27. 11:42



    ES6로 넘어오면서, 배열과 object를 조금 더 쉽게 다루는 방식이 있다.

    구조분해 연산자, 전개연산자, 각 배열에 들어가 있는 데이터를 하나씩 가져와서 처리해야 되는 상황을 한번에 처리할 수 있도록 해준다.


    # 구조분해할당 - 배열 구조 분해

    1
    2
    3
    4
    5
    var a, b, rest;
    [a, b] = [1020];
     
    console.log(a); // 10
    console.log(b); // 20
    cs

    1
    2
    3
    4
    5
    var x = [12345];
    var [y, z] = x;
     
    console.log(y); // 1
    console.log(z); // 2
    cs


    위와 같이 변수 초기화 선언할 때 표현하면, 배열을 분해하여 순서대로 각 자리에 들어가게 된다.

    1
    2
    3
    4
    5
    var a, b;
    [a = 5, b = 7= [1];
     
    console.log(a) // 1
    console.log(b) // 7
    cs

    위 처럼 배열 분해하여 할당할 때 직접 초기화를 할 수 도 있다.


    1
    2
    3
    4
    5
    6
    7
    var a = 1;
    var b = 2;
     
    [a, b] = [b, a];
     
    console.log(a); // 2
    console.log(b); // 1
    cs

    이건 진짜 꿀팁!!! 원래 sort 같은거 해서 자리변경 할 때, temp라는 변수 하나 만들어줘서 하나씩 값 넣어주는 형식으로 해야했는데, 위 코드와 같이 한번에 두 자리를 변경할 수 있다.

    1
    2
    3
    4
    var [a, ...b] = [123];
     
    console.log(a) // 1
    console.log(b) // [2, 3]
    cs

    ...키워드를 이용하여 a값을 할당해주고, 나머지를 b값에 배열 형식으로 넣어준다.


    # 구조분해할당 - 객체 구조 분해

    1
    2
    3
    4
    5
    6
    var o = {a: 10, b: 20};
     
    var{a, b} = o;
     
    console.log(a); // 10
    console.log(b); // 20
    cs

    배열과 같이 객체도 key값을 기준으로 분해하여 할당할 수 있다. 내가 리액트 공부하면서, this.state에서 값을 {name} 이런식으로 가져와서 변수처럼 사용하던데, 이게 바로 이것이였다.!


     객체 구조 분해 할당 방식은 사실 몇개 더 있는데, 잘 안 쓸 것 같다. 향후에 사용해야 할 일이 있으면 그때 다시 봐바야겠다.



    반응형

    댓글

Designed by Tistory.