ES란? ES5의 특징, ES6의 특징

ES란?

- ECMASCRIPT의 약어를 뜻하며, 자바스크립트의 표준, 규격을 나타내는 용어입니다. 

 

ES5(2009년) ES6(2015년) 출시

 

ES5의 특징

1. 변수의 Scope

기존 자바스크립트는 { }에 상관없이 스코프가 설정됨

 

```

var sum = 0;

for(var i = 1; i <= 5; i++ ) {

  sum = sum + i;

}

 

console.log(sum); // 15

console.log(i); //6    --> rot문이 끝났는데도 접근이 가능하다!!!!

 

```

 

2. Hoisting

hoist : 끌어올리다

Hoisting이란 선언한 함수와 변수를 해석기가 가장 상단에 있는 것처럼 인식한다.

js 해석기는 코드의 라인 순서와 관계 없이 함수선언식과 변수를 위한 메모리 공간을 먼저 확보한다.

따라서, function a() 와 var 는 코드의 최상단으로 끌어 올려진 것(hoisted)처럼 보인다.

 

```

// function statement (함수선언식)

function sum() {

  return 10 + 20 ; 

}

 

// function expression (함수표현식)

var sum = function() {

  return 10 + 20;

}

```

 

ES6의 특징

1.  { }  단위로 변수의 범위가 제한됨

```

let sum = 0;

for(let i = 1; i <= 5; i++ ) {

  sum = sum + i;

}

 

console.log(sum); // 10

console.log(i); // Uncaught ReferenceError : i is not defined

```

 

2. const로 지정한 값 변경 불가능

```

const a = 10;

a  = 20; // Uncaught TypeError : Assignment to constant variable

```

 

하지만 객체나 배열의 내부는 변경할 수 있다.

```

const a = {};

a.num = 10;

console.log(a);  // {num : 10}

 

const a = [];

a.push(20);

console.log(a); // [20]

```

 

3. let 선언한 값에 대해서 다시 선언 불가능

let a = 10;

let a = 20; // Uncaught SyntaxError : identifier 'a' has already been declared

 

4. Arrow Function - 화살표 함수

함수를 정의할 때 function 이라는 키워드를 사용하지 않고 => 로 대체

흔히 사용하는 콜백 함수의 문법을 간결화

 

```

// ES5의 함수 정의 방식

var sum = function(a, b) {

  return a + b;

}

 

// ES6 함수 정의 방식

var sum = (a, b) => { return a + b;

}

 

sum(10, 20);

```

5. 향상된 객체 리터럴

5-1) 객체의 속성을 메서드로 사용할 때 function 예약어를 생략하고 생성 가능

```

// ES5의 문법

var dictionary = {

  lookup : function() {

   console.log('see-saw-seen');

  }

};

dictionary.lookup(); // 'see-saw-seen'

 

// ES6의 문법

var dictionary = {

  lookup() {

   console.log('see-saw-seen');

  }

};

dictionary.lookup(); // 'see-saw-seen'

```

 

5-2) 속성명과 값 명이 동일할 때 아래와 같이 축약가능

```

var figures = 10;

var dictionary = {

  // figures : figures,

  figures

};

```

 

6. Module

자바스크립트 모듈화 방법

자바스크림트 모듈 로더 라이브러리(AMD, Common JS) 기능을 js 언어 자체에서 지원

호출되기 전까지는 코드 실행과 동작을 하지 않는 특징이 있음.

 

```

// libs/math.js

export function sum(x,y) {

  return x + y;

}

export var pi = 3.141593;

 

// main.js

import {sum} from 'libs/math.js';

sum(1,2);

```

 

* Vue.js에서 마주칠 default export

default

한개의 파일에서 하나밖에 export 되지 않는다.

 -> default를 넣어서 다른 것들이 import 되지 않게