자바스크립트 변수 - var, let, const

여태껏 var보다 let, const가 더 좋다고만 알고 있어서 let, const만 써왔습니다.

하지만 신입개발자라면 면접에서 이 변수들의 차이점에 대해서도 질문이 나온다고 해서 저 또한 신입개발자이기 때문에 var, let, const에 대해 포스팅을 하게 되었습니다.

var, let은 변수 선언이고 const는 상수 선언입니다.

과거에는 변수와 상수 구분 없이 var만 써왔는데 2015년 ES6 문법에서 변수와 상수를 구분 짓는 변수가 나타났습니다.

변수란?

변수(variable)는 데이터 보관함 같은 것이다. 각 보관함의 이름(라벨)이 변수명입니다.

보관함의 크기는 모두 동일하고 이것을 통해서 데이터를 재할당을 할 수 있고 데이터를 직접 입력하는 대신 프로그래이 실행될 때 실제 데이터로 교체되는 변수로 데이터를 보여줍니다.

const

블록스코프
중복선언 불가
선언문 이전 접근 불가

상수는 원시타입인 string, number, boolean 같은 원시타입일 경우에는 한번 값을 지정하면 다른 값으로 재할당 할 수 없습니다.

const age = 25;
age = 30;

console.log(age);//error

객체타입은 그 객체의 속성 값을 바꿀 수 있습니다.

const a = {
    a: 1,
    y: 2,
  };
  
  a = { a: 3 }; // error
  
  a.a = 3; // a:3, y:2
  
  console.log(a);

객체 타입은 새로운 객체로 할당하는것이 아니라 이미 가지고 있는 객체를 유지하면서 내부적인 속성을 변경하는것이라 가능합니다.

만약 내부속성을 바꾸고싶지 않다면 Object.freeze() 함수로 객체를 얼려주면 됩니다.

const a = Object.freeze({
    a: 1,
    y: 2,
  });
  
  a.a = 3;
  
  console.log(a); // a: 1, y: 2

배열도 마찬가지 입니다.

const a = [1, 2];

a = [100, 200]; // error

a[0] = 100; // a:100, y:2

console.log(a);

배열 자체를 재정의 할 수는 없지만 내부적인 요소는 재정의가 가능합니다.

let, var

let, const는 같지만 var는 다른점이 있습니다.

변수의 스코프
중복선언 가능 여부
호이스팅

스코프에는 함수 스코프, 블록 스코프, 전역 스코프가 이렇게 세가지가 있습니다.

함수 스코프와 블록 스코프는 스코프 내부에서 변수를 선언하면 외부에서 접근할 수 없습니다.

함수 스코프(function scope) - var
블록 스코프(block scope) - let
전역 스코프(global scope) - 함수나 블록 어디에도 속하지 않고 최상위 외부에서 선언

var

var는 중복 선언이 가능하고 함수 밖에서는 함수 내부에 있는 변수에 접근할 수 없습니다.

function main() {
  if (true) {
    var x = "hi";
  }
  console.log(x); //hi
}
console.log(x); // error

main();

var는 중복선언이 가능 하기 때문에 함수 스코프 내부에서 선언을 하고 블록 스코프 안에서 선언을 하면 외부에 있는 변수는 블록 스코프의 값으로 덮어씌워집니다.

function main() {
  var x = "outside";
  if (true) {
    var x = "inside";
    console.log(x); //inside
  }
  console.log(x); // inside
}

main();

let

let은 중복선언이 불가능 하기 때문에 함수 스코프 내부에 있는 변수와 블록 스코프 내부에 있는 변수는 각각 다른 메모리 주소를 가집니다.

function main() {
  let x = "outside";
  if (true) {
    let x = "inside";
    console.log(x); //inside
  }
  console.log(x); // outside
}

main();

전역 스코프(global scope)

함수 바깥에 있는 변수를 전역변수라고 합니다.

브라우저에 대한 정보는 window 객체가 가지고 있습니다. 이것을 설명하는 이유는 var를 선언하게 되면 window 객체에 이 변수가 자동으로 등록이 되기 때문입니다. window 객체는 전역적으로 공유가 되기 때문에 작성한 코드나 사용하고 있는 모든 라이브러리들이 공유하게 된다면 다른 코드로 인해 값이 덮어씌워져서 변경될 수 있습니다.

console.log로 window를 찍어보면 var로 선언한 변수명이 등록되어있는것을 볼 수 있습니다.

var aX = "안녕하세요";

var aX = "hi";

console.log(aX); // hi

이러한 이유로 전역 스코프에 var는 쓰지 않는것이 좋습니다.

let aX = "안녕하세요";

let aX = "hi";

console.log(aX); // error

let은 변수명이 중복되었으므로 바로 에러가나는것을 확인 할 수 있습니다. 그리고 window 객체에도 등록되지 않습니다.

호이스팅

호이스팅이란 함수 안에 있는 선언들을 모두 끌어올려서 메모리 공간을 선언 하기 전에 미리 할당하는 것을 의미합니다.

console.log(num); //undefined

var num = 10;

var의 경우는 값을 출력을 한 후에 변수를 선언 했지만 에러가 나지 않습니다. 오히려 자동으로 undefined 값을 할당해주고 있습니다.

변수 호이스팅은 프로그램이 실행되기 전에 변수의 선언과 변수의 초기값을 분리해서 변수의 선언 부분만 뚝 잘라 코드의 맨 위로 끌어올려 자동으로 undefined 값으로 초기화 합니다.

let의 경우는 var와 마찬가지로 호이스팅이 되지만 값은 할당해주지 않습니다.

console.log(num); //error

let num = 10;

변수를 선언하지 않고 초기값도 주지 않았는데 에러가 나지 않는것은 자바스크립트에만 나타난다고 합니다. 다른 언어에서는 선언도 하기전에 출력할 수 없다고 합니다.

이런 기이한 현상을 막아서 버그들을 최소화 할 수 있다면 var 대신 let, const를 쓰는것이 매우 좋습니다.

이 블로그 검색

민하코