[JavaScript] var, let, const, Scope, Hoisting

안녕하세요? "태민"입니다.

오늘은 javaScript의 var, let, const 차이점에 대해 공부하기 위해 포스팅을 합니다.

그런데 위의 차이점을 검색해보니 Scope과 Hoisting이라는 흥미로운 주제가 많이 나오더라고요.

그래서 같이 포스팅 하려고 마음 먹었습니다.

 

1. var, let, Const

1-1. 기능

	변수 재선언	변수 재할당(immutable)
var	O	O
let	X	O
const	X	X

 - 변수 재선언

var a = 10
var a = "안녕"  // 변수 재선언이 가능하다

let b = 10
let b = "안녕" // 이미 a는 위에서 선언 되어 있기 때문에 재선언 불가능 하다

- 변수 재할당

let a = 10
a = 100 // 변수 재할당이 가능하다

const b = 10
b = 100 // 변수 재할당이 불가능하다. 즉, 변수의 값을 변경할 수 없다.

 

1-2. 범위(Scope)

 선언된 변수가 미치는 범위를 뜻합니다. JavaScript는 함수 레벨 스코프(function-level-Scope)를 따릅니다.

 

함수 레벨 스코프 (Function-level-Scope)

 간단합니다. 함수밖에 있는 변수는 모두 전역변수이고, 함수안에 있는 변수는 지역변수입니다.

var a = 10 //함수 밖에 있으니 전역변수이다.
function fun1(){
    var b = 20
    alert(a) // 전역변수기 때문에 접근가능하다
    alert(b) // 해당함수의 지역변수이기 때문에 접근가능하다
}
function fun2(){
    var c = 20
    alert(a) // 전역변수
    alert(b) // b는 fun1함수의 지역변수기 때문에 접근 불가능하다
    alert(c) // 해당함수의 지역변수이기 때문에 접근가능하다.
}
{
    var d = 0 // d는 전역변수일까? 지역변수일까?
}

그렇다면 d는 전역변수일까요? 지역변수일까요? 전역변수입니다. function-level Scope는 변수가 함수에 있고, 없고 차이니깐요.

 

블록 레벨 스코프 (Block-level-Scope)

 마찬가지 입니다. 함수레벨스코프가 함수기준이었다면 블록 레벨 스코프는 블록기준으로 지역변수와 전역변수를 나눕니다. 

{
    var a = 0 // 전역변수
}
{
    let b = 0 // 지역변수
}
alter(a) // var는 function Scope이기 때문에 오류가 발생하지 않는다.
alter(b) // let는 block Scope이기 때문에 요류가 발생한다. 

정리

	Scope
var	Function-level-Scope
let	Block-level-Scope
const	Block-level-Scope

 

2. Hoisting

2-1. Hoisting 정의

 hoisting이란자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언합니다. 자세히 설명하자면

function test(){
    console.log(a)
    var a = 2
    console.log(a)
}

  위의 함수에서 첫번째 줄에서 a는 선언이 되어 있지 않기 때문에 오류가 날 것 같습니다. 하지만 오류가 나지 않고, undefined 값이 출력됩니다. 왤까요? hoisting 덕분입니다.

function test(){
    var a // hoisting : 유효 범위의 최상단에 선언됨
    console.log(a)
    var a = 2
    console.log(a)
}

 실제로는 위의 코드처럼 코드가 실행됩니다.

 

2.2 변수의 생성단계

 

2-3. var과 let의 hoisting 차이점

 var은 hoisting중 선언단계과 초기화단계를 겪습니다.

function test(){
    console.log(a)
    var a = 2
}

 그말은 즉슨,  a를 위한 메모리가 확보함에 동시에 undefined로 초기화되기 때문에 위의 코드는 "undefined"라는 메시지가 출력됩니다.

 

 하지만, let은 hoisting중 초기화단계를 겪지 않고, 선언단계만 겪게 됩니다.

function test(){
    console.log(a)
    let a = 2
}

   그 말은 즉슨, let a=2코드를 실행하기 전까지는 실행 컨텍스트에만 등록되어 있을 뿐이지. 실제로 메모리 할당을 받지 않은 상태이기 때문에 error가 발생합니다.

 

 

3. ES6부터 let, const가 나오게 된 배경

 var과 let를 비교하니 var의 문제점이 보이고, let과 const가 왜 나오게 됐는지 조금은 이해가 갑니다.

하지만 좀 더 자세히 알고 싶으시다면 

https://www.daleseo.com/js-var-issues/

[자바스크립트] var를 사용할 때 발생하는 문제들

이 블로그를 추천드립니다.

 

---

출처

https://poiemaweb.com/es6-block-scope

let, const | PoiemaWeb

 

---

여담

저는 분명 var,let,const의 차이점만 간단하게 찾아보려고 했습니다. 그런데 따라오는 개념들이 의외로 많더라고요. 그래서 한번 크게 정리해 봤습니다. javaScript로 프로젝트를 진행하면서 사실 var외에 let과 const를 잘 쓰지 않게 되더라고요. const는 상수개념으로 가끔 쓰긴 했는데 저런 기능까지 있는 줄은 몰랐습니다. 또, 제가 올린 출저블로그에는 위의 기능을 이용해 Closure도 설명해놓았는데 예전에 제가 포스팅한 Closure원리도 더 잘 파악할 수 있었던 것 같습니다.

 

 

안녕하세요? "태민"입니다.

위의 내용에 틀린부분이나 추가하고 싶은 부분이 있으시다면 댓글로 남겨주세요!

감사합니다!