모던 자바스크립트 #2.4. 변수와 상수

2.4. 변수와 상수

대다수 자바스크립트 애플리케이션은 사용자나 서버로부터 입력받은 정보를 처리하는 방식으로 동작한다. 변수는 이러한 정보를 저장하는 용도로 사용된다.

변수(variable)

데이터를 저장할 때 쓰이는 ‘이름이 붙은 저장소‘이다.

let message; // 'message' 이름을 가진 변수 생성(선언)
message = 'Hello'; // 할당연산자 =를 사용해 변수 안에 데이터 저장
// 문자열이 변수와 연결된 메모리 영역에 저장
alert(message); // 변수명을 이용해 문자열에 접근

변수 message는 message라는 이름표가 붙어있는 상자에 "Hello"라는 값을 저장한 것이다. 상자 안에는 어떤 값이든지 넣을 수 있고, 변경할 수 있다.

message = "World!";
alert(message);

값이 변경되면, 이전 데이터는 변수에서 제거된다. 변수 두 개를 선언하고, 한 변수의 데이터를 다른 변수에 복사할 수도 있다.

변수를 두 번 선언하면 에러가 발생한다. 변수는 딱 한 번만 선언하고, 선언한 변수를 참소할 때는 let 없이 변수명만 사용해 참조해야 한다.

함수형 언어

함수형 프로그래밍 언어는 변숫값 변경을 금지한다. 스칼라(Scala)와 얼랭(Erlang)은 대표적인 함수형 언어이다. 상자 속에 값이 일단 저장되면 그 값을 영원히 유지하고 다른 값을 저장하고 싶다면 새로운 상자를 만들어야 한다.

변수 명명 규칙

변수명에는 오직 문자와 숫자, 그리고 기호($, _)만 올 수 있다.
첫 글자는 숫자가 될 수 없다.

여러 단어를 조합하여 변수명을 만들 땐 첫단어를 제외한 각 단어의 첫글자를 대문자로 작성하는 카멜 표기법(camelCase)가 흔히 사용된다. 하이픈은 변수명에 올 수 없다. 비라틴계 언어도 변수명에 사용될 수 있지만 권장하지 않는다.

예약어(reserved name)는 자바스크립트 내부에서 이미 사용중이므로 변수명으로 사용될 수 없다.

기본 모드에서는 단순 할당만으로 변수를 생성할 수 있다. 그러나 엄격 모드에서는 에러가 발생한다.

"use strict";
num = 5; // error: num is not defined

상수(constant)

변화하지 않는 변수를 선언할 때 const를 사용한다. 상수는 재할당할 수 없으므로 변경하려고 하면 에러가 발생한다.

대문자 상수

기억하기 힘든 값을 변수에 할당해 별칭으로 사용하는 것은 널리 사용되는 관습이다. 이런 상수는 대문자와 밑줄로 구성된 이름으로 명명한다.

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

// 색상을 고르고 싶을 때 별칭을 사용할 수 있게 되었습니다.
let color = COLOR_ORANGE;
alert(color); // #FF7F00

이렇게 하면 기억하기 쉽고, 오타를 낼 확률이 낮으며, 유의미하므로 코드 가독성이 증가한다.

이렇게 코드가 실행되기 전에 이미 그 값을 알고 있는 상수도 있고, 런타임 과정에서 계산되지만 최초 할당 이후 값이 변하지 않는 상수도 있다.

const pageLoadTime = /* 웹 페이지를 로드하는 데 컬린 시간 */;

이 값은 페이지가 로드되기 전에는 정해지지 않기 때문에 일반적인 방식으로 변수명을 짓는다. 그러나 최초 할당 이후에 변경되지 않으므로 여전히 상수이다. 즉 대문자 상수는 ‘하드코딩한’ 값의 별칭을 만들 때 사용하면 된다.

바람직한 변수명

변수명은 변수가 담고 있는 것이 무엇인지 쉽게 알 수 있도록 지어져야 한다.

userName이나 shoppingCart처럼 사람이 읽을 수 있는 이름을 작성한다.
줄임말이나 짧은 이름은 피한다.
최대한 서술적이고 간결하게 명명한다. data, value는 아무것도 설명해주지 않기 때문에 나쁜 이름이다. 코드 문맥 상 변수가 가리키는 데이터나 값이 아주 명확할 때만 이런 이름을 사용한다.
자신만의 규칙이나 소속된 팀의 규칙을 따른다.

재사용 vs 새로 만들기

변수를 재사용하면 변수 선언에 쏟는 노력을 덜 수는 있지만, 디버깅에 열 배 더 많은 시간을 쏟아야 한다. 모던 자바스크립트 압축기(minifier)와 브라우저는 코드 최적화를 잘 해주기 때문에 변수를 추가한다고 해서 성능 이슈가 생기지 않는다.

과제

변수 가지고 놀기

let admin;
let name;
name = "John";
admin = name;
alert(admin);

올바른 이름 선택하기

let ourPlanetName = "Earth";
let currentUserName = "Hayeon";

대문자 상수 올바로 사용하기

const birthday = '18.04.1982';

const age = someCode(birthday);

위 변수를 대문자 상수로 바꿔도 괜찮을까? birthday의 경우 실행 전에 값을 이미 알고 있고, 코드에서 직접 그 값을 쓰기 때문에 (하드코딩되어 있기 때문에) 대문자 상수로 적합하다. 그러나 age의 경우 런타임에 계산되기 때문에 대문자 상수에 적합하지 않다.