js 객체 비구조화 할당

비구조화 할당이란, 배열이나 객체의 속성 혹은 값을 해체하여 그 값을 변수에 각각 담아 사용하는 js 표현식

ES6 부터 추가된 문법이며, 구조 분해 할당 이라고도 함

즉, 배열이나 객체의 값을 새로운 변수에 쉽게 할당함

 

 

배열 선언 및 호출

기존방식

//배열선언
const animalList = ['CAT', 'DOG', 'TIGER'];

//각각 변수담기
const cat = animalList[0];
const dog = animalList[1];
const tiger = animalList[2];

//각각호출
console.log(cat); // 'CAT'
console.log(dog); // 'DOG'
console.log(tiger); // 'TIGER'

배열의 인덱스를 하나씩 꺼내서 직접 할당함

 

비구조화 할당방식

//배열선언
const animalList = ['CAT', 'DOG', 'TIGER'];

//비구조할당방식을 이용하면 4줄을 1줄 코드로 변경 가능
const [cat1, dog1, tiger1] = animalList;
console.log(cat); // 'CAT'
console.log(dog); // 'DOG'
console.log(tiger); // 'TIGER'

 

 

객체 선언 및 호출

기존 방식

//객체선언
const animals = {
  cat: 'CAT',
  dog: 'DOG',
  tiger: 'TIGER'
}

//각각변수담기
const cat = animals.cat;
const dog = animals.dog;
const tiger = animals.tiger;

//각각호출
console.log(cat); // 'CAT'
console.log(dog); // 'DOG'
console.log(tiger); // 'TIGER'

 

구조 분해 할당 방식

const animal = {
  cat2: 'CAT',
  dog2: 'DOG',
  tiger2: 'TIGER'
};

const { cat2, dog2, tiger2 } = animal;

console.log(cat); // 'CAT'
console.log(dog); // 'DOG'
console.log(tiger); // 'TIGER'

변수명과 객체의 키 값이 같다면 구조분해할당으로 짧게 축약 가능

 

 

구조분해할당 방식 응용

객체, 배열의 값을 복제 할때 사용

... 스프레드 오퍼레이터(펼침연산자)

// obj 객체를 newObj 객체에 복제
var obj = {
  a: 10,
  b: 20
};
var newObj = {...obj};
console.log(newObj); // {a: 10, b: 20}

// arr 배열을 newArr 배열에 복제
var arr = [1,2,3];
var newArr = [...arr];
console.log(newArr); // [1, 2, 3]

 

특정 값 과 나머지 요소를 분리

// 배열
const animalList2 = ['CAT', 'DOG', 'TIGER'];
const [cat2, ...restAnimalList2] = animalList2;
//앞의 요소 1개와 나머지 요소를 분리하고 싶을 때 위 예시 코드처럼 사용 가능

console.log(cat2); // 'CAT'
console.log(restAnimalList2); // ['DOG', 'TIGER']

// 객체
const { cat3, ...animals3 } = {
  cat3: 'CAT',
  dog3: 'DOG',
  tiger3: 'TIGER'
};
console.log(cat3); // 'CAT'
console.log(animals3); // {dog3:'DOG', tiger3:'TIGER'}

 

 

[ES6강좌] 5강 비구조화 할당(destructuring assignment) - 오쌤의 니가스터디