[Javascript] ES(ESCMAScript) / ES6와 ES5의 차이

React 강의에 들어가면서 Javascript를 본격적으로 배우면서 ES6이라는 말이 자주 등장해서 ES에 대해서 정리차 글을 써본다.

ES(ECMAScript)란?

ECMAScript 는 Ecma 인터내셔널의 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어이다. 즉, 스크립트 언어들의 표준, 규격이라고 할 수 있겠다. 크로스 브라우징 이슈(기능이 모든 브라우저에서 동일하게 동작하지 않는 이슈)를 해결하기 위해서 자바스크립트를 표준화하고자 하였고 이를 위해서 만들어졌다. 꼭 자바스크립트 외에도 어도비 플래시를 사용하는 소프트웨어에서 사용하는 액션스크립트, MS 사의 인터넷 익스플로러에 쓰이는 J스크립트 등 다른 구현체들을 포함하고 있다. ES는 웹의 클라이언트 사이드 스크립트로 많이 사용되며, Node.js를 사용한 서버 응용 프로그램 및 서비스에도 점차 많이 쓰이고 있다.

ES6과 ES5의 차이

ES6은 2015년 ES5는 2009년에 나온 표준으로 어떤 차이가 있는지 알아보자.

템플릿 리터럴

템플릿 리터럴이란 작은 따옴표, 큰 따옴표 대신 백틱(`)으로 문자열을 감싸 표현하는 기능을 말한다. 이는 문자열을 중간에 추가할 때 '+'를 사용할 필요없이 백틱 사이에 ${문자열}을 넣어 추가할 수 있다.

ES5
let age = 30;
let name = "크리스"
console.log(name + "의 나이는 " + age + "입니다.")

ES6
let age = 30;
let name = "크리스"
console.log(`${name}의 나이는 ${age}입니다.`)

화살표 함수

화살표 함수로 함수선언이 더욱 간단해졌다. 화살표 함수를 map, filter 등의 내장함수에 사용할 수 있다.

ES5
function myFunc(name) {
	return '안녕' + name;
}

console.log(myFunc('크리스'));

ES6
const myFunc = (name) => {
	return `안녕 ${name}`;
}

console.log(myFunc('크리스')); 

//return을 따로 명시하지 않아도 된다.
const myFunc = (name) => `안녕 ${name}`;

console.log(myFunc('크리스')); 

변수 선언

ES5에서는 var 키워드로 변수를 선언할 수 있었다. 이는 function 단위로 사용할 수 있으며 그 안에서 재할당 재선언이 가능했다.

ES6에서는 let, const이 등장했다. let은 동일한 이름으로 재선언할 수 없지만 값은 재할당 할 수 있다.const는 상수로, 재선언과 재할당이 불가능하다. let과 const는 Block 스코프 또는 Function 스코프 내부에 선언하면 해당 block이나 function 밖에서는 참조할 수 없다. 즉 중괄호 밖에서는 불려질 수 없다.

var은 Function 내부에 선언되면 외부에서 참조할 수 없지만 block의 경우 내부에 선언되어 있어도 외부에서 참조 할 수 있다.

변수를 재할당 할 일이 없을 경우에는 const를 사용하는 것이 좋다고 한다.

const name = "Isabel"
//name = "Isabella" const 재할당할 경우 에러 발생

let age = 30
age = 29 // let 재할당 가능
console.log(name + "의 나이는 " + age + "입니다.")

모듈

모듈은 실현가능한 특정 프로그램의 그룹으로 ES6부터는 export, import로 모듈을 관리할 수 있다.
export와 import로 재사용 가능한 구성요소를 작성할 수 있게된다. export로 모듈을 내보낼 수 있고, import로 원하는 모듈을 가져와 사용할 수 있다.
둘 이상의 모듈을 import하려는 경우 import { 임포트 하려는 모듈들 } from '임포트하려는 모듈이 들어있는 파일의 경로'의 형식으로 사용할 수 있다.

import{ detail, post, update } from './modules'

클래스

ES5에서는 클래스라는 키워드가 없었다. ES6에서부터 생겨 클래스를 생성할 수 있게 되었다.

class myFriends {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}
  	function friendList(){
    	console.log(this.name + " : " + this.age)
    }
}

const friendA = new myFriends('크리스', 30);
friendA.friendList(); // 크리스 : 30

클래스 상속

extends키워드로 클래스를 상속받아올 수 있고, super키워드로 부모클래스의 요소에 접근할 수 있다. 상속받아온 클래스를 자식클래스에서 super키워드로 접근하여 overriding 재정의할 수 있다.

class classFriends extends myFriends {
	constructor(name, age, class) {
		super(name) = name;
		super(age) = age;
      	this.class = class;
	}
  	function introFrnd(){
    	console.log(`${super.name}은 ${super.age}살이고, ${this.class}반입니다. `)
    }
}

const friendB = new myFriends('크리스티나', 33, '심화반');
friendB.introFrnd(); 

Javascript를 공부할 때에 ES5와 ES6의 차이를 잘 알아야 더 그 기능을 집중적으로 효과적으로 사용할 수 있다고 생각하여 정리하게 되었다. 이렇게 정리를 한번 함으로써 새로운 기능에 대해서는 가볍게 알아볼 수 있었다. 아직 화살표 함수 같은 것은 익숙치가 않은데 이렇게 한 번 더 봄으로써 친해지는 데에 한걸음 더 나아갔다고 생각한다. 한걸음 더!