ES6 문법 배우기 - const, let, Template Literals

왜 ES6를 배워야 하는가?

- 개인적인 생각입니다.

ES6는 새로운 문법이 생긴 만큼 변경점이 큰 자바스크립트의 버전이다.

angular, typescript, react, nodejs등 자바스크립트를 사용하는 곳에서 ES6를 이용한 개발이 주를 이루고 코드도 많이 나오고 있다.

게다가 자바스크립트의 비약적인 발전으로 어느곳에서든 자바스크립트를 이용해 프로그래밍을 할 가능성이 높다.

따라서 자바스크립트를 사용하든 하지 않든 자바스크립트(ES6)를 공부하는 것은 많은 도움이 될 것이다.

* 다만 현재 모든 브라우저 버전에서 ES6를 지원해주지 않고 있다.

---

const, let

기존 자바스크립트에서 변수 선언을 var로 했었다.

ES6부터는 var뿐만 아니라 const와 let이 생겼다.

var vs const, let

const와 let에 대해 설명하기 전, var와의 차이점인 스코프에 대해 정리한다.

* const와 let은 블록스코프를 따른다. (!=함수스코프)

function foo() {
    if (true) {
        var name = 'hans';
    }
    console.log(name); // hans
}
foo();

기존 자바스크립트에서 var는 함수스코프를 따르니 위에 코드에서 보듯 함수 내에서 사용된 name을 출력한다.

function foo() {
    if (true) {
        const name = 'hans';
    }
    console.log(name); // Uncaught ReferenceError : name is not defined
}
foo();

위에 코드(ES6)에서는 var 대신 const로만 바뀌었는데 블록스코프를 따르므로 다른 블록에서 생성한 name을 사용할 수 없다.

ES5의 자바스크립트는 변수에 호이스팅이 적용되었기 때문에(변수에 스코프가 전역 스코프, 함수 스코프 둘로만 나뉨) 같은 스코프에만 있으면 언제 어디서든 참조가 가능했던 것이고, ES6는 호이스팅이 일어나지만 선언과 별개로 할당이 되기 전까지는 접근할 수 없게 예외처리를 시킨 것이다.

* 렉시컬스코핑 참고

* 호이스팅 : 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되어 변수의 선언을 항상 컨텍스트 내의 최상위로 끌어올리는 것을 의미한다. (나무위키)

const vs let

const는 한 번 초기화하면 다시 대입할 수 없다.

따라서 사용할 때 절대 바뀌면 안되는 것에 사용하면 좋다.

후에 실수로 변경하는 코드가 있더라도 변경되지 않기 때문이다.

재대입을 막는 것이지 내부 요소를 변경하는 것은 또 가능하다. (주의)

const arr = [1, 2, 3];
arr[0] = 4;
c; // [4, 2, 3] 배열의 요소 변경
const obj = {name: 'Son'};
obj.name = 'World';
obj; // {name: 'World'} 객체의 요소 

let은 계속 변경되는 것에 사용하면 된다. const와 다르게 재대입이 가능하다.

추가적으로 const는 변수 선언과 할당이 항상 동시에 일어나야 하지만, let의 경우에는 선언과 할당이 나뉠 수 있다는 차이가 있다.

* const 위주로 사용하다가 필요에 따라 let을 사용하면 좋다.

---

Template Literals 

템플릿에서 유추가능하다.

기존 문자열을 연결하는 코드에서는 되게 난잡했다.

var a = 3;
var first = 'jeong';
var last = 'pro';
var string = a + 'my name is ' + first + ' ' + last; // '3my name is jeong pro

'my name is ' 나 ' ' 처럼 여러 문자열을 합칠 때 코드를 보기도 힘들었고 작성하기도 까다로웠다.

그러나 template literal을 이용하면 보기도 좋고 쉽게 작성할 수 있다.

var a = 3;
var first = 'jeong';
var last = 'pro';
const string = `${a}my name is ${first} ${last}`;

문자열 템플릿을 묶을 때는 ' 도 " 도 아닌 `다.

키보드 왼쪽 상단에 1 옆에 `(백틱 기호)가 있다.

이것으로 감싼 후 안에 ${} 로 변수들을 감싸면 문자열이 연결된다.

아름답다.

- 참고 사이트

https://www.zerocho.com/category/EcmaScript/post/5757d74345041aaae7493479

https://www.youtube.com/watch?v=LTbnmiXWs2k&list=PL57atfCFqj2h5fpdZD-doGEIs0NZxeJTX