ES6란 무엇인가 그리고 Babel (const & let)

- ES6의 여러가지 문법 중 Vue.js 코딩을 간편하게 해주는 문법 학습

- const & let, Arrow Function, Enhanced Object Literals, Modules 학습

ES6 ?

- ECMAScript 2015와 동일한 용어

- 2015년은 ES5(2009년) 이래로 진행한 첫 메이저 업데이트가 승인된 해

- 최신 Front-End Framework인 Reack, Angular, Vue에서 권고하는 언어 형식

- ES5에 비해 문법이 간결해져서 익숙해지면 코딩을 훨씬 편하게 할 수 있음

 

Babel

- 구 버전 브라우저 중에서는 ES6의 기능을 지원하지 않는 브라우저가 있으므로 transpiling이 필요

- ES6의 문법을 각 브라우저의 호환가능한 ES5로 변환하는 컴파일러

transpiling : 컴파일과 비슷한데.. ES6의 문법을 ES5로 변환을 해준다.

https://babeljs.io/

Babel · Babel

 

위의 사이트에서 transpiling을 사용해 볼 수 있음

 

1. const & let

- 블록 단위 {} 로 변수의 범위가 제한되었음

- const: 한번 선언한 값에 대해서 변경할 수 없음 (상수 개념)

- let: 한번 선언한 값에 대해서 다시 선언할 수 없음

위 특징들에 대해서 자세히 알아보기 전에 ES5 특징 2가지를 리뷰

const a = 10;
undefined
a = 20;
VM267:1 Uncaught TypeError: Assignment to constant variable.
    at <anonymous>:1:3

const는 바꾸려하면 예외가 터진다.

 

let a= 20;
let a= 30;
VM434:2 Uncaught SyntaxError: Identifier 'a' has already been declared

 

let 또한 재선언 시에  예외가 터진다.

let a= 20;
a= 30;
a
30

이렇게 사용해야 값이 제대로 나온다.

 

변수의 Scope

ES5의 특징 - 변수의 Scope

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

var sum = 0;
for(var i = 1; i <=5; i++) {
    sum = sum + i;
}
console.log(sum);
console.log(i);
VM736:5 15
VM736:6 6

i의 값이 찍힌다. 블록을 넘나들며 값(스코프..가 곧 값인가?)가 설정되었다.

 

2) Hoisting 

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

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

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

*일단 함수표현식과 함수선언식은 다르다.

//함수 표현식
var sum = function() {
	return 10;
}

//함수 선언식
function sum() {
	return 20;
}

 

function dd() {
    return 10;
}
dd();
function dd(){
    return 5;
}


결과 : 5

이게 호이스팅이다.. 함수가 끌어올라온 것 같음

 

두번째로 이런 상황도 있다.

var sum = 5;
sum = sum + i;

var i = 10;

결과: 11

i는 아래있는데 예외가 안나고.. 정상작동한다.. 아니 정상작동이라 할 수 있나? 어쨋든 순서와 맞질 않는다.

var sum;
var i;

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

이렇게 뭔가 합쳐지는 느낌이 든다. 더군다나 i는 주소를 연결해둔 느낌

 

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

let sum = 0;
for(let i = 0; i <=5; i++){
    sum = sum + i;
}
console.log(sum);
console.log(i);
post-editor.min.js:109 15
VM460:6 Uncaught ReferenceError: i is not defined
    at <anonymous>:6:13

위처럼 i는 읽을 수가 없다. let을 사용할 경우  { }인 블록단위로 값을 사용 할 수 있기 때문이다. 매우 java틱하게 코드가 읽히는 움직임이 변했다.

 

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

const a = 10;
a = 20;
VM533:2 Uncaught TypeError: Assignment to constant variable.
    at <anonymous>:2:3

const는 상수라고 생각하면 된다. 값을 변경하려하니, 예외가 터진다.

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

const a = {};
a.num = 10;
10
const a= [];
a.push(20);
1

const b = [100];
b= [100]
VM805:2 Uncaught TypeError: Assignment to constant variable.
    at <anonymous>:2:2
(익명) @ VM805:2이 오류 이해하기AI
const b = [100];
b= {};
VM830:2 Uncaught TypeError: Assignment to constant variable.
    at <anonymous>:2:2

이렇게 객체 자체를 바꾸는 것은 불가능

function f() {
	let x;
	{
    	const x= "sneaky";
		x = "foo"; //이미 const를 위에서 선언했으므로 다시 값을 대입하면 에러 발생
    }
	x = "bar"; 
    let x = "inner"; //예외 발생
}