[모던 JavaScript 튜토리얼] 변수와 상수

Preview

var, let, const를 사용해 변수를 선언할 수 있다. 선언된 변수에는 데이터를 저장할 수 있다.
- let: 모던한 변수 선언 키워드
- var: 오래된 변수 선언 키워드(잘 사용하지 않는다)
- const: let과 비슷하지만 변수의 값을 변경할 수 없다
변수명은 변수가 담고 있는 것이 무엇인지 쉽게 알 수 있도록 지어져야 한다.

변수와 상수

📦 변수

변수(variable)는 데이터를 저장할 때 쓰이는 ‘이름이 붙은 저장소’이다. JavaScript에서는 let 키워드를 사용해서 변수를 생성한다. 아래의 문장은 ‘message’라는 이름을 가진 변수를 생성(선언)한다.

let message;

할당 연산자 =를 사용해서 변수 안에 데이터를 저장해보자.

let message;
message = 'Hello'; // 문자열을 저장한다.

문자열이 변수와 연결된 메모리 영역에 저장됐기 때문에 변수명으로 문자열에 접근할 수 있게 됐다.

let message;
message = 'Hello!';
alert(message); // 변수에 저장된 값을 보여준다.

한 줄에 여러 변수를 선언할 수 있다. 하지만 권장하는 방법은 아니다. 가독성을 위해 한 줄에는 하나의 변수를 작성하자!

let user = 'Neori', age = 24, message = 'Hello';

이런 방식으로도 변수를 정의할 수 있다. 기술적인 차이는 없으므로 개인의 취향에 따라 작성하면 된다.

let user = 'Neori',
  age = 24,
  message = 'Hello';

let user = 'Neori'
  , age = 24
  , message = 'Hello';

let 대신 var 키워드가 쓰인 스크립트도 있다. let과 거의 동일하게 동작하지만, var는 오래된 방식이고 미묘하게 차이가 있다.

👀 현실 속의 비유

상자 안에 데이터를 저장하는데 이 상자에 특별한 이름표가 붙어있다고 상상해보자. 예를 들어, 변수 message는 message라는 이름표가 붙어있는 상자에 "Hello!"라는 값을 저장한 것이라고 생각할 수 있다. 상자 속에는 어떤 값이든 넣을 수 있고 원하는 만큼 값을 변경할 수도 있다.

let message;
message = 'Hello!';
message = 'World!'; // 값이 변경됨.
alert(message);

값이 변경되면 이전 데이터는 변수에서 제거된다.

변수 두 개를 선언하고, 한 변수의 데이터를 다른 변수에 복사할 수도 있다.

let Hello = 'Hello world!';
let message;

// Hello의 'Hello world' 값을 message에 복사한다.
message = Hello;

// 이제 두 변수는 같은 데이터를 가진다.
alert(Hello); // Hello world!
alert(message); // Hello world!

⚠️ 변수는 한 번만 선언해야 한다. 같은 변수를 여러 번 선언하면 에러가 발생한다.

let message = "This";

// 'let'을 반복하면 에러가 발생한다.
let message = "That"; // SyntaxError: 'message' has already been declared

따라서 변수는 딱 한 번만 선언하고, 선언한 변수를 참조할 때는 let 없이 변수명으로만 참조해야 한다.

스칼라(Scala)나 얼랭(Erlang)은 함수형 프로그래밍 언어는 변숫값 변경을 금지한다. 상자 속에 값이 일단 저장되면 그 값을 영원히 유지한다. 다른 값을 저장하고 싶으면 새로운 변수를 선언해야 한다. 이전 변수를 재사용할 수 없다.

이런 제약이 장점으로 작용하는 영역(e.g. 병렬 계산)도 있다. 당장은 사용할 계획이 없더라도 이런 언어를 공부하는 것이 시야를 넓히는 데 도움이 되므로 배워보자.

☝🏻 변수 명명 규칙

변수명에는 문자, 숫자, 기호 $와 _만 들어갈 수 있다.
첫 글자는 숫자가 될 수 없다.

여러 단어를 조합하여 변수명을 만들 때는 카멜 표기법(camelCase)가 흔히 사용된다. 단어를 차례대로 나열하면서 첫 단어를 제외한 각 단어의 첫 글자를 대문자로 작성한다.

유효한 변수명 예시

let userName;
let test123;
let $ = 1; // '$'라는 이름의 변수 선언
let _ = 2; // '_'라는 이름의 변수 선언

alert($ + _); // 3

잘못된 변수명 예시

let 1a; // 변수명은 숫자로 시작해선 안 된다.
let my-name; // 하이픈 '-'은 변수명에 올 수 없다.

