ko-dev-jp
117
2020-08-03 18:53:58 작성 2020-08-03 18:57:33 수정됨
4
1016

[Javascript] Const, Let, Var의 차이점




목록

  1. Javascript의 변수
  2. Const에 대해서
  3. Let에 대해서
  4. Var에 대해서
  5. 정리



1. Javascript의 변수

Javascript에는 변수를 선언하는 키워드 constletvar가 있습니다.
이 키워드들은 아래에 대해 차이가 있습니다.

  • 초기값
  • 중복 된 값 할당
  • 호출 범위

우선 constletvar 모든 변수들은 아래와 같이 
,(쉼표)로 구분하여 동시에 여러 변수를 정의 할 수 있습니다.

1
2
3
const category= "header",
      key= "content-Type",
      value= "application/json";



2. Const에 대해서

const는 값이 변하지 않는 변수를 선언하는 키워드입니다. 
const는 반드시 초기 값을 설정을 해주어야 하며,
선언 한 변수에 대해 나중에 값을 다시 할당 할 수 없습니다.

const에서 선언한 변수에 값을 다시 할당하는 경우에는
다음과 같은 오류 ( TypeError)가 발생합니다. 

1
2
3
const key = "content-Type";
key = "appId";
// Result => TypeError: invalid assignment to const 'key'

 따라서 변수에 값을 다시 할당 할 필요가 없는 경우에는, 
const 키워드로 변수 선언 할 것을 권장합니다.

루프 등의 반복 도중에 특정 변수가 참조하는 값을 바꿔야 할 때가 있습니다. 
그런 경우에는 변수에 다시 할당 할 수 있는 let키워드로 선언 합니다.



3. Let에 대해서

let는 초기 값을 지정하지 않아도 됩니다. 
초기 값을 지정하지 않는 경우, undefined 값으로 초기화됩니다.

1
2
let key;
// `key` is initialized `undefined`


let이 선언 된 key라는 변수에  "content-Type"이라는 문자열을 대입하고 있습니다.

1
2
let key;
key = "content-type";



4. Var에 대해서

var 키워드는 초기 값을 선언하지 않아도 되며,
값을 재할당을 해도 된다는 점에서 let과 유사합니다.
그러나, var키워드는 같은 이름의 변수를 다시 정의 할 수 있습니다.

let과 const는 같은 이름의 변수를 정의할 수 없으며,
다음과 같은 구문 오류 ( SyntaxError)가 발생합니다. 
따라서 실수로 변수를 이중으로 정의하는 실수를 방지 할 수 있습니다.

1
2
let key;
let key; // => SyntaxError: redeclaration of let key


한편,  var의 경우에는 같은 이름의 변수를 다시 정의 할 수 있습니다. 
이것은 실수로 같은 변수 이름으로 정의해도 오류가 나지 않으며,
이전에 선언했던 값을 덮어 버립니다.

1
2
3
var x = 1;
var x = 2;
// x is 2


let은 변수를 선언하기 전에 그 변수를 참조하면 ReferenceError가 발생합니다. 

1
2
3
console.log(x);
//ReferenceError: can't access lexical declaration `x'
before initialization
let x = 1;


한편 var는 변수를 선언하기 전에 그 변수를 참조해도 undefined값이 할당 됩니다. 

1
2
console.log(x); // => undefined
var x = 1;



5. 정리

JavaScript의 변수를 선언하는 키워드로 constletvar에 대해 정리하였습니다.

  1. const는 값을 재할당 할 수 없는 변수를 선언 할 때 쓰입니다.
  2. letvar은 재할당 할 수 있는 변수를 선언 할 수 있으며,
    초기값을 선언하지 않아도 됩니다.
  3. var의 경우만 같은 값을 중복 선언 할 수 있습니다.

const는 재할당이 불가능한 변수를 정의하는 키워드입니다. 
재할당을 금지함으로써 실수로 다른 값을 할당하여 발생하는 버그를 줄일 수 있습니다. 

따라서, 변수를 선언하는 경우에는 먼저 const로 정의 할 수 없는지를 검토 후,
불가능한 경우 let를 사용할 것을 권장합니다.


3
  • 댓글 4

  • 바람종
    1k
    2020-08-04 10:17:50

    중요한 내용중 하나가 빠진것 같아서 댓글을 남겨봅니다.

    var 는 함수 레벨 스코프를 따르고

    const/let 은 블럭 레벨 스코프를 따릅니다.

    이 특징이 코드를 작성하는데 꽤 큰 영향을 주기 때문에 언급해봅니다.

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

    위 사이트는 google에서 let block level scope라고 검색하면 맨위에 있는 사이트입니다.

    어느 정도 정리가 괜찮게 되어있어서 링크합니다.

    ( + https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let )

  • 므므
    30
    2020-08-21 06:01:04

    Typescript를 쓰면 tslint 설정에 따라 다르지만 var은 거의 안쓰게됩니다. Typescript도 다뤄주세요~

  • ko-dev-jp
    117
    2020-08-27 02:10:20 작성 2020-08-27 02:17:08 수정됨

    바람종
    므므

    넵, 확실히 지금 글에서 레벨스코프와 
    Typescript에 대한 보충이 필요 해 보이네요.
    링크 첨부 해 주신 것도 확인했습니다! 감사합니다.

  • 초보자1212
    1k
    2020-09-16 09:53:16
    열심히하시는 것 같아서 추천 누르고 가요~
  • 로그인을 하시면 댓글 을 등록할 수 있습니다.