[ECMAScript] ES5와 ES6의 차이점

ECMA라는 국제 기구에서 만든 표준문서인 ECMAScript의 6번째 개정판이 2015년에 등장했다.

나는 2015년 이전에 javascript를 공부했기 때문에 2009년에 배포된 ES5의 문법을 주로 사용했는데, ES16의 발표를 앞두고 있는 시점에 정리를 해보려고 한다.

 

1. 변수 선언

구분	ES5	ES6
키워드	var	let, const
특징	함수 스코프, 재선언 가능	블록 스코프, 재선언 불가(const는 재할당도 불가)

// ES5
var x = 10;
var x = 20; // 재선언 가능

// ES6
let y = 10;
let y = 20; // 오류(재선언 불가)
const z = 30;
z = 40; // 오류(재할당 불가)

 

 

2. 함수 선언 및 화살표 함수

구분	ES5	ES6
함수 선언 방식	function 키워드 사용	=>(화살표 함수) 사용
특징	this가 호출 위치에 따라 변함	this가 선언된 위치의 this를 유지(렉시컬 스코프)

// ES5
var self = this;
function print(){
	console.log(this); // 실행 컨텍스트에 따라 'this'가 달라짐
}

// ES6
const printArrow = () => {
	console.log(this); // 선언된 위치의 'this'를 유지
};

 

 

3. 문자열 템플릿 (Template Literals)

구분	ES5	ES6
문자열 연결	+ 연산자로 연결	백틱(`)과 ${} 사용

// ES5
var name = "Tom";
var message = "Hello, " + name + "!";

// ES6
const name = "Tom";
const message = `Hello, ${name}!`;

 

 

4. 객체 리터럴 개선

구분	ES5	ES6
객체 속성 선언	키와 값을 명시해야 함	변수명을 키로 자동 설정 가능
메서드 선언	function 키워드 필요	function 없이 선언 가능

// ES5
var name = "Tom";
var person = {
	name: name,
    greet: function() {
    	console.log("Hello!");
    },
};

// ES6
const name = "Tom";
const person = {
	name, // 변수명을 키로 자동 설정
    greet() {
    	console.log("Hello!");
    },
};

 

 

5. 디스트럭처링 (Destructuring)

구분	ES5	ES6
배열/객체 값 추출	var 사용, 인덱스/속성으로 접근	[ ], { } 문법 사용

// ES5
var person = { name: "Tom", age: 25 };
var name = person.name;
var age = person.age;

// ES6
const person = { name: "Tom", age: 25 };
const { name, age } = person;

 

 

6. 클래스 (Class)

구분	ES5	ES6
객체 생성 방식	생성자 함수 사용	class 키워드 사용
상속 방식	prototype 사용	extends 사용

// ES5
function Person(name, age) {
	this.name = name;
    this.age = age;
}
Person.prototype.greet = function() {
	console.log("Hello!");
};

// ES6
class Person {
	constructor(anme, age) {
    	this.name = name;
        this.age = age;
    }
    greet() {
    	console.log("Hello!");
    }
}

 

 

7. 모듈 시스템 (Module)

구분	ES5	ES6
모듈화 방식	require() (CommonJS)	import/export (ESM)

// ES5 (CommonJS)
var myModule = require("./myModule");

// ES6 (ESM)
import myModule from "./myModule";

 

 

8. Promise 및 비동기 처리

구분	ES5	ES6
비동기 처리	콜백 함수 사용	Promise 및 async/await 사용

// ES5 (콜백)
function getData(callback) {
	setTimeout(function() {
    	callback("data");
    }, 1000);
}

// ES6 (Promise)
function getData() {
	return new Promise((resolve) => {
    	setTimeout(() => resolve("data"), 1000);
    });
}

// ES6 (async/await)
async function fetchData() {
	const data = await getData();
    console.log(data);
}

 

 

9. 스프레드 연산자 (...)

구분	ES5	ES6
배열 결합/복사	concat(), slice() 사용	... 연산자로 간단하게 가능

// ES5
var arr1 = [1, 2];
var arr2 = [3, 4];
var combined = arr1.concat(arr2);

// ES6
const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2];

 

 

10. 기본 매개변수 (Default Parameters)

구분	ES5	ES6
기본값 할당	if 문 사용	= 연산자로 간단하게 가능

// ES5
function greet(name) {
	var username = name || "Guest";
    console.log("Hello, " + username);
}

// ES6
function greet(name = "Guest") {
	console.log("`Hello, ${name}`);
}