[WIL] JavaScript의 ES란? ES5/ES6 문법 차이

JavaScript의 ES

ES란 ECMAScript의 약어로 자바스크립트의 표준 규격을 의미하며 프로그래밍 언어의 값, 타입, 객체와 프로퍼티, 함수 등 핵심 문법을 규정한다.

각 브라우저 제조사는 ECMAScript 사양을 준수해서 브라우저에 내장되는 자바스크립트 엔진을 구현한다.

 

자바스크립트는 ECMAScript를 포함하여 브라우저가 별도로 지원하는 클라이언트 사이드 Web API, DOM, Canvas, XMLHttpRequest, fetch 등을 포함한 포괄적인 개념이다.

 

ES5 / ES6 문법

변수 선언

console.log(a) // undefined
console.log(b) // Error
console.log(c) // Error

var a = 0;
let b = 1;
const c = 2;

ES5 및 이전 버전에서는 변수 선언을 위해 var만 사용할 수 있었다. 이러한 기존의 var 키워드는 함수 레벨 스코프를 가지며 재할당이 가능하거나 호이스팅이 되는 등 문제가 많았다.

ES6 에 들어서면서 let, const 키워드가 추가되었으며 키워드만 보아도 변수의 변화가 생기는지 아닌지 알 수 있게 되었다.

 

화살표 함수

// ES5
function sum(a, b) {
	return a + b;
}

// ES6
const sum = (a, b) = > a + b;

ES5에는 없던 화살표 함수가 추가되어 함수를 좀 더 간결하게 나타낼 수 있게 되었다. 매개변수가 하나일 때는 괄호를 생략할 수 있고 return과 중괄호도 생략할 수 있다. 덕분에 가독성 및 유지 보수가 수월해졌다.

단, 화살표 함수와 기존 함수는 this 바인딩의 차이가 있다.

 

클래스 문법

// ES5
var Person = (function () {
	// Constructor  
	function Person(name) {
    	this._name = name;  
    }   
    // method  
    Person.prototype.sayHi = function () {
    	console.log('Hi! ' + this._name);  
    };   
    
    // return constructor
    return Person;
}()); 
    
var me = new Person('Lee');
me.sayHi(); // Hi! Lee.

console.log(me instanceof Person); // true


// ES6
class Person {
	constructor(name) {
    	this._name = name;  
    }   
    
    sayHi() {
		console.log(`Hi! ${this._name}`);  
    }
} 
const me = new Person('Lee');
me.sayHi(); // Hi! Lee 

console.log(me instanceof Person); // true

문법적 설탕이라고도 불리는 자바스크립트의 Class 문법은 ES6 부터 생겼다.

기존 자바스크립트에서 객체 지향 프로그래밍을 할 수 있었으나 많은 사람들이 protoype을 어려워했기 때문에 객체 지향 프로그래밍 언어에서 사용하는 것과 유사하게 class를 사용할 수 있는 문법을 제공한다.

 

구조분해 할당

배열의 비구조화 할당이라고도 하며 ES6 부터 생겼다.

배열이나 객체의 속성 혹은 값을 해체하여 그 값을 변수에 각각 담아서 사용하는 자바스크립트의 표현식이다.

 

// ES5
const animalList = ['CAT', 'DOG', 'TIGER'];

// 각각 변수담기
const cat = animalList[0];
const dog = animalList[1];
const tiger = animalList[2];

// 각각호출
console.log(cat);
console.log(dog);
console.log(tiger);

// ES6
// 비구조할당방식을 이용하면 4줄을 1줄 코드로 변경 가능
const [cat1, dog1, tiger1] = ['CAT', 'DOG', 'TIGER'];
console.log(cat1);
console.log(dog1);
console.log(tiger1);