ECMAScript 5와 ECMAScript 2015 비교

ECMAScript는 JavaScript 언어의 표준 사양입니다. ECMAScript 5 (ES5)와 ECMAScript 2015 (ES6, ES2015라고도 함)는 ECMAScript의 서로 다른 버전으로, 여러 가지 차이점이 있습니다. 주요 차이점은 다음과 같습니다:

1. let과 const 키워드:
ES5에서는 변수를 선언할 때 `var` 키워드를 사용합니다. ES6에서는 `let`과 `const` 키워드가 도입되어 블록 범위의 변수와 상수 선언을 지원합니다.

ES5 예제:

function example() {
  var x = 10;

  if (true) {
    var x = 20; // 이 변수는 함수 범위로 호이스팅됩니다.
    console.log(x); // 출력: 20
  }

  console.log(x); // 출력: 20
}

ES6 예제:

function example() {
  let x = 10;

  if (true) {
    let x = 20; // 이 변수는 블록 범위에 있습니다.
    console.log(x); // 출력: 20
  }

  console.log(x); // 출력: 10
}

 

2. 화살표 함수 (Arrow functions):
ES6에서는 화살표 함수가 도입되어 간결한 함수 표현식과 `this` 바인딩에 대한 명확한 규칙을 제공합니다.

ES5 예제:

var numbers = [1, 2, 3, 4, 5];
var doubled = numbers.map(function (number) {
  return number * 2;
});

ES6 예제:

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);

3. 클래스 (Classes):
ES6에서는 클래스를 도입하여 객체 지향 프로그래밍의 문법을 더 명확하게 지원합니다.

ES5 예제:

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function () {
  console.log('Hello, ' + this.name + '!');
};

var person = new Person('Alice');
person.sayHello(); // 출력: Hello, Alice!

ES6 예제:

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

  sayHello() {
    console.log(`Hello, ${this.name}!`);
  }
}

const person = new Person('Alice');
person.sayHello(); // 출력: Hello, Alice!

4. 모듈 (Modules):
ES6에서는 모듈을 도입하여 코드를 재사용하고 관리하기 쉽게 만들어 줍니다. `import`와 `export` 키워드를 사용해 코드를 모듈로 분리하고 불러올 수 있습니다.

ES6 예제 (math.js):

export function add(a, b) {
  return a + b;
}

ES6 예제 (app.js):

import { add } from './math.js';

console.log(add(1, 2)); // 출력: 3

5. 템플릿 리터럴 (Template literals):
ES6에서는 템플릿 리터럴이 도입되어 문자열을 더 쉽게 처리할 수 있게 해줍니다. 백틱(``)을 사용하여 문자열을 작성하며, `${expression}`을 사용해 변수나 수식을 문자열에 삽입할 수 있습니다.

ES5 예제:

var name = "Alice";
var greeting = "Hello, " + name + "!";
console.log(greeting); // 출력: Hello, Alice!

ES6 예제:

const name = "Alice";
const greeting = `Hello, ${name}!`;
console.log(greeting); // 출력: Hello, Alice!

 

6. 기본 매개변수 (Default parameters):
ES6에서는 기본 매개변수를 도입하여 함수의 인자에 기본값을 설정할 수 있습니다.

ES5 예제:

function multiply(a, b) {
  b = typeof b !== 'undefined' ? b : 1;
  return a * b;
}

console.log(multiply(5, 2)); // 출력: 10
console.log(multiply(5)); // 출력: 5

ES6 예제:

function multiply(a, b = 1) {
  return a * b;
}

console.log(multiply(5, 2)); // 출력: 10
console.log(multiply(5)); // 출력: 5

 

이러한 차이점 외에도 ES6에는 추가적인 기능들이 있습니다. 예를 들어, 구조 분해 할당 (destructuring assignment), 프로미스 (Promises), 이터레이터와 제너레이터 (iterators and generators), Set과 Map 등의 새로운 자료 구조 등이 있습니다. 이러한 기능들을 사용하면 코드를 더 간결하게 작성하고 읽기 쉽게 만들어줍니다.