[JavaScript] 비구조화 할당

비구조화 할당 문법을 사용하면 배열, 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언할 수 있습니다. 

비구조화 할당의 기본 구조는 좌측에 변수, 우측에는 해당 변수에 넣어지는 값을 표현합니다.

 

비구조화 할당을 이용하면

• 배열, 객체 내 값을 추출하는 코드가 간단해집니다.
• 필요한 객체와 나머지 요소 분리가 간단해집니다.
• 기본값 지정이 가능합니다.

 

🤔 배열에서의 비구조화 할당

const [a, b, c, d, e] = [1, 2, 3, 4, 5];

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

 

 

 

🔍 초기값 선언

초기값을 선언하지 않으면 undefined가 할당됩니다.

const [n1, n2, n3] = [100, 200];

console.log(n3); // undefined

n1에는 100이, n2에는 200이 할당되지만 n3은 undefined가 할당됩니다.

같은 예제에서 n3에 초기값을 선언해보겠습니다.

const [n1, n2, n3=300] = [100, 200];

console.log(n3);  // 300

위와 같은 방법으로 초기값을 선언하면 n3에는 300이라는 값이 할당됩니다.

 

 

🔍 값 재할당하기

const [a, b] = ['red', 'blue'];
[a, b] = [10, 20];

console.log(a); // 10
console.log(b); // 20

비구조화할당은 재할당이 가능합니다.

a에는 'red' 가 아닌 10이라는 값이, b에는 'blue'가 아닌 20 이라는 값이 할당됩니다.

 

🔍 변수에 나머지 요소 할당하기

const [txt1, txt2, ...txt3] = ['a', 'b', 'c', 'd'];
console.log(txt3); // ['c', 'd']

배열을 구조 분해할 경우, 스프레드 오퍼레이터(Spread Operator)을 이용해 분해하고 남은 부분을 하나의 변수에 할당할 수 있습니다.

( 할당되지 않은 우변의 남은 요소들이 배열의 형태로 할당됩니다. )

단, rest parameter는 맨 앞에 올 수 없으며 나머지 요소의 오른쪽 뒤에 쉼표가 있으면 안됩니다.

 

🔍 함수에서의 사용

function arrFnc(name, age) {
    console.log(name);
    console.log(age);
}
const user = ['녜힝', 20];

arrFnc(user[0], user[1]);  // 일반적인 경우
arrFnc(['녜힝', 20]);  // 비구조화 할당을 이용한 경우
arrFnc(user);

 

🔍 임의의 인덱스 값만 가져오기

const arr = [1, 2, 3, 4, 5];

const [a, b,,,z] = arr;

console.log(a);  // 1
console.log(b);  // 2
console.log(c);  // 5

 

 

---

 

🤔 객체에서의 비구조화 할당

const {name: a, age: b} = {name: 'kim', age: 20}
console.log(a);  // kim

간략하게 사용하고 싶은 경우, 좌측 변수의 이름과 우측 key값의 이름을 동일하게 사용하면 됩니다.

const {name, age} = {name: 'kim', age: 20}
const {name: name, age: age} = {name: 'kim', age: 20}

두 코드는 동일한 의미입니다.

배열은 인덱스로 구분되기 때문에 순서가 중요하지만, object는 키 값에 의해 구분되기 때문에 이름이 일치하기만 한다면 순서는 상관없습니다.

const {age: b, name: a} = {name: 'kim', age: 20}
console.log(a);  // kim

 

🔍 초기값 세팅

const {a: x=0, b: y=0, c: z=0} = { a: 1, b: 2 }

console.log(x); // 1
console.log(y); // 2
console.log(z); // 0

초기값이 있어도 할당되는 값이 있다면 할당된 값이 찍힙니다.

위 예제에서 c와 같이 변수에 넣어지는 값이 없다면 초기값이 적용됩니다.

 

🔍 함수에서의 사용

function objFnc(name, age) {
    console.log(name);
    console.log(age);
}

const obj = { name: '녜힝', age: 20 }

objFnc(obj.name, obj,age);
objFnc(obj);  // { name: '녜힝', age: 20 }

// {name, age} = {name: '녜힝', age: 20} 로 읽혀 들어감

 

 

 

---

참고자료

https://ordinary-code.tistory.com/115