변수: let과 const

변수는 값에 붙인 이름입니다. let score = 10이라고 쓰면 다른 값을 넣기 전까지 score는 10을 뜻합니다.

값에 이름을 붙여 다시 쓰기

지금까지는 값을 console.log에 바로 써 넣고 끝났습니다. 실제 프로그램은 무언가를 기억해야 합니다. 게임 점수, 장바구니에 담은 물건, 사용자가 입력한 이름 같은 것입니다. 변수는 값을 담아 두는, 이름이 붙은 상자입니다. 한 번 만들어 두면 그 값이 필요한 곳 어디서나 이름으로 꺼내 쓸 수 있습니다.

let score = 10;
console.log(score);        // 10
console.log(score + 5);    // 15

let score = 10;은 두 가지 일을 합니다. 키워드 let은 score라는 새 변수를 선언하고, = 10은 거기에 값 10을 넣습니다. 여기서 등호는 수학처럼 「같다」라는 뜻이 아닙니다. 「오른쪽 값을 왼쪽 이름에 저장하라」라는 뜻이고, 이것을 대입(assignment)이라고 합니다. 나중에 score가 따옴표 없이 나오면 자바스크립트는 상자를 찾아 그 안의 값을 씁니다.

let으로 만든 변수는 값을 바꿀 수 있습니다

let으로 선언한 변수에는 나중에 새 값을 넣을 수 있습니다. 변수가 이미 있으므로 이번에는 let 없이 이름, 등호, 새 값을 씁니다.

let score = 10;
score = 25;
console.log(score);        // 25
score = score + 5;
console.log(score);        // 30

score = score + 5;는 수학 식으로 보면 말이 안 되지만 명령으로 읽으면 자연스럽습니다. 자바스크립트는 먼저 오른쪽을 계산합니다. 현재 score에 5를 더한 30입니다. 그다음 30을 다시 score에 저장합니다. 원래 값은 사라집니다. 변수를 읽어서 바뀐 값을 다시 넣는 이 방식으로 프로그램은 수를 세고, 합계를 내고, 변하는 것을 모두 따라갑니다.

바뀌지 않는 값에는 const

키워드 const도 변수를 선언하지만, 선언할 때 바로 값을 넣어야 하고 그 뒤로는 새 값을 넣을 수 없습니다. 넣으려고 하면 TypeError: Assignment to constant variable 오류로 프로그램이 멈춥니다. 이 오류는 쓸모가 있습니다. 일주일의 날 수나 세율처럼 바뀌면 안 되는 값을 const로 선언해 두면, 프로그램의 다른 곳에서 실수해도 그 값이 몰래 덮어써지지 않습니다.

const daysInWeek = 7;
console.log(daysInWeek * 4);   // 28
// daysInWeek = 8;  would stop with a TypeError

많은 코드 작성 지침이 권하는 습관은 기본으로 const를 쓰고, 값이 바뀔 것이 확실할 때만 let으로 바꾸는 것입니다. 웹에서 보는 코드에는 예전 키워드 var도 나옵니다. 지금도 동작하지만 규칙이 느슨해서 뜻밖의 버그를 만들기 때문에 이 과정에서는 let과 const만 씁니다.

이름 짓는 규칙

변수 이름에는 글자, 숫자, 밑줄 _, 달러 기호 $를 쓸 수 있지만 숫자로 시작할 수 없고 빈칸이 들어갈 수 없습니다. 그래서 total2는 되고 2total은 안 됩니다. 이름은 대소문자를 구별하므로 score와 Score는 서로 다른 변수입니다. let, const, if, for 같은 몇몇 낱말은 언어가 예약해 두어서 이름으로 쓸 수 없습니다. 여러 낱말로 된 이름은 보통 카멜 표기법(camelCase)으로 씁니다. 첫 낱말은 소문자로, 그다음 낱말은 대문자로 시작해 totalPrice, daysInWeek처럼 씁니다. 값의 뜻이 드러나는 이름을 고르세요. x보다 price가 읽는 사람에게 훨씬 많은 것을 알려 줍니다.

비어 있는 변수, 너무 일찍 쓴 변수

let answer;처럼 값 없이 쓰면 변수는 생기지만 무언가를 넣기 전까지 undefined를 담고 있습니다. let이나 const 변수를 선언보다 위쪽 줄에서 쓰면 ReferenceError: Cannot access 'answer' before initialization 오류가 납니다. 아예 선언한 적이 없는 이름을 쓰면 ReferenceError: answer is not defined가 납니다. 두 메시지 모두 해야 할 일은 같습니다. 철자를 확인하고, 선언이 먼저 나오는지 확인합니다.