Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
javascript var, let, const 차이점

var, let, const 차이점은?

  • varfunction-scoped이고, let, constblock-scoped입니다.

  • function-scopedblock-scoped가 무슨말이냐?

var(function-scoped)

jsfiddle 참고주소

// var는 function-scope이기 때문에 for문이 끝난다음에 i를 호출하면 값이 출력이 잘 된다.
// 이건 var가 hoisting이 되었기 때문이다.
for(var j=0; j<10; j++) {
  console.log('j', j)
}
console.log('after loop j is ', j) // after loop j is 10


// 아래의 경우에는 에러가 발생한다.
function counter () {
  for(var i=0; i<10; i++) {
    console.log('i', i)
  }
}
counter()
console.log('after loop i is', i) // ReferenceError: i is not defined

그럼 항상 function을 만들어서 호출해야 할까? 그건 아니다.

javascript에서는 immediately-invoked function expression (or IIFE, pronounced "iffy")라는것이 있다.

IIFEfunction-scope인거 처럼 만들 수가 있다.

// IIFE를 사용하면
// i is not defined가 뜬다.
(function() {
  // var 변수는 여기까지 hoisting이 된다.
  for(var i=0; i<10; i++) {
    console.log('i', i)
  }
})()
console.log('after loop i is', i) // ReferenceError: i is not defined

근데 javascript는 여기서 좀 웃긴 부분이 있다.

위에서 잠깐 말했지만 IIFEfunction-scope처럼 보이게 만들어주지만 결과가 같지는 않다.

// 이 코드를 실행하면 에러없이 after loop i is 10이 호출된다.
(function() {
  for(i=0; i<10; i++) {
    console.log('i', i)
  }
})()
console.log('after loop i is', i) // after loop i is 10

위에 코드가 아무 에러 없이 실행되는 이유는 i가 hoisting이 되어서 global variable이 되었기 때문이다.

그래서 아래와 같이 된 것이다.

var i
(function() {
  for(i=0; i<10; i++) {
    console.log('i', i)
  }
})()
console.log('after loop i is', i) // after loop i is 10

IIFE는 쓰는데 이렇게 hoisting이 된다면 무슨 소용이 있겠는가?!

그래서 이런 hoisting을 막기 위해 use strict를 사용한다.

// 아까랑 다르게 실행하면 i is not defined라는 에러가 발생한다.
(function() {
  'use strict'
  for(i=0; i<10; i++) {
    console.log('i', i)
  }
})()
console.log('after loop i is', i) // ReferenceError: i is not defined

어떤가? 뭔가 변수 선언때문에 너무 많은 일을 한다고 생각하지 않는가?

그럼 let, const에 대해서 알아보자.

let, const(block-scoped)

  • es2015에서는 let, const가 추가 되었다.

javascipt에는 그동안 var만 존재했기 때문에 아래와 같은 문제가 있었다.

// 이미 만들어진 변수이름으로 재선언했는데 아무런 문제가 발생하지 않는다.
var a = 'test'
var a = 'test2'

// hoisting으로 인해 ReferenceError에러가 안난다.
c = 'test'
var c

위와 같은 문제점으로 인해 javascript를 욕 하는 사람이 참 많았다.

하지만 let, const를 사용하면 var를 사용할때보다 상당히 이점이 많다.

두개의 공통점은 var와 다르게 변수 재선언 불가능이다.

letconst의 차이점은 변수의 immutable여부이다.

let은 변수에 재할당이 가능하지만,

const는 변수 재선언, 재할당 모두 불가능하다.

// let
let a = 'test'
let a = 'test2' // Uncaught SyntaxError: Identifier 'a' has already been declared
a = 'test3'     // 가능

// const
const b = 'test'
const b = 'test2' // Uncaught SyntaxError: Identifier 'a' has already been declared
b = 'test3'    // Uncaught TypeError:Assignment to constant variable.

let, const가 hoisting이 발생하지 않는건 아니다.

varfunction-scoped로 hoisting이 되었다면