모든 언어를 변수명에 사용할 수는 있지만(키릴 문자, 상형문자까지도!), 영어를 변수명에 사용하는 것이 국제적인 관습이므로 변수명은 영어로 작성하기를 권장한다. 다른 나라 사람이 스크립트를 볼 경우 등을 대비해 장기적인 안목을 가지고 코드를 작성하자.

⚠️ 예약어(reserved name) 목록에 있는 단어(e.g. let, class, return, function)는 변수명으로 사용할 수 없다. 이미 JavaScript 내부에서 사용하고 있기 때문이다. 아래 코드는 문법 에러를 발생시킨다.

let let = 5; // 'let'을 변수명으로 사용할 수 없으므로 에러!
let return = 5; // 'return'을 변수명으로 사용할 수 없으므로 에러!

⚠️ 변수는 미리 정의되어 있어야 사용할 수 있다. 그러나 예전에는 let 없이도 단순하게 값을 할당해 변수를 생성하는 것이 가능했다. use strict 를 쓰지 않으면 과거 스크립트의 호환성을 유지할 수 있기 때문에 여전히 이 방식을 사용할 수 있다.

// 이 예제에는 "use strict"가 없다.
num = 5; // 변수 'num'이 정의되어있지 않더라도, 단순 할당만으로 변수가 생성된다.
alert(num); // 5

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

🪨 상수

변하지 않는 변수를 선언할 때는 let 대신 const를 사용한다. const로 선언한 변수를 상수(constant)라고 부른다. 상수는 재할당할 수 없어서 상수를 변경하려고 하면 에러가 발생한다.

const myBirthday = '18.04.1982';
myBirthday = '01.01.2001'; // error, can't reassign the 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 = /* 웹페이지를 로드하는데 걸린 시간 */;

pageLoadTime의 값은 페이지가 로드되기 전에는 정해지지 않으므로 일반적인 방식으로 변수명을 지었다. 하지만 최초 할당 이후에 변경되지 않으므로 상수이다.

즉, 대문자 상수는 하드 코딩한 값의 별칭을 만들 때 사용하면 된다!

👍🏻 바람직한 변수명

변수명은 간결하고 명확해야 한다. 변수가 담고 있는 것이 무엇인지 잘 설명할 수 있어야 한다. 변수의 이름을 짓는 것은 프로그래밍에서 가장 중요하고 복잡한 기술 중 하나🌟 실전에서 서술적이고 간결한 변수명을 짓는 것은 간단하지 않다..

실제 프로젝트에서는 완전히 독립적인 코드를 작성하는 것보다 기존 코드의 틀을 변경하고 확장하는 데 시간을 많이 쓴다. 작성했던 코드를 나중에 다시 봤을 때 정보에 알맞은 이름이 적혀 있으면 정보를 더 쉽게 찾을 수 있다. 그러므로 변수를 선언하기 전에 내가 지은 변수의 이름이 괜찮은지 고민해봐야 한다.

변수 명명 시 참고하기 좋은 규칙

userName이나 shoppingCart처럼 사람이 읽을 수 있는 이름을 사용한다.
무엇을 하고 있는지 명확히 모르는 경우가 아니라면 줄임말이나 a, b, c와 같은 짧은 이름은 피한다.
최대한 서술적이고 간결하게 명명한다. data와 value는 아무것도 설명해 주지 않는 대표적인 나쁜 이름이다. 코드 문맥상 변수가 가리키는 데이터나 값이 아주 명확할 때에만 이런 이름을 사용한다.
자신만의 규칙이나 소속된 팀의 규칙을 따른다. 만약 사이트 방문자를 ‘user’로 부르기로 했다면, 이와 관련된 변수는 currentVisitor나 newManInTown이 아닌 currentUser나 newUser로 지어야 한다.

개발자 중에 기존 변수를 재사용하는 걸 선호하는 사람이 있다. 재사용된 변수는 예전에 붙인 스티커를 안 떼고 물건만 바뀐 상자와 같다. 그래서 무엇이 들어 있는지 확인하려면 직접 확인해봐야 한다 🤔 변수를 재사용하면 변수 선언에 쏟는 노력을 조금 덜 수는 있겠지만 디버깅에 훨씬 더 많은 시간을 쏟아야 한다. 변수를 추가하는 것은 악습이 아닌 좋은 습관!

모던 JavaScript 압축기(minifier)와 브라우저는 코드 최적화를 잘해주기 때문에, 변수를 추가한다고 해서 성능 이슈가 생기진 않는다. 값이 다른 경우 변수를 다르게 선언하면 코드 최적화에 도움이 될 수도 있다.

이전[모던 JavaScript 튜토리얼] 코드 구조

다음[모던 JavaScript 튜토리얼] alert, prompt, confirm을 이용한 상호작용