ES6의 특징

ES6

1.shorthand property names

짧은 이름

const hongsoek1 = {
  name: 'Hongseok',
  age: 28
}
const name = 'Hongseok'
const age = 28

const hongseok2 = {
	name:name,
  	age: age,
}

const hongseok3 = {
	name,
  	age,
}

최신 문법중 hongseok2 에서 만들어놓은 객체 안에 변수를 선언 해줄때, hongseok3 처럼 변수 이름과 키값을 이름이 일치하다면 생략이 가능하다.

2. Destructuring Assignment

1번
{
  const student = {
      name: 'Simon',
      id: 1,
	}
2번
{
  const name = student.name;
  const id = student.level;
  console.log(name, id)
}

3번
{
 const {name, id} =student;
  console.log(name, level)
}

1번에서 만들어진 객체안에 키에 해당하는 밸류 값을 변수에 지정해 줄 때, 2번의 방법을 쓸수도 있지만 3번의 방법도 허용이된다. 수학으로 따지면 분배법칙 느낌과 비슷하다고 볼수 있다.

3. Spread Syntex

{
const obj1 = {key: 'Key1'}
const obj2 = {key: 'Key2'}
const array = [obj1, obj2]
}

const arrayCopy = [...array]

// array concatenation

const = fruits1 = ['🍌','🍎']
const = fruits2 = ['🥰','😛']

const dog = [...fruits1, ...fruits2]

복사해서 가져올때 ... 을이용해서 가져 올 수 있다. 잘 퍼트려 준다는 의미에서 spread 연산자라는 이름이 붙여진것 같다.

하지만 알아두어야 할것은 얕은 복사와 깊은 복사의 차이를 알아야 한다는 것이다.

spread 연산자는 객체안의 값을 복사해오는것은 아니기 때문에 이점을 꼭!!! 유의하자.