javascript 변수 - const, let, var

변수에 대하여

javascript 뿐만 아니라 어떤 프로그래밍 언어에서든 가장 먼저 다루는 개념이 변수이다.

변수는 '무언가를 담는 상자'라고 생각하면 쉽다.

프로그래밍을 할 때는 무언가를 담아두었다가, 원하는 시점에 꺼내서 쓸 수 있도록 하는 방식으로 코드를 작성하게 된다.

이 말은 '무언가를 담을 수 있는 상자'라는 것이 정확히 어떤 것이고, 어떻게 이루어져 있는지를 이해하는 것이 필요하다.

필자는 4개월간 javascript를 사용해왔는데 기능 구현에만 초점을 맞춘 상태로 기본을 놓치고 있었다.

이번 포스팅에서는 javascript에서 사용되는 '무언가를 담는 상자'에 대해 다뤄보고자 한다.

javascript에서의 변수 선언

javascript에서 사용되는 변수 선언은 const, let, var이라는 키워드를 이용해 이뤄진다.

무언가를 담을 수 있는 상자는 하나면 족하지 않은가? 셋의 차이가 어떻길래 세 가지로 나뉘어 있을까?

꼭 세 가지로 나뉠 필요가 있었을까?

결론부터 말하자면, var가 먼저 생기고 나서, var의 문제점을 해결하기 위해 const와 let이라는 변수가 나타나게 되었다.

 

초창기의 데이터 상자 만들기. var

const와 let이 생긴 이유는 var만 존재했을 때 문제가 발생했기 때문이다.

먼저, var의 특징부터 살펴보자.

- 재 선언이 가능하다

- 재 할당이 가능하다

- 초기값이 필요하지 않다.

- function scope에서 동작한다.

 

이는 '무언가를 담는 상자'라는 역할은 잘 수행하고 있었다.

하지만 도대체 어떤 부분에서 문제를 일으켰기에 const와 let이 나오게 되었을까?

각각의 상자에 내용물이 담겨 있다고 생각해보자.

위의 예시는 색깔의 이름을 이용해 상자를 분류해두었다.

당연히 3개정도의 상자만 존재한다면, 한눈에 알아보기도 쉽고, red라고 부른 상자는 본인이 생각한 red 상자와 같은 상자를 뜻할 것이다.

하지만 프로그래밍을 계속하다 보면, 변수를 셀 수 없이 많이 선언하게 되는 것을 피할 수 없게 된다.

이 상황에서는 내가 red라는 특정 상자의 존재 여부를 까먹을 수도 있다.

때문에 red라는 상자를 새로 이름 지어서 만들어주고, 그 안에 빨간 물건을 담을 수 있다.

하지만 이미 red라는 상자가 존재했다면? var는 이를 감지하지 못하며, red라고 부르는 상자가 내가 생각하는 red 상자가 아닐 수도 있게 된다.

 

또한 사용될 수 있는 범위가 매우 넓다. (function scope)

이는 함수 단위의 scope이기 때문에 함수 이외의 영역에서 변수 선언 시 전역 변수(전체 영역에서 사용 가능한 변수)를 남발하게 될 우려를 발생시키게 된다는 것이다.

이는 프로그래머가 원하는 결과를 도출하지 못할 수 있는 위험을 낳게 된다.

 

이러한 문제들을 해결하려면 다음과 같은 특징들이 필요했다.

- 혹여나 선언했던 변수를 다시 선언하려 한다면 알아차릴 수 있도록 하는 것 변수에 대하여

javascript 뿐만 아니라 어떤 프로그래밍 언어에서든 가장 먼저 다루는 개념이 변수이다.

 

변수는 '무언가를 담는 상자'라고 생각하면 쉽다.

 

프로그래밍을 할 때는 무언가를 담아두었다가, 원하는 시점에 꺼내서 쓸 수 있도록 하는 방식으로 코드를 작성하게 된다.

 

이 말은 '무언가를 담을 수 있는 상자'라는 것이 정확히 어떤 것이고, 어떻게 이루어져 있는지를 이해하는 것이 필요하다.

 

필자는 4개월간 javascript를 사용해왔는데 기능 구현에만 초점을 맞춘 상태로 기본을 놓치고 있었다.

 

이번 포스팅에서는 javascript에서 사용되는 '무언가를 담는 상자'에 대해 다뤄보고자 한다.

 



javascript에서의 변수 선언

javascript에서 사용되는 변수 선언은 const, let, var이라는 키워드를 이용해 이뤄진다.

 

무언가를 담을 수 있는 상자는 하나면 족하지 않은가? 셋의 차이가 어떻길래 세 가지로 나뉘어 있을까?

 

꼭 세가지로 나뉠 필요가 있었을까?

 

결론부터 말하자면, var가 먼저 생기고 나서, var의 문제점을 해결하기 위해 const와 let이라는 변수가 나타나게 되었다.

 

 

 

초창기의 데이터 상자 만들기. var

const와 let이 생긴 이유는 var만 존재했을 때 문제가 발생했기 때문이다.

 

먼저, var의 특징부터 살펴보자.

 

- 재 선언이 가능하다

 

- 재 할당이 가능하다

 

- 초기값이 필요하지 않다.

 

- function scope에서 동작한다.

 

 

 

이는 '무언가를 담는 상자'라는 역할은 잘 수행하고 있었다.

 

하지만 도대체 어떤 부분에서 문제를 일으켰기에 const와 let이 나오게 되었을까?

 



각각의 상자에 내용물이 담겨 있다고 생각해보자.

 

위의 예시는 색깔의 이름을 이용해 상자를 분류해두었다.

 

당연히 3개정도의 상자만 존재한다면, 한눈에 알아보기도 쉽고, red라고 부른 상자는 본인이 생각한 red 상자와 같은 상자를 뜻할 것이다.

 

하지만 프로그래밍을 계속하다 보면, 변수를 셀 수 없이 많이 선언하게 되는 것을 피할 수 없게 된다.

 

이 상황에서는 내가 red라는 특정 상자의 존재 여부를 까먹을 수도 있다.

 

때문에 red라는 상자를 새로 이름 지어서 만들어주고, 그 안에 빨간 물건을 담을 수 있다.

 

하지만 이미 red라는 상자가 존재했다면? var는 이를 감지하지 못하며, red라고 부르는 상자가 내가 생각하는 red 상자가 아닐 수도 있게 된다.

 

 

 

또한 사용될 수 있는 범위가 매우 넓다. (function scope)

 

이는 함수 단위의 scope이기 때문에 함수 이외의 영역에서 변수 선언 시 전역 변수(전체 영역에서 사용 가능한 변수)를 남발하게 될 우려를 발생시키게 된다는 것이다.

 

이는 프로그래머가 원하는 결과를 도출하지 못할 수 있는 위험을 낳게 된다.

 

 

 

이러한 문제들을 해결하려면 다음과 같은 특징들이 필요했다.

 

- 혹여나 선언했던 변수를 다시 선언하려 한다면 알아차릴 수 있도록 하는 것

- 처음 담은 내용물을 다른 위치에서 변경할 수 없도록 제한하는 것

- 이용 될 수 있는 범위를 좁혀, 필요한 곳에서만 이용할 수 있도록 하는 것

 

const와 let의 등장. ES6

위 문제를 해결하기 위해, ECMAScript 표준의 6번째 에디션 ES6에서는 const, let이라는 변수 키워드가 등장하게 된다.

먼저, const에 대해 알아보자.

 

상수 선언을 위한 키워드, const

1. block scope에서 동작한다.

모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) 내에서 선언된 변수는 코드 블록{} 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다.

 

다음 예시를 보자

var number = 111; // 전역 변수
console.log(number); // 111
{
  var number = 456; // 전역 변수
}
console.log(number); // 456

var 키워드는 function scope라고 했다. 위의 코드에는 함수가 없으므로, 어디에서 선언되었는지에 상관없이 number는 선언해줄 때마다 값이 변하게 된다.

 

이제 const를 사용한 경우를 보자.

const number = 111; // 전역 변수

{
  const number = 222; // 지역 변수
  const ten = 10; // 지역 변수
}

console.log(number); // 111
console.log(ten); // ReferenceError: ten is not defined

const는 block scope이기 때문에 {} 안에서 선언되었다면, 그 내부에서만 사용되고 수명이 다한다.

때문에 블록 내부에서 선언한 number과 ten은 블록 내부에서만 이용 가능하며, 그 외부는 영향을 받지 않는다.

이렇게 변수가 사용되는 범위가 좁다면, 예상치 못한 변경을 줄일 수 있다.

 

2. 초기값을 지정해주어야 한다.

const NAME; // SyntaxError: Missing initializer in const declaration

위와 같이 초기값을 넣어주지 않으면, 문법 에러를 발생시킨다.

 

3. 선언 이후 다른 곳에서 변경이 불가능하다.

const NUMBER = 111;
NUMBER = 222; // TypeError: Assignment to constant variable.

이 특징 덕분에, 예상치 못한 결과를 마주하게 될 위험을 크게 줄일 수 있게 되었다.

 

변할 수 있는 변수 선언을 위한 키워드, let

1. block scope에서 동작한다.

let도 const와 마찬가지로, block scope에서 동작한다.

let number = 111; // 전역 변수

{
  let number = 222; // 지역 변수
  let ten = 10; // 지역 변수
}

console.log(number); // 111
console.log(ten); // ReferenceError: ten is not defined

2. 중복 선언을 금지한다.

var number = 111;
var number = 222;  // 변수 중복 선언 허용

let number = 111;
let number = 222;  // Uncaught SyntaxError: Identifier 'number' has already been declared

이미 선언된 변수의 경우, 재 선언을 막아, 이미 존재하는 변수라는 것을 확인할 수 있도록 한다.

하지만 재 할당은 가능하다. (다른 값을 넣어주는 것)

 

3. 재 할당 가능

let number = 111;
number = 222;

이미 선언된 변수는 해당 변수의 이름에 새로운 값만 넣어주는 방식으로 재 할당이 가능하다.

 

var => let / const

변수 선언에는 원치 않는 변경을 막기 위해 기본적으로 const를 사용하고, 재할당이 필요한 경우에만 let을 사용하는 것이 좋다. 100과 같은 원시 값의 경우, 그 의미를 알아볼 수 있도록 상수를 사용하는 편이 좋다. 

• ES6를 사용한다면 var가 아닌 let과 const를 사용하자.
• 재할당이 필요한 경우에 한정해 let 키워드를 사용하자.
• const 키워드는 재할당을 금지하므로 var, let 보다 안전하다.

변수를 선언할 때에는 일단 const 키워드를 사용하도록 하자. 재할당이 정말로 필요하다면, 그때 가서 const를 let 키워드로 변경해도 늦지 않다.