본문 바로가기

프론트

[JavaScript] 변수 선언

728x90

변수란?

자바스크립트에서 변수는 데이터를 저장할 수 있는 이름 붙은 공간이다.

변수를 통해 숫자, 문자열, 객체와 같은 값을 저장하고 그 값을 나중에 다시 사용하거나 변경할 수 있다.

즉, 복잡한 로직을 작성할 때 중간 상태를 기억할 수 있다는 소리다.

자바스크립트에서는 이런 변수를 선언하는 방법이 3가지(var, let, const) 존재한다.

왜 3개나 되는지 한번 알아보도록 하겠다.

var

var의 경우 과거에 사용하던 방식이다.

var name = "홍길동";

위와 같은 방식으로 선언한다.

재선언이 가능하며, 재할당이 가능하다.

하지만 아래와 같은 이유로 요즘은 거의 사용하지 않는다.

함수 스코프 -> 블록 {}을 무시하고 함수 단위로 작동한다.

  • 함수 내부에 선언된 함수만 지역변수로 한정한다.
  • 함수 밖에서 선언한 vsr 변수는 전역변수로 간주한다.
    • 외부에서도 접근이 가능하다.

var 키워드를 생략할 수 있다.

  • var 생략을 허용하기 때문에 의도치 않은 변수의 전역화가 이뤄질 수 있다.

중복 선언이 가능하다.

  • 의도치않은 변수값을 변경할 수 있다.

변수 호이스팅으로 인해 변수를 선언하기 전에 참조가 가능하다.

  • 모든 선언문이 해당 유효범위의 선두로 옮겨진 것처럼 동작하는 특성을 변수 호이스팅이라 한다.
  • 즉, 모든 선언이 코드 맨 위로 끌어올려진다는 뜻이다.

let

let age = 25;
age = 30; // 재할당 가능

위와 같은 방식으로 선언한다.

재선언은 불가능하지만, 재할당은 가능하다.

블록 스코프 -> 블록 {} 단위로 지역변수로 처리한다.

호이스팅은 발생하지만, 초기화는 되지 않는다.

  • 선언 이전에 참조하려 할 경우 참조 에러가 발생하게 된다.
  • 이런식으로 초기화 이전의 구건을 TDZ라 부른다.

let에서의 호이스팅

console.log(num); // 참조 에러(ReferenceError)
let num = 10;
  • let num 선언은 호이스팅되어 위로 올라왔다.
  • num을 사용 할 수 있는 시점은 초기화 시점 즉, let num = 10; 부터 사용 가능하다.
  • 초기화 전까지는 접근하더라도 에러가 발생하는 TDZ 구간이다.

const

const PI = 3.14;

위와 같은 방식으로 선언한다.

재선언과 재할당 모두 다 불가능하다.

때문에, 선언할때 반드시 초기값을 지정해줘야한다.

값이 바뀌면 안 되는 상수, 설정값, 불변 객체와 같은곳에서 주로 사용한다.

블록 스코프 -> 블록 {} 단위로 지역변수로 처리한다.

728x90