[JavaScript] 구조 분해 할당(Destructuring Assignment)

1. 배열 분해

let arr = ['Apple', 'Banana'];

const [fruit1, fruit2]=arr; //fruit1은 arr[0]을 의미, fruit2는 arr[1]을 의미합니다.
console.log(fruit1); //Apple
console.log(fruit2); //Banana

배열 분해는 [ ] = ~~~ 형태로 이루어져 있습니다.

= 오른쪽에 값으로 들어가는 것들은 iterable, 즉 반복 가능한 객체들이 모두 올 수 있습니다.

[a, b, c, ... ] 와 같이 값을 넣어주면 맨 앞부터 차례대로 배열의 0번째 값, 1번째 값, 2번째 값 .... 이 차례대로 할당됩니다.

 

Spread 연산자(...)를 이용하면 배열의 나머지 값을 가져오는 것도 가능합니다.

let arr = ['Apple', 'Banana', ' Orange', 'Cherry'];

const [fruit1, fruit2, ...rest]=arr; //fruit1은 arr[0]을 의미, fruit2는 arr[1]을 의미합니다.
console.log(fruit1); //Apple
console.log(fruit2); //Banana
console.log(rest); // [ ' Orange', 'Cherry' ]

또한 다음과 같이 기본값을 설정해줄 수도 있는데요, 할당한 값이 없는 경우에 기본 값이 할당됩니다.

let arr = ['Apple'];

const [fruit1, fruit2, ...rest]=arr; //fruit1은 arr[0]을 의미, fruit2는 arr[1]을 의미합니다.
console.log(fruit1); //Apple
console.log(fruit2); //undefined
console.log(rest); // [ ]

//기본값 할당
const [newFruit1='Apple', newFruit2='Banana']=arr;
console.log(newFruit1); //Apple
console.log(newFruit2); //Banana

대표적으로 react에서 많이 쓰이는 hook인 useState에서도 배열 구조분해 할당이 사용됩니다.

facebook/react github에 들어가서 useState가 선언된 부분을 발췌해왔습니다.

 

export function useState<S>(
  initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
  const dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}

https://github.com/facebook/react/blob/main/packages/react/src/ReactHooks.js

GitHub - facebook/react: A declarative, efficient, and flexible JavaScript library for building user interfaces.

useState에서 파라미터로 [S, Dispatch<BasicStateAction<S>>] 형태로 길이가 2인 배열을 받고, 이 형태로 다시 return을 해줍니다.

그렇기 때문에 길이가 2인 배열 값을 가지고 우리가 아래와 같이 배열 구조 분해 문법을 이용해서 useState를 선언하고 사용할 수 있는 것입니다.

const [value, setValue] - useState(initialValue);

 

2. 객체 분해

구조분해할당은 배열뿐만이 아니라 객체에서도 사용됩니다.

객체에서는 아래와 같이 사용할 수 있습니다. 

const user={
    name:'Jason',
    age:23,
    birthDay:new Date('2000-01-03'),
}

const {name, age, birthDay}=user;
console.log(name); // Jason
console.log(age); // 23
console.log(birthDay); // 2000-01-03T00:00:00.000Z

= 오른쪽에는 객체 값이 옵니다.

= 왼쪽에 { } 안에는 객체의 key값이 와야하고 각 key값에 맞게 = 오른쪽의 객체 value가 할당이 됩니다. 

콜론(:)을 이용하면 변수명을 바꿔서 할당할 수도 있습니다.

const user={
    name:'Jason',
    age:23,
    birthDay:new Date('2000-01-03'),
}

// 콜론(:)을 이용해 변수명을 바꿔서 할당할 수도 있습니다. 
const {name:n, age:a, birthDay:b}=user;
console.log(n); // Jason
console.log(a); // 23
console.log(b); // 2000-01-03T00:00:00.000Z

위에 배열에서 했던 것처럼 =를 이용한 기본값 설정 역시 가능합니다.

const user={
    // name:'Jason',
    // age:23,
    birthDay:new Date('2000-01-03'),
}

// 콜론(:)을 이용해 변수명을 바꿔서 할당할 수도 있습니다. 
const {name:n='Jason', age=23, birthDay:b}=user;
console.log(n); // Jason
console.log(age); // 23
console.log(b); // 2000-01-03T00:00:00.000Z

Spread 연산자(...)를 이용해서 나머지 값을 가져오는 것도 가능합니다.

나머지 값은 객체 형태로 반환됩니다.

const user={
    name:'Jason',
    age:23,
    birthDay:new Date('2000-01-03'),
}

// 콜론(:)을 이용해 변수명을 바꿔서 할당할 수도 있습니다. 
const {name:n='Jason', ...rest}=user;
console.log(n); // Jason
console.log(rest); //{ age: 23, birthDay: 2000-01-03T00:00:00.000Z }

 

 

참고

https://ko.javascript.info/destructuring-assignment