항해99 2주차 WIL (ES 란? / ES5 와 ES6의 차이)

ES 란?

 

ES 란 ECMASCRIPT의 약어로 자바스크립트 표준 규격을 의미한다.

 

 

ES5 와 ES6의 차이

 

1. var => let & const

기존의 var 키워드에 비해 블록 레벨 스코프를 가지며 재할당이 가능한 let, const 키워드가 추가되었다.

변수의 생명주기에 영향을 끼치며, 키워드를 시각적으로 보아도 변수의 변화가 생기는지 안 생기는지 알 수 있다.

 

또한, 호이스팅 문제를 해결할 수 있다는 측면에서 현재 let 과 const 를 사용하라는 의견이 빈번하다.

 

2. Arrow function 추가

화살표 함수가 추가되어 함수를 간결하게 나타낼 수 있다.

가령,

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

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

 

이렇게 괄호와 return 을 생략 가능하게 되었다.

 

기본적으로 자바스크립트는 함수 자체가 객체가 될 수 있으며, 원하는 리턴값이 결국 하나의 객체가 될 수 있기 때문에

이러한 문법이 가능하다고 본다.

 

3. Default parameter 추가

 

기존에 함수의 매개변수에 초깃값을 작성하려면 함수 내부에서 로직이 필요했으나 ES6 이후로는 Default parameter 가 추가되었다.

코드로 보면 편하다.

 

// es5

var body = function(height, weight) {
	var height = height || 184;
    var weight = weight || 84
    return weight / height
}

//es6

const body = function(height = 184, weight = 84) {
	return weight / height
}

 

 

4. Template lietral  추가

 

문자열 쪽으로 넘어가면, ES6 이후로 문자열 관리가 매우 편해졌다.

// es5
var hello = "hello"
var world = "world"
var helloWorld = hello + " " + world


// es6
const helloWorld = `${hello} ${world}`

 

 

5. Multi-line string

문자열이 라인을 넘어가게 되면 불편했으며, \n 줄바꿈과 덧셈 연산자를 사용해야했으나

현재는 백틱을 사용하게 되면 여러 라인의 문자열도 문제없이 사용 가능하다.

 

//es5

var multiline = '안녕하세요. 만나서 반갑습니다. \n' +
                '저는 이주석입니다.'
                

//es6

const multiline = `안녕하세요. 만나서 반갑습니다.
저는 이주석입니다.`

 

6. 클래스

 

자바스크립트는 프로토타입 기반의 객체지향 프로그래밍이다. 하지만 클래스 기반의 객체지향 프로그래밍이 가능해졌다.

 

7. 모듈

 

type에 모듈을 추가하고, 파일 확장자를 mjs로 변경시키며, export, import 키워드로 사용이 된다.

 

8. 디스트럭처링 할당

 

디스트럭처링이란 비구조화를 뜻하며 크게 객체나 배열에서 사용해 개별 변수에 할당하는 것을 의미힌다.

 

const arr = [1, 2, 3];
const [one, two, three] = arr;

 

9. 프로매스

 

비동기통신에 있어 기존에는 콜백 함수를 사용한 콜백 패턴을 사용하였으나 무한 콜백에 늪에 빠지게 되었다. 이를 해결하기 위해 프로미스가 도입되었고, 프로미스 후속처리 메서드를 통해 에러 처리를 효과적으로 할 수 있게 되었다.

 

10. string 메서드

 

문자열 메서드가 추가되었다. 가령, includes, startsWith, endsWith 이 있다.

 

const text = "Hello world"
 
 text.includes("Hello") // true
 text.startsWith("world") // false
 text.endsWith("world") // false