본문 바로가기

Javascript/Javascript(ES6)

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

반응형

왜 ES6를 배워야 하는가?

- 개인적인 생각입니다.

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

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

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

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

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


const, let

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

ES6부터는 var뿐만 아니라 constlet이 생겼다.

var vs const, let

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

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

1
2
3
4
5
6
7
function foo() {
    if (true) {
        var name = 'hans';
    }
    console.log(name); // hans
}
foo();


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

1
2
3
4
5
6
7
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는 한 번 초기화하면 다시 대입할 수 없다.

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

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

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

1
2
3
4
5
6
const arr = [123];
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 

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

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

1
2
3
4
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을 이용하면 보기도 좋고 쉽게 작성할 수 있다.

1
2
3
4
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


반응형