3. 변수

3-1. 변수란 무엇인가?3-1-1. 변수와 식별자 3-1-2. 식별자 네이밍 규칙 3-1-3. 네이밍 컨벤션 3-2. 변수의 선언과 할당 3-2-1. 변수의 선언 3-2-2. 데이터 할당

3-1. 변수란 무엇인가?

변수는 프로그래밍 언어에서 가장 기초적인 개념이다. 애플리케이션이 입력받은 데이터를 처리(process)하기 위해선 데이터를 저장해야 한다. 이 데이터를 저장하는 공간을 바로 변수(variable)라고 부른다.

3-1-1. 변수와 식별자

식별자(identifier)는 변수와 헷갈리기 쉽지만 다른 개념이다. 변수는 앞서 말한 바와 같이 데이터를 저장하는 공간을 말하고, 식별자는 그 데이터를 식별하는 데 사용하는 고유한 이름을 말한다. 변수뿐만 아니라 함수, 클래스, 메서드 등의 이름을 모두 식별자라고 부른다.

3-1-2. 식별자 네이밍 규칙

식별자는 다음과 같은 식별자 네이밍 규칙에 맞게 작성되어야 하고, 이를 준수하지 않으면 에러가 발생한다.

식별자는 특수문자를 제외한 문자나 $(달러) 혹은 _(언더스코어)로만 시작할 수 있다.

식별자는 숫자로 시작할 수 없다.

for, class 등의 예약어(reserved word)는 식별자로 사용할 수 없다.

3-1-3. 네이밍 컨벤션

식별자 네이밍 규칙처럼 반드시 지켜야 하는 것은 아니지만, 코드의 가독성을 높이기 위해 네이밍 컨벤션(Naming Convention)에 따라 식별자명을 짓는 것이 좋다. 대표적으로 카멜 케이스(camelCase), 스네이크 케이스(snake_case), 파스칼 케이스(PascalCase), 헝가리언 케이스(typeHungarianCase) 이렇게 4가지 방법이 있다.

카멜 케이스는 소문자로 시작하고, 이후 단어들은 첫 글자를 대문자로 써서 단어를 구분한다.


// 카멜 케이스
var namingConvention;

스네이크 케이스는 모든 단어를 소문자로 쓰는 대신 _(언더스코어)로 단어를 구분한다.


// 스네이크 케이스
var naming_convention;

파스칼 케이스는 모든 단어의 첫 글자를 대문자로 표기해서 단어를 구분한다.


// 파스칼 케이스
var NamingConvention;

케밥 케이스는 모든 단어를 소문자로 쓰고, -(하이픈)으로 단어를 구분한다.


// 케밥 케이스
var naming-convention;

주로 변수명과 함수명으로는 카멜 케이스를 사용하고, 생성자 함수명과 클래스명에는 파스칼 케이스를 사용하는 방법이 많이 쓰인다.

3-2. 변수의 선언과 할당

3-2-1. 변수의 선언

변수를 사용하기 위해선 변수를 선언하고 데이터를 할당해야 한다. 자바스크립트에서는 변수 선언을 위해 var, let, const 키워드를 사용한다.


var str;

위의 예제와 같이 키워드 뒤에 식별자를 붙여서 변수를 선언할 수 있다. 변수를 선언하면 자바스크립트 엔진은 메모리에 공간 하나를 확보하고 해당 공간을 식별자 str이라고 지정한다. 해당 변수 str에는 아직 어떤 값도 할당하지 않았기에 확보한 공간에는 undefined가 자동으로 할당된다.

3-2-2. 데이터 할당

데이터 할당은 변수 선언 후에 할당할 수도 있고, 변수 선언과 동시에 할당할 수도 있다.


// 변수 선언 후에 데이터 할당
var str;
str = 'Hello';

// 변수 선언과 동시에 데이터 할당
var str = 'Hello';

위의 두 가지 방식은 같은 동작을 수행한다. 선언과 동시에 데이터를 할당해도 자바스크립트 엔진은 해당 문(statement)을 2개의 문으로 나누어 실행한다. 우선 앞서 설명한 바와 같이 메모리에 공간을 확보해 식별자(str)를 지정하고, 데이터를 할당할 또 다른 메모리 공간을 확보해 데이터(’Hello’)를 저장한다. 그리고 변수 영역에서 아까 지정했던 식별자를 찾아서 데이터를 저장한 메모리의 주소를 대입한다.

이러한 자바스크립트의 데이터 선언과 할당 과정은 복잡하고 번거로워 보이지만, 중복된 데이터를 처리할 때 효율적이다. 다음 예제를 보자.


var student1Age = 20;
var student2Age = 22;
var student3Age = 20;
var student4Age = 21;
// ...
var student1000Age = 20;

학생 1000명의 나이를 각각의 변수에 전부 할당해야 하는데, 이 1000명의 학생들 중 20세인 학생들은 총 250명이다. 만약 20이라는 이 데이터를 250개의 메모리에 각각 저장해야 한다면 쓸데없는 메모리 낭비가 될 것이다. 하지만 자바스크립트 엔진은 20이라는 숫자를 하나의 메모리에 저장하고, 식별자 250개를 이 메모리 주소에 대입해 준다. 이러한 동작 원리 덕분에 값이 중복되는 경우 메모리를 절약할 수 있다.