구조 분해 할당

1. 구조 분해 할당이란? 

만약 우리가 배열에서 원소를 일일히 빼서 변수에 집어 넣는다면, 다음과 같은 과정을 거쳐야 할 것이다. 

const arr = [1,2,3] 

const a = arr[0]
const b = arr[1]
const c = arr[2]

JS에서는 위 과정을 간단하게 한 줄의 코드로 적을 수 있는 방법이 있다. 이를 구조 분해 할당이라고 한다. 

배열이나 객체의 원소들을 찢어서 변수 하나 하나에 넣어주는 방식을 말한다.

2. 배열에서의 구조 분해

(1) 기본형

// 배열 선언
const arr = [1,2,3] 

// 구조 분해 할당 이용: 변수 a, b, c에 각각 1, 2, 3이 차례로 들어간다.
const [a,b,c] = arr

console.log(a,b,c)
// 1 2 3이 찍힌다.

위의 const [a,b,c] = arr 은 a,b,c라는 변수 선언과 동시에 배열의 원소들을 찢어서 넣은 것이다. 

만약 이미 선언된 변수를 이용하는 경우라면 밑과 같이 쓰면 된다. 

let a = 0
let b = 0
let c = 0

const arr = [1,2,3] 
;[a,b,c] = arr

이 경우 객체 선언과 구조 분해 할당 사이에 ;을 넣어줘야 한다. 

첫번째 예시의 경우 const라는 키워드 덕에 이 둘 사이가 구분이 되었는데,  이제 선언된 변수들을 재할당하면서 해당 키워드가 없으므로 둘 사이가 구분이 안되기 때문이다. 

만약 ; 가 없으면 node.js는 다음과 같이 받아들인다. 

const arr = [1,2,3][a,b,c] = arr

//arr을 종국에 다시 arr에게 할당하는 문장이 되어서 구문 오류가 난다.

(2) 만약 원소 중 일부분만 사용하고 싶다면

위의 경우에서 arr = [1,2,3] 중 arr[1], arr[2]만 사용하고 싶다면 이렇게 적으면 된다.

// 배열 선언
const arr = [1,2,3] 

// 2,3번 원소만 사용 하고 싶은 경우 (안 쓰는 부분은 비워둬야 한다.)
const [,b,c] = arr
console.log(b,c)

만약 arr[0], arr[1]만 사용하고 싶은 경우 

const [a,b,]= arr

(3) ...rest 이용

해당 문법은 원소의 일정부분만 쓰고 그 후 나머지 원소들은 한번에 빈 배열 속에 넣고 싶을 때 사용한다. 

const arr = [1,2,3]

// ...rest에는 나머지 배열들이 들어감. (rest는 다른 이름으로 사용 가능)
const [a, ...rest ] = arr

console.log(a,rest)
// 1 [2,3]으로 출력됨

전개 연산자를 사용한 것이라 하는데 무슨 의미인지는 아직 모르겠다. 일단 ...rest라는 이름으로 외우자. 

 

(4) 배열 구조 분해 할당의 문제점

위에서 보다시피, 구조 분해 할당이 원소를 할당하는 기준은 원소의 인덱스 이다. 

[1,2,3] 이라는 값이 차례대로 [a,b,c] 변수에 들어갔다. (a= 1, b=2,c=3)

그럼 이제 배열이 길어질 경우가 문제이다. 

만약 인덱스 8번만 받아서 사용하고 싶은 경우 밑과 같이 써야 한다.

const arr2 = [1,2,3,4,5,6,7,8,9]
const[,,,,,,,n] = arr2

이처럼 배열이 길어질수록 구조 분해 할당은 쓰기 어렵다.

3. 객체에서의 구조 분해 

(1) 기본형

객체에서도 구조 분해 할당을 쓸 수 있다. 

만약 구조 분해 할당을 안 쓰고 객체 멤버들을 일일히 변수 안에 넣으려면 다음과 같이 써야 한다. 

const obj = {
  a: 1,
  b: 2,
  c: 3,
  y: 100
}


const a = obj.a
const b = obj.b
const c = obj.c

이제 구조 분해 할당으로 간편히 써보자. 

const {a,b,c} = obj

다음과 같이 쓰면 된다. 

(2) 배열 구조 분해 할당과의 차이점

배열의 경우 원소의 인덱스를 기준으로 값을 변수에 분해 할당 했다.

객체의 경우 객체 멤버의 key 값을 기준으로 변수에 value를 분해 할당한다. 

위에서 보면 객체의 경우 분해 할당 받는 변수의 이름과 객체의 멤버 key들의 이름이 같은 것을 볼 수 있다. 이는 우연이 아니다. 

배열에서는 할당 받는 변수의 이름을 사용자 마음대로 지정할 수 있었지만, 객체의 경우 아니다. 꼭 key 값과 같은 이름으로 할당 받아야 한다. 변수에는 같은 이름의 key의 value가 할당 된다. 

const obj = {
  a: 1,
  b: 2,
  c: 3,
  y: 100
}

const {c, y} = obj

console.log(c,y)
// 3과 100이 출력됨.

따라서 특정 멤버만 할당 받고 싶다면, 그 멤버 이름만 적어주면 된다.

(3) default 값 

객체를 구조 분해 할당 받으려 하는데, 객체 안을 들여다 볼 수 없는 경우가 있을 수 있다. 

이때 할당 받으려는 변수 이름이 객체에 key 값으로 없으면 undefined가 출력된다.

따라서 해당 Error를 피하기 위해 객체에 해당 변수 이름의 key가 없을 경우 default 값을 해당 변수에 넣어라는 명령이 존재한다. 이게 default 값이다. 

const obj = {
  a: 1,
  b: 2,
  c: 3,
  y: 100
}


// default 값 -> 객체안에 우리가 부르려는 key 값이 없을 경우 대신 출력되는 값
const {x=4} = obj
console.log(x)
// 4 출력

만약 x: 333 이라는 값이 객체안에 있다면 default 값 대신 333이 출력된다. 

(4) 변수 이름 재 선언 

변수 이름을 무조건 객체의 key 값으로 써야한다는 것은 상당한 제약이다. 이제 해당 변수이름을 교체하는 방법을 알려주겠다. 

// const {key이름: 바꿀 이름} = 객체이름
const {e=32, a:heropy, y: ten = 10} = obj


console.log(e, a, y) // 변수 이름이 바뀌었기 때문에 더 이상 a, y라는 변수는 없으므로 변수 없음 에러가 난다. 

console.log(e, heropy, ten) // 제대로 출력됨

(5) ...rest 이용

객체에서의 rest 이용은 더 쉽다. 

뽑아서 쓰고 싶은 내용만 따로 쓰고 나머지는 ...rest를 사용해 다른 객체로 묶어준다. 

const { c, ...rest } = obj
console.log(c, rest)

나머진 다른 객체로 묶임

**JS에서 ;을 써야하는 때 

; 는 java에서는 문장의 끝맺음을 나타냈었다. 

하지만 js에서는 문장과 문장 사이의 구분자로서의 역할을 한다. 

따라서 꼭 한 문장의 끝에 적어줄 필요가 없고

다음 문장 시작부분에 적어서 구분해줬음을 나타내도 된다. 

 const a = arr[0]
 const b = arr[1]
 const c = arr[2]

console.log(a,b,c)
;[a,b,c] = arr
 // ;[] ;{} 이렇게 쓸 수도 있다.

 

4. 스스로 해보기

// 배열 구조 분해 할당
let a = 0;
let b = 0;
let c = 0;
const arr = [1,2,3];

  // 기본형
  [a,b,c] = arr;
  console.log(a,b,c);

  // 일부 원소만 사용
  [,b,c] = arr;
  console.log(b,c);

  // 일부 원소 사용 나머지는 다른 배열로 묶기
  [a,...rest] = arr;
  console.log(a,rest)

// 객체 구조 분해 할당
const obj = {
  x: 123,
  y: 45,
  z: 6,
  w: 777,
  ga: 1,
  na: 2,
  da: 3,
  ra: 4
};  
  // 기본형
  //{x,y,z} = obj
  // console.log(x,y,z)

  // 일부 원소만 사용
  const {w} = obj
  console.log(w)

  // 일부 원소 사용 나머지는 다른 배열로 묶기
  const {z, ...past} = obj
  console.log(z,past)


  // default 값 이용
  const {o=4} = obj
  console.log(o)
  // 변수 이름 재선언
  const {ga:gggg, na:nnnn, da:dddd, ra:rrrr} = obj
  console.log(gggg,nnnn,dddd,rrrr)

 

2 번째 복습

// 배열에서의 구조분해
// 기본형
//let a, b, c;

// const arr = [1, 454, 2145, 3939];

// [airJordan, b, c, d] = arr;
// console.log(airJordan, b, c, d);
// 원소 중 일부분만 사용하고 싶다면?

// const [, x, y] = arr;

// console.log(x, y);

// 전개 연산자 이용 나머지는 부분 배열로 묶기

// [a, ...good] = arr;

// console.log(a, good);

// 객체에서의 구조분해
const obj = {
  a: "어이",
  b: "소코마데다",
  c: "유유",
  d: "사린간",
  x: "니가 앉은 소파~",
};

// 기본형

// const { a, b, c, d } = obj;
// console.log(a, b, c, d);

// 원소 중 일부분만 사용하고 싶다면?

// const { a, d } = obj;
// console.log(a, d);

// default 값 할당

// const { a, b, x = 4 } = obj;

// console.log(a, b, x);

// 변수 이름 재 선언

// const { a: apple, b: banana, c: milk, d: saringan, x: sofa } = obj;
// console.log(apple, banana, saringan, sofa);

// 전개 연산자 이용 나머지 부분 배열로 묶기

// const { a, x, ...rest } = obj;

// console.log(a, x, rest);