ES6

1. ES6(ECMAScript 2015)

• 2015년에 출시된 자바스크립트 표준으로 6번째라는 의미로 ES6이라고 한다.

2. ES6의 새로운 기능 및 사용 예

1) let, const 키워드

• 기본적으로 변수를 선언하기 위한 키워드로 기존의 var 키워드는 같은 이름의 중복을 허용하거나 global로 동작하는 등의 변수 고유의 속성을 해쳐서 공간 낭비 및 각종 에러를 발생시킬 수 있는데 let과 const는 중복 선언이 금지되고 global로 동작하지 않아 고유의 속성을 해치지 않으며, const는 한 번 선언된 값은 변경이 불가능하도록 되어 있다.
  (단, const의 타입이 객체인 경우 참조된 속성 값은 변경할 수 있다.)

// var 사용시
 
var a = 1; // 전역 변수
{
	var a= 2; // 지역 변수
    var b = 3; // 지역 변수
}
console.log(a);
console.log(b);

결과 :
2
3

// let 사용시

let a = 1;
{
	let a = 2; // 지역 변수
    let b = 3; // 지역 변수
}
console.log(a);
console.log(b);

결과 :
1 
// {}안의 지역 변수로 변경한 값으로 변하지 않음

ReferenceError: bar is not defined 
// {}안의 지역
변수의 값은 외부에서 사용 안된다.

// const 사용 예

const a= 1;
a= 1; 
// Assignment to constant variable.
// 재할당이 안된다.

const a; 
// Missing initializer in const declaration
// const는 선언과 동시에 값이 할당되어야 한다.

const employee = { name : 'hong', age: 24};
employee = {};
// Assignment to constant variable.
// 재할당이 안된다.

//const 객체 속성 변경 예

employee.name = 'kim';
결과 :
{ name: 'kim', age: 24} // name이 kim으로 변경됨

2) 화살표 함수

• 기존의 함수 표현식인 function 없이 () => 를 이용해 간결하게 함수를 만드는 방법으로, 기존의 function 함수와 비교하여 this 바인딩이 다르게 적용되며, 입력 받는 매개 변수가 하나일 때는 () 생략이 가능하다.

// es5 방식의 function

function sum(a,b) {
	return a+b;
}
sum(1,4)
결과 : 5

// es6 방식의 function

const sum = (a,b) => a+b;
sum(1,)
결과 : 5

// 입력 변수가 하나일 때 () 괄호 생략 가능

let sum = a => { return a + 10 };
sum(3)
결과 : 13

// 하나의 실행결과만 필요할 때 {} 괄호 생략 가능

let sum = (a,b) => a + b;
sum(1,4)
결과 : 5

3) Default Parameters

• 기존의 함수는 함수 내부에서 초기값을 선언하여 사용했으나 es6에서는 매개 변수에 초기값을 줄 수 있다.

// es5

var sum = function(a,b) {
	var a = a || 1;
    var b = b || 2;
    return a + b;
}
sum();
sum(3,4);
결과 :
3
7

// es6

var sum = (a = 1, b = 2) => { return a + b };
sum();
sum(3, 4)
결과 :
3
7

4) Template literals

• 새로운 문자열 표기법이면, 따옴표나 문자 대신 백틱(backtic) 문자 ` 를 사용하여 문자열을 처리하며, 기존과 달리 문자열 내에 표기된 그대로 적용된다.
  (공백이나 백슬래쉬 사용하지 않아도 된다.)

// es5 문자열 처리

var fname = 'hong';
var lname = 'gil dong';
var memo = '나이 : 26 \n 경력 : 2년 \n';
var employee = 'my name is ' + fname + ' ' + lname + ' \n ' + memo;

console.log(employee);
결과 :
my name is hong gil dong
나이 : 26
경력 : 2년

// es6 문자열 처리

let fname = 'hong';
let lname = 'gil dong';

// 백틱문자(`)를 사용하게 되면 공백, 줄바꿈 표시를 하지 않아도 된다.

let memo = `나이 : 26
경력 : 2년`;
let employee = `my name is ${fname} ${lname}
${memo}`;

console.log(employee);
결과 :
my name is hong gil dong
나이 : 26
경력 : 2년

5) Rest Parameter (가변 함수)

• 함수 작성시 마지막에 남는 나머지 매개변수를 받을 때 변수를 배열처럼 가변적으로 처리할 수 있는 구문으로 세개(...)의 점을 앞에 붙여서 작성하고, 항상 입력받는 함수의 마지막 변수 위치에서만 전개 가능하다. 물론 함수가 입력받는 매개 변수가 하나일 경우는 Rest Parameter만 사용해도 문제가 없다.

fucntion sum(...theArgs) {

	// 가변 변수를 합산하여 sum을 내는 구문
    return theArgs.reduce((previous, current) => {
 		return previous + current;
 	});
}

console.log(sum(1,2,3));
결과 :
6

console.log(sum(1,2,3,4));
결과 :
10

6) spread operator (전개 구문)

• 배열 혹은 문자열 등과 같이 반복 가능하게 풀어서 요소 하나 하나 전개하여 실행시키는 구문으로 Rest Parameter 와 같이 세 개(...)의 점을 사용해서 사용한다.

function sum(x, y, z) {
	return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));
결과 :
6

console.log(sum.apply(null, numbers));
결과 :
6

const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [1, 2, ...arr1, ...arr2, 9, 10];
결과 :
[1, 2, 1, 2, 3, 4, 9, 10]