비구조화 할당
비구조화할당이란, 배열이나 객체 속성을 해제하여 개별 변수에 값을 담을 수 있는 javascript 표현식을 말한다. 비구조화할당 또는 구조 분해 할당이라고 한다.
💻기본문법
: 비구조화 할당의 기본 구조는 좌측에는 변수, 우측에는 해당 변수에 넣어지는 값을 표현한다.
배열의 경우에는 []를 사용하고, 객체의 경우에는 {}을 사용한다
📌예제1: 배열 비구조화
let [x,y] = [1,2]; console.log(x); //1 console.log(y); //2
📌예제2: 객체 비구조화
const object = { a:1, b:2 }; function print({ a, b }){ console.log(a); console.log(b); } print(object); //1 //2📌예제3
const { red, yellow, green } = { red : 'RED', yellow : 'YELLOW', green : 'GREEN' };배열 비구조화 다른 점이 있다면,
배열 비구조화의 경우에는index에 따라 값이 할당되지만,
객체 비구조화의 경우에는동일한 key값에 할당된다
💻비구조화 할당의 장점
- 배열, 객체 내 값을 추출하는 코드가 매우 간단해짐
- 필요한 객체와 나머지 요소 분리가 매우 간단하다
- 기본값 지정이 가능하다
📌비구조화할당 '전' 코드 예시1
//비구조화할당 전 코드 let fruit = ['apple', 'banana', 'peach']; let apple = fruit[0]; let banana = fruit[1]; let peach = fruit[2]; console.log(apple); //apple console.log(banana); //banana console.log(peach); //peach
📌비구조화할당 '전' 코드 예시2
const colors = { red : 'RED', yellow : 'YELLOW', green : 'GREEN' }; const red = colors.red; const yellow = colors.yellow; const green = colors.green;
각 배열 안에 있는 요소들을 사용하기 위해서는 각각의 변수 안에 배열 내 index 또는 key값을 찾아서 매칭시켜주어야함.
📌비구조화할당 코드 예시
//비구조화할당 코드 let fruits = ['apple', 'banana', 'peach']; let [apple, banana, peach] = fruits; console.log(apple); //apple console.log(banana); //banana console.log(peach); //peach
한 줄로 바로 배열 안에 넣어주는 것이 가능함. 비구조화할당 코드를 이용하면 왼쪽의 변수에 오른쪽 배열 값을 바로 분해해서 할당해줌
💻속성 이름이 유효한 JavaScript 식별자명이 아닌 경우
구조분해는 JavaScript 식별자 이름으로 적합하지 않은 속성명이 제공된 경우에도 이용할 수 있다. 이 때, 대체할 유효한 식별자명을 제공해야 한다.
const foo = { 'fizz-buzz' : true }; const { 'fizz-buzz': fizzBuzz } = foo; console.log(fizzBuzz); //true
💻비구조화 할당 구조 분해
: 1:1로 값이 매칭되는 것이 아니라 하나의 값은 변수에 넣고 나머지는 나머지 변수에 할당하는 것이 가능.
전개 연산자인 ...을 이용하면 매칭된 값 외의 모든 데이터 값을 할당할 수 있음.
let fruit = ['apple', 'banana', 'peach', pear']; let [apple, ...etc] = fruit; console.log(apple); //하나의 값은 변수에 넣음 console.log(etc); //['banana', 'peach', 'pear'] //spread 문법을 사용하면 매칭된 값 외에 모든 데이터 할당 가능
...을 이용하면 하나의 변수를 할당하고 나머지 값들을 모두 넣어준다...인 전개 연산자를 사용하기 위해서는 가장 마지막 요소에 넣어주어야함
💻선언에서 분리한 할당 및 변수 값 교환
📌배열 비구조화 예시
//선언에서 분리한 할당 const colorList = ['red', 'yellow', 'green']; let red, yellow, green; [red, yellow, green] = colorList; //변수값 교환 let a = 1; let b = 3; [a, b] = [b, a]; console.log(a); //3 console.log(b); //1
미리 선언되어 있는 변수를 통해서도 비구조화 할당이 가능하다
그리고 비구조화 할당을 활용한 변수값의 교환이 가능한데,
이는 두 변수의 값을 서로 교환하기 위해서는 기존에는 임시 변수가 필요했었으나 비구조화 할당을 통해 임시변수가 필요하지 않고 위 예제처럼 서로 교환이 가능하다
📌객체 비구조화 예시1
const colors = { red : 'RED', yellow : 'YELLOW', green : 'GREEN' }; let red, yellow, green; ({ red, yellow, green } = colors);
📌객체 비구조화 예시2
let a, b; ({a, b} = {a:1, b:2}); //let {a, b} = {a:1, b:2}와 동일
객체 비구조화에서도 선언에서 분리한 할당이 가능하나, 주의해야할 점은 괄호()를 사용해주어야 한다는 점이다.
스크립트에서는 블록{}으로 간주하기 때문에 위 예제처럼 괄호로 감싸주어야한다.
- 괄호 역시 꼭
세미콜론(;)을 넣어 끝났다는 표시를 해주어야 한다
💻기본값 지정
: 만약 지정한 변수 이외에 매칭할 값이 없다면 undefined가 발생한다.
- 변수 집합의 길이보다 우측의 할당하려는 배열의 길이가 길면 상관없지만 그 반대로 변수 집합의 길이보다 우측의 할당하려는 배열의 길이가 짧을 경우 문제가 생긴다.
- 이를 방지하기 위해
기본값을 할당할 수 있다 - 기본값을 할당할 경우 비구조화 할당을 하려는 값이
undefined일 때 기본값을 대신 사용하여 할당한다.
📌비구조화할당 코드 예시1
let fruit = ['apple', 'banana', 'peach']; let [apple, banana, peach, pear='pear'] = fruit; console.log(apple); //'apple' console.log(banana); //'banana' console.log(peach); //'peach' console.log(pear); //'pear'pear은 fruit 배열 안에 없으나, 구조분해할당에서
기본값을 지정해주었기 때문에 해당값이 콘솔에 찍힌다
📌비구조화할당 코드 예시2
const object = { a:1 }; function print({ a, b=2 }){ console.log(a); console.log(b); } print(object); //1 //2b에게
기본값을 주고 싶다면 위와 같이 처리도 가능하다
📌비구조화할당 코드 예시2
//기본값 할당 x const [ a, b, c ] = [1, 2]; console.log(a); //1 console.log(b); //2 console.log(c); //undefined //기본값 할당 o const [ a=4, b=5, c=6] = [1, 2]; console.log(a); //1 console.log(b); //2 console.log(c); //6
💻일부 반환값 무시하기
필요하지 않은 반환값을 무시할 수 있다
function f(){
return [1, 2, 3];
}
let [a, , b] = f();
console.log(a); //1
console.log(b); //3반환값을 모두 무시할 수도 있다
[, ,] = f();💻원래 key대신 다른 변수명 사용
//새로운 변수명 할당과 기본값 할당의 동시 사용
const {a:aa = 4, b:bb = 5, c:cc = 6} = {a:1, b:2};
console.log(aa); //1
console.log(bb); //2
console.log(cc); //6객체 비구조화는 동일한 key값을 통해 할당이 되는데
해당 key값은 할당 받은 후, 새롭게 사용할 변수명을 콜론:을 통해 변경할 수 있다
그리고 동시에 기본값 할당도 사용할 수 있다
💻변수에 배열의 나머지 값들 할당하기
(배열 결합/합치기/깊은 복사)
: 나머지 매개 변수 및 확산 연산자 (Rest parameter and Spread operator)라고도 한다
//1. 배열의 나머지 값 할당
const [a, ...b] = [1, 2, 3];
console.log(a); //1
console.log(b); //[2, 3]
//2. 배열의 결합
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
console.log(arr3); //[1, 2, 3, 4, 5, 6]
/*
const arr3 = [arr1, arr2];
위와 같이 선언하면 아래와 같이
배열 자체를 통째로 담아낸 결과값이 나온다
나머지 구문('...')을 사용해야
배열이 결합되어 변수 안에 새롭게 담긴다
*/
//3. 배열의 복사
const arr1 = [1, 2, 3];
const arr2 = arr1;
const arr3 = [...arr1];
const [...arr4] = arr1;
arr1[0] = 7;
console.log(arr1); //[7, 2, 3]
console.log(arr2); //[7, 2, 3]
console.log(arr3); //[1, 2, 3]
console.log(arr4); //[1, 2, 3]
/*
arr1[0] 자리에 7을 대입해서
arr1과 arr2는 [1,2,3]에서 [7,2,3]으로 변하지만
arr3, arr4는 arr1을 나머지 구문('...')을 사용하여 복사해두었기 때문에
console로 찍어보면 [1,2,3]의 값을 가진다
*/나머지 구문 ...을 사용하여 배열을 결합하거나 복사할 수 있다
나머지 요소의 오른쪽 뒤에 쉼표가 있으면
SyntaxError가 발생한다var [a, ...b, ] = [1, 2, 3]; //SyntaxError: rest element may not have a trailing comma
💻변수에 객체의 나머지 값들 할당하기
객체 결합/합치기/깊은복사
: 나머지 매개 변수 및 확산 연산자(Rest parameter and Spread operator)라고도 한다
//객체의 나머지 값 할당
const {a, ...b} = {a:1, b:2, c:3};
console.log(a); //1
console.log(b); //{b:2, c:3}
//객체의 결합
const obj1 = {a:1, b:2, c:3};
const obj2 = {c:4, d:5, e:6};
const obj3 = {...obj1, ...obj2};
console.log(obj3); //{a:1, b:2, c:4, d:5, e:6}
//객체의 복사
const obj1 = {a:1, b:2, c:3};
const obj2 = {
...obj1,
c:4,
d:5
}
console.log(obj2); //{a:1, b:2, c:4, d:5}객체의 나머지값 할당에 대해서는 **객체 비구조화 할당의 원리가 아무리 key값 매칭이라고 하여도 나머지 값을 뜻ㅅ하는 구문 전개연산자(...)는 우항의 key에 영향을 받지 않으므로 b라는 key값에 나머지 값들이 할당되는 것을 볼 수 있다.
그 다음 객체의 결합에 있어서는, 중복되는 key값에 대해서는 마지막으로 결합된 key값을 따르게 된다.
위 예제에서는 c의 값이 3이 아닌 4로 할당된 것을 볼 수 있다.
💻깊은 값 비구조화 할당
: 객체의 깊숙한 곳에 들어있는 값을 꺼내는 방법에는 두 가지가 있다
const deepObject = { state: { information: { name: 'velopert', languages: ['korean', 'english', 'chinese'] } }, value: 5 }
여기서 만약 name, languages, value 값들을 밖으로 꺼내고 싶다면 첫번째로 비구조화 할당 문법을 두 번 사용한다
📌깊은 값 꺼내는 비구조화할당 코드 예시1
ES6 의 object-shorthand 문법
const deepObject = { state: { information: { name: 'velopert', languages: ['korean', 'english', 'chinese'] } }, value: 5 }; const { name, languages } = deepObject.state.information; const { value } = deepObject; const extracted = { name, languages, value }만약
key이름으로 선언된 값이 존재한다면 바로 매칭시켜주는 문법이다.
extracted 객체를 선언한 저 코드는 아래의 코드와 동일하다
const extracted = {
name: name,
languages: languages,
value: value
}deepObject 객체에서 names, languages, value를 추출하는 과정에서 구조화할당을 두 번 했는데,
이번에는 한 번에 모두 추출하는 방법을 살펴보자
📌깊은 값 꺼내는 비구조화할당 코드 예시2
const deepObject = { state: { information: { name: 'velopert', languages: ['korean', 'english', 'chinese'] } }, value: 5 }; const { state: { information: { name, languages } }, value } = deepObject; const extracted = { name, languages, value } console.log(extracted);
💻비구조화 할당 시 이름 바꾸기
const animal = { name: '멍멍이', type: '개' }; const nickname = animal.name; console.log(nickname); //멍멍이
위 코드에서 animal.name 값을 nickname 값에 담고 있는 상태임
이름이 같다면 비구조화 할당을 쓰면 되는데 지금은 이름이 다른 상태임
이런 상황에서 : 문자를 사용하여 이름을 바꾸어줄 수 있다
📌비구조화할당 이름 변경 예시1
const animal = { name: '멍멍이', type: '개' }; const { name: nickname } = animal; console.log(nickname); //멍멍이
위 코드는 animal 객체 안에 있는 name을 nickname이라고 선언하겠다는 의미이다
참조 블로그1 :: [JavaScript] 비구조화 할당/구조분해할당
참조 블로그2 :: 06. 비구조화 할당 (구조분해) 문법
참조 블로그3 :: [ES6+] 배열 및 객체의 비구조화 할당- Destructuring Assignment (ft. 나머지 매개 변수 및 확산 연산자 - Rest parameter and Spread operator)
참조 페이지4 :: (MDN) 구조분해할당