let, constblock-scoped단위로 hoisting이 일어나는데

c = 'test' // ReferenceError: c is not defined
let c

위에 코드에서 ReferenceError가 발생한 이유는 tdz(temporal dead zone)때문이다.

let은 값을 할당하기전에 변수가 선언 되어있어야 하는데 그렇지 않기 때문에 에러가 난다.

이건 const도 마찬가지인데 좀 더 엄격하다.

// let은 선언하고 나중에 값을 할당이 가능하지만
let dd
dd = 'test'

// const 선언과 동시에 값을 할당 해야한다.
const aa // Missing initializer in const declaration

이렇게 javascript에 tdz가 필요한 이유는 동적언어이다 보니깐 runtime type check 가 필요해서이다.

Reference

@juicycool92

This comment has been minimized.

Copy link

@juicycool92 juicycool92 commented Apr 4, 2018

네군대 정도 같은 주제로 검색해 봤는데 이 설명글이 잴 쉽고 빠르게 이해되씀다!

@kskim7714

This comment has been minimized.

Copy link

@kskim7714 kskim7714 commented Apr 11, 2018

잘 봤습니다~

@jhwanP

This comment has been minimized.

Copy link

@jhwanP jhwanP commented Apr 17, 2018

javascript하는데 이거땜시 헷갈렸는데 감사합니다~

@wkimdev

This comment has been minimized.

Copy link

@wkimdev wkimdev commented May 2, 2018

설명 감사합니다~

@wlsgussla123

This comment has been minimized.

Copy link

@wlsgussla123 wlsgussla123 commented May 21, 2018

좋은 설명이네요. 감사합니다^^

@jb9229

This comment has been minimized.

Copy link

@jb9229 jb9229 commented May 31, 2018

감사합니다, 많은 도움 되었습니다.

@fed-gren

This comment has been minimized.

Copy link

@fed-gren fed-gren commented Jun 1, 2018

참고하겠습니다! 감사합니다!

@happyjy

This comment has been minimized.

Copy link

@happyjy happyjy commented Jun 14, 2018

도움이 됐습니다. 감사합니다~~

@Macfa

This comment has been minimized.

Copy link

@Macfa Macfa commented Jun 26, 2018

좋은 정보 감사합니다. 참고하겠습니다

@qkreltms

This comment has been minimized.

Copy link

@qkreltms qkreltms commented Jul 1, 2018

좋은글 감사합니다!

@hdpe1399

This comment has been minimized.

Copy link

@hdpe1399 hdpe1399 commented Jul 5, 2018

좋은 자료 유익하게 봤습니다^^

@healim

This comment has been minimized.

Copy link

@healim healim commented Jul 18, 2018

예시가 이해하기 쉽네요. 찾아보고 있었는데 감사합니다 :)

@gingsero

This comment has been minimized.

Copy link

@gingsero gingsero commented Aug 9, 2018

감사합니다!! 너무 쉽게 가르쳐주셔서 오늘부터 당장 쓸거같아요 ㅎㅎ

@ppesky

This comment has been minimized.

Copy link

@ppesky ppesky commented Sep 10, 2018

쉬운 설명 고맙습니다.

@retin-hexlant

This comment has been minimized.

Copy link

@retin-hexlant retin-hexlant commented Oct 1, 2018

이해하기 무척 편하게 써주셔서 감사합니다. :)

@ohoroyoi

This comment has been minimized.

Copy link

@ohoroyoi ohoroyoi commented Oct 15, 2018

설명 감사합니다!

@jmonaco88

This comment has been minimized.

Copy link

@jmonaco88 jmonaco88 commented Oct 16, 2018

코드 주석(설명)부분에 오타가 좀 많네요 ^^
깔끔하게 잘 이해가되서 좋았어요 ㅎㅎ 잘보고갑니다.

@joonas-yoon

This comment has been minimized.

Copy link

@joonas-yoon joonas-yoon commented Nov 21, 2018

정말 감사합니다. 잘 읽었습니다!

@imjehoon

This comment has been minimized.

Copy link

@imjehoon imjehoon commented Nov 27, 2018

좋은글 감사합니다.

@kimkyeongo

This comment has been minimized.

Copy link

@kimkyeongo kimkyeongo commented Jan 11, 2019

좋은글 감사합니다.

@rapanui

This comment has been minimized.

Copy link

@rapanui rapanui commented Jan 14, 2019

안까먹어야지하면서도 호이스팅이 너무 헤깔려요.
좋은 설명으로 지금은 다시 이해가 되네요.

감사합니다. ^^

@ggnam

This comment has been minimized.

Copy link

@ggnam ggnam commented Jan 17, 2019

좋은 글 감사합니다

@anjwoc

This comment has been minimized.

Copy link

@anjwoc anjwoc commented Jan 20, 2019

와 이해가 너무잘됐어요

@8hal

This comment has been minimized.

Copy link

@8hal 8hal commented Jan 29, 2019

초반 var에 대한 설명이 꽤 길어서 촙오인 제가 읽긴 힘들었지만 이 후론 주욱 잘 읽혔아요.
너무 감사합니다!

@NoGeunYoug

This comment has been minimized.

Copy link

@NoGeunYoug NoGeunYoug commented Feb 14, 2019

좋은 글 감사합니다.
이해하는데 많은 도움 되었습니다!

@Brew-Brew

This comment has been minimized.

Copy link

@Brew-Brew Brew-Brew commented Feb 26, 2019

잘 읽었습니다!

@sannoob

This comment has been minimized.

Copy link

@sannoob sannoob commented Mar 18, 2019

👍

@ksw6169

This comment has been minimized.

Copy link

@ksw6169 ksw6169 commented Mar 29, 2019

감사합니다! 잘 읽었습니다! :D

@rpf5573

This comment has been minimized.

Copy link

@rpf5573 rpf5573 commented Apr 10, 2019

잘읽었습니다. 감사합니다 :D

@BrissyKim

This comment has been minimized.

Copy link

@BrissyKim BrissyKim commented Apr 11, 2019

좋은글 감사합니다!!

@bangdy

This comment has been minimized.

Copy link

@bangdy bangdy commented Apr 11, 2019

좋은 글 감사합니다~!!

@jsunwoo

This comment has been minimized.

Copy link

@jsunwoo jsunwoo commented Apr 16, 2019

감사합니다!

@catgarret

This comment has been minimized.

Copy link

@catgarret catgarret commented Apr 16, 2019

감사합니다! #

@catgarret

This comment has been minimized.

Copy link

@catgarret catgarret commented Apr 16, 2019

감사합니다! #

@devSeok

This comment has been minimized.

Copy link

@devSeok devSeok commented Apr 17, 2019

감사합니다 !

@dudb

This comment has been minimized.

Copy link

@dudb dudb commented Apr 20, 2019

와 재밌게 잘 봤습니다

@buchaesal

This comment has been minimized.

Copy link

@buchaesal buchaesal commented Apr 24, 2019

잘봤습니다~~~

@funchcode

This comment has been minimized.

Copy link

@funchcode funchcode commented Apr 29, 2019

이해하기 쉽게 잘 정리하셨네요 감사합니다!

@withleedh

This comment has been minimized.

Copy link

@withleedh withleedh commented May 28, 2019

var의 노예였는데.. 해방 감사합니다.

@khanorder

This comment has been minimized.

Copy link

@khanorder khanorder commented Jun 26, 2019

const 궁금해서 왔다가 let도 알고 가네요~ 고맙습니다~

@ChangJoo-Park

This comment has been minimized.

Copy link

@ChangJoo-Park ChangJoo-Park commented Jun 26, 2019

감사합니다

@barongun

This comment has been minimized.

Copy link

@barongun barongun commented Jun 26, 2019

정말 잘 보았습니다. 팬이 될 것 같습니다.

@peaceman609

This comment has been minimized.

Copy link

@peaceman609 peaceman609 commented Jul 19, 2019

감사합니다.

@donghoon-song

This comment has been minimized.

Copy link

@donghoon-song donghoon-song commented Aug 2, 2019

정말 이해가 쏙쏙 됩니다. 따봉

@JohnJeong123

This comment has been minimized.

Copy link

@JohnJeong123 JohnJeong123 commented Aug 8, 2019

잘보고 갑니다 : )

@aisaka-taiga

This comment has been minimized.

Copy link

@aisaka-taiga aisaka-taiga commented Aug 15, 2019

설명 감사합니다.

@1571min

This comment has been minimized.

Copy link

@1571min 1571min commented Aug 27, 2019

설명 감사합니다

@Htell618

This comment has been minimized.

Copy link

@Htell618 Htell618 commented Aug 28, 2019

var와 let의 차이점은요?

@Bigone0617

This comment has been minimized.

Copy link

@Bigone0617 Bigone0617 commented Sep 7, 2019

좋은 설명 감사합니다 :)

@thiporia

This comment has been minimized.

Copy link

@thiporia thiporia commented Sep 29, 2019

감사히 잘 읽었습니다. : )

@niklasjang

This comment has been minimized.

Copy link

@niklasjang niklasjang commented Oct 7, 2019

감사합니다. Gist는 PR이 없어서 여기에 코멘트를 남깁니다.

Pull Request

Change

위에 코드가 아무 에러 없이 실행되는 이유는 i가 hoisting이 되어서 global variable이 되었기 때문이다.

그래서 아래와 같이 된 것이다.

to

위에 코드가 아무 에러 없이 실행되는 이유는 i가 hoisting이 되어서 global variable이 되었기 때문이다.

hoisting이란 "변수의 선언문을 유효 범위의 최상단으로 끌어올리는 행위"를 말한다. IIFE를 사용할 때는 function을 사용하지 않는 것과 같이 global variable로 hoisting이 이루어진다.

그래서 아래와 같이 된 것이다.
@soorichu

This comment has been minimized.

Copy link

@soorichu soorichu commented Nov 11, 2019

와우 이제야 이해했어요! 감사합니다~~

@blueboy1593

This comment has been minimized.

Copy link

@blueboy1593 blueboy1593 commented Jan 16, 2020

감사합니다~

@Artificiality-Ryu

This comment has been minimized.

Copy link

@Artificiality-Ryu Artificiality-Ryu commented Feb 2, 2020

감사합니다 성장하시는 개발자님

@chomookun

This comment has been minimized.

Copy link

@chomookun chomookun commented Feb 23, 2020

아.. 제가 잘못본듯.ㅋ

@TuenTuenna

This comment has been minimized.

Copy link

@TuenTuenna TuenTuenna commented Mar 12, 2020

명쾌한 설명에 무릎을 탁! 치고 갑니다 ㅎㅎ

@j3470

This comment has been minimized.

Copy link

@j3470 j3470 commented Mar 25, 2020

군더더기 없이 깔-끔합니다. 덕분에 확실히 알고 갑니다. 감사... 압도적 감사! ㅎㅎ..

@ilgwonPark2

This comment has been minimized.

Copy link

@ilgwonPark2 ilgwonPark2 commented May 4, 2020

감사히 잘 읽었습니다!
핵심이 잘 녹아져있어요

@haerang94

This comment has been minimized.

Copy link

@haerang94 haerang94 commented Jun 14, 2020

잘 읽었습니다

@atelier2430

This comment has been minimized.

Copy link

@atelier2430 atelier2430 commented Jun 17, 2020

막연하게 떠다니던 개념이 잡혔어요 감사합니다!

@roricoco

This comment has been minimized.

Copy link

@roricoco roricoco commented Jun 20, 2020

@AnneMayor

This comment has been minimized.

Copy link

@AnneMayor AnneMayor commented Jun 28, 2020

깔끔하게 정리 잘하셔서 이해하기 쉬웠습니다
감사합니다

@Kibmer

This comment has been minimized.

Copy link

@Kibmer Kibmer commented Sep 10, 2020

잘봤습니다~

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.