변수란?

사람이 사람과 대화를 한다 생각해봅시다.

A가 말을 하면 B가 듣고 대답을 하겠죠? 프로그램도 똑같습니다.
값을 입력input하면 결과가 출력output되는 과정이 프로그램의 전부죠.

10 + 100

위 식을 보면 자연스럽게 결과가 110 이란 걸 생각할 수 있죠? 어떻게 110이라고 생각하게 되었나요?
너무 무의식 중이라 잘 모르고 지나쳤을 수 있습니다.
우리는 숫자(10, 100)을 기억하고, 부호(+)의 의미를 알고 있습니다. 뿐만 아니라 10 + 100도 해석할 수 있죠.
따라서 10과 100을 더한 값이 110이라는 해석 결과를 내놓을 수 있습니다.

자바스크립트 엔진도 마찬가지입니다.

메모리 어딘가에 값을 저장(기억)하고 CPU가 이 값을 읽어들여 연산을 수행합니다. 연산을 수행하고 난 값도 어딘가에 저장을 합니다. 그런데 어딘가가 도대체 어디일까요? 저장하는 메모리 주소는 임의의 주소이기 때문에 우리는 그 곳을 알 수가 없습니다.
그럼 애써 계산을 완료했어도 그 값을 재사용할 수 없죠.

따라서 그 값을 다시 찾기 위해 변수를 사용합니다.

변수의 정의는 다음과 같습니다. 하나의 값을 저장할 수 있는 메모리 공간입니다.

저 계산한 값에 이름을 붙인 것이 변수입니다.

var sum = 10 + 100; console.log(sum); // 110

---

변수 선언하기

변수를 사용하려면 변수를 선언하는 과정이 선행되어야 합니다.

변수 선언 키워드

• var
• let
• const

변수를 선언할 때 앞에 붙일 수 있는 키워드는 총 3가지입니다.
앞선 글에서 var 키워드는 자주 보여 익숙하죠?

이 세 키워드 중 var를 제외하면 ES6 문법부터 도입되었습니다. 이전 문법(ES5)까지는 var 외에는 다른 키워드가 없었습니다.

우선 var 키워드로 변수를 선언하는 법부터 알아보겠습니다.

---

변수 선언과 할당 예시

count라는 변수를 선언해볼까요?

var count;

var로 변수를 선언하면 컴퓨터가 count라는 이름으로 메모리를 확보한 상태입니다.
여기서 타입은 무엇일까요?

바로 undefined입니다. 앞서 var 키워드로 선언을 하게 되면 암묵적으로 undefined를 할당해버린다고 언급하였는데요.

선언과 할당은 뭐가 다른지 한 번 살펴봅시다.

• 선언 : 변수 이름을 엔진에 등록
• 할당(초기화) : 값을 지정하기 위해 메모리 공간을 확보 (암묵적으로 undefined 할당)

만약 자바스크립트 엔진이 undefined를 할당하지 않고 변수를 참조하게 되면 어떻게 될까요? 네! 당연히 이상한 결과가 나오겠죠? 이전에 다른 프로그램이 사용했던 값이 겹쳐지는 이슈가 있을 수도 있습니다.

자바스크립트 엔진이 변수를 초기화하며 그런 이슈를 피할 수 있는 것이죠.

var count; // 선언 - undefined로 암묵적 할당 count = 0; // 값의 명시적 할당

값을 할당(저장, 대입)할 때에는 할당 연산자 =를 사용합니다.

---

호이스팅

선언과 할당이 되는 순서를 console에 찍어보며 알아봅시다.

console.log('1', test) // undefined var test; // 선언 console.log('2', test) // undefined test = 10; // 명시적 할당 console.log('3', test) // undefined

코드에서 뭔가 이상한 점을 발견하셨나요?
var test;로 변수를 선언하기 전에 console.log()로 확인한 test의 결과가 undefined로 출력이 됐죠?

이런 현상을 호이스팅이라고 하는데요. 호이스팅이란 변수 선언문이 코드의 최상단으로 끌어올려진 것처럼 동작하는 자바스크립트의 한 특징입니다.

즉 선언은 2번째 줄에서 했지만 실제로는 1번째 console.log()보다 앞선 것처럼 작동한 것이죠.

var test; // 선언 console.log('1', test) console.log('2', test) test = 10; // 명시적 할당 console.log('3', test)

---

재할당

변수를 선언하고 할당을 한 후 값을 변경할 수 있습니다.

var name = "Nayeon"; name = "Yeony"; // 재할당

const 상수

만약 재할당이 불가능하다면 그것은 변수가 아니라 변하지 않는 값, 상수라고 일컫습니다.

상수는 ES6 문법부터 도입되었는데요. 앞서 변수 선언 키워드 자바스크립트의 상수는 const 키워드로 선언 및 할당할 수 있습니다.

const birthYear = 1999; birthYear = 2022; // error!

const는 상수이기 때문에 재할당이 불가능합니다.
만약 재할당 하려하면 에러가 발생합니다.

한 가지 유의할 점이 더 있습니다. var나 let 같은 키워드는 재할당이 가능하지만, const는 재할당이 불가능하기 때문에 선언과 동시에 반드시 값을 할당해야합니다.

const test; // initializer Error!

let 변수

let은 var와 같이 변수 앞에 적는 키워드입니다.

그럼 무슨 차이가 있을까요?

바로 호이스팅 에서 차이가 있습니다.

console.log(name); // Reference Error! let name = 'Yeony';

분명 호이스팅을 이해하며, 변수가 끌어올려져 undefined가 출력되는 것을 보았습니다.
하지만 let 키워드는 참조에러(Reference Error)가 발생하네요. 왜일까요?

let 또한 호이스팅이 되지만 let이나 const가 선언된 위치에 코드 실행이 진행될 때까지 접근이 불가능한 상태입니다.
var 키워드는 접근이 되는 것이구요. (보다 자세한 내용은 추후 스코프(scope)를 설명할 때 보태겠습니다.)

따라서 모던 자바스크립트에서는 var 사용을 지양하고 let 사용을 권합니다.
하지만 var로 작성된 코드는 무수히 많기 때문에, 이 차이점을 꼭 유념하고 넘어가야합니다.

다음 글에서는 변수, 상수의 이름짓기(Naming) 규칙을 알아보겠습니다.

◾ 자바스크립트 자료형 👈 이전 글 보기
◾ 변수 명명 규칙 👈 다음 글 보기