자바스크립트 - ES ECMAScript

ES는  ECMA International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다.

ECMAScript 버전은 ES1, ES2, ES3, ES5 및 ES6으로 축약이 되었으며,

2016년부터 새 버전의 이름은 연도별로 지정된다고 한다. (ECMAScript 2016/2017/2018).

 

 

 

 

 

 

 

JavaScript의 ES란?, ES5/ES6 문법 차이

 

- Javascript 변수(const, let)

 

ES5와 대비하여서 ES6에서는 ‘const’, ‘let’ 변수가 추가되었으며, var 변수보다는 const, let 변수를 '지향'한다.

 

변수	호이스팅 문제	변수 재할당 가능여부	스코프 영역
var	발생	가능	Function Scope (함수내에서 유효함)
const	미 발생	불가능	Block Scope(중괄호 블록 내에서 유효함)
let	미 발생	가능	Block Scope(중괄호 블록 내에서 유효함)

권장 사항으로는 const, let의 변수를 사용하기를 권장한다.
기존의 ES5내에서 사용하는 var의 변수를 사용하게 되면 '변수 호이 스팅'이 발생할 수 있기에, 이를 방지하기 위해서 좀 더 명시적인 변수 선언을 사용하기를 권장한다.

ES5

ES5에선 var 밖에 존재하지 않았다. var 는 변수를 선언할 때 사용되는 키워드로,
재할당과 재선언에 굉장히 자유롭다.

copy javascriptvar x = 10;
x = 15;
console.log(x); //15
var x = 12;
console.log(x); //12

ES6

ES6부터 let, const가 추가되었다.

let은 한번 선언된 변수에 동일한 이름으로 선언할 수 없다.
하지만, 값은 재할당 할 수 있다.

copy javascriptlet x = 10;
x = 15;
console.log(x); //15
let x = 12; // Identifier 'x' has already been declared

const는 한번 초기화된 변수에 재할당/재선언할 수 없다.

copy cppconst x = 10;
console.log(x); // 10;
x = 15; // TypeError: Assignment to constant variable.

그리고, let, const는 블록 스코프 또는 Function 스코프 내부에 선언되면 해당 스코프 밖에서 안에 있는 변수를 참조할 수 없다.

쉽게 설명하자면, 중괄호로 묶인 부분 내부에 선언된 let, const를 중괄호 외부에서 참조할 수 없다는 것이다.

copy javascriptif (true) {
  var i = 0;
}
console.log(i); // 0
if (true) {
  let j = 10;
}
console.log(j); // ReferenceError
if (true) {
  const k = 100;
}
console.log(k); // ReferenceError

밖에서 안에 있는 const, let은 참조할 수는 있다.

 

 

 

 

- 템플릿 리터럴

 

 ES6에서 템플릿 리터럴이라고 불리는 새로운 문자열 표기법이 생겼다. 이전에는 문자열을 표현하기 위해선 ' 또는 "를 사용했는데, 템플릿 리터럴은 백틱을 사용한다. 템플릿 리터럴은 ' 와"를 혼용해서 사용할 수 있다. 그리고 이전에는 줄 바꿈을 표현하기 위해선 \n을 넣어줘야 인식을 했지만 템플릿 리터럴은 있는 그대로 인식한다.

 

ES5

copy javascriptvar name = "현진";
var age = 25;
console.log("저의 이름은 " + name + "이고, 나이는 " + age + "살 입니다.");

ES6

copy javascriptvar name = "현진";
var age = 25;
console.log(`저의 이름은 ${name}이고, 나이는 ${age}살 입니다.`);

 

 

---

 

 

- 화살표 함수

 

화살표 함수 표현은 function 표현에 비해 구문이 짧고 자신의 this, arguments을 바인딩하지 않는다. Arrow Function이 등장하기 전까지 모든 함수는 그 함수 자신의 this 값을 꼭 정의했다. 이는 객체 지향 스타일로 프로그래밍할 때 별로 좋지 않다.

 

함수의 종류	소스의 간결화	return / 중괄호({}) 생략여부	this의 사용여부
function(ES5)	상대적으로 간결하지 않음	사용	사용
Arrow Functions(ES6)	상대적으로 간결하다	미사용	미사용

 

 

ES5

var x = function(x, y) {
   return x * y;
}

 

ES6

const x = (x, y) => x * y;

 

 

 

 

 

---

이 외에도 차이점이나 특징이 있는데, 그 부분은 아래 사이트 참고하면 될 것 같다!

 

 

 

참고한 사이트 

 

[JS] ES5 / ES6(ECMAScript 2015) 이해하기

 

 

[JavaScript] ECMAScript란? ES5와 ES6의 차이