강의자료 : https://youtu.be/36HrZHzPeuY

<aside> 🌟 자바스크립트 개발자라면 리액트,ANGULAR,V와 같은 라이브러리를 이용하고 있다면 꼭 알아야할 ES6(2015) 부터 ES11(2020)까지 많이 사용되는 핵심문법들만 정리!

</aside>

<aside> 💡 ES6부터 추가된 문법들이 인터넷익스플로어에서는 지원되지 않기때문에 바벨을 이용하는 것을 추천한다!

</aside>

Shorthand property name

const man1={ //객체는 키와 값으로 이루어져 있다
	name:'man',
	age:'18',
};

const name="man"; //미리 정의되어있는 변수
const age="18";

const man2={ //앞에서 정의된 변수를 사용하여 아래와 같이 작성가능
	name: name,
	age: age,
};

const man3={ //키와 벨류의 이름이 동일한 경우 아래와 같이 작성가능
	name, //간편하게 간추려 작성가능
	age,
};

console.log(man1,man2,man3); 
//이렇게 작성하면 키와 벨류는 동일하게 출력된다.

Destructuring assignment

//object
const student={
name:'man',
level:1,
};

{
const [name=student.name](<http://name>%3Dstudent.name/);
const level=student.level;
console.log(name,level);
}

//destructuring assignment사용하면
{
const {name,level}=student;
console.log(name,level);

//다른 이름으로 선언하고 싶다면
const {name:realname,level:reallevel}=student;
console.log(realname,reallevel);
}

//Destructuring은 배열에서도 마찬가지로 사용가능하다
const array=['tiger','lion'];

{
const first=array[0];
const second=array[1];
console.log(first,second);
}

//destructuring에서 객체는 {}기호를 사용하고
//배열에서는 []기호를 사용해야 한다.
{
const [first,second]=array;
console.log(first,second);
}

Spread Syntax

{
  const obj1={key1:"key1"};
  const obj2={key2:"key2"};
  const array=[obj1,obj2];
  
  //array copy
  const arrayCopy=[...array];
  console.log(array,arrayCopy);
  
  const arrayCopy2=[...array,{key3:"key3"}];
  obj1.key1='newKey'; //spread연산자는 객체안의 값을 하나씩 복사해서 오는 것이 아니라 주소값을 참조해서 가져오는 것이기때문에 원래의 객체를 수정하게 되면 전체의 객체에 영향을 미칠 수 있다.
  console.log(array,arrayCopy,arrayCopy2);
  
  //object copy
  const obj3={...obj1};
  console.log(obj3);
  
  //array concatenation
  const fruit1=['apple','banana'];
  const fruit2=['grape','orange'];
  const fruits=[...fruit1,...fruit2];
  console.log(fruits);
  
  //object merge
  const dog1={dog1:"a"};
  const dog2={dog2:"b"}; //만약 dog2 객체의 key가 dog1으로, dog1객체의 키와 동일한 경우 spread연산자를 통해 복사한다면 const dog={...dog1,...dog2}; 뒤에오는 dog2의 값으로 뒤집어써져서 dog1:'b'로 출력된다. ex) const dog2={dog1:"b"};
  
  const dog={...dog1,...dog2};
  console.log(dog);
  
}

Default parameters