ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 자바스크립트 변수 선언 var, let, const 차이점
    Javascript 2021. 8. 8. 20:58

    자바스크립크의 선언에는 var, let, const 딱 3가지 방법만 있다.

    📌 ES6 문법부터 let, const 추가 됨

     

    📋 변수

    변수란 프로그램을 실행하는 도중에 임의의 값을 저장해 두고 읽을 수 있는 가상 공간을 말한다. 즉, 변경 가능한 데이터가 담길 수 있는 공간 또는 그릇이라고 생각하면 된다.

     

    📋 변수 선언

    기본적인 변수 선언하는 방법이 아래와 같다.

    var a;

    "변할 수 있는 데이터를 만든다. 이 데이터의 식별자는 a로 한다."

     

    📎 var

    var 는 변수를 선언하고, 선택적으로 초기화할 수 있다.

    ☑️ 변수 중복 선언 가능
    ☑️ 변수 재할당 가능
    ☑️ 함수 레벨 스코프 (function-level scope)
    ☑️ 변수 호이스팅 발생이 let과 const 와 다른 방식으로 작동
    ☑️ var로 선언된 변수는 전역객체의 프로퍼티 ⭕

     

    📎 let

    let 은 블록 유효 범위를 갖는 지역 변수를 선언하며, 선언과 동시에 임의의 값으로 초기화할 수도 있다.

    ☑️ 변수 중복 선언 불가능
    ☑️ 변수 재할당 가능
    ☑️ 블록 레벨 스코프 (block-level scope)
    ☑️ 변수 호이스팅 발생이 var 와 다른 방식으로 작동
    ☑️ var로 선언된 변수는 전역객체의 프로퍼티 ❌

     

    📎 const

    const 선언은 블록 범위의 상수를 선언한다. 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없다.

    ☑️ 변수 중복 선언 불가능
    ☑️ 변수 재할당 불가능
    ☑️ 블록 레벨 스코프 (block-level scope)
    ☑️ 변수 호이스팅 발생이 var 와 다른 방식으로 작동
    ☑️ var로 선언된 변수는 전역객체의 프로퍼티 ❌

     

    📕 var, let, const 차이점

     

    1️⃣ 변수 중복 선언 가능 여부

    💡 var 키워드 예제var는 변수 중복 선언 가능!!

    💡 let 키워드 예제

    let은 변수 중복 선언 불가능!! 아래와 같이 Error 발생

    💡 const 키워드 예제

    const도 마찬가지로 변수 중복 선언 불가능!! 아래와 같이 Error 발생

     

    2️⃣ 재할당 가능 여부

    💡 var 키워드 예제var 재할당 가능!!

    💡 let 키워드 예제let 재할당 가능!!

    💡 const 키워드 예제

    const 재할당 불가능!! 아래와 같이 Error 발생

     

    3️⃣ 변수 스코프 유효범위

    📌 스코프 (Scope)
    스코프(Scope)란 변수에 접근할 수 있는 범위, 현재 실행되는 컨텍스트를 말한다. 여기서 컨텍스트는 값과 표현식이 "표현"되거나 참조 될 수 있음을 의미한다. 만약 변수 또는 다른 표현식이 "해당 스코프"내에 있지 않다면 사용할 수 없다.

    💡 var 키워드 예제

    함수 내에서 선언된 변수는 함수 내에서만 유효하다. 함수 외부에서는 참조할 수 없다.

    📌 전역 변수 : 함수 외부에서 선언한 변수
    📌 지역 변수 : 함수 내부에서 선언한 변수

    💡 let ,const 키워드 예제

     

    아래와 같이 Error 발생

    아래와 같이 Error 발생

    함수, if문, for문, while문, try/catch문 등의 모든 코드 블록 ({...}) 내부에서 선언된 변수는 코드 블록 내에서만 유효하고, 코드 블록 외부에서는 참조할 수 없다.

    📌 let, const는 블록 내부에서 선언한 변수까지도 지역 변수로 인정한다.

     

    4️⃣ 변수 호이스팅 방식

    📌 호이스팅 (Hoisting)
    호이스팅이란 함수 내부에 있는 선언들을 모두 끌어올려 해당 함수 유효 범위의 최상단에 선언하는 것을 뜻한다.

    💡 var 키워드 예제

    변수 호이스팅에서 선언된 변수 a가 앞에서 참조되었음에도 에러를 발생시키지 않는다. 이는 코드 실행 전에 자바스크립트 엔진이 미리 변수 선언하고, undefined로 초기화해 두었기 때문이다.함수선언문 또한 동일하게 선언되기 전 호출됨에도 에러가 발생하지 않는다.💡 let ,const 키워드 예제

    변수 a 가 선언되기 전에 참조하니 에러가 발생한다. 이는 호이스팅이 발생하지 않는 것이 아닌, 변수의 선언과 초기화 사이에 일시적으로 변수 값을 참조할 수 없는 구간인 TDZ(Temporal Dead Zone)에 빠졌기 때문에 보이는 현상이다.함수표현식을 사용하거나 let 또는 const 로 변수를 선언하는 경우, 자바스크립트 내부에서는 코드 실행 전 변수 선언만 해둘 뿐 초기화는 코드 실행 과정에서 변수 선언문을 만났을 때 수행하기 때문에 호이스팅이 발생하지 않은 것처럼 보이는 것이다. 호이스팅은 발생한다.

     

    5️⃣ 전역 객체 프로퍼티 여부

    💡 var 키워드 예제var로 선언된 변수는 전역객체(브라우저 환경의 경우 window)의 프로퍼티다.브라우저 환경(크롬 콘솔 등)에서 아래 코드 실행해보면 var로 선언한 변수 a는 브라우저 전역객체인 window의 프로퍼티로 할당되는 것을 알 수 있다.

    💡 let, const 키워드 예제let, const 로 선언된 변수는 전역객체 프로퍼티가 아니다.브라우저 환경에서 아래 코드 실행 해보면 let이나 const로 선언한 변수 a는 브라우저 전역객체인 window의 프로퍼티로 할당되지 않았음을 알 수 있다.

     

     

     

    참조 : https://backstreet-programmer.tistory.com/76
    참조 : https://velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90
    참조 : https://gist.github.com/LeoHeo/7c2a2a6dbcf80becaaa1e61e90091e5d
    참조 : https://poiemaweb.com/es6-block-scope
    참조 : https://curryyou.tistory.com/192

    'Javascript' 카테고리의 다른 글

    얕은 복사와 깊은 복사  (0) 2021.08.20
    Set 객체  (0) 2021.08.09
    호이스팅  (0) 2021.07.13
    기본형과 참조형 종류와 차이점  (0) 2021.06.29
    3월28일) Arrow Function  (0) 2021.03.28
Designed by Tistory.