[FE] 자바스크립트 ES5와 ES6+의 차이

Intro

Javascript를 배운 지 오래 되지 않았기에, 현재 ES6+ 문법을 활용해 코딩을 하고 있는데, 구글링을 하다보면 심심찮게 var 등 ES5 문법으로 사용된 것들을 볼 수 있다. 어디까지가 ES5이고 어디까지가 ES6인지 간략하게 정리해본다.

ES?

ES는 ESMAScript의 약어로, 자바스크립트(JavaScript)의 표준화된 버전을 정의하기 위한 규격이다. 뒤에 붙는 5, 6는 버전을 뜻하는데
ES5는 2009년, ES6는 2015년에 출시되었다. ES6이후에는 2016년 ES7, 2017년 ES8, 2018년 ES9, 2019년 ES10까지 출시되었고 ES6에서 한 번 크게 바뀌고 ES7부터는 조금씩 바뀌어서 ES6+를 모던 자바스크립트라 부르기도 한다.

ES5 -> ES6+의 차이점

ES6

주된 변화는 다음과 같다.

1. 변수 선언 방식:
   ES5: var 키워드를 사용하여 변수를 선언한다.
   ES6: let과 const 키워드를 도입하여 블록 스코프 변수를 선언한다. let은 재할당이 가능한 변수를 선언하고, const는 재할당이 불가능한 상수를 선언한다.

2. 화살표 함수 (Arrow Functions):
   ES5: function 키워드를 사용하여 함수를 선언.
   ES6: 화살표 함수 문법을 도입하여 간결한 함수 선언을 가능하게 한다. 예를 들어, (x, y) => x + y와 같이 사용.

3. 모듈 (Modules):
   ES5: 모듈 시스템이 기본적으로 지원되지 않아서 외부 라이브러리나 스크립트를 로드하기 위해 전역 변수를 사용하는 등의 방법을 사용해야 한다.

// math.js 
var math = (function() {
  var exports = {};

  exports.add = function(a, b) {
    return a + b;
  };

  exports.subtract = function(a, b) {
    return a - b;
  };

  return exports;
})();

// main.js
<script src="math.js"></script>
<script>
  console.log(math.add(5, 2)); // 출력: 7
  console.log(math.subtract(10, 4)); // 출력: 6
</script>

ES6: import와 export 키워드를 사용하여 모듈 시스템을 도입하여 모듈 간의 코드 재사용 및 종속성 관리를 가능하게 해준다.

// math.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// main.js
import { add, subtract } from './math.js';

console.log(add(5, 2)); // 출력: 7
console.log(subtract(10, 4)); // 출력: 6

4. 디스트럭처링 (Destructuring):
   ES5: 배열이나 객체에서 필요한 값들을 개별적으로 추출하기 위해 반복문 등을 사용해야 했음.
   ES6: 디스트럭처링 문법을 도입하여 배열이나 객체에서 원하는 값을 쉽게 추출할 수 있음.

// 배열 예시
const numbers = [1, 2, 3, 4, 5];

// 기존 방식
const a = numbers[0];
const b = numbers[1];
const c = numbers[2];

console.log(a, b, c); // 출력: 1 2 3

// 디스트럭처링 방식
const [x, y, z] = numbers;

console.log(x, y, z); // 출력: 1 2 3

// 객체 예시
const person = {
  name: 'John',
  age: 30,
  address: '123 Main St'
};

// 기존 방식
const name = person.name;
const age = person.age;
const address = person.address;

console.log(name, age, address); // 출력: John 30 123 Main St

// 디스트럭처링 방식
const { name, age, address } = person;

console.log(name, age, address); // 출력: John 30 123 Main St

5.프로미스 (Promises):
ES5: 비동기 작업을 다루기 위해 콜백 패턴을 사용. 콜백 헬(callback hell)이라고 불리는 가독성과 유지보수성이 떨어지는 코드 구조의 발생 가능.
ES6: Promise 객체를 도입하여 비동기 작업의 성공, 실패, 완료 등을 다룰 수 있게 됨.

이 외에도 백틱으로 간편하게 사용 가능한 Template literal이나 Multi-line String, 간편한 String 메서드들(includes, startsWith, endsWith), for...of문 등이 ES6에서 추가되었다.

ES8

ES7부터는 큰 변화가 없지만 2017년 발표된 ES8에서는 async-await 이라는 비동기 처리를 위한 구문이 추가되었다.