ECMAScript란?
ECMA스크립트(ECMAScript, 또는 ES)는 자바스크립트를 표준화 하기위해 만들어진, ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말합니다.
S1, ES2, ES3, ES4
ES1(1997년 6월) — ES2(1998년 6월) — ES3(1999년 12월) — ES4(Abandoned)
처음 3판이 해마다 나왔고 4번째 판은 언어에 얽힌 정치적인 차이로 인해 버려졌다.
ES5
이전 버전에서 10년만인 2009년 12월에 발표됐으며 이후 버전과 거의 6년 차이가 난다.
ES6 / ES2015
ES6는 class, template tag, arrow function 등과 같은 새로운 개념들이 있으며, 이전 버전과 새로운 개념들이 많이 나와 개발자들에게 많은 공부가 필요했다. 아직 ES5 문법을 따르고 있다면 ES6로 변경하는 것을 추천한다.
ES6의 주된 특징
“Top 10 ES6 Features Every Busy JavaScript Developer Must Know” 글을 참고하면 쉽게 알 수 있다.
- Default Parameters
- Template Literals (string 을 합칠 때 더이상 +를 붙이지 않아도 된다!)
- Multi-line Strings
- Destructuring Assignment
- Enhanced Object Literals
- Arrow Functions
- Promises
- Block-Scoped Constructs Let and Const
- Classes
- Modules
ES7 / ES2016
2016년 6월 발표 됐으며, ES5 → ES6의 변화와는 달리 많은 변화가 있지는 않았다. ES2016에서는 오직 두가지 특징만 소개되었다.
- Array.protorype.includes()
어레이 포함 여부는 indexOf() !== -1 하던것을 includes()함수로 대체할 수 있다. 또한 NaN의 포함여부도 알 수 있게됐다.
let numbers = [1, 2, 3, 4];
if (numbers.indexOf(2) !== -1) {
console.log('Contains');
}
// ES2016
if (numbers.includes(2)) {
console.log('Contains');
}
// NaN 포함여부 확인
let numbers = [1, 2, 3, 4, NaN];
console.log(numbers.indexOf(NaN)); // prints -1
console.log(numbers.includes(NaN)); // prints true- Exponentiation oprator
: JavaScript가 이미 제공중인 +, -, * 산술 연산자 외에 추가로 ** 연산자가 추가됐다. 이 연산자는 Math.pow() 함수와 동일한 기능을 한다.
let base = 3;
let exponent = 4;
console.log(base**exponent); // 81ES8 / ES2017
2017년 6월 발표 됐으며, ES2017의 주된 특징은 아래와 같다.
- String padding
- Object.values and Object.entries
- Object.getOwnPropertyDescriptors
- Trailing commas in function parameter lists and calls
- Async functions
async — await
ES6에서 callback hell을 해결하기 위해 Promise가 도입되었다고 했는데 async-await도 Promise처럼 callback 을 해결할 뿐만 아니라 좀 더 직관적이고 단순하게 코드를 만들 수 있습니다.
ES9 / ES2018
2018년 6월 발표됐으며, ES2018의 주된 특징은 아래와 같다.
- Object Rest/Spread
- Promise finally
- Async iteration
- 정규표현식
ES6 특징
1. const and let
const는 ES6에서 변수를 선언하기 위한 새로운 키워드입니다. const는 객체와 함께 사용할 때를 제외하고는 변경 불가능한 변수 입니다. 특정 이벤트를 실행하는 버튼이 있거나 특정 요소를 정의하는데에 const를 사용합니다.
변경 불가능한 값을 정의하려면,const를 키워드를 사용하여 상수로 사용하는 것이 좋습니다.
// ES5
var button = document.getElementById("button1");
// ES6
const button = document.getElementById("button2");
let은 새로운 값을 받을 수도 있고 재할당할수도 있습니다.
즉, 변경 가능한 변수가 생성됩니다. 과거 es5이하 문법에서는 var로 선언된 변수가 ‘호이스팅(hoisting)’되는 현상이 있었습니다. es6에서는 이러한 호이스팅 현상이 일어나는 side effect를 최소화 하기위해 변경 가능한 변수에 대해 let 키워드로 정의합니다.
let name = "toktokhan";
name = "dev";
console.log(name); //dev
// name 변수를 let이 아닌 const로 정의한다면, 당연히 'name'변수에 'dev'는 출력되지 않고, 오류가 발생합니다.2. 화살표 함수
화살표 함수는 javascript에서 함수를 정의하는 function 키워드 없이 함수를 만들 수 있으며,
return 키워드 없이, 식을 계산한 값이 자동으로 반환됩니다.
() 안에 함수의 인자가 들어가고, => 오른쪽에는 결과를 반환하는 식입니다. es5와 es6의 방식의 코드를 비교하며 살펴보겠습니다.
// ---------------- ES5
function myFunc(name) {
return "TokTokHan" + name;
}
console.log(myFunc(".dev"));
// ---------------- ES6 화살표 함수
// 함수 myFunc는 화살표(=>) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환합니다.
const myFunc = (name) => {
return `TokTokHan ${name}`;
};
console.log(myFunc(".dev"));
// 'return' 키워드를 사용하지 않아도 됩니다
const myFunc = (name) => `TokTokHan ${name}`;
console.log(myFunc(".dev")); // 출력 => 안녕 영희
//인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략할 수 있습니다.
// 괄호를 생략하면 코드 길이를 더 줄일 수 있습니다.
let double = (n) => n * 2;
3. 비구조화 할당
비구조화 할당은 객체와 배열로부터 프로퍼티를 쉽게 꺼낼 수 있는 문법입니다.
(프로퍼티: 객체를 구성하는 블록들)
// ES5 문법
const toktokhanCompany = {
company: "TokTokHan",
name: ".dev",
age: 1,
};
let company = contacts.company;
let name = contacts.name;
let age = contacts.age;
console.log(company);
console.log(name);
console.log(age);const ToktokhanCompany = {
company: "TokTokHan",
name: ".dev",
age: 1,
};
let { company, name, age } = ToktokhanCompany;
console.log(company);
console.log(name);
console.log(age);비구조화 할당을 사용하면 객체를 나타내는 중괄호를 열고 그 안에 있는 프로퍼티들을 언급함으로써 간단하게 내부의 속성들을 외부로 인출하여 사용할 수 있습니다. ES5에서 같은 작업을 해야하는 경우, 사용해야하는 속성이 많을수록, 새로운 변수를 생성하고 대입하는 식의 반복작업이 계속됩니다.
ES5에서는 각 변수에 각각의 값을 할당하여 그 값을 정의했습니다. 그런데 ES6에서는 객체의 속성을 얻기 위해 값을 중괄호 안에 넣어 좀 더 간결하게 정의 할 수 있습니다. React에서 Props를 내려주거나 특정 상태를 정의할때 비구조화 할당 문법을 활용할 수 있습니다.
4. for…of 문
특정 행위를 반복시켜 결과값을 얻어야할때 반복문을 사용합니다. 반복 가능한 객체(iterable)를 for문 안에서 반복시켜 연속된 결과값을 얻습니다
const iterable = [10, 20, 30];
//es5
for (let i = 0; i < iterable.length; i++) {
console.log(value);
}
//es6
for (const value of iterable) {
console.log(value);
}5. Spread Operator
spread 연산자는 특정 객체 또는 배열의 값을 다른객체나 배열로 복제하거나 옮길때 사용합니다.
state의 특정부분만 변화시키거나, 최초의 상태를 유지하며 데이터를 추가하는 등의 경우에 사용됩니다.
const obj = {
a: 10,
b: 20,
};
const newObj = { ...obj };
console.log(newObj); // { a: 10, b: 20 }
const arr = [1, 2, 3];
const newArr = [...arr]; // [1, 2, 3]
console.log(newArr);6 Default Parameter(기본 매개변수)
//es5
var foo = (a, b, c) => {
console.log(a, b, c);
};
foo("a");
//a undefined undefined기존의 es5문법을 활용하여 작성할 경우, 파라미터 a 의 값은 들어왔지만 b 와 c 는 값을 할당받지 못해 undefined가 출력됩니다. 기본값을 설정하기 위해 파라미터가 undefined 인지 일일히 체크하고, 값을 할당해줘야 했습니다.
//es6
const foo = (a, b = "b", c = "c") => {
console.log(a, b, c);
};
foo("a");
//a b ces6문법을 사용할 경우, default parameter를 설정할 수 있게 변경되었습니다. 따라서 함수 실행 시 parameter b와 c에 대해 별도로 지정하지않을 경우, default로 설정된 “b”, “c”가 출력됩니다.
7. iterator / generator 추가
8. module import / export 추가
9. Promise 도입
자바스크립트의 비 동기 callback hell을 해결해 줄 기법이 추가 되었습니다.
콜백 지옥(callback hell)은 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 감당하기 힘들정도로 깊어지는 현상을 얘기합니다. 주로 이벤트 처리나 서버 통신과 같은 비동기적인 작업을 수행하기 위해 이런 형태가 자주 등장하는데, 가독성이 떨어지면서 코드를 수정하기 어렵습니다.
동기(synchronous)적 방식 : 현재 실행 중인 코드가 완료된 후 다음 코드를 실행
비동기(asynchronous)적 방식 : 현재 실행중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가서 실행.
