관리 메뉴

웹개발 블로그

[JS] (배열/객체) 구조 분해 할당 본문

◆React.js & Next.js & Node.js/JavaScript

[JS] (배열/객체) 구조 분해 할당

쿠키린 2025. 1. 21. 00:42

배열 또는 객체에 저장된 여러 값들을 분해해서 각각 다른 변수에 할당

ㄴ 말그대로 구조를 분해하여 할당한다.

 

1. 배열의 구조 분해 할당

let arr = [1,2,3];

let one = arr[0] ;

...

이렇게 할당하게 되면 계속 arr[n..]을 입력을 해줘야하는 단점이 있다.(지금은 3개가 다지만?! 몇천개면은?)

 

//// 

 

let [one, two, three] = arr;

//순서대로 각각 할당된다..

ㄴ 순서대로 할당되기 때문에 필요 없는 부분은 할당하지 않으면된다.

let [one, two] = arr;

 

let [one, two, three, four] = arr;

ㄴ four는 순서대로 보면 없는 값이기에 'undefined'이다.

 

let [one, two, three, four = 4] = arr;

ㄴ four=4 : 기본값으로 4를 넣어준다.

 

2. 객체의 구조 분해 할당

let person = {

   name : "여울",

   age : 27,

   hobby: "낚시"

};

 

let name = person.name ; //이렇게 일일히 할당했었지만.

let {name, age, hobby} = person; // 중괄호{}를 사용해야하며,  키를 기준으로 변수에 할당할 수 있다.

 

키 명칭을 그대로 써야만하나?

let {

  name : myName

  age  : myAge, 

  hobby  : myHobby,

} = person

 

: 원하는 변수명

 

3. 객체의 구조 분해 할당을 이용하여 함수의 매개변수를 받는 방법

let person = {

   name : "여울",

   age : 27,

   hobby: "낚시"

};

 

//중괄호를 사용하여 객체의 구조분해 할당이라는걸 명시해야 한다.

const fucn = ({name, age, hobby}) => {

  console.log(name, age, hobby);

}