비구조화 할당/구조분해 할당에 관하여

LikeChoonsik's·2022년 3월 17일

JavaScript

목록 보기

9/15

비구조화 할당이란

배열이나 객체의 속성을 해체하여 그 값을 각각 변수에 담을 수 있게 하는 javascript의 표현식이다. 즉 배열[],혹은 객체{} 안의 값을 편하게 꺼내 쓸 수 있는 문법이다.

기본 문법

기본값 할당

비구조화의 범위를 벗어나는 값 할당을 시도하면 undefined를 반환하게 됩니다.

[a, b] = [10];
console.log(a); // 10
console.log(b); // undefined

var {c, d} = { c : 20};
console.log(c); // 20
console.log(d); // undefined

이런 경우를 방어하기 위해 호출될 변수명들에 기본값 할당을 할 수 있습니다.

[a=10, b=20] = [10];
console.log(a); // 10
console.log(b); // 20

var {c = 30, d : new_name = 40} = { };
console.log(c); // 30
console.log(new_name); // 40

위와 같은 방법으로 변수명들에 할당 연산자(=)를 사용하여 기본값 할당을 할 수 있습니다.

5, 7번 줄처럼 객체에서 새로운 변수명에 할당하는 방식에도 기본값 할당을 사용할 수 있습니다.

배열[]에서

[춘식,라이언,어피치,...남은거] = [1, 2, 3, 4, 5, 6, 7];
console.log(춘식) // 1
console.log(남은거) // [4, 5, 6, 7]

배열에서는 좌항이 호출될 변수명 집합, 우항이 할당할 값으로 사용합니다.
좌항의 각 요소에는 같은 index를 가지는 배열값이 할당되며 전개 연산자(Spread Operator)를 사용하여 좌항에서 할당하지 않은 나머지 값들을 사용할 수 있습니다.
Spread Operator를 사용 한 이후 변수를 입력하거나 좌, 우황 속성이 다를 경우 에러가 발생합니다.

객체{}에서

const {춘식,라이언,어피치,...남은거} = { 나이:1, 나이:2, 나이:3, 나이:4, 나이:5, 나이:6, 나이:7};
console.log(춘식) // 나이:1
console.log(남은거) // {나이:4, 나이:5, 나이:6, 나이:7}

객체의 경우 우항의 key 값이 좌항의 변수명과 매칭됩니다.
객체 비구조화에서는 변수 선언에 대한 명시(var, let, const)가 없을 경우 괄호를 사용하여 묶어주어야 합니다.

({춘식,라이언,어피치,...남은거} = { 나이:1, 나이:2, 나이:3, 나이:4, 나이:5, 나이:6, 나이:7});
console.log(춘식) // 나이:1
console.log(남은거) // {나이:4, 나이:5, 나이:6, 나이:7}

Spread Operator를 이용한 복사

전개 연산자를 사용하여 배열, 객체의 깊은 복사를 할 수 있습니다.

var arr = [1,2,3];
var copy1 = arr;
var [...copy2] = arr;
var copy3 = [...arr];

arr[0] = 'String';
console.log(arr); // [ 'String', 2, 3 ]
console.log(copy1); // [ 'String', 2, 3 ]
console.log(copy2); // [ 1, 2, 3 ]
console.log(copy3); // [ 1, 2, 3 ]

얕은 복사인 copy1은 arr을 참조하기 때문에 0번 요소가 변경되었지만 전개 연산자를 사용한 copy2, copy3는 깊은 복사가 된 것을 볼 수 있습니다.

객체 역시 전개 연산자로 깊은 복사를 사용할 수 있습니다.

무엇보다도 강력한 점은 복사와 함께 새로운 값을 할당할 수 있다는 점 입니다.

var prevState = {
  name: "yuddomack",
  birth: "1996-11-01",
  age: 22
};

var state = {
  ...prevState,
  age: 23
};

console.log(state); // { name: 'yuddomack', birth: '1996-11-01', age: 23 }

위와 같이 ...prevState를 사용하여 기존 객체를 복사함과 동시에 age키에 새로운 값(23)을 할당할 수 있습니다.

리액트의 props나 state처럼 이전 정보를 이용하는 경우 유용하게 사용할 수 있습니다.

함수에서

함수의 파라미터 부분에서도 비구조화 할당을 사용할 수 있습니다.

이러한 문법은 특히 API 응답 값을 처리하는데에 유용하게 사용됩니다.

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

const users = [
  {name: 'kim', age: 10, addr:'kor'},
  {name: 'joe', age: 20, addr:'usa'},
  {name: 'miko', age: 30, addr:'jp'}
];

users.map((user) => {
  renderUser(user);
});

마찬가지로 map함수의 파라미터에도 바로 사용할 수 있습니다.

const users = [
  {name: 'kim', age: 10, addr:'kor'},
  {name: 'joe', age: 20, addr:'usa'},
  {name: 'miko', age: 30, addr:'jp'}
];

users.map(({name, age, addr}) => {
  console.log(name);
  console.log(age);
  console.log(addr);
});

중첩된 함수, 배열의 비구조화

const kim = {
  name: '춘식',
  age: 1,
  addr: 'ko',
  friends: [
    {name: '라이언', age: 2, addr:'usa'},
    {name: '어피치', age: 3, addr:'jp'}
  ]
};

var { name: userName, friends: [ ,{ name: jpFriend }] } = kim;
console.log(userName); // 춘식
console.log(jpFriend); // 어피치