[JavaScript] 구조 분해 할당 (Destructuring assignment)

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

... 점 3개를 사용하여 배열이나 객체를 해체할 수 있다.

배열 구조분해 (Destructuring Array)

const arr1 = [1, 2, 3, 4, 5];
const arr2 = [6, 7, 8, 9, 10];

const sumArr = [...arr1, ...arr2];
console.log(sumArr); //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

... 를 사용하여 배열을 해체할 수 있다.

배열 안에 두개의 배열을 구조분해 해 놓으면 위에서 처럼 하나의 배열로 합칠 수 있다.

const data = ["person1", "person2", "person3", "person4"];

const [fisrt, , third] = data;

console.log(fisrt, third); //person1 person3

배열 안에 first, thrid와 같이 변수를 작성하면 해당 변수가 지정된 인덱스와 일치하는 값이 해당 변수에 할당되어 출력된다.

배열 인덱스 1번은 작성하지 않았기 때문에 건너뛰고 인덱스 0과 2의 값만 할당하여 출력하고 있다.

객체 구조분해 (Destructuring Object)

const person = {
  name: 'kim',
  address: 'korea',
  age: 30,
};

// 객체 Destructuring 하는방법
const { name, age } = person;
console.log(name, age); // kim 30

// obj객체에서 키 값을 다른 변수명으로 할당해서 원하는 값을 추출하는법
const { name: myName, age: myAge } = person;
console.log(myName, myAge); // kim 30

{ } 중괄호 안에 변수로 객체의 프로퍼티 key 값을 할당하고 오른쪽에 해당 객체를 작성한다.

이렇게 작성하면 중괄호 안에 작성한 key 값으로 바로 값을 호출할 수 있다.

추가적으로 중괄호 안에 작성한 변수를 다른 변수명으로 대체하여 사용할 수 있는데

: 콜론 기호를 사용하여 원하는 변수명을 작성해주면 원래 key값이 아닌 작성한 새로운 변수명으로 값을 호출할 수 있다.

배열을 Destructuring 할때는 [ ] 대괄호를 사용하며

객체를 Destructuring 할때는 { } 중괄호를 사용한다.

JSON파싱 Destructuring 활용

const news = [
  {
    title: 'sbs',
    imgUrl: 'google.com',
    newsList: ['속보1', '속보2', '속보3'],
  },
  {
    title: 'mbc',
    imgUrl: 'google.com',
    newsList: ['속보4', '속보5', '속보6'],
  },
];

// 배열의 두번째 JSON 값만 가져오기위해서 첫번째 인덱스는 공백으로 놔둠
const [, { title, imgUrl }] = news;

console.log(title, imgUrl); //mbc google.com

배열로 들어온 JSON에서도 Destructuring을 사용할 수 있다.

배열 안에 두개의 JOSN이 존재하고 그중에서도 하나를 선택하여 위 예시와 같이 원하는 키-값을 가져올 수 있다.

함수를 통한 Destructuring 활용

const news = [
  {
    title: 'sbs',
    imgUrl: 'google.com',
    newsList: ['속보1', '속보2', '속보3'],
  },
  {
    title: 'mbc',
    imgUrl: 'google.com',
    newsList: ['속보4', '속보5', '속보6'],
  },
];

const getNewsList = ([, { newsList }]) => {
  console.log(newsList); // ["속보4", "속보5", "속보6"]
};

getNewsList(news);

함수를 통해서도 구조분해가 가능하다.

getNewsList(news); 를 통해서 함수에 인자로 news 객체를 전달하면 해당 값들을 구조분해하여 사용할 수 있다.

⭐️구조분해 할 때 주의해야할 점이 있는데 this를 사용하는 경우 구조분해를 사용하면 문제가 발생하므로 this를 사용하는 객체에는 구조분해를 하지않는다. this는 함수를 호출할때 어떻게 호출되었냐에 따라 결정되기 때문이다.

구조 분해 할당은 내가 처음 접했을때는 비구조화할당이라고 접했었다.

그런데 MDN을 확인해보니 정식 명칭은 구조 분해 할당 이었다.

많은 블로그들에서 구조 분해 할당과 비구조화 할당이 동일하게 설명되어있으므로 동일한 것으로 알면 된다.

이 블로그 검색

프로그래밍 공부 노트

[JavaScript] 구조 분해 할당 (Destructuring assignment)

댓글

댓글 쓰기