[JS]구조 분해 할당

배열에서 여러 개의 값을 변수에 할당할 때, 인덱스를 사용하여 할당을 하게 되면 코드가 지저분해지고 길어진다.

이럴때 구조 분해 할당을 이용하면 가독성이 좋아지고 짧아진다.

구조 분해 할당이란?

배열이나 객체의 요소(값)들을 변수에 쉽게 할당하는 방법으로 배열의 요소들에게 이름을 붙여주는 것과 같다.

---

배열 구조 분해 할당

배열은 index 기반으로 값을 가져오기 때문에 대괄호 [ ]를 사용해 변수에 값을 할당한다.

 

(1) 기본적인 배열 구조 할당

배열의 구조 분해 할당은 배열의 순서인 index를 기준으로 값을 가져온다.

const food = ["apple","tomato","grape"];

const [first,second,third] = food;
console.log(second); // tomato

 

(2) 일부 요소만 할당하기

쉼표(,)를 사용해 특정요소를 건너뛸 수 있다.

건너 뛴 요소는 따로 변수에 할당되지 않으므로 값을 직접 불러올수 없다. 하지만 원본 배열에서는 불러올수 있다.

const food = ["apple","tomato","grape"];

const [first, ,third] = food;
console.log(third); // grape

 

(3) 기본값 설정

배열의 요소가 없을 경우 기본값을 설정 할 수 있다.

const food = ["apple"];

const [first,second="tomato"] = food;
console.log(second); //tomato

---

객체 구조 분해 할당

객체는 속성(property) 이름을 기반으로 값을 가져오기 때문에 중괄호 { }를 사용하여 변수에 값을 저장한다.

 

(1) 기본적인 객체 구조 분해 할당

'속성 이름'을 기준으로 값을 가져오기 때문에, key값이 일치하는 변수에 값이 할당된다.

const person = {
  name: "zing",
  age: 28,
};

const { name, age} = person;
console.log(name); // zing

 

(2) 변수명 변경하기

속성명: 새로운 변수명 형식으로 변수명을 변경할 수 있다.

const person = {
  name: "zing",
  age: 28,
};

const { name:nickname, age} = person;
console.log(nickname); // zing

 

(3) 기본값 설정하기

객체에 없는 속성은 기본값을 설정하여 사용할 수 있다.

const person = {
  name:"zing"
 };
  
 const {name,favColor = "blue" } = person;
 console.log(favColor); // blue