구조 분해 할당
구조 분해 할당이란 배열이나 객체의 요소 및 프로퍼티들을 분해해서 그 값들을 각각의 변수에 할당하는 자바스크립트의 표현식 입니다.
구조 분해 할당을 이용하면, 배열이나 객체 안에 있는 값을 쉽고 간편하게 추출할 수 있습니다.
코드 샌드박스에서 직접 배열과 객체 안의 요소와 프로퍼티 값들을 간편하게 추출해보겠습니다.
배열의 구조 분해 할당
먼저 배열의 구조 분해 할당에 대해 배워봅시다.
기본 변수 할당
먼저 우리가 이전에 사용했던 colors 배열에 green, blue, purple이라는 요소들을 담아주도록하겠습니다.
[code 3-1-1]
코드를 불러오는 중 입니다 ...그 다음, 이 colors 배열의 요소인 "green","blue","purple"를 각각 c1, c2, c3 변수에 순서대로 할당해준다음 해당 변수들을 출력해보겠습니다.
[code 3-1-2]
코드를 불러오는 중 입니다 ...코드를 실행시켜보면 각 변수에 알맞은 값들이 잘 출력되는 것을 볼 수 있습니다.
이번에는 이 작성한 코드를, 구조분해를 사용해 간단하게 바꿔보도록 하겠습니다.
배열의 구조 분해 할당은, colors 배열의 요소들을 분해한 다음, 그 값들을 순서대로 각각의 새로운 변수에 할당할 수 있는 방법으로, 대괄호 안에 변수들을 선언하고 할당할 배열의 이름인 colors를 작성해 배열의 요소들을 할당해줍니다.
한 번 작성해보겠습니다.
[code 3-1-3]
코드를 불러오는 중 입니다 ...코드를 실행하면, 동일하게 c1에는 green 이, c2에는 blue, 그리고 c3에는 purple이 할당되어 출력되는 것을 확인할 수 있습니다.
선언 분리 할당
이번에는 이렇게 작성한 코드를 더 간단하게 작성해보겠습니다.
c1, c2, c3 변수를 한번에 선언하고, colors라는 배열을 별도로 선언하지 않고, 이 변수들에 배열의 값을 바로 할당해주도록하겠습니다.
[code 3-1-4]
코드를 불러오는 중 입니다 ...이렇게 변수의 선언을 분리해서 배열의 값을 할당하는 방법을 우리는 "선언 분리 할당" 이라고 부릅니다.
그럼 이번에는, 배열의 길이와 같은 수의 변수에 값을 할당하지 않고, 배열의 길이보다 더 많은 변수, 배열의 길이보다 더 적은 변수들에 배열의 값을 할당해보겠습니다.
먼저 배열의 길이보다 적은 변수에 배열 요소를 할당해보겠습니다.
변수 c3을 전부 지워본 다음 코드를 실행해보겠습니다.
[code 3-1-5]
코드를 불러오는 중 입니다 ...코드를 실행하면, 각 변수들에 배열 요소의 순서대로 green과 blue의 값이 할당된 것을 볼 수 있습니다.
기본값 설정
이번엔 배열의 길이보다 더 많은 수의 변수에 값을 할당해보겠습니다.
c3 변수를 다시 선언해주고, c3 변수 옆에 c4라는 변수를 추가로 선언하고, c4에도 배열 요소의 값을 할당해주도록하겠습니다.
[code 3-1-6]
코드를 불러오는 중 입니다 ...길이가 3인 배열을 4개의 변수에 할당을 한 결과, 첫 번째 변수인 c1에는 "green", 변수 c2에는 "blue", 변수 c3에는 "three" 값이 할당되었고, 마지막 변수인 c4에는 "undefined" 이 할당된 것을 볼 수 있습니다.
이렇게 배열의 길이보다 더 많은 수의 변수에 배열 요소의 값을 할당하려 한다면, 배열 요소들이 각각의 변수에 할당 된 이후에 남은 변수들에는 undefined 가 할당되게 됩니다.
만약 남은 변수들에 undefined라는 값이 할당되는 것을 원하지 않는다면, 우리는 해당 변수에 기본값을 지정해 줄 수 있습니다.
변수 c4에 yellow 라는 값을 할당해주겠습니다.
[code 3-1-7]
코드를 불러오는 중 입니다 ...출력 결과, c4에는 undefined가 아닌, yellow 라는 값이 할당 된 것을 확인할 수 있습니다.
이렇게 배열의 길이보다 큰 변수들에 배열 요소들을 할당하려해서, 값을 할당 받지 못하는 변수가 있을 때, c4변수에 yellow라는 값을 할당해준 것처럼, 우리가 원하는 값을 남은 변수들에 할당해주는 것을 "기본값 할당" 이라고 부릅니다.
변수에 기본값을 할당하면, 배열 요소들을 분해한 값들이 undefined일 때 우리가 작성해준 기본값이 할당되게됩니다.
변수 값 교환하기
배열의 구조분해는 이렇게 배열 요소의 값을 추출할 때 자주 사용하지만, 두 개의 변수 값을 서로 바꿀 때 사용되기도합니다.
먼저 구조분해를 사용하지 않고, 두 변수의 값을 서로 바꾸는 코드를 작성해보겠습니다.
변수 a 에는 10을, 변수 b 에는 5를 할당하고, 이 두 변수의 값을 바꿔봅시다.
[code 3-1-8]
코드를 불러오는 중 입니다 ...이렇게 두 변수의 값을 변경하기 위해서는, tmp 와 같은 임시 변수가 필요하지만, 구조분해를 이용하면, 임시 변수 없이 두 변수의 값을 교환할 수 있습니다.
[code 3-1-9]
코드를 불러오는 중 입니다 ...우리가 작성했던 코드처럼, 왼쪽에는 값을 할당 할 변수를, 오른쪽에는 교환할 값의 변수를 작성해주겠습니다.
[code 3-1-10]
코드를 불러오는 중 입니다 ...코드를 실행해보면, 실제로 변수 a와 변수 b의 값이 서로 교환된 것을 확인할 수 있고, 이렇게 배열의 구조분해를 사용하면 코드를 훨씬 쉽고 단순하게 사용할 수 있습니다.
객체의 구조 분해 할당
이번에는 객체의 구조 분해 할당에 대해 알아보도록 하겠습니다.
기본 할당
colors 라는 객체에 key값은 c1, c2, c3 이고 value값은 green, blue, purple 인 프로퍼티들을 넣어주도록 하겠습니다.
[code 3-1-11]
코드를 불러오는 중 입니다 ...