[JS, JAVASCRIPT] 변수와 변수 선언 방법(var, let, const)

쇼핑몰에서 판매 중인 상품이나 장바구니 등의 정보 등 대부분의 웹 사이트에서 사용자나 서버에서 입력받은 정보를 처리하는 방식으로 동작하는데, 이러한 정보를 저장할 때 변수가 사용된다.
여기서 말하는 변수는 무엇이고 어떻게 선언할까?

변수란?

자바스크립트에서 변수는 데이터를 담는 그릇을 의미한다.
변수는 var, let, const 키워드를 사용하여 선언하고,

let x;

할당 연산자(=)를 사용해 값을 할당한다.

let x = "a";// 문자열 저장

그리고 식별자인 변수명을 사용해 변수에 저장된 값을 참조한다.

let x;
x = 'a';

alert(x); // 변수에 저장된 값을 보여준다.

한 줄에 변수 선언과 값 할당을 할 수 있으며, 한 번에 여러 변수를 선언할 수 있다.

// 한 줄에 변수 선언과 값을 할당할 때
let a = 'Hello!'; // 변수를 정의하고 값을 할당합니다.
alert(a); // Hello!

// 한 번에 여러 변수를 선언할 때
let user = 'soa', age = 30, message = 'welcome';

자바스크립트에서 변수를 선언할 때에는 아래와 같은 방법으로 선언한다.

변수 선언방법

1. var

ES5에서 변수를 선언할 수 있는 유일한 방법으로 한 번 선언된 변수명에 데이터를 재할당, 동일한 변수명으로 재선언 가능한다.

var x = 5;
var y = 7;
var z = x + y; // 12
console.log("z 출력값:", z);

var은 다음과 같은 특징이 있어 주의를 기울이지 않으면 심각한 오류를 발생시켰다.

• 함수 레벨 스코프: 함수 내부에 선언된 함수만 지역변수로 한정하고, 함수 밖에서 선언한 var변수는 전역변수로 간주해 외부에서도 접근이 가능한데, 이로 인한 문제가 발생할 수 있다.

  if (true) {
    var test = true;
  }
  
  alert(test); // true(if 문이 끝났어도 변수에 여전히 접근할 수 있음)

  스코프(Scope) : 유효한 참조범위(함수 레벨 스코프(Function-level scope) : 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없음 / 블록 레벨 스코프(Block-level scope) : 모든 코드 블록(함수, if 문, 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다.)

• var 키워드 생략 가능 : var의 생략을 허용함으로써 의도하지 않은 변수의 전역화
• 중복 선언 허용 : 의도하지 않은 변수값 변경

  var x = 1;
  console.log(x); // 1
  
  // 변수의 중복 선언
  var x = 100;
  console.log(x); // 100

• 변수 호이스팅 : 변수를 선언하기 전에 참조가 가능

  console.log(x); // ① undefined
  var x = 123;
  console.log(x); // ② 123

  변수 호이스팅(Variable Hoisting) : var 선언문이나 function 선언문 등 모든 선언문이 해당 유효범위의 선두로 옮겨진 것처럼 동작하는 특성

이러한 var의 단점을 보완하기 위해 ES6에서 let과 const를 도입하였다.

2. let

• 한번 선언된 변수명에 데이터를 재할당은 가능하나 동일한 변수명으로 재선언 불가
• 동일한 변수명으로 재선언 불가해 변수명이 동일해 발생할 수 있는 문제를 미연에 방지할 수 있음

let x1 = 5; 
let y1 = 7; 
let z1 = x1 + y1; 
console.log("z1 출력값:", z1); 

let x1 = 7; // SyntaxError: Identifier 'x1' has already been declared

x1 = 9; 
y1 = 10; 
z1 = x1 + y1; 
console.log("z1 출력값2:", z1);

• 변수 호이스팅이 발생하지 않음 : let 키워드로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceError)가 발생

console.log(foo); // undefined
var foo;

console.log(bar); // Error: Uncaught ReferenceError: bar is not defined
let bar;

• 블록 레벨 스코프 : 모든 코드 블록(함수, if 문, 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없음

let foo = 123; // 전역 변수

{
  let foo = 456; // 지역 변수
  let bar = 456; // 지역 변수
}

console.log(foo); // 123
console.log(bar); // ReferenceError: bar is not defined

위 예제에서 코드 블록 내에 선언된 변수 foo는 블록 레벨 스코프를 갖는 지역 변수이다. 전역에서 선언된 변수 foo와는 다른 별개의 변수이다. 또한 변수 bar도 블록 레벨 스코프를 갖는 지역 변수이다. 따라서 전역에서는 변수 bar를 참조할 수 없다.

3. const

• constant(상수) : 변하지 않는 값 선언 시 사용
• 변수를 선언하는 시점에 값을 할당하고, 값을 재할당하거나 동일한 변수명으로 재선언 둘 다 불가
• let과 마찬가지로 호이스팅이 발생하지 않으며, 블록 레벨 스코프 지원

const PI = 3.14; // 절대값을 사용할 때 대문자로 표기 
PI = 3.16; // 에러발생

정리

데이터를 담는 그릇인 변수는 var, let, const로 선언해 사용하는데 아래와 같은 차이점이 있다.

	재선언	재할당	변수의 스코프 (유효범위)	변수 호이스팅 (변수를 선언하기 전에 참조가능 여부)
var	o	o	함수 레벨 스코프	o
let	x	o	블록 레벨 스코프	x
const	x	x	블록 레벨 스코프	x

현재까지도 var 선언이 가능하지만 재선언 등으로 인해 오류가 발생할 수 있어 ES6를 사용한다면 let, const로 선언하는 것이 좋다.

자바스크립트 면접질문 검색하면 나오는 문항 중 하나이기도 하다. 시간될 때 정리해 두면 좋을 것 같다.

기타

변수에 대해 조사하다 스코프(Scope), 변수 호이스팅(Variable Hoisting)을 알게 되었다.
깊이 알고가면 내용이 길어 여기에는 간단하게 작성했지만 나중에 자세히 조사해 이해하고 정리해봐야겠다.

참고자료

Data type & Variable | PoiemaWeb

let, const | PoiemaWeb

변수와 상수

자바스크립트 변수 선언 방식의 차이점 - var / let / const