[TIL] JavaScript의 ES란? - ES5/ES6 문법 차이
ES란?
ES는 ECMAScript의 약자이다.
ECMAScript 는 Ecma 인터내셔널의 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어이다.
넷스케이프 커뮤니케이션즈로 부터 Javascript가 개발되고 나서 MS로 부터 JScript 개발되었다.
두 언어는 호환되지 않는 경우가 있어, 기능이 모든 브라우저에서 동일하게 동작하지 않는 '크로스 브라우징 이슈' 가 나타났다.
이 크로스 브라우징 이슈를 해결하기 위해 Javascript를 표준화 한 것이 ECMAScript이다.
ES5와 ES6의 차이
1)템플릿 리터럴
ES6, 템플릿 리터럴의 등장으로 문자열 표현이 간단해 졌다.
템플릿 리터럴이란 ' " 대신 `(백틱)으로 문자열을 감싸서 표현하는 기능이다.
이를 사용하면 플레이스 홀더 (${variable})를 사용하여 백틱 내부에 문자열과 함께 표현식을 넣을 수 있다.
-ES5
var name = "공쥬";
var age = 25;
console.log("저의 이름은 " + name + "이고, 나이는 " + age + "살 입니다.");-ES6
var name = "공쥬";
var age = 25;
console.log(`저의 이름은 ${name}이고, 나이는 ${age}살 입니다.`);
2)화살표 함수
ES6부터 화살표 함수가 등장했고, 표현식이 간단해졌다.
-ES5
function plus (a,b) { return a+b; }
var plus = function(a,b) { return a+b; }
-ES6
let plus = (a,b) => {return a+b}
3)this
ES5의 경우 객체 내에 있는 메소드 실행 시, this는 메서드가 선언된 해당 객체를 가리킨다.
하지만 객체 안에서 선언된 함수의 this는 해당 객체가 아닌 window를 바라보기 때문에 함수 안에서 this.name , this.age를 하여도 값이 나오지 않는다.
이러한 경우 해결방안으로 innerInfo.call(this) 를 통해 this 를 바인딩 시켜주거나 this를 해당 변수에 담아서 var self = this 와 같은 방식으로 접근하면 사용하면 된다.
-ES5
var thisTest = {
name : "공공쥬",
age : 25,
info : function() {
console.log(this)
console.log(this.name , this.age)
function innerInfo() {
console.log(this)
return this.name + ":" + this.age
}
return innerInfo()
}
}
// 실행결과
// {name: "공공쥬", age: 25, info: ƒ}
// 공공쥬 25
// Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
// ":undefined"
-ES6
ES6에서의 this 는 자신을 둘러싸고 있는 this를 바라보기 때문에 따로 바인딩이나 변수에 담을 필요 없다.
let thisTest = {
name : "공공쥬",
age : 25,
info() {
console.log(this)
console.log(this.name , this.age)
innerInfo = () => {
console.log(this)
return this.name + ":" + this.age
}
return innerInfo()
}
}
// 실행결과
// {name: "공공쥬", age: 25, info: ƒ}
// 공공쥬 25
// {name: "공공쥬", age: 25, info: ƒ}
// "공공쥬:25"
3)변수 선언
-ES5
ES5에서 변수 선언은 var로만 가능했다.
var은 재할당과 재선언이 자유롭다.
-ES6
ES6에서 let 과 const 가 추가 됐다.
- let : 재선언X, 재할당O
- const : 재선언X, 재할당X
그리고, let과 const는 중괄호로 묶인 부분 내부에 선언된 let, const를 중괄호 외부에서 참조할 수 없다.
(밖에서 안으로는 참조 가능)-
var는 Function 스코프는 내부에 선언된 var를 외부에서 참조할 수 없지만
블록 스코프에선 내부에 선언되어 있어도 외부에서 참조 가능하다.
4)모듈
-ES5
ES5 이전에는 각 기능별로 JS 파일을 나누고 개발 및 관리하는 것이 불가능했다.
ES5 에선 require 를 통해 모듈화를 할 수 있었다.
-ES6
ES6 부터는 import/export 로 모듈을 관리할 수 있다.
5)클래스
-ES5
ES5에선 class라는 키워드는 없었다. (프로토 타입 통해 실현함)
-ES6
ES6에서는 class 키워드를 사용해서 선언할 수 있다.
class Add {
constructor(arg1, arg2) {
this.arg1 = arg1;
this.arg2 = arg2;
}
calc() {
return this.arg1 + "+" + this.arg2 + "=" + (this.arg1 + this.arg2);
}
}
var num = new Add(5, 8);
console.log(num.calc()); // 5 + 8 = 13
또한 ES6에서는 super를 통한 상속과 오버라이딩이 가능하다
class AddSquare extends Add {
constructor(arg1, arg2) {
super(arg1, arg2);
}
calc() {
super.calc();
}
calcSquare() {
this.pow = Math.pow(this.arg1 + this.arg2, 2);
return "(" + this.arg1 + "+" + this.arg2 + ") ^ 2 =" + this.pow;
}
}
var numSquare = new AddSquare(5, 8);
console.log(numSquare.calc()); // 5 + 8 = 13
console.log(numSquare.calcSquare()); // (5 + 8) ^ 2 = 169(ES5에서는 아래와 같다)
var AddSquare = function(arg1, arg2) {
Add.call(this, arg1, arg2);
};
Object.assign(AddSquare.prototype, Add.prototype);
AddSquare.prototype = {
calc: function() {
// 메소드는 생략될 수 없습니다.
Add.prototype.calc.call(this);
},
calcSquare: function() {
this.pow = Math.pow(this.arg1 + this.arg2, 2);
return "(" + this.arg1 + "+" + this.arg2 + ")^2=" + this.pow;
}
};
var numSquare = new AddSquare(5, 8);
console.log(numSquare.calc()); // 5 + 8 = 13
console.log(numSquare.calcSquare()); // (5 + 8) ^ 2 =169