ES6 for Vue.js - const & let

ES6 = 최신의 자바스크립트 문법

 

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

Babel 역할

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

 

babeljs.io/

Babel · The compiler for next generation JavaScript

---

-Const & let : 새로운 변수 선언 방식
1. 블록 단위 {}로 변수의 범위가 제한되었음
2. const : 한번 선언한 값에 대해서 변경할 수 없음 (상수 개념)
3. let : 한번 선언한 값에 대해서 다시 선언할 수 없음

 

const a =10;
a =20;
-> [X]

var c=10;
c=20;
-> [O]

let a = 10;
let a = 20;
-> 오류남 다시 선언할 수 없음

a = 30 ; 은 선언 가능

 

즉, let은 변수에 재할당이 가능하지만,
const는 변수 재선언, 재할당 모두 불가능하다.

 

// let
let a = 'test'
let a = 'test2' // Uncaught SyntaxError: Identifier 'a' has already been declared
a = 'test3'     // 가능

// const
const b = 'test'
const b = 'test2' // Uncaught SyntaxError: Identifier 'a' has already been declared
b = 'test3'    // Uncaught TypeError:Assignment to constant variable.

 

---

 

-ES5특징 : 변수의 Scope **

​

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

var sum =0;

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

sum = sum + i;

}

​

console.log(sum) // 15

console.log(i) // 6

​: for문안에서 var는 전역변수로 잡힘

​

2. Hoisting

 

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

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

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

function  willBeOveridden(){

return 10;

}

wilBeOveridden(); //5

​

function willBeOveridden() {

return 5;

}

​

​

// function statement

function sum(){

   return 10+20;

}

​

// function expression

var sum = function(){

   return 10+2

}

​

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

var sum = 5;

sum = sum + i;

​

function sumAllNumbers(){

// ...

}

​var i = 10;

 

#1 - 함수 선언식과 변수 선언를 hoisting

var sum;

function sumAllNumbers(){

// ...

}

​

var i;

​

#2 - 변수 대입 및 할당

sum = 5;

sum = sum+i;

i= 10;

 

---

 

- ES6 : { } 단위로 변수의 범위가 제한됨

let sum = 0;

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

sum = sum + i;

}

​

console.log(sum) // 10

console.log(i) // i is not defined

​

- ES6 : const로 지정한 값 변경 불가능

const a = 10;

a = 20; // Assignment to constant variable

​

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

const a = {};

a.num = 10;

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

​

const  = [];

a.push(20);

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

​

*문자열은 변경안됨!

​

- ES6 : let 선언한 값에 대해서 다시 선언 불가능

let a = 10;

let a = 20; // Identifier 'a' has already been declared

​

- ES6 : const, let

function f(){

  {

let x;

{

  //새로운 블록안에 새로운 x의 스코프가 생김

const x = "sneaky";

x = "foo"; // 위에 이미 const로 x선언을 했으므로 다시 값을 대입하면 에러 발생

}

// 이전 블록 범위로 돌아왔기 때문에 'let x'에 해당하는 메모리에 값을 대입

x = "bar";

let xx = "inner"; // Indentifier 'x' has already been declared

   }

}

​

​