[JavaScript] ES5와 ES6 비교

ES5? ES6?

ES5와 ES6에 ES는 ECMAScript의 약자이며, 자바스크립트 언어가 준수해야 하는 규칙 및 세부 사항, 지침이라고 할 수 있다. 또한 ES 뒤에 붙은 숫자는 각 ES의 버전을 의미한다.

[Javascript] ECMAScript란? JavaScript란?

 

1. let, const 키워드 추가

블록 레벨 스코프(block-leverl scope)에서 같은 변수명으로 재선언이 불가하며, 재할당만 가능한 let 변수 선언 방식과 상수 선언 방식인 const 키워드가 추가되었다. ES5에 있던 var보다 가독성 및 유지보수에 용이한 코드를 작성할 수 있게 되었다.

[Javascript] var, let, const의 차이점 (비교)

 

2. 템플릿 리터럴

ES6 이전에는 변수에 담긴 값을 문자열로 표현할 때, 큰 따옴표(")나 작은따옴표(')와 함께 플러스(+)를 이용해서 표현해야 하는 번거로움이 있었으나 ES6부터는 하기와 같이 템플릿 리터럴이 새롭게 나와 이를 사용하면 플레이스 홀더(${variable})를 이용하여 백틱(") 내부에 표현식을 넣어 사용할 수 있게 되어 문자열 표현법이 훨씬 간단해졌다.

// ES5
var str1 = "ES5";
var str2 = "ES6";
console.log( st1 + "와 " + str2 + "를 비교해보자!"); // ES5와 ES6를 비교해보자!

//ES6
let str1 = "ES5";
let str2 = "ES6";
consol.log('${str1}와 ${str2}를 비교해보자!')// ES5와 ES6를 비교해보자!

 

3. 화살표 함수

ES6부터 함수 표현식을 화살표 함수로 표현할 수 있게 되어 코드가 간결하게 표현되어 가독성 및 유지보수성이 올라갔다고 할 수 있으며, 화살표 함수에서는 매개변수가 하나일 때 괄호를 생략할 수 있고, return과 {}가 생략될 수 있다. (단, 같이 생략되어야 한다.)

//ES5
funtion sumFn(a, b){
	return a + b;
}

//ES6
//함수 표현식 - 화살표 함수
const sumFn = (a + b) => {
	return a + b;
}
//함수 표현식 - 화살표 함수(생략)
const sumFn = (a + b) => a + b;

 

4. 구조 분해 할당

구조 분해 할당은 펼치다라는 뜻으로 배열이나 객체의 속성을 해체하여, 개별 값을 변수에 할당 수 있게 하는 JavaScript 표현식이다.

//배열
const arr = ["one","two","three"];

const [x, y, z] = arr;
console.log(x); //"one"
console.log(y); //"two"
console.log(z); //"three"

//객체
const a, b;
({a, b} = {a:1, b:2});

console.log(a); //1
console.log(b); //2
}

 

5. promise(프로미스)

비동기 통신에 있어 기존 자바스크립트에서는  콜백 함수를 사용한, 콜백 패턴을 사용하여, 결과적으로 콜백헬을 발생시켰다. 이를 해결하기 위해 promise가 도입되었고, promise 후속처리 메서드를 이용해 에러 처리를 효과적으로 할 수 있게 되었다.

 

6. class

ES5에서는 class라는 키워드 대신 프로토타입을 통해 class와 같이 구현이 가능했다.

//ES5

var Sum = funtion(a, b){
this a = a;
this.b = b;
};

Sum.prototype.calc = funtion(){
 return this.a + "+" + this.b + "=" + (this.a + this.b);
};

var num = new Sum(5, 10);
console.log(num.calc()); // 5 + 10 = 15

ES6에서는 class라는 키워드가 추가되어 사용해서 선언할 수 있게 되었다.

//ES6

class Sum {
 constructor(a, b){
 this.a = a;
 this.b = b;
 }
 calc(){
 return this.a + "+" + this.b + "=" + (this.a + this.b);
 }
}

let num = new Sum(5, 10);
console.log(num.calc());5 + 10 = 15

 

7. String Method(includes, startsWith, endsWith)

ES6에 문자열 메서드가 추가되었는데,  해당 문자열에 포함이 되어 있는지(includes)?, 시작하는지(startsWith)?, 끝나는지(endWith)? 메서드로 true/false 값을 리턴한다. 이는 문자열을 검증하는 로직에 이용하면 유용할것 같다.

const str = "ES5와 ES6를 비교해보자";
//includes
str.includes("ES"); //true
str.includes("CS"); //false

//startWith
str.startWith("ES5"); //true
str.startWith("ES6"); //false

//endWith
str.endWith("보자"); //true
str.endWith("보장"); //false

 

8. Multi-line String (여러 줄 문자열)

ES6이전에는 문자열 개행을 시키기 위해서는 '\n'과 덧셈 연산자를 사용했어야 했으나, ES6 이후에는 백팅(')을 사용하여 개행을 할 수 있게 되면서 여러 줄의 문자열 관리도 편해진 것 같다.

//ES5
var str = 'A B C D E F G H I J K L M N O P Q R S T U V W X Y Z \n' +
'a b c d e f g h i j k l m n o p q r s t u v w x y z \n '

//ES6
let str = 'A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 
a b c d e f g h i j k l m n o p q r s t u v w x y z '

 

9. Default Parameter (기본값 매개변수)

기본값 함수 매개변수를 사용하면 값이 없거나 undefind가 전달될 경우, 매개 변수의 값을 기본(default 값)을 넣어 줄 수 있다.

funtion sumFn(a, b = 1){
	return a + b;
}

//a,b 매개변수가 있을 경우
console.log(sumFn(5,2)); //7

//a의 매개변수만 있는 경우 (b는 default값으로 초기화됨)
console.log(sumFn(5)); //6

기본값에는 수학연산 또는 다른 매개변수와의 연산,  심지어 함수 입력까지도 기본값으로 설정 가능하다.

//기본값 수학 연산
funtion sumFn(a, b = 2 * 5){
retrun (a + b);
}

console.log(sumFn(5,2)); //7
console.log(sumFn(5)); //15

//기본값 다른 매개변수와 연산
funtion sumFn(a, b = a * 5){
retrun (a + b);
}

console.log(sumFn(5,2)); //7
console.log(sumFn(5)); //30

//기본값 함수 입력
funtion paramFn(){
	return 5;
}

funtion sumFn(a, b = paramFn()){
return a + b;
}

console.log(5,2); //7
console.log(5); //10

 

10. Module (모듈)

모듈은 재사용을 하기 위한 코드 조각이며, 코드의 세부사항은 캡슐화 시키고, API 부분만 외부에 노출시킨 코드다.

하기와 같이 type에 module을 추가해야 자바스크립트 파일이 모듈로서 동작하게 된다.

(모듈임을 구분하기 위해 확장자를 js를 mjs로 사용하기도 한다.)

<script type="module" src="commen.js"></script>

위의 코드를 추가하게 되면 이제 브라우저가 모듈로 인식해 import와 export 키워드를 통해 사용할 수 있으며, 모듈은 모듈 스코프를 가진다.

 

모듈 외부에서 사용할 수 있도록 공개된 변수나 함수 앞에 export 키워드를 붙이고, 다른 모듈에서 import 키워드를 이용해서 불러올 수 있다.

 

- export

//common.js

//export
export const arrs = [10, 20, 30, 40];

export funtion getName(){
	//do somthing
}

또는 기분 문법으로 구현된 변수나 함수를 뒷 부분에 다음과 같이 추가할 수도 있다.

//common.js

const arrs = [10, 20, 30, 40];
funtion reFresh(){
	//do something...
}

export {arrs, reFresh};

//alias 지정도 가능함
export {arrs, reFresh as refresh};

 

- import

//main.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Module Test</title>
</head>
<body>
    Hello
    <script type="module">
        import { arrs, reFresh } from '/static/js/common.js';
        //import { reFresh } from '/static/js/common.js';
        //import { arrs } from '/static/js/common.js';

        window.onload = function() {
            console.log("window.onload()");
            reFresh();
        }
    </script>
</body>
</html>