[JS study] 구조 분해 할당

구조 분해 할당은 자바스크립트의 자료구조 중 하나이다. 매우 중요한 개념이기 때문에 후에 리액트를 공부할 때에도 유용하게 쓰인다. 따라서 개념을 반드시 잘 짚고 넘어가자. 키를 가진 데이터 여러개를 하나에 저장할 때에는 객체를, 데이터를 순서대로 저장할 때에는 배열을 사용한다. 개발을 하다보면 함수에 객체나 배열을 전달해야 하는 경우가 생긴다. 또한 객체나 배열 전체가 아닌 일부만 필요할 때가 생긴다. 이럴 때 객체나 배열을 분해할 수 있게 해주는 문법이 구조 분해 할당이다.

배열 분해하기

let arr = ["Naver", "Kakao"];
let [firstCo, secondCo] = arr;
console.log(firstCo); // Naver
console.log(secondCo); // Kakao

위와 같이 분해를 하면 인덱스로 배열에 접근을 하지 않아도 되는 장점이 있다.

let [a,b,c] = "str";
console.log(a); // s

위와 같이 분해하여 변수로 사용이 가능해진다.

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

배열 앞쪽에 위치한 값 몇개만 필요하고 그 이후 나머지는 한 곳에 모아서 따로 저장하고 싶을 때가 있다. 그럴 때에는 ...을 추가하면 나머지 요소를 가져올 수 있다.

let [first, second, ...rest] =["Naver", "Kakao", "Line"];
console.log(first); // Naver
console.log(rest[0]); // Line

... 다음 변수명을 사용하면 나머지 배열을 생성할 수 있다. 접근은 일반 배열과 마찬가지이다. ...을 사용한 값을 0번째 index로 시작하는 배열이 생성된다.

기본값 설정

=을 이용하면 할당할 값이 없을 때 기본으로 할당해 줄 값인 기본값을 설정할 수 있다.

let [name = "Inha", surname = "Univ"] = ["JaeO"];
console.log(name); // JaeO (배열에서 받아온 값)
console.log(surname); // Univ (기본값)

객체 분해하기

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

let {title, width, height} = options;

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

배열과는 다르게 저장된 값의 순서는 별로 중요하지 않다. 기존 객체 프로처티의 키 목록을 기준으로 패턴을 만들어주는 것이다.

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

let {title: T, width: W, height: H} = options;

console.log(T); // Menu
console.log(W); // 100

위와 같이 콜론을 이용하여 분해하려는 객체의 프로퍼티를 목표 변수에 넣어줄 수도 있다. 위에서는 title을 변수 T에, width를 변수 W에 넣어주었다.

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

배열과 마찬가지로 나머지 프로퍼티를 다른 곳에 할당할 수 있다.

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

let {title, ...rest} = options;

// title엔 "Menu", rest엔 {height: 200, width: 100}이 할당됩니다.
alert(rest.height);  // 200
alert(rest.width); // 100

기본값 설정

배열과 마찬가지로 프로퍼티가 없는 경우를 대비하여 =을 사용해 기본값을 설정할 수도 있다.

let options = {
  title: "Menu"
};

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

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200