[JavaScript] 변수의 선언 방식(var, const, let)

자바스크립트 변수의 선언 방법을 var, const, let으로 나누어 살펴보고자 한다.

 

자바는 int, String, long... 자바스크립트는 그런 거 상관없이 무조건 var~!

 

이것이 지금까지 주먹구구식으로 배운 나의 얕은 자바스크립트에 대한 지식이었다. 물론, var 외에 const, let 변수는 다른 분들이 코딩해놓은 소스에서는 종종 봤던 것 같다. var는 그렇다 쳐도 const, let... 도대체 이것은 무엇을 의미하는 것일까? 본격적으로 변수의 선언 방식에 대해 알아보기 전, '스코프'의 개념부터 공부해봤다.

 

※ Scope(스코프)란?

- 우리말로 번역하면 범위로, 자바스크립트에서는 변수에 접근할 수 있는 범위를 의미한다.

- 전역과 지역, 함수와 블록으로 구분하여 알아본다.

 

ㅁ 전역(Global) vs 지역(Local)

Global(전역)

말 그대로 전역에 선언되어, 어디에서든지 접근 가능한 스코프를 의미한다. 아래와 같이 'grobal'이라는 string 형태의 변수를 전역변수로 선언한다면, sayGlobal(), sayGlobalJs()이라는 함수에서 모두 사용 가능하다.

var global = "global";

function sayGlobal(){
   console.log(global);
}

function sayGlobalJs(){
   console.log(global + " js");
}

sayGlobal();   // global
sayGlobalJs(); // global js

Local(지역변수)

전역변수와 다르게 특정 지역에서만 사용 가능한 변수이다. 자바스크립트는 함수를 선언할 때마다 새로운 스코프가 생성되는데, 아래와 같이 'funcAdd'라는 함수도 정의됨과 동시 새로운 스코프를 생성한다. 이때, funcAdd 안에 생성된 변수(a, b, c)는 모두 지역 변수이며, funcAdd 함수 스코프 밖에서 호출될 시 에러가 발생한다.

function funcAdd(){
  var a = 2;
  var b = 3;
  var c  = a + b;
  console.log(c);
}
funcAdd();   // 5
console.log(c); //Uncaught ReferenceError: c is not defined

 

ㅁ 함수(Function) vs 블록(Block)

Function(함수) Scope

함수(function)가 선언될 때마다 생성되는 스코프로서, 함수의 바운드리안에서만 유효하다. 함수 내에서 선언된 변수는 해당 함수의 스코프를 벗어난 지역에서 호출될 수 없다. 변수의 선언 방식 중, var는 전형적인 함수 스코프를 갖는 변수이다.

 

Block(블록) Scope

블록이란 쉽게 말해 '{ }'로 묶인 영역이다. 자바스크립트 제어문인 if, for, while, 예외 처리를 할 때 쓰이는 try 등은 모두 블록 안에 코드를 개행한다. 이 블록 안이 Block scope이며, 변수의 선언 방식 중 const, let은 모두 블록 스코프 변수이다.

 

아래의 'valTypeTest()'라는 함수의 내용을 보자.

 

함수 스코프 변수인 a, b는 var, 블록 스코프 변수인 c와 d는 각각 let과 const 변수로 선언하였다. 이를 함수의 스코프 내에서 콘솔로 찍어보면 a, b는 정상적으로 출력되는데 반해, c와 d는 'not defined' 에러가 발생한다.

 

함수 스코프인 a는 함수의 바운더리 내에서는 모두 사용 가능하지만, c와 d는 if문의 조건을 적어 넣는 블록 안에 개행되었으므로 블록 스코프를 벗어난 지역에서 호출하면 에러가 발생하는 것이다.

function valTypeTest(){
  var a = 0;
  if(true){
      var b = 7;
      let c = 8;
      const d = 9;
  } 
 console.log(a);  // 0
 console.log(b);  // 7
 console.log(c);  // Uncaught ReferenceError: c is not defined
 console.log(d);
}

valTypeTest();

 

※ 변수의 선언 방식

1. var (function scope)

- 변수의 값이 언제든지 바뀔 수 있으며, 동일한 이름으로 재선언이 가능하다.

- 동일한 이름으로 여러 변수가 생성될 수 있기 때문에, 변수명 남용의 문제가 발생할 여지가 있다.

- 현재 const, let으로 변수 선언 방법이 대체되고 있다.

- 함수 스코프 변수이다.

 

아래 예제 코드에서 varTest라는 변수가 여러 번 새롭게 정의되어도, 변수의 값이 매번 새롭게 갱신되어 출력되는 것을 확인할 수 있다. 다만, 같은 변수명으로 재정의가 가능하기 때문에 깔끔한 코드를 작성하기 힘들다.

var varTest = "hi";
console.log(varTest);  // hi

var varTest = "hello";
console.log(varTest);  // hello

varTest = "goodbye";
console.log(varTest);  // goodbye

 

2. const (Block Scope)

- 변하지 않는 상수와 같은 개념으로, 변수의 값은 선언 즉시 초기화되어야 한다.

- 초기화된 변수의 값은 더 이상 변경이 불가능하다.

- 블록 스코프 변수이다.

 

가령 varTest라는 변수를 const로 선언만 한다면, 초기화 에러가 발행한다. 다시 "hi"로 변수의 값을 초기화하고, 콘솔에 찍어보니 정상적으로 값이 출력된다.

const varTest; // Uncaught SyntaxError: Missing initializer in const declaration

 

const varTest = "hi";
console.log(varTest);  // hi

그러나 초기화가 완료된 상태에서 "good bye"라는 값을 다시 할당하려하면 "Uncaught SyntaxError"가 발생한다.

const varTest = "hi";
console.log(varTest);  // hi

varTest = "goodbye";  // Uncaught SyntaxError: Identifier 'varTest' has already been declared

 

3. let (Block Scope)

- 블록 스코프 변수로서, 블록 안에서 선언되었다면 블록 밖에서는 사용이 불가하다.

- 변수의 값이 재할당될 수는 있지만, 동일한 이름으로 중복 선언이 불가능하다.

let varTest = 0;
let varTest = 1;  // Uncaught SyntaxError: Identifier 'varTest' has already been declared

let varTest = "hi";
console.log(varTest);  // hi

varTest = "goodbye";  
console.log(varTest);  // goodbye

지금까지 자바스크립트의 변수 선언 방식에 대해 알아보았다.

 

감사합니다 : )

 

---

아래 블로그는 놓치기 쉬웠던 내용들도 다루는 블로그로 참고하시면 좋을 것 같습니다

출처 : https://tragramming.tistory.com/m/96

[Javascript] 변수의 선언 방식(var, const, let)