4. 구조 분해 할당 (내용정리)

이 포스팅은 koans를 풀다가 더 공부가 많이 필요하겠다고 느낀 구조분해할당에 대해 알아보고 정리

 

구조 분해 할당??  뭔지부터 알자

구조 분해 할당은 배열 또는 객체의 구조를 분해해서 그 분해된 값을 개별적인 변수에 담는 표현식

이라고는 하는데... 말로는 잘모르겠다 예제를 같이 보면서 이해해보자

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

const one = arr[0];
const two = arr[1];
const three = arr[2];

배열 내부의 값을 새로운 변수에 각각 할당하고자 할 때, 하나씩 변수를 선언하고,

값을 할당하는 과정을 거쳐야된다.

 

하지만! 이때 배열의 구조분해할당 이라는 것을 사용하면 변수를 선언하고, 할당하는 과정을 한번에 해결할 수 있다.

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

const [one, two, three] = arr;

위처럼 간단하게 한번에 작성이 가능하다. 이렇게 하면,

우변의 arr 배열을 구조 분해해서 좌변에 위치하고 있는 변수들에 각각 할당하게 된다.

1은 one에, 2는 two에, 3은 three에 각각 값이 대입된다.

 

 

문자열로 예시를 보면, 

// 이름과 성을 요소로 가진 배열
let arr = ["SeungHyun", "Jeong"];

// 구조 분해 할당을 이용해
// firstName엔 arr[0]을
// surname엔 arr[1]을 할당하였습니다.
let [firstName, surName] = arr;

console.log(firstName); // SeungHyun
console.log(surName); // Jeong

이렇게 인덱스를 이용해 배열에 접근하지 않고도 변수로 이름과 성을 사용할 수 있게 된다.

 

 

배열 분해하기

1. 분해(destructuring)는 파괴(destrctive)를 의미하지 않습니다.

위에서 나온 것처럼 구조 분해 할당은 어떤 것을 복사한 이후에 변수로 '분해'해준다는 의미 때문에 붙여졌습니다.

이 과정에서 분해 대상은 수정 또는 파괴되지 않습니다.

 

2. 쉼표를 사용하여 요소 무시하기

쉼표를 사용하면 필요하지 않은 배열 요소를 버릴 수 있다.

let [firstName, , title] = [
  "Julius",
  "Caesar",
  "Consul",
  "of the Roman Republic",
];
console.log(title); // Consul

두번째 요소는 생략되었지만, 세번째 요소는 title이라는 변수에 할당된 것을 확인할 수 있다.

할당할 변수가 없는 네번째 요소 역시 생략.

 

 

'...' 로 나머지 요소 가져오기

배열 앞쪽에 위치한 값 몇개만 필요하고 그 이후 이어지는 나머지 값들은 한데 모아서 저장하고 싶을 때가 있다.

그땐 점 세개를 붙인 매개변수 하나를 추가하면 나머지(rest) 요소를 가져올 수 있습니다.

let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

console.log(name1); // Julius
console.log(name2); // Caesar

// `rest`는 배열입니다.
console.log(rest[0]); // Consul
console.log(rest[1]); // of the Roman Republic
console.log(rest.length); // 2

rest는 나머지 배열 요소들이 저장된 새로운 배열이 된다.

 

 

객체 분해하기

할당 연산자 우측엔 분해하고자 하는 객체를, 좌측엔 상응하는 객체 프로퍼티의 '패턴'을 넣는다.

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

let {title, width, height} = options;

console.log(title);  // Menu
console.log(width);  // 100
console.log(height); // 200

프로퍼티 options.title 과 options.width, options.height 에 저장된 값이 상응하는 변수에 할당된 것을 확인할 수 있다.

 

 

중첩 구조 분해하기

객체나 배열이 다른 객체나 배열을 포함하는 경우, 좀 더 복잡한 패턴을 사용하면 중첩 배열이나 객체의 정보를 추출할 수 있다.

이를 중첩 구조 분해라고 부른다.

 

아래 예시를 보면 객체 options 의 size 프로퍼티 값은 또 다른 객체. items 프로퍼티는 배열을 값으로 가지고 있다.

대입 연산자 좌측의 패턴은 정보를 추출하려는 객체 options와 같은 구조를 가진다.

let options = {
  size: {
    width: 100,
    height: 200
  },
  items: ["Cake", "Donut"],
  extra: true
};

// 코드를 여러 줄에 걸쳐 작성해 의도하는 바를 명확히 드러냄
let {
  size: { // size는 여기,
    width,
    height
  },
  items: [item1, item2], // items는 여기에 할당함
  title = "Menu" // 분해하려는 객체에 title 프로퍼티가 없으므로 기본값을 사용함
} = options;

console.log(title);  // Menu
console.log(width);  // 100
console.log(height); // 200
console.log(item1);  // Cake
console.log(item2);  // Donut

extra (할당 연산자 좌측의 패턴에 없음) 을 제외한 options 객체의 모든 프로퍼티가 상응하는 변수에 할당됨.

변수 width, height, item1, item2 에는 원하는 값이 들어가고, title에는 기본값이 저장됨.

하지만 유의해야할건, size와 items 전용변수는 없다는 것이다.

전용 변수 대신 size와 items안의 정보를 변수에 할당해 준것이다.