2.1 ES2015+

ES2015(ES6) 2015년에 발표된 자바스크립트 진영의 매우 큰 변화

2.1.1 const, let

기존의 자바스크립트는 변수를 var로 선언함.
es6 부터는 let과 const를 사용 할수 있음.
기존의 var는 function scope이지만 let, const 는 block scope임
const는 상수로 선언되므로 한번 선언 후, 다른 값 대입 불가
선언된 변수에 다른 값을 대입하는 경우는 의외로 적으므로, 기본적으로 변수 선언시에는 const를 사용하고, 적절한 경우에만 let을 이용하여 변수 선언을 권장.

2.1.2 템플릿 문자열

// es5

var num1 = 1;
var num2 = 2;
var result = 3;
var string1 = num1 + ' 더하기 ' + num2 + '는 \'' + result + '\'';
console.log(string1); // 1 더하기 2는 '3'

// es6

const num3 = 1;
const num4 = 2;
const result2 = 3; 
const string2 = `${num3} 더하기 ${num4}는 '${result2}'`;
console.log(string2); // 1 더하기 2는 '3'

2.1.3 객체 리터럴

// es5

var sayNode = function() {
	console.log('Node');
};
var es = 'ES';
var oldObject = {
	sayJS: function() {
		console.log('JS');
	},
    sayNode: sayNode,
};
oldObject[es + 6] = 'Fantastic';

oldObject.sayNode(); // Node
oldObject.sayJS(); // JS
console.log(oldObject.ES6); // Fantastic

// es6

const newObject = {
	sayJS() {
		console.log('JS');
	},
    sayNode,
    [es + 6]: 'Fantastic'm,
};
newObject.sayNode(); // Node
newObject.sayJS(); // JS
console.log(newObject.ES6); // Fantastic

{ name: name, age: age } // ES5
{ name, age } // ES6

2.1.4 화살표 함수(arrow function)

// es5

function add(x, y) {
	return x + y;
}

// es6

const add2 = (x, y) => x + y;

2.1.5 비구조화 할당(destructuring assignment)

const candyMachine = {
	status: {
    	name: 'node',
        count: 5,
    },
    getCandy() {
    	this.status.count--;
        return this.status.count;
    }
};

console.log(status); // status is not defined
console.log(count); // count is not defined
getCandy(); // getCandy is not defined

const { getCandy, status: { count } } = candyMachine;

console.log(status); // {name: 'node', count: 5}
console.log(count); // 5;
getCandy() // 4;

2.1.6, 2.1.7 promise, async / await

생략

es2017 노드 7.6 기준으로 비동기 구문 작성시 async 추천

2.2 프론트엔드 자바스크립트

2.2.1 AJAX

생략

http 비동기 요청 구문 작성시 axios 라이브러리 추천

2.2.2 FormData

HTML form 태그의 데이터를 동적으로 제어할 수 잇는 기능. 주로 AJAX와 함께 사용

2.2.3 encodeURLComponent, decodeURLComponent

주소에 한글이 포함 될 경우, 서버가 한글을 이해하지 못하는 경우가 있어, 한글 주소를 서버가 읽을 수 있는 문자열로 변환하고, 받는 쪽에서 문자열을 다시 한글로 변환할 때 사용

2.2.4 data attribute와 dataset

html 태그의 속성으로, data- 로 시작하는 것들을 넣어줌
html과 관련된 데이터를 저장하는 공식적인 방법(data attribute)
dataset에 데이터를 넣어도 html 태그에 반영

dataset.monthSalary = 10000 -> data-month-salary='10000'