ES6

ECMAScript 2015 

• Front End Framework 의 React, Angular, Vue 에서 권고하는 형식이다.
• 문법이 간결하며 코딩방식이 편해진다.

Babel

• 브라우저 중 ES6 를 지원하지않는 브라우저 있으므로 이를 transpiling 하는 기능이 필요하다.
• 그러므로 Babel 을 사용하게 된다.
• Webpack 이 만든 js를 Babel 이 모든 브라우저가 호환 되게 끔 변환시킨다.
• Webpack.config.js 에 Module 란의 loader 에 기술되어 있는 것으로 기억난다.

{
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },

 

---

 

Const & Let 

• Closer 단위의 Variable Scope 를 정의하는 방법이다.
• const 는 상수, 불변 값이며 메서드 사용시 기존 값을 건들지 않게 끔 해야한다.
• let : 한번 선언된 Scope 에서 다시 선언 불가하다.
• doli0413.tistory.com/467?category=932767

Let, Const

 

Hoisting - ES5

• JS 해석기가 선언된 함수, 변수를 가장 상단에 있는 것으로 인식한다.
• 즉 코드의 라인 순서와 관계 없이 함수와 변수를 가장 위로 끌려올려 메모리 공간을 확보한다.
• Function Expression 이 아니라 Function Statement 만이 Hosting 된다.

// Function Statement
function add () {
   return 5+10;
 }
 
 // Function Expression
 var sum = function() {
  return 5+ 10
 }

//Hoisting
function wiilBeOveridden() {
    return 10;
}

wiilBeOveridden(); //5

function willBeOveridden() {
 return 5;
}

다음 코드의 순서를 보아야한다.

1. sum 이 가장 먼저 Hoisting 됨 
2. function statement 가 Hoisting 됨
3. i 가 Hostirng 됨
4. 변수에 값이 할당되고 연산식이 돌아감
5. sum = 15

var sum = 5;
sum += i;

function sumAllNumbers() {

}

var i = 10;

//Hoisting 된 결과
var sum;
function sumAllNumbers() {
}
var i;

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

ES 6 - > Variable Scope

let sum = 0;

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

console.log(sum) //10
console.log(i); //Uncaught Reference Error : i is not defined


// const 는 상수지만 Array Object 는 변경할 수있다.
const a = {};
a.num = 10;
console.log(a) // num:10

const b = [];
b.push(20);
console.log(b) // [20]

 

---

 

Arrow Function

• Function Expression 의 간결화 이다.
• 콜백 함수의 문법을 간결하게 만든다.
• Java 의 Lambda 와 굉장히 유사함.

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

sum(10, 20)

const arr = [1,2,3];
arr.forEach( val => console.log(val) ); // 1,2,3

 

---

 

Enhanced Object Literals 

• object 의 속성이 메서드 일때 function 예약어 생략 가능

const dictionary = {
 words: 100,
.//ES5 
 lookup: function () {
  console.log("find words");
 },
 //ES6
 lookUp() {
  console.log("find words");
 }
}

 

---

 

Modules

• Java Script 는 모듈 로더 라이브러리를 지원함
• 호출 전까지는 동작하지 않음

export function | const | let ~~

export default {

}

//

//개별적으로 끌어 옴
import {function,const,let} 

import ~~~ from 'location/file.js'

• default export

//util.js

//default export 는 하나만을 export 한다.
export default function (x) {
	return console.log(x);
}

//이름을 바꾸어 사용할 수 있다.
import log from 'util.js';