-
[2019.03.27] 구조분해할당 개념개발 블로깅/Modern script 2019. 3. 27. 11:42
ES6로 넘어오면서, 배열과 object를 조금 더 쉽게 다루는 방식이 있다.
구조분해 연산자, 전개연산자, 각 배열에 들어가 있는 데이터를 하나씩 가져와서 처리해야 되는 상황을 한번에 처리할 수 있도록 해준다.
# 구조분해할당 - 배열 구조 분해
12345var a, b, rest;[a, b] = [10, 20];console.log(a); // 10console.log(b); // 20cs 12345var x = [1, 2, 3, 4, 5];var [y, z] = x;console.log(y); // 1console.log(z); // 2cs 위와 같이 변수 초기화 선언할 때 표현하면, 배열을 분해하여 순서대로 각 자리에 들어가게 된다.
12345var a, b;[a = 5, b = 7] = [1];console.log(a) // 1console.log(b) // 7cs 위 처럼 배열 분해하여 할당할 때 직접 초기화를 할 수 도 있다.
1234567var a = 1;var b = 2;[a, b] = [b, a];console.log(a); // 2console.log(b); // 1cs 이건 진짜 꿀팁!!! 원래 sort 같은거 해서 자리변경 할 때, temp라는 변수 하나 만들어줘서 하나씩 값 넣어주는 형식으로 해야했는데, 위 코드와 같이 한번에 두 자리를 변경할 수 있다.
1234var [a, ...b] = [1, 2, 3];console.log(a) // 1console.log(b) // [2, 3]cs ...키워드를 이용하여 a값을 할당해주고, 나머지를 b값에 배열 형식으로 넣어준다.
# 구조분해할당 - 객체 구조 분해
123456var o = {a: 10, b: 20};var{a, b} = o;console.log(a); // 10console.log(b); // 20cs 배열과 같이 객체도 key값을 기준으로 분해하여 할당할 수 있다. 내가 리액트 공부하면서, this.state에서 값을 {name} 이런식으로 가져와서 변수처럼 사용하던데, 이게 바로 이것이였다.!
객체 구조 분해 할당 방식은 사실 몇개 더 있는데, 잘 안 쓸 것 같다. 향후에 사용해야 할 일이 있으면 그때 다시 봐바야겠다.
반응형'개발 블로깅 > Modern script' 카테고리의 다른 글
[2019.04.14] fetch API의 개념, 그리고 다시 정리해본 Promise (2) 2019.04.14 [2019.03.27] Rest파라미터 개념 (0) 2019.03.28 [2019.03.27] 전개 연산자 개념 (0) 2019.03.27 [2019.03.06] 비동기 처리방식 Promise와 Async await (0) 2019.03.06 [2019.03.05] ECMA Script6 기초문법 (0) 2019.03.05