[JavaScript/ES6] let 키워드(var와 비교)

@since 2019-03-29

본문에 앞서, 책 한 권을 읽으며 정리하고 싶은 부분을 일부 발췌하여 정리합니다. 출처를 남기지만 혹여 문제가 있다면 알려주시고, 통보없이 삭제되도 슬프지만 군말없이 인정하겠습니다.(흑..) 출처 도서에서 발췌한 부분은 저자 분께서 책에 서술하신 어투 그대로 발췌하며, 제가 작성한 것도 포스팅할 때 제가 헷갈리지 않기 위해, 혹여 누군가 이 모자란 글을 읽을 때 어투가 바뀌어 혼란을 주지않기 위해 저자 분의 어투대로 작성하겠습니다.

 

변수는 지역(로컬)변수와 전역(글로벌)변수로 크게 구분을 짓습니다. 그 이유는 스코프(scope, 범위) 때문입니다.

• 지역(로컬)변수 : 함수 또는 오브젝트를 스코프로 사용하려는 의도이며,

• 전역(글로벌)변수 : 프로그램 전체에서 공용으로 사용하려는 의도입니다.

스코프(scope, 범위)라는 단어가 나온 김에 var 키워드와 let, 그리고 const 키워드까지 스코프(scope, 범위)를 잠시 소개하겠습니다.

• var 키워드의 스코프는 함수 스코프이며,

• let, conse 키워드의 스코프는 블록 스코프입니다.

읭? 이렇게만 보면 저도 확 와닿지는 않네요. 밑에 좀 더 설명을 이어나가겠습니다.

 

var와 무엇이 다른가?

let 키워드는 var 키워드의 문제점을 해결하기 위한 것으로 다음과 같은 특징이 있습니다.

 

1. 함수 안에 작성한 let 변수는 함수가 스코프입니다.

2. 함수 안에 if(a = b) { let sports = "축구" } 형태로 코드를 작성했을 때, sports 변수는 함수가 스코프가 아니라 if 문의 블록 { }이 스코프입니다.

3. 블록 { } 밖에 같은 이름의 변수가 있어도 스코프가 다르므로 변수 각각에 값을 설정할 수 있으며 변수 값이 유지됩니다.

4. 블록 안에 블록을 계층적으로 작성하면 각각의 블록이 스코프입니다.

5. 같은 스코프에서 같은 이름의 let 변수를 선언할 수 없습니다.

6. let 변수는 호이스팅(hoisting)되지 않습니다.

 

let 변수를 선언하는 가장 큰 목적은 스코프이며 그중에서도 블록 스코프가 돋보입니다.

블록 스코프의 기준은 블록을 나타내는 중괄호 { }입니다. 블록 { } 안과 밖의 변수 이름이 같더라도 스코프가 다르므로 변수가 선언되고 각 변수에 할당된 값이 대체되지 않고 유지됩니다.

출처 도서 : ECMAScript 6 - 김영보(http://www.yes24.com/Product/goods/35254611)

 

 

let과 var의 비교

우선 스코프와는 조금 무관하게 동일한 코드에 키워드만 변경하여 실행하였습니다.

(Chrome(Web Browser)의 DevTools에서 진행했습니다.)

▲ var 키워드

▲  let 키워드

위에 사진은 DevTools에서 작성한 코드입니다.

(출처 도서의 예제 중 일부)

 

결과가 어떻게 나올까요?

▲ var 키워드 결과

▲ let 키워드 결과

let의 스코프에 조금 더 포커스를 두고 결과를 본다면 위에 작성했던 let의 특징에 대해 이해하기 쉬울 것 입니다.

이젠 함수 스코프와 블록 스코프의 차이점이 눈에 보이시나요? ES6로만 코드를 작성한다면 var를 사용할 일이 거의 없다고 많은 분들이 말씀해주십니다. 평소에 토이 프로젝트나 간단한 소스를 짤 때에 const와 let을 사용해보세요.

var는 잠시 넣어두시고.

 

전문적으로 누군가에게 가르치기 위해, 누군가에게 보여주기 위해 작성하는 포스트가 아니기에 이 내용만으로 알고자 하는 것들이 부족하시다 하시는 분들은 관련하여 잘 정리된 블로그가 있어 안내해드릴까 하다가 구글링 3초면 나오는 내용들이고, 블로그들이기에 구글링을 더 추천드립니다.