let, const

ES6이전에 변수 선언에 사용된 var이외에도 let과 const가 추가되었습니다.
이전 버전에서 var의 가장 큰 문제는 변수의 재선언이 가능했다는 점이었습니다.
이를 보완하기 위해 let과 const는 변수의 재선언이 불가능하도록 되어있습니다.
특히 const는 상수를 의미하는 변수를 선언하기 때문에 재할당이 불가능합니다.

var test1 = [1, 2, 3, 4, 5]; // undefined === pass
var test1 = [6, 7, 8, 9, 0]; // undefined === pass

let test2 = [1, 2, 3, 4, 5]; // undefined === pass
let test2 = [6, 7, 8, 9, 0]; // SyntaxError!
test2 = 'foo' // 가능

const test3 = 3; // undefined === pass
const test3 = 13; // SyntaxError!
test3 = 'bar' // 불가능

/*
현재 버전의 크롬 개발자도구 콘솔 상에서는 let의 변수 재선언이 적용됩니다.
하지만 eslint 를 적용한 vscode 에서는 기본적으로 이를 에러라고 인식하고 잡아냅니다. 

그게 아니더라도, 다른 목적을 위한 변수 재선언 사용은 좋지 않은 코딩 스타일 중 하나입니다.
*/

또한, var는 함수 범위의 scope를 가지고,
let과 const는 블록 단위의 scope를 가집니다.

변수 선언시 축약코딩

// 이전 버전
let x;
let y = 0;
let z = 1;

//ES6
let = x, y = 0, z = 1;

여러개의 변수 선언 시 일일이 let, const를 입력하지 않아도 위와 같이 한줄로 축약가능합니다.

Spread Operator (전개연산자) & Rest Parameters (나머지 매개변수)

전개연산자와 나머지 매개변수는 ...을 통해 사용할 수 있습니다.
...를 통해 전개연산자를 사용하면 반복 가능한 객체 arr이 인수 리스트로 확장됩니다.

let arr = [3, 5, 1];

console.log(arr) //[3, 5, 1]
console.log(...arr) //3, 5, 1

alert( Math.max(arr) ); // NaN
alert( Math.max(...arr) ); // 5 (전개 연산자가 배열을 인수 리스트로 바꿔주었습니다.)

`...`뒤에 배열 이름을 적어준 뒤 함수 선언부의 매개변수 자리에 넣어주면 나머지 매개변수들을 배열에 넣어줄 수 있습니다. 이 때, 나머지 매개변수는 항상 마지막에 있어야 합니다.

function showName(firstName, lastName, ...titles) {
  alert( firstName + ' ' + lastName ); // Julius Caesar

  // 나머지 인수들은 배열 titles에 할당됩니다.
  // titles = ["Consul", "Imperator"]
  alert( titles[0] ); // Consul
  alert( titles[1] ); // Imperator
  alert( titles.length ); // 2
}

showName("Julius", "Caesar", "Consul", "Imperator");

Destructuring assignment (비구조화 할당)

객체의 속성들을 개별적인 변수에 담을 수 있는 선언방식입니다.
범위를 벗어나거나 할당되지 않은 나머지 값이 있다면 자동적으로 undefined가 선언됩니다.

//이전 버전 
let array = [1, 2, 3];
let x = array[0];
let y = array[1];
let z = array[2];

//ES6 배열 구조 분해
let array = [1, 2, 3];
let [x, y, z] = array;
console.log(x,y,z); // 1 2 3

//이전 버전
let object = {name : 'Aiden', job : 'coding', age : 20};
let name = object.name;
let job = object.job;
let age = object.age;

//ES6 객체 구조 분해
let {name, job, age} = {name : 'Aiden', job : 'coding', age : 20};
console.log(name, job, age) // Aiden coding 20

template literals

ES6에서 도입된 template literals라는 문자열 표기법은
백틱( ` )을 활용하여 더욱 활용성이 높은 문자열 활용을 가능하게 합니다.

let first = `John`
let last = `Peter`

//이전버전
console.log(`My name is ` + first + ' ' + last + '.'); // My name is John Peter.

//String Interpolation (문자열 보간)
console.log(`My name is ${first} ${last}.`) // My name is John Peter.


//String Interpolation은 ${변수명} 식으로 활용합니다.
//String Interpolation의 표현식 안에 변수명이 들어가면 변수의 값이 문자열로 강제 형변환됩니다.
//String Interpolation의 표현식 안에서 간단한 연산도 가능합니다.

let num = 4
console.log (`4*2 = ${num*2}`); // 4*2 = 8

Arrow function(화살표 함수)

화살표 함수는 기존의 함수표현식을 더욱 간축시켜주는 문법입니다.

//일반 함수 표현
function apply(a, b){
	return a+b
}
//화살표 함수
const apply = (a,b) => {
	return a+b
}

또한, 화살표 함수에 한줄짜리 return문 밖에 없다면 또 생략이 가능합니다.

const apply = (a,b) => {
	return a+b
}
//두 화살표 함수는 같은 기능입니다.
const apply = (a,b) => a+b

매개변수가 한개인 경우 괄호를 생략할 수 있습니다.

const reject = (n) => {
	console.log(n)
}
//두 화살표 함수는 같은 기능입니다.
const reject = n => {
	console.log(n)
}