ECMAScript2015 간단 정리

변수 정의 방식

기존 : 변수 선언은 'var'를 사용

// 기존 변수 정의
var foo = 0;

function func () {
	if (true) {
    	var foobar = 'foobar';
     }
     
     console.log(foobar);	//foobar
 }
 
 func();

ES2015 : let/const 사용

// 새로운 변수 정의
let bar = 1;
const baz = 2;

function func () {
	if (true) {
    	let foobar1 = 'foobar1';
        const foobar2 = 'foobar2';
    }
    
    console.log(foobar1);	//ReferenceError
    console.log(foobar2);	//ReferenceError
}

func();

Class 구문

기존

function Person (name) {
	this.name = name;
 }
 
 var tom = new Person('tom');
 console.log(tom.name);	//tom

ES2015

class Person {
	//생성자
    constructor (name) {
    	this.name = name;
    }
}

const jane = new Person('jane');

extends 키워드를 사용하여 클래스 상속

class Person {
	constructor (name) {
    	this.name = name;
    }
}

class Student extends Person {
	constructor (name, age) {
    	this.age = age;
    	super(name);
    }
}

const tim = new Student('tim', 20);

템플릿 리터럴

기존 : 문자열과 변수를 하나로 출력하기 위해서는 연산자 '+'를 사용해서 문자열과 변수를 합쳐서 사용

var name = 'Tom';
var message = 'Hello, ' + name + '!';

console.log(message);	//Hello, Tom!

ES2015 : 역따옴표(백틱)을 사용하여 변수와 문자열을 혼합하여 사용하며, 줄바꿈도 가능

const name = 'Jane';
const message = `Hello, ${name}!`;

console.log(message);	//Hello, Jane!

//줄을 바꿔서 사용
const message1 = `
Hello!
My name is ${name}.
`;

console.log(message1);
//Hello!
//My name is Jane

구조분해할당

배열이나 객체에서 특정 데이터를 뽑아내어 각각 별도의 변수에 할당할 수 있다.

let a, b;
[a, b] = [1, 2];
console.log(a);	//1
console.log(b);	//2

const list = {
	foo: 1,
    bar: 2,
    baz: 3
}

const { foo, bar, baz } = list;
console.log(foo);	//1
console.log(bar);	//2
console.log(baz);	//3