Javascript의 ES란? ES5, ES6의 차이점

ES란?

크로스 브라우징 이슈
기능이 모든 브라우저에서 동일하게 동작하지 않는 이슈
이 크로스 브라우징 이슈를 해결하기 위해 JavaScript를 표준화를 했다.

ES란 ECMA Script의 약어이며 자바스크립트의 표준 규격을 나타내는 용어이고, JavaScript를 표준화시키려고 탄생했다.

그렇다면 왜 생겨난 것인가?

JavaScript의 역사는 점점 깊어지고, 문법의 보완이 필요하면서 버전별로 문법을 확장시키고 브라우저는 특정 버전의 기능별로 지원할 수 있도록 ES가 명세를 확정해왔다.
그렇다! 그래서 ECMA Script는 JavaScript를 표준화시키고, 규격화하기 위해 만들어진 것이다. 현재는 ES10 버전까지 나왔고, 주로 쓰이는 것은 ES6인데, 6은 버전 이름이며 ES 2015라고도 한다. 2015년에 ES6버전이 최종으로 나왔기 때문에 그렇게 불린다.

ES5 와 ES6 의 차이

ES5 (2009)
배열에 forEach, map, filter, reduce, some, every와 같은 메소드들이 지원되었다.
Object에 대한 getter와 setter가 지원되었다.
Javascript strict모드가 지원되었다. (기존에 비해서 더 엄격하게 문법 검사를 진행한다.)
json 형식의 자료들을 지원한다. 과거에는 XML이라는 규격을 사용했다가, json이 인기를 끌면서 javascript 역시 지원을 하게 되었다.

ES6 (ES 2015)
이 버전은 ES6라고도 하고 ES2015라고도 하는데, 두개가 같은 버전이고 불리는 이름만 다르다. 이유는 뒤에 버전 숫자(3,4,5,6 등등)만 붙이면 갱신되는 ES의 발행의 진행이 보기 어렵다는 이유때문이다. 원래 ES는 몇년에 한 번씩 발표가 되었지만, ES5이후부터는 빠르게 변화하는 웹 생태계 때문에 1년에 한번씩은 갱신을 하자는 움직임들이 생겨나게 되었고, 이로 인해 단순한 숫자를 붙이기 보다는 갱신된 연도를 붙여서 새로운 이름을 만들자는 의견들이 생겨나게 되었다.
(그리고 이때 엄청나게 많은 추가점이 생겼다...)

Hoisting을 개선했다.
기존에는 var키워드를 사용하여 호이스팅이 빈번하게 일어났는데 이를 방지하기 위해 블록 스코프를 가진 let과 const를 추가했다.
화살표 문법을 지원한다.
장점 : 코드의 간결화, this를 바인딩하지 않는다.
iterator와 generator 추가.
module의 import/export 추가.
Promise 도입
자바스크립트는 비동기적 언어이기 때문에 callback에 대한 이슈가 많았으나 이부분을 해결할 수 있는 문법을 제공한다.

const and let
const는 ES6에서 변수를 선언하기 위한 새로운 키워드입니다. const는 객체와 함께 사용할 때를 제외하고는 변경 불가능한 변수 입니다. react에서는 특정 이벤트를 실행하는 버튼이 있거나 특정 요소를 정의하는데에 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'는 출력되지 않고, 오류가 발생합니다.

화살표함수
화살표 함수는 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;

비구조화 할당
비구조화 할당은 객체와 배열로부터 프로퍼티를 쉽게 꺼낼 수 있는 문법입니다. 이번에도 역시, es5와 es6의 방식의 코드를 비교하며 살펴보겠습니다.

// 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를 내려주거나 특정 상태를 정의할때 비구조화 할당 문법을 활용할 수 있습니다.

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);
}

Spread Operator
spread 연산자는 특정 객체 또는 배열의 값을 다른객체나 배열로 복제하거나 옮길때 사용합니다. React에서는 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);
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 c

es6문법을 사용할 경우, default parameter를 설정할 수 있게 변경되었습니다. 따라서 함수 실행 시 parameter b와 c에 대해 별도로 지정하지않을 경우, default로 설정된 “b”, “c”가 출력됩니다.