[TIL] 210720 오늘 공부는 ES6의 비구조화 할당(Destructuring Assignment)

ES6에 새로 도입된 여러가지 문법이 있다. 그 중 익숙한 let, const, spread operator 같은 것들 외에, 처음 들어본 비구조화 할당 개념에 대해 공부했다.

 

비구조화 할당은 뭔가 번역이 어색하지만(?) 정의는 이렇다.

 

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다.  

 

배열에서는 이렇게 사용할 수 있다.

ES5에서, vegetable 이라는 배열의 값을 각각 변수에 할당해주었다. 

const vegetable = ["onion", "mushroom", "pepper", "cabbage","potato"];
let yangpa = vegetable[0];
let baechu = vegetable[3];
let gochu = vegetable[2];

console.log(yangpa) //onion 출력
console.log(baechu) //cabbage 출력
console.log(gochu) // pepper 출력

but 비구조화 할당을 이용하면 아래와 같이 간단하게 작성할 수 있다.

4줄의 코드를 1줄로 줄일 수 있다. 와우 간단깔끔

const [yangpa, baechu, gochu] = ["onion", "cabbage", "pepper"];
console.log(yangpa) //onion 출력
console.log(baechu) //cabbage 출력
console.log(gochu) // pepper 출력

좌측에 호출될 변수명 집합, 우측에 할당할 값을 순서대로 적어준다. 

 

배열에서 이렇게도 사용 가능하다. 

const array = [1,2];
const [one, two] = array;

console.log(one); //1
console.log(two); //2

 

객체에서는 이렇게 사용할 수 있다.

배열이 아닌 객체에도 쓸 수 있다. 객체 비구조화 할당이다.

const vegetable = {
yangpa: "onion",
busut: "mushroom",
gamza: "potato",

};

const yangpa = vegetable.yangpa;
const busut = vegetable.busut;
const gamza = vegetable.gamza;

console.log(yangpa) //onion
console.log(busut) // mushroom
console.log(gamza) //potato

 

얘도 비구조화 할당으로 바꿔주면 간단하게 쓸 수 있다. 

const { yangpa, busut, gamza } = {
	yangpa:"onion",
    busut:"mushroom",
    gamza:"potato"
}

console.log(yangpa) //onion
console.log(busut) // mushroom
console.log(gamza) //potato

 

아니면 이런식으로도 할당해서 쓸 수 있다.

const object = {a:1, b:2};
const {a,b} = object;

console.log(a) //1
console.log(b) //2

 

함수의 파라미터에서도 비구조화 할당을 사용할 수 있다..

const object = {a:1, b:2};

function print({a,b}) {
	console.log(a);
    console.log(b);
}

print(object)
//1
//2

 

여기서 b값을 넘겨주지 않는다면? undefined를 나타낸다. 

const object = { a: 1 };

function print({ a, b }) {
  console.log(a);
  console.log(b);
}

print(object);
// 1
// undefined

 

그래서 undefined를 방지하기 위해, b에도 기본값을 줄 수 있다.

const object = { a: 1 };

const { a, b = 2 } = object;

console.log(a); // 1
console.log(b); // 2

 

---

 

참고한 블로그!

https://velog.io/@recordboy/ES6-%EB%B9%84%EA%B5%AC%EC%A1%B0%ED%99%94-%ED%95%A0%EB%8B%B9Destructuring-Assignment

https://learnjs.vlpt.us/useful/06-destructuring.html