TIL 20 | 구조분해할당

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.

구조분해할당

• 우리는 자바스크립트를 사용하면서 객체와배열이라는 자료 구조를 많이 사용한다.
  함수에 객체나 배열을 전달해야 될 경우가 있다. 하지만 저장된 데이터 전체가 아닌 일부분만 필요한 경우가 생기는데 이때 객체나 배열을 변수로 분해할 수 있게 해주는 것이 구조분해할당이다.

배열 분해 예시

let arr = ['hyukzz', 'richard']

let [firstName, secondName] = arr;
/* 구조분해할당을 통해 arr[0, 1]값에 first,secondName을 각각 할당했다.

console.log(firstName); // hyukzz
console.log(secondName); // richard

• 위 예시처럼 배열에 접근하지 않고 변수로 닉네임 두 개를 사용할 수 있다.

객체 분해 예시

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

let {title, width, height} = options;

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

• 할당 연산자 우측엔 분해하고자 하는 객체를 넣고 좌측은 이에 상응하는 객체 프로퍼티의 패턴을 넣는다. 분해하려는 객체 프로퍼티의 키 목록을 패턴으로 사용한다.

• 프로퍼티 options.title과 options.width, options.height에 저장된 값이 각각 변수에 할당됐다.

마무리

• 구조 분해 할당을 사용하면 객체나 배열을 변수로 연결할 수 있다.

• 구조 분해 할당이 필요한 이유는 개발을 하다 함수에 객체나 배열을 전달해야 하는 경우가 생긴다. 이때 객체나 배열에 저장된 데이터 전체가 아닌 일부가 필요한 경우가 생기는데 객체나 배열을 변수로 분해할 수 있게 해주는 것이 구조분해할당이다. 이 외에도 함수의 매개 변수가 많거나 기본값이 필요한 경우 구조분해할당을 사용한다.