[Javascript] 변수 var, let, const 의 차이

자바스크립트에서 변수를 선언할 때 사용하는 var키워드는 1995년부터 2015년까지 모든 JavaScript 코드에서 사용되었습니다.

그러나 var 키워드는 지나치게 유연(?)해서 많은 문제점들이 있었습니다.

그래서 이를 개선하기 위해 let과 const 라는 키워드가 2015년(ES6) Javascript에 추가되었습니다.

ES6를 지원하는 브라우저라면 let 과 const를 사용하기를 권장하며, 그렇지 않다면 var를 사용해야 합니다.

반응형

 

변수란?

변수는 데이터 저장(데이터 값 저장)을 위한 컨테이너입니다.

var x = 5;
var y = 6;
var z = x + y;

자바스크립트는 매니지드 언어(managed language)이기 때문에 개발자가 직접 메모리를 제어하지 못합니다. 따라서 변수를 통해 값에 접근이 가능합니다. 
변수명(식별자)인 x, y, z 는 변수의 값이 아닌 메모리 주소를 기억하고 있고, 변수명을 사용하면 자바스크립트 엔진이 변수명과 매핑된 메모리 주소를 통해 거기에 저장된 값을 반환합니다.
이처럼 변수에 값을 저장하는 것을 할당(assignment, 대입, 저장)이라 하며 변수에 저장된 값을 읽어 들이는 것을 참조(reference)라 합니다. 그리고 변수명을 자바스크립트 엔진에 알리는 것을 선언(declaration)이라 합니다.

 

변수 선언 및 할당

JavaScript에서 변수를 생성하는 것을 변수 "선언"이라고 합니다.

var, let, const 키워드를 이용하여 변수를 선언합니다.

var carName;
console.log(carName); // output: undefined

var 키워드를 이용한 변수 선언은 선언 단계와 초기화 단계가 동시에 진행되어, carName에 암묵적으로 undefined를 할당해 초기화 합니다. 그런데 반대로, 변수 선언 전에 console.log를 먼저 찍어도 반환 값이 undefined로 나옵니다.

이는 변수 선언이 런타임에서 되는 것이 아니라, 그 이전 단계에서 먼저 실행되기 때문입니다. 자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 실행하기에 앞서, 변수 선언을 포함한 모든 선언문(ex. 변수, 함수 등)을 찾아내 먼저 실행합니다. 즉, 변수 선언은 어디에 있든 다른 코드보다 먼저 실행되는 특징을 호이스팅(hoisting)이라 한다.
변수 선언 뿐만 아니라  var, let, const, function, function*, class 키워드를 사용해 선언한 모든 식별자(변수, 함수, 클래스 등)는 호이스팅이 된다.

 

변수에 값을 할당 하려면 등호(= 할당연산자)를 사용합니다.

console.log(carName) // output: undefined

var carName; // 변수선언
carName = "Volvo"; // 값의 할당

console.log(carName) // output: Volvo

var carName = "Volvo"; // 변수 선언과 값의 할당

변수 선언과 할당은 하나의 문(statement)으로 단축 표현할 수 있지만, 두 개의 실행 시점은 다릅니다. 변수 선언은 호이스팅되어 런타임 이전에 실행되지만, 값의 할당은 소스코드가 순차적으로 실행되는 런타임에 실행됩니다.
따라서 변수의 할당과 console을 실행하는 위치에 따라 반환되는 값이 다릅니다.

carName 이라는 변수에 새로운 값을 재할당을 할 수도 있습니다.

재할당은 변수에 저장된 값을 다른 값으로 변경하는 것으로, 만약 변경할 수 없는 값이라면 이는 변수가 아니라 상수(constant)라고 부릅니다.

console.log(carName) // output: Volvo
carName = 'BMW'
console.log(carName) // output: BMW

 

함수 호이스팅(Hoisting)

호이스팅은 앞서 언급한 것과 같이 

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말합니다.

함수는 보통 다음의 네 가지 방식으로 정의합니다.

// 1. 함수 선언문
// 함수 이름 생략 불가능
function add(x, y) {
  return x + y;
}

// 2. 함수 표현식
// 함수 이름 생략 가능
var add = function(x, y) {
  return x + y;
}
// 함수 이름 작성 시,
// var add = function plus(x, y) {
//   return x + y;
// }

// 3. Function 생성자 함수
var add = new Function('x', 'y', 'return x+ y');

// 4. 화살표 함수
var add = (x, y) => x + y;

위에서 함수 선언문과 함수 표현식의 호이스팅 결과를 살펴보겠습니다.

var add2; // Hoisting 함수표현식의 변수값 "선언"

// 함수 참조
console.dir(add); // output: f add(x, y)
console.dir(add2); // output: undefined

// 함수 호출
console.log(add(2, 3)); // output: 5
console.log(add2(2, 3)); // output: Uncaught TypeError: add2 is not a function

// 함수 선언문
function add(x, y) {
  return x + y;
}

// 함수 표현식
add2 = function(x, y) {
  return x + y;
}

함수 선언문의 경우, 런타임 이전에 자바스크립트 엔진에서 먼저 실행되어, 함수 자체가 호이스팅 됩니다. 반면 함수 표현식은 런타임 이전에 해당 값을 undefined로 초기화만 시키고, 런타임에서 해당 함수 표현식이 할당되어 그때 객체가 됩니다.

 

스코프

스코프(scope)는 식별자(ex. 변수, 함수, 클래스 등)의 유효범위를 뜻하며, 선언된 위치에 따라 유효 범위가 달라집니다.

전역 변수는 어디에서든지 참조가 가능한 값이고, 지역 변수는 자신의 지역 스코프와 그 하위 지역 스코프에서 유효합니다.
자바스크립트에서 모든 코드 블록(if, for, while, try/catch 등)이 지역 스코프를 만들며, 이러한 특성을 블록 레벨 스코프라 합니다. 하지만 var 키워드로 선언된 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정하며, 이를 함수 레벨 스코프라고 합니다.

var x = 1

if (true) {
  var x = 2
}

console.log(x) // output: 2

위의 예에서만 보면 if문 밖에서 var 키워드를 이용해 x를 선언했기 때문에 전역 변수로 취급합니다. 기존에 있던 x 변수가 중복 선언되면서, 최하단의 console에서도 출력 값이 2로 바뀐 것을 확인할 수 있습니다.
해당 예제는 코드가 짧아서 어디에서 문제가 일어난지 바로 알 수 있었지만, 실무에서는 그렇지 않습니다. 전역 변수로 인해 재할당이 발생하거나, 전역 스코프를 공유하기 때문에 어딘가에 동일한 이름이 있다면 예상치 못한 결과를 가져올 수 있는 위험이 있습니다. 따라서 오로지 함수 코드 블록만을 지역 스코프로 인정하는 var 대신, 블록 레벨 스코프를 지원하는 const와 let을 사용하는 것을 권장합니다.

 

var, let, const의 차이점

var 키워드는 크게 세 가지 문제점이 있습니다.

1. 변수 중복 선언 가능하여, 예기치 못한 값을 반환할 수 있다.
2. 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 된다.
3. 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환한다.

이러한 문제를 해결하기 위해 나온 것이 let과 const 입니다.

1. let 특징

변수 중복 선언이 불가하지만, 재할당은 가능합니다.

let carName = 'Volvo';
console.log(carName); // output: Volvo

let carName = 'Benz'; // output: Uncaught SyntaxError: Identifier 'carName' has already been declared

carName = 'Benz';
console.log(carName); // output: Benz

선언 단계와 초기화 단계가 분리되어 진행됩니다.(호이스팅)

console.log(carName); // output: Uncaught ReferenceError: carName is not defined
let carName = 'Volvo';

2. const 특징

역시 중복선언 불가하며, const의 경우 반드시 선언과 초기화를 동시에 진행되어야 합니다.

const carName; // output: Uncaught SyntaxError: Missing initializer in const declaration
const carName = 'Volvo';

기본적으로 재선언 및 재할당이 불가합니다.

하지만 재할당의 경우는 조금 다른데,

원시 값은 변경이 불가능하지만, 객체의 내부값은 변경이 가능합니다.

// 원시값의 재할당 불가
const carName = 'Volvo';
carName = 'Benz'; // output: Uncaught TypeError: Assignment to constant variable.

// 객체의 재할당 가능
const carName = {
  brand : 'Volvo'
};
carName.brand = 'Benz';

console.log(carName); // output: { brand: "Benz" }

const 키워드는 선언 단계와 초기화 단계가 동시에 진행됩니다.

 

3. let과 const의 공통 특징: 블록 레벨 스코프

let, const 키워드로 선언한 변수는 모두 코드 블록(ex. 함수, if, for, while, try/catch 문 등)을 지역 스코프로 인정하는 블록 레벨 스코프를 따릅니다.
위에서 var 키워드의 예를 들었던 것을 그대로 가져와 바꾸면 다음과 같은 결과가 나옵니다.

let x = 1

if (true) {
  let x = 2
}

console.log(x) // output: 1

let 키워드로 선언한 경우 if 문 안에 있는 것은 지역 스코프를 가져 전역에서 console을 찍었을 경우, 전역에서 선언한 1이 결과 값으로 출력됩니다. (const 키워드도 let 키워드와 동일)

 

반응형

 

마무리...

혼자서 하는 작은 프로그램의 경우, 오류 발생 시(값의 오류라 찾기가 힘듦) 그래도 어느정도 찾을 수는 있겠지만

실무에서 여러사람이 참여하는 경우, var를 사용하여 꼬인 경우 해결하기가 힘들 수 있습니다.

따라서 앞서 여러번 언급 했지만 var 보다는 let과 const 를 사용하는 것을 권장합니다.^^