Javascript var, let, const 차이 구분하기

Javascript 변수 선언 구분하기

 

최근 Javascipt 공부를 시작하면서 기본적인 내용을 정리해보려고 끄적여본다. ㅎㅎ

Javasript에서 변수를 선언하기 위해서는 var, let, const가 있는데 이 3가지 변수의 차이점을 비교하자.

3가지 변수 선언방식의 차이를 알기 위해서 먼저 scope에 대해서 알아보자.

---

scope란?

scope의 정의는 컴파일러가 변수나 함수가 필요할 때 찾는 공간을 의미한다. scope는 global scope, local scope. lexical scope가 있고 지금은 간단히 global scope, local scope만 설명하겠다.

 

global scope란?

global scope란 변수가 블록밖에 선언되어 특정 블록 내부에 바인딩되어있지 않아 사용 범위가 어느 블록에서든 불러올 수 있어 전역 변수라고 불린다.
전역 변수를 많이 선언할수록 메모리를 많이 잡아먹어 성능이 안 좋아져 지양해야 한다.

var globalVariable = "Global Hello";
function globalFunction() {
  return globalVariable;
}
globalFunction(); // "Global Hello"

 

local scope란?

local scope란 변수가 function 또는 블록 내부에서 선언된 변수의 사용 범위가 function, 블록 내부로 한정되어 function, 블록 밖에서는 사용이 불가능하여 지역 변수라고 불린다.

function localFunction() {
  let localVariable = "Local Hello";
  return localVariable;
}
console.log(localFunction); // "Local Hello"
console.log(localVariable); // "ReferenceError: localVariable is not defined"

var = function-scoped

let, const = block-scoped

local scope안 function-scoped와 block-scoped를 알아보자.

function-scoped란?

함수(function) 내부에서 선언된 지역 변수를 선언할 때, 이 변수의 사용 범위는 해당 함수(function) 내부로 한정된다.  

 

block-scoped란?

block안에 정의된 즉, 브래킷 ("{}") 내부에서 변수를 선언할 때, 이 변수는 해당 block안에서만 사용이 가능한다. 해당 사용에서는 block으로 변수를 잡기 때문에 개발자가 의도한 범위보다 더 넓게 사용될 수 있고 더 많은 메모리를 사용하여 일반적으로는 사용하지 않는 것을 권장한다.

 

두 scope의 차이를 보여주는 것은 아래의 코드와 같다.

var

ES5까지 변수로 선언하는 유일한 방법이었지만 현재 ES6로 넘어오면서 사용하는 것일 지양하고 있다.

그 이유는 선언한 변수를 중복 선언이 가능하고 전역 객체로 사용되어 의도치 않게 먼저 선언된 변수 값이 변경되는 부작용이 발생할 수 있기 때문이다.

function varExample(){
    if (true){
        var example = "I was created using var";

    }
    console.log(example);
}

varExample(); // "I was created using var"

var는 function-scoped이기 때문에 function안에만 선언이 되어 있다면 브래킷 ("{}")을 넘어 사용할 수 있다.

 

let

var의 단점을 보완하기 위해 ES6부터 새로운 변수 선언 키워드이고 중복 선언이 금지되어 중복이 발생하면 syntaxError가 발생한다.

function letExample(){
    if(true){
        let example = "I was created using let";

    }
    console.log(example);
}

letExample(); // "Uncaught ReferenceError: example is not defined"

let은 block-scoped이기 때문에 브래킷("{}")을 넘어 사용이 불가능하여 ReferenceError가 발생한다. 

해결방법은 아래와 같이 사용하는 방법이 있다.

function letExample(){
    let example = "I was created using let";
    if(true){
        console.log(example);
    }
}

letExample(); // "I was created using let"

const

const는 상수를 선언하기 위해 사용된다. 하지만 반드시 상수만을 위해서 사용하지는 않는다. 또한 const는 선언한 변수는 반드시 선언과 동시에 초기화해야 하며 한번 할당된 변수는 재할당이 불가능하다. 

const foo = 0102582;

console.log(foo); // 0102582

const errorTest; // SytaxError: Missing initializer in const declaration

but 재할당이 금지일 뿐 불변을 의미하지는 않는다. 

const person = {
	name: 'jiwon'
    };
person.name = 'yukang';

console.log(person.name); // yukang

새로운 값을 재할당하는 것은 불가능하지만 프로퍼티 동적 생성, 삭제, 프로퍼티 값의 변경을 통해 객체를 변경하는 것은 가능하다. (객체가 변경되더라도 변수에 할당된 참조 값은 변경되지 않는다.)

 

var, let, const 비교

var one = "var 첫 선언";
console.log(one); // "var 첫 선언"
var one = "var 재선언";
console.log(one) // "var 재선언"

let two = "let 첫 선언";
console.log(two); // "let 첫 선언"
let two = "let 재선언"; 
console.log(two) // Uncaught SyntaxError: Identifier 'two' has already been declared
two = "let 재할당";
console.log(two) // "let 재할당"

const three = "const 첫 선언";
console.log(three); // "const 첫 선언"
const three = "const 재선언";
console.log(three); // Uncaught SyntaxError: Identifier 'three' has already been declared
three = "const 재할당";
console.log(three); // Uncaught TypeError: Assignment to constant variable.

간단 정리

	var	let	const
재선언	가능	불가능	불가능
재할당	가능	가능	불가능
scope구분	function	block	block

 

var, let, const의 호이스팅이 궁금하다면 아래를 참고해보자

https://yukang-laboratory.tistory.com/12

호이스팅(Hoisting)을 알아보자

 

참고 

모던 자바스크립트 Deep Dive

https://blog.devgenius.io/understanding-scope-in-javascript-f88e946636ac

Understanding Scope in JavaScript