[JavaScript] *var* vs *let* vs *const*

Peter·2022년 3월 3일
0

JavaScript

목록 보기
2/9
post-thumbnail

MDN const
MDN let
MDN var

변수 선언

자바스크립트에서 변수를 선언하는 방법은 3가지(4가지?)로 var, let, const 이다 변수에 할당된 값을 바꿀 수 있다는 점에서 var와 let이 다소 혼동이 생기고, const는 할당된 값을 바꿀 수 없지만 오브젝트 선언시 키, 밸류값이 변경 가능하다는 점에서 본래 컨셉과 혼동되는 경우가 있다. 세가지 변수선언 방법에 대해 명확히 해보자

var

  • var로 변수를 선언하는 방법은 한가지가 아니라 애매한 또 다른 한가지가 있다.
    • 위 코드 y 값을 보면 var 선언자를 사용하지 않고 변수를 할당했다.
    • z 는 var를 사용해 선언해줬다
    • 하지만 두가지 방법 다 값이 정상적으로 선언되고 console.log에 의해 잘 출력되는 것을 볼 수 있다.
    • 하지만 y값은 strict 모드에서는 레퍼런스에러(존재하지 않은 변수)를 뱉는다

  • 변수 선언은 코드가 실행되기 전에 처리된다
    • 선언되지 않은 bla에 2를 할당하고 뒤에 var를 사용해 bla를 선언하는데 실제로는 7, 8 번줄과 같은 순서로 진행이 된다
    • 이것을 호이스팅 이라고 한다

  • 위와 같은 상황에서 x, y가 일단 선언되고 x에는 undefined 인 y 할당이 일어난 뒤 y에 'A'가 할당된다
    • 이러한 현상을 방지하기 위해선 할당선언이 먼저 일어나고 할당해야 한다.

  • 위 코드를 보면 얻을 수 있는 몇가지 포인트가 있다.
    • 최상위에서 선언된 x 는 아래 레벨에서 할당이 가능하다는 점
    • 함수안에서 선언된 var y는 지역변수로써 함수 밖에선 사용할 수 없다
    • z 는 var로 선언되지 않았지만 13번줄에서 전역변수로 생성된다

let

  • let 변수 할당은 var와 마찬가지로 할당할 수 있다
  • 다만 구조분해 할당을 통해 이미 선언된 오브젝트의 키 이름으로 변수를 선언할 수 있다.

  • var의 경우 상위 레벨에서 선언되더라도 var 선언자를 통해 하위레벨에서 할당이 이뤄질 수 있지만 let은 스코프 규칙에 의해 이름이 같더라도 상위블록과 해당 블록의 x는 서로 다른 변수로써 작용한다.

  • var는 전역객체에 속성을 추가하지만
  • let은 추가하지 않는다.

  • 분기처리 처리를 하지 않은 하나밖에 없는 블록안에선 재 선언이 불가능하다
  • 분기에 블록을 배치하면 블록 스코프가 생성되브로 스코프 규칙에 따라 같은 이름이 선언되어도 서로 다른 변수로 오류 없이 사용 가능하다

  • Temporal Dead Zone 에 들어간 변수로써 시간에 의해 실행되기 때문에 호출 시점에 선언되지 않을때 오류를 뱉는다
  • var는 프로그램 시작과 동시에 변수로 선언이 되있는 상태로 undefined를 나타내지만 let은 그렇지 않으므로 존재하지 않음 에러를 만나게 된다.

  • 시간의 순서대로 함수가 선언됐지만 호출 시점은 letVar 변수가 할당된 시점 이후이므로 에러를 만나지 않는다.

const

const foo = "bar";

foo = "barbar" // SyntaxError
var foo = "barbar" // SyntaxError
  • const 로 선언된 변수는 이름을 수정할 수 없고
  • 할당된 값을 변경할 수 없다
const MY_OBJECT = {'key': 'value'};

MY_OBJECT.key = 'otherValue';
  • 하지만 오브젝트의 키과 밸류의 변경은 가능하다
MY_OBJEVT.freeze()
  • 프리즈를 통해 오브젝트 변경을 막을 수 있다.
const MY_ARRAY = [];
// 배열에 아이템을 삽입하는 건 가능합니다
MY_ARRAY.push('A'); // ["A"]
// 하지만 변수에 새로운 배열을 배정하면 에러가 발생합니다
MY_ARRAY = ['B']
  • 어레이 에 값을 추가하고 빼는 겂은 가능하지만 재할당은 불가하다.

정리

var vs let

  • var는 스코프를 함수로 제한
  • let은 스코프를 해당 블록으로 제한

let vs const

  • 일시적 사각 시대는 둘 다 동일하게 작용
  • 블록 범위 스코프

느낀점

  • 정리해보자면 var는 앞에서 선언하지 않아도 선언자 없이 변수를 만들 수 있다 const, let은 그렇지 않다
  • var 는 함수 단위로 스코프를 가지기 때문에 프로그램 시작시 이미 변수들이 할당된다
  • const, let을 사용하면 var에 비교해 유연성이 떨어지고 사용자가 불편해진다
  • 하지만 var 로 선언된 변수는 저 아래 어디엔가에서 재할당이 될 수 있다는 위험성을 가진다. 이 코드의 유지보수 측면에서 매우 치명적이다
  • 불편하지만 오류를 발생할 수 있는 포인트를 줄이는 방향성을 볼 수 있었다.
profile
컴퓨터가 좋아

0개의 댓글