[JavaScript] ES6+ 문법 : 템플릿 리터럴, 구조분해할당, rest, spread ✅

✨ ES6 이란?

ECMAScript2015

ES는 ECMAScript의 약자로서, 자바스크립트의 표준 , 규격을 나타내는 용어이다.
ES6는 2015년에 출시되었다.

새롭게 추가된 ES6+ 문법을 알아보자..!

🌱 템플릿 리터럴

따옴표 문자 대신 백틱을 사용하여 문자열을 나타내는 것이다.

console.log(`1 + 12 = ${1+12}`); 

🌱 구조 분해 할당

배열이나 객체를 해체하여 각각 변수에 담는다.

✨ 배열 구조분해

let arr = ["Bora", "Lee"]
let [firstName, surname] = arr;

✨ 객체 구조분해

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

let {title, width, height} = options;

🌱 rest 문법

나머지 값을 모두 모으는데 사용한다.

배열이나 객체의 앞쪽에 위치한 값 몇 개만 필요하고, 나머지는 따로 저장하고 싶을 때
...를 붙여 ‘나머지(rest)’ 요소를 가져올 수 있다.

let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert(name1); // Julius
alert(name2); // Caesar

// `rest`는 배열입니다.
alert(rest[0]); // Consul
alert(rest[1]); // of the Roman Republic
alert(rest.length); // 2

🌱 spread 연산자

스프레드 연산자와 rest문법을 헷갈리면 안된다!

스프레드 연산자는 객체와 배열을 펼치는 것이다..!

var arr1 = [1, 2, 3, 4, 5]; 
var arr2 = [...arr1, 6, 7, 8, 9]; 

console.log(arr2); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]