ES6 간단 개념

ES6란?

• ECMAScript 2015와 동일한 용어
• 2015년은 ES5(2009년) 이래로 진행한 첫 메이저 업데이트가 승인된 해
• 최신 Front-End Framework인 React, Vue, Angular에서 권고하는 언어 형식
• ES5에 비해 문법이 간결해져서 익숙해지면 코딩을 훨씬 편하게 할 수 있음
•  

Babel

• 구 버전 브라우저 중에서는 ES6의 기능을 지원하지 않는 브라우저가 있으므로 transpiling이 필요
• ES6의 문법을 각 브라우저의 호환 가능한 ES5로 변환하는 컴파일러

const & let

• 블록 단위 {}로 변수의 범위가 제한되었음
• const : 한번 선언한 값에 대해서 변경할 수 없음(상수 개념), but 객체나 배열의 내부는 변경할 수 있음
• let : 한번 선언한 값에 대해서 다시 선언할 수 없음

const a = 10;
a = 20; //error

let a = 10; 
let a = 20; //error
a = 30 //가능

예제

function f(){
    let x;
    {
        const x = "sneaky"; //새로운 블록안에 새로운 x의 스코프가 생김
        x = "foo"; //위에 이미 const로 x를 선언했으므로 다시 값을 대입하면 에러 발생
    }
    //이전 블록 범위로 돌아왔기 때문에 let x에 해당하는 메모리에 값을 대입
    x = "bar";
    let x = "inner"//error
}

ES5 특징

변수의 scope

• ES5는 {}에 상관없이 스코프가 설정됨

var sum = 0;
for(var i = 1; i <= 5; i++){ //var가 global scope로 잡힘 
    sum = sum + i;
}
console.log(sum); //15
console.log(i); // 6

Hoisting

• Hoisting이란 선언한 함수와 변수를 해석기가 가장 상단에 있는 것처럼 인식한다.
• js 해석기는 코드의 라인 순서와 관계 없이 함수선언식과 변수를 위한 메모리 공간을 먼저 확보한다.
• 따라서, function a()와 var는 코드의 최상단으로 끌어 올려진 것 처럼 보인다.

function willBeOveridden() {
    return 10;
}
willBeOveridden(); // 5
function willBeOveridden(){
    return 5;
}

아래와 같은 코드를 실행할 때 자바스크립트 해석기가 어떻게 코드 순서를 재조정할까요?

var sum = 5;
sum = sum + i;

function sumAllNumbers(){
    //...
}

var i = 10;

var 변수와 function 이 먼저 할당받은 후에 연산이 이뤄진다. 그렇기 때문에 sum = sum + i 연산에서 에러가 나지 않는다.

var sum;
function sumAllNumbers(){}
var i;

sum = 5;
sum = sum + i;
i = 10;

화살표 함수

• 함수를 정의할 때 function이라는 키워드를 사용하지 않고 =>로 대체
• 흔히 사용하는 콜백 함수의 문법을 간결화

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

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

sum(10, 20);

예시

var arr = ["a", "b", "c"];
arr.forEach(function(value) {
    console.log(value);
}) // a, b, c

var arr = ["a", "b", "c"]; //콜백 인자가 하나일 경우 괄호를 사용하지 않아도 된다.
arr.forEach(value => console.log(value)); // a, b, c

향상된 객체 리터럴

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

var dictionary = {
    words : 100,
    lookup : function(){
        console.log("find words");
    },
    lookup() {
        console.log("find words");
    }
}

• 객체의 속성명과 값 명이 동일할 때 아래와 같이 축약 가능

var figures = 10;
var dictionanry = {
    //figures : figures,
    figures
};

Modules - 자바스크립트 모듈화 방법

• 자바스크립트 모듈 로더 라이브러리(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);

default export

//util.js 
//default는 하나의 export만 가능
export default function(x) {
    return console.log(x);
}

//main.js
import util from 'util.js';
console.log(util);
util("hi");

//app.js
import log from 'util.js';
console.log(log);
log("hi");