비구조화할당이란, 배열이나 객체 속성을 해제하여 개별 변수에 값을 담을 수 있는 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
식별자 이름으로 적합하지 않은 속성명이 제공된 경우에도 이용할 수 있다. 이 때, 대체할 유효한 식별자명을 제공해야 한다.
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 //2
b에게
기본값
을 주고 싶다면 위와 같이 처리도 가능하다
📌비구조화할당 코드 예시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();
//새로운 변수명 할당과 기본값 할당의 동시 사용
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) 구조분해할당