Javascript - 변수와 상수 그리고 리터럴

 이번에는 자바스크립트로 프로그래밍을 할 때 꼭 알아야 할 변수와 상수 그리고 리터럴에 대해 알아보도록 하겠습니다. 조금은 다른 이야기지만 프로그래밍에 있어 용어가 가지는 개념은 중요합니다. 예를 들어 변수와 리터럴과 같은 용어들이 정확히 무슨 의미를 어떻게 가지는지 잘 모른다면 개발자들끼리 소통을 할 때 사소하지만 이해 포인트가 다르거나 오해를 하능 경우가 생깁니다.

 

 프로그래밍에서 사용되는 용어들은 자바스크립트뿐만 아니라 컴퓨터 과학 전반에서 사용하기 때문에 용어를 잘 알고 기억해둔다면 다른 언어를 가지고 프로그래밍을 할 때도 도움이 됩니다.

변수와 상수의 정의 그리고 사용법

 일반적으로 변수의 정의는 값을 가지고 있고 이 값은 언제든 바뀔 수 있으며 사용할 수 있다고 설명합니다. 간단히 말해 변수란 '값이 담긴 공간'입니다. 값이 담긴 공간이란 무엇일까요? 자바스크립트에서 사용하는 코드를 통해 변수를 어떻게 사용하는지 알아보겠습니다.

let box = 'cat';

 let이라는 키워드는 ES6에서 새로 생긴 변수 타입으로 ES6 이전에는 var 타입의 변수만 사용할 수 있었습니다. 예제 코드는 box라는 변수에 cat이라는 문자 값(리터럴)을 할당한 예제입니다.

 

 텍스트로만 설명하면 딱딱하다고 느껴져서 이전에 Java - 변수(Variable)라는 글에서 사용한 이미지를 가져와보았습니다.

변수와 값

let box;
box = 'cat';

 이 코드는 변수를 선언(생성)하고 초기값을 할당합니다. 이 코드도 이미지를 통해 변수가 어떻게 선언되고 어떤 과정으로 값(리터럴)이 설정되는지 확인해보도록 하겠습니다.

 

변수의 선언과 할당

 위의 코드에서 알 수 있듯이 변수를 선언할 때 꼭 초기값을 지정해야 하는 건 아닙니다. 초기값을 할당하지 않으면 묵시적으로 undefined를 가집니다.

let box; // box는 undefine를 가집니다.

 또한 콤마(,)를 이용하면 한 번에 여러 개의 변수를 한 번에 선언할 수 있습니다.

let number, number1 = 1, number2 = '2', number3 = '3';

 예제 코드에서는 변수 4개를 선언하고 초기화했습니다. number은 초기값을 넣지 않았으므로 undefined를 가지고 있고, number1은 선언과 동시에 1이라는 숫자 값을 할당했고 number2, number3는 '2', '3'이라는 문자 값을 할당했습니다.

const NUMBER_ONE = 1, NUMBER_TWO = 2, NUMBER_THREE = 3;

 let과 마찬가지로 ES6에서는 const라는 상수(constant) 타입의 변수도 추가되었습니다. 상수는 let과 달리 단 한 번만 값을 할당할 수 있고 변경이 불가능합니다.

리터럴(literal)의 정의란? 

 리터럴은 무엇일까요? 이미 우리는 앞선 예제 코드에서 리터럴(literal)을 사용했습니다. box에 값을 할당할 때 사용한 값 'cat'이 문자 타입의 리터럴입니다. 마찬가지로 number1을 초기화할 때 사용한 1 은 숫자 타입 리터럴이고 number2, number3을 초기화할 때 쓴 '2', '3' 은 문자 타입의 리터럴입니다. 즉 리터럴은 값 자체를 뜻하는 말로 '고정된 값' 그 자체를 이야기합니다. 앞서 살펴본 그림에서는 고양이와 같은 녀석을 리터럴이라고 합니다.

 

 간혹 변수와 값을 매개변수와 인자처럼 혼용해서 사용하는 경우가 있는데 이는 잘못된 이해를 바탕으로 합니다. 변수는 값을 가질 수 있는 공간 그리고 리터럴은 값 자체를 의미한다는 것을 이해한다면 조금 더 코드를 이해하기 쉬워집니다.

정리하기

 오늘은 자바스크립트에서 사용하는 변수의 선언과 할당 그리고 리터럴에 대해 알아보았습니다. 문법보다는 주로 용어가 가지는 의미를 전달드리려고 이야기했습니다. 처음 프로그래밍을 배울 때 학습한 정의는 프로그래밍을 손에서 놓는 순간까지 사용하기 때문에 아주 큰 의미를 가집니다. 비록 본문의 내용은 짧지만 변수의 선언과 할당 그리고 리터럴에 대한 용어적인 개념은 배워가실 수 있었으면 좋겠습니다.