2-1 ES6 문법 소개 및 실습 1

*ES6: 2015년에 시작된 자바스크립트의 여섯번째 문법

구조분해할당

destructuring(de + stucture + ing)
배열이나 객체의 속성을 찢어서 할당

1. 배열의 경우
let [value, value2] = [1, "new"]
console.log("1", value1);
console.log("2", value2);

터미널 결과:

1 1

2 new 

let arr = ["value1", "value2", "value3"]
let [a, b, c, d] = arr;

console.log(a);
console.log(b);
console.log(c);
console.log(d);

 

터미널 결과:

value1

value2

value3

undefined

 

임의로 초기값 세팅해버리기

let arr = ["value1", "value2", "value3"]
let [a, b, c, d = 4] = arr;

console.log(a);
console.log(b);
console.log(c);
console.log(d);

 

터미널 결과:

value1

value2

value3

4

 

초기값 세팅했지만 대입 배열에 값을 정식으로 추가해버리면

let arr = ["value1", "value2", "value3", "value4"]
let [a, b, c, d = 4] = arr;

console.log(a);
console.log(b);
console.log(c);
console.log(d);

 

터미널 결과:

value1

value2

value3

value4

2. 객체의 경우
let user = {
   name: "nbc",
   age: 30,
};

let{name, age} = user

 

console.log(name)

console.log(age)

 

터미널 결과:

nbc

30

3. 새로운 이름으로 할당
let user = {
  name: "nbc",
  age: 30,
};

let {name: newName, age: newAge } = user;
console.log("newName =>", newName);
console.log("newAge =>", newAge);

 

터미널 결과:

newName =>nbc

newAge=>30

여기서 newName은 그냥 변수명이고 실제 키값은 아니며 그 자리에 실제할당된 값인 nbc가 나오는 방식이다.

4. 할당되지않은 값을 다룰 때
let { name, age, bithday } = user;
console.log(name);
console.log(age);
console.log(birthday);

let {birthday} = let user = {
  name: "nbc",
  age: 30,
};
일 때 birthday는 할당되지 않았기때문에 undefined로 나오고,
let { name, age, bithday = "today" } = user;
으로 초기값을 할당하면 임의로 today가 된다.
나중에 
let user = {
  name: "nbc",
  age: 30,
  birthday: "yesterday"
};
라고 할당해주면, 초기값은 없어지고 yesterday로 고정된다.

 

배운점

1.

객체에서는 할당되지 않고 키만 let = {  name, age, bithday }로 있다면 null이 아니라 undefined로 찍히고, 객체 자체에다 초기값을 설정해줄 수 있다. 그리고 나중에 할당해주게 되면 할당된 값으로 찍히게 된다.

 

2.

let 객체명 = {

키1 : 밸류1,

키2 : 밸류2,

}

let 새객체명 = 객체명

하고 데이터를 찍어보면

console.log(키1, 키2)

터미널 결과:

밸류1

밸류2

로 대입할당된 것을 볼 수 있다.