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

 

 

 

 

 

 

 

 

 

 

1. 배열의 비구조화할당(destructuring assignment)

---

- 비구조화할당이란 배열이나 객체의 속성 혹은 값을 해체하여 그 값을 변수에 각각 담아 사용하는 자바스크립트 표현식입니다.

 

 

 

1) 기존 배열 값을 해체(ES6전 코드)

## 코드

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

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

//각각호출
console.log(cat);
console.log(dog);
console.log(tiger);

- 배열이 갖은 값을 각각 꺼내어 쓰려면 이렇게 직접 하나하나 지정했습니다.

- 작성하기 귀찮은 작업이고, 코드를 읽기에도 복잡하게 보이는 단점이 있었습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

2) 비구조화 할당방식 배열 선언 및 호출

## 문법

const [변수명1, 변수명2, 변수명3] = [값1, 값2, 값3];

 

 

 

## 예시 코드

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

 

 

 

 

 

 

 

 

 

 

3) 비구조화 할당방식의 나머지 패턴

## 스프레드 오퍼레이터(Spread Operator)

- 한글로 번역해보자면 펼침연산자 정도로 볼수 있습니다. 

- 특정, 객체나 배열의 값을 복제할 때 사용합니다.

var 새로운객체명 = {...기존객체명};
var 새로운배열명 = [...기존배열명];

 

 

 

## 스프레드 오퍼레이터 예시 코드

// 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);
console.log(restAnimalList2);

- [CAT]과 [DOG, TIGER]가 따로 분리된 것을 확인할 수 있습니다. 

 

 

 

 

 

 

 

 

 

 

 

 

4) 비구조할당방식의 기본값 지정

## 문법

const [변수명1, 변수명2, 변수명3 = 기본값] = [값1, 값2];

 

 

 

## 예시 코드

const [cat3, dog3, tiger3, monkey3 = "MONKEY"] = ['CAT', 'DOG', 'TIGER'];
console.log(cat3);
console.log(dog3);
console.log(tiger3);
console.log(monkey3);

- 마지막 monkey3에는 기본값만 지정하고, 값을 지정하지 않았지만 기본값으로 잘 불러와지는 것을 확인할 수 있습니다.

 

 

 

 

 

 

 

 

 

5) 기존 배열값을 변수에 한번에 할당

## 문법

const 배열명 = [값1, 값2, 값3];
const [변수명1, 변수명2, 변수명3] = 배열명;

 

 

 

## 예시 코드

const animal = ['CAT', 'DOG', 'TIGER'];
const [cat1, dog1, tiger1] = animal;
console.log(cat1);
console.log(dog1);
console.log(tiger1);

- 미리 선언된 배열값을 각각의 변수에도 담을 수 있습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90

 

 

 

 

 

 

 

 

 

 

 

 

2. 객체의 비구조화할당(destructuring assignment)

---

1) 기존 객체 값을 해체(ES6전 코드)

## 코드

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

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

//각각호출
console.log(cat);
console.log(dog);
console.log(tiger);

- 코드가 매우 길어지는 것을 확인할 수 있습니다. 

 

 

 

 

 

 

 

 

 

 

 

2) 비구조할당의 객체선언과 호출

## 문법

const {변수명1,변수명2,변수명3} = {
	
    속성명1: 값1,
    속성명2: 값2,
    속성명3: 값3 
};

 

 

 

## 예시 코드

const { cat2, dog2, tiger2 } = {
  cat2: 'CAT',
  dog2: 'DOG',
  tiger2: 'TIGER'
};
console.log(cat2);
console.log(dog2);
console.log(tiger2);

- 코드 줄수가 훨씬 주는 것을 확인할 수 있습니다. 

 

 

 

 

 

 

 

 

 

3) 나머지 패턴 - 배열과 유사

## 예시 코드

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

- [CAT]과 나머지동물로 처리되는 것을 확인할 수 있습니다.

 

 

 

 

 

 

 

 

 

 

 

4) 기본값 지정

## 예시 코드

 const { cat4, dog4, tiger4, monkey4 = 'MONKEY' } = {
   cat4: 'CAT',
   dog4: 'DOG',
   tiger4: 'TIGER'
 };
 console.log(cat4);
 console.log(dog4);
 console.log(tiger4);
 console.log(monkey4);

- monkey4는 기본값을 설정하고 값을 설정하지 않았지만 기본값으로 결과가 나오는 것을 확인할 수 있습니다. 

 

 

 

 

 

 

 

 

 

 

5) 기존 객체속성값을 변수에 한번에 할당

## 문법

const 객체명 = {
	속성명1: 값1,
	속성명2: 값2,
	속성명3: 값3
}
const {변수명1,변수명2,변수명3} = 객체명;

 

 

 

## 예시 코드

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

const { cat2, dog2, tiger2 } = animal;

console.log(cat2);
console.log(dog2);
console.log(tiger2);

- 미리 선언된 객체값을 각각의 변수에도 담을 수 있습니다.