값을 담는 상자, 변수와 상수

값을 다시 쓰기 위해 이름을 붙인다

앞 장에서는 코드를 컴퓨터에게 보내는 짧은 지시문으로 보았습니다. 이제 그 지시문 안에서 가장 자주 하게 되는 일을 배웁니다. 바로 값에 이름을 붙이는 일입니다.

예를 들어 콘솔에 같은 이름을 여러 번 출력한다고 해 보겠습니다.

console.log("민지님, 환영합니다.");
console.log("민지님의 장바구니입니다.");
console.log("민지님, 결제를 진행해 주세요.");

이 코드는 실행됩니다. 하지만 이름이 바뀌면 어떨까요? "민지"를 찾아서 전부 고쳐야 합니다. 세 줄이면 괜찮지만, 코드가 길어지면 놓치는 곳이 생깁니다.

그래서 값을 한곳에 담아 두고, 필요할 때 다시 꺼내 씁니다.

const userName = "민지";

console.log(userName + "님, 환영합니다.");
console.log(userName + "님의 장바구니입니다.");
console.log(userName + "님, 결제를 진행해 주세요.");

여기서 userName은 "민지"라는 값을 담아 둔 이름입니다. 앞으로 이름을 바꾸고 싶다면 첫 줄만 고치면 됩니다.

const userName = "지훈";

이제 아래에서 userName을 쓰는 곳은 모두 "지훈"으로 처리됩니다. 이렇게 값에 이름을 붙여 두면 같은 값을 여러 번 직접 쓰지 않아도 됩니다.

AI 생성 이미지

변수는 이름표가 붙은 상자다

변수는 값을 담아 두는 이름표가 붙은 상자라고 생각하면 됩니다.

const productName = "무선 마우스";
const price = 25000;
let quantity = 1;

위 코드를 상자로 비유하면 이렇습니다.

• productName이라는 상자에는 "무선 마우스"가 들어 있습니다.

• price라는 상자에는 25000이 들어 있습니다.

• quantity라는 상자에는 1이 들어 있습니다.

컴퓨터는 productName이라는 이름을 만나면 그 안에 담긴 값을 꺼내 씁니다.

console.log(productName);
console.log(price);
console.log(quantity);

콘솔에는 각각 다음 값이 출력됩니다.

무선 마우스
25000
1

여기서 중요한 점은 변수 이름 자체가 화면에 나오는 것이 아니라, 그 이름이 가리키는 값이 사용된다는 것입니다.

const는 바꾸지 않을 값, let은 바뀔 수 있는 값

자바스크립트에서 값을 담을 때 자주 쓰는 단어는 두 가지입니다.

const 이름 = 값;
let 이름 = 값;

둘 다 값을 담는 데 사용합니다. 차이는 나중에 그 이름에 다른 값을 다시 넣을 수 있는지입니다.

• const: 한 번 정한 뒤 다시 다른 값으로 바꾸지 않을 때 사용합니다.

• let: 실행 중에 값이 바뀔 수 있을 때 사용합니다.

쇼핑 장바구니를 예로 들어 보겠습니다.

const itemName = "텀블러";
const itemPrice = 12000;
let itemCount = 1;

console.log(itemName);
console.log(itemPrice * itemCount);

상품 이름과 상품 가격은 장바구니 안에서 보통 바뀌지 않습니다. 그래서 const를 사용했습니다.

반면 수량은 사용자가 + 버튼을 누르면 바뀔 수 있습니다. 그래서 let을 사용했습니다.

itemCount = 3;

console.log(itemPrice * itemCount);

처음에는 12000 * 1이었지만, 수량을 3으로 바꾸면 12000 * 3이 됩니다.

여기서 다시 값을 바꿀 때는 let을 또 쓰지 않습니다.

let itemCount = 1;
itemCount = 3;

첫 줄은 "itemCount라는 상자를 새로 만들고 1을 넣어라"라는 뜻입니다. 둘째 줄은 "이미 있는 itemCount 상자 안의 값을 3으로 바꿔라"라는 뜻입니다.

아래처럼 쓰면 같은 이름의 상자를 또 만들려는 코드가 되어 오류가 납니다.

let itemCount = 1;
let itemCount = 3;

콘솔에서는 비슷한 오류를 볼 수 있습니다.

SyntaxError: Identifier 'itemCount' has already been declared

이 문장은 "itemCount라는 이름은 이미 선언되어 있다"는 뜻입니다. 여기서 선언은 변수를 처음 만드는 일을 말합니다.

const 값을 바꾸면 어떤 일이 생길까

이번에는 const로 만든 값에 다른 값을 다시 넣어 보겠습니다.

const itemPrice = 12000;
itemPrice = 15000;

이 코드는 오류가 납니다.

TypeError: Assignment to constant variable.

뜻은 "상수로 만든 변수에 다시 값을 넣으려고 했다"입니다. 여기서 상수는 한 번 정하면 다시 바꾸지 않겠다고 약속한 이름이라고 생각하면 됩니다.

처음에는 이렇게 기준을 잡으면 좋습니다.

기본은 const를 사용하고, 나중에 값이 바뀌어야 할 때만 let을 사용합니다.

이 기준은 코드를 읽기 쉽게 만듭니다. const를 보면 "아, 이 이름에는 중간에 다른 값이 다시 들어가지 않겠구나" 하고 예상할 수 있습니다. let을 보면 "아, 이 값은 나중에 달라질 수 있겠구나" 하고 준비할 수 있습니다.

정확히 말하면 const는 "값이라는 물건이 세상에서 절대 변하지 않는다"는 뜻이라기보다, 그 이름에 다른 값을 다시 넣을 수 없다는 뜻에 가깝습니다. 배열과 객체처럼 조금 더 복잡한 값에서는 이 차이가 중요해지지만, 지금은 "다시 대입할 수 없다" 정도로 기억하면 충분합니다.

값에는 종류가 있다

변수 상자에는 여러 종류의 값을 담을 수 있습니다. 지금은 자주 만나는 값 몇 가지를 먼저 익히면 충분합니다.

문자: 따옴표로 감싼 값

사람 이름, 상품명, 안내 문구처럼 글자는 따옴표로 감쌉니다.

const userName = "민지";
const message = "결제가 완료되었습니다.";

이런 값을 문자열이라고 부릅니다. 문자열은 글자 데이터입니다.

숫자처럼 보여도 따옴표로 감싸면 문자열입니다.

const phoneNumber = "01012345678";

전화번호는 계산할 숫자가 아닙니다. 앞자리 0도 중요합니다. 그래서 보통 문자열로 다룹니다.

숫자: 계산할 수 있는 값

가격, 수량, 나이, 점수처럼 계산할 값은 따옴표 없이 씁니다.

const price = 12000;
let count = 2;

console.log(price * count);

12000과 2는 숫자이므로 곱셈이 됩니다.

반대로 아래 코드를 보겠습니다.

console.log("12000" + "2");

결과는 120002입니다. 두 값을 숫자로 더한 것이 아니라, 글자처럼 이어 붙였기 때문입니다. 따옴표가 있으면 자바스크립트는 글자로 봅니다.

참과 거짓: 맞다 또는 아니다

로그인했는지, 쿠폰을 사용했는지, 약관에 동의했는지처럼 둘 중 하나로 나뉘는 값이 있습니다.

let isLoggedIn = false;
let hasCoupon = true;

true는 참, false는 거짓입니다. 따옴표로 감싸지 않습니다.

const isLoggedIn = "false";

이렇게 쓰면 거짓이 아니라 "false"라는 글자입니다. 나중에 조건문을 배울 때 이 차이가 중요해집니다.

변수 이름이 is, has, can으로 시작하면 참·거짓 값을 담는다는 느낌을 주기 좋습니다.

const isAdult = true;
const hasAddress = false;
const canPay = true;

비어 있음: undefined와 null

값이 비어 있는 상황도 있습니다. 자바스크립트에서는 대표적으로 undefined와 null을 만납니다.

먼저 undefined는 "아직 값이 정해지지 않았다"에 가깝습니다.

let couponCode;

console.log(couponCode);

couponCode라는 상자는 만들었지만, 안에 값을 넣지 않았습니다. 그래서 결과는 undefined입니다.

반면 null은 "비어 있다고 일부러 표시했다"에 가깝습니다.

let selectedOption = null;

console.log(selectedOption);

예를 들어 사용자가 아직 배송 요청사항을 고르지 않았고, 그 상태를 코드에서 분명히 표시하고 싶다면 null을 사용할 수 있습니다.

처음에는 이렇게 구분하면 됩니다.

• undefined: 값이 아직 들어오지 않음

• null: 비어 있음을 일부러 넣어 둠

둘 다 처음에는 낯설 수 있습니다. 지금은 "비어 있는 상태에도 종류가 있다" 정도만 기억하면 됩니다.

변수 이름에는 공백을 넣지 않는다

변수 이름은 사람이 읽기 쉬워야 하지만, 동시에 컴퓨터가 헷갈리지 않게 써야 합니다.

아래 코드는 실행되지 않습니다.

const user name = "민지";

사람 눈에는 "사용자 이름"처럼 보일 수 있습니다. 하지만 자바스크립트는 공백을 기준으로 코드를 나누어 읽습니다. 그래서 user name을 하나의 이름으로 이해하지 못합니다.

대신 자바스크립트에서는 보통 camelCase를 사용합니다.

const userName = "민지";
const productPrice = 12000;
const deliveryAddress = "서울시 어딘가";

camelCase는 첫 단어는 소문자로 쓰고, 두 번째 단어부터 첫 글자를 대문자로 쓰는 방식입니다. 낙타 등의 혹처럼 중간중간 대문자가 올라온다고 해서 이런 이름이 붙었습니다.

변수 이름을 지을 때는 다음 기준을 따르면 좋습니다.

• 공백을 넣지 않습니다.

• 숫자로 시작하지 않습니다.

• let, const, if 같은 자바스크립트 예약어를 이름으로 쓰지 않습니다.

• 너무 짧은 이름보다 의미가 보이는 이름을 씁니다.

예를 들어 a, b, x보다 아래 이름이 읽기 좋습니다.

const orderTotal = 36000;
let loginCount = 0;
const customerName = "민지";

자바스크립트에서 한글 변수 이름도 가능은 합니다.

const 이름 = "민지";

하지만 실제 코드에서는 영어 이름을 더 많이 사용합니다. 처음부터 완벽한 영어를 쓰려고 부담 가질 필요는 없습니다. userName, itemPrice, isLoggedIn처럼 짧고 자주 쓰는 표현부터 익히면 됩니다.

작은 실습: 장바구니 정보를 저장해 보기

브라우저 콘솔을 열고 아래 코드를 한 줄씩 입력해 보세요. 여러 줄을 한꺼번에 붙여 넣어도 됩니다.

const customerName = "민지";
const itemName = "노트북 파우치";
const itemPrice = 18000;
let itemCount = 2;
let hasCoupon = false;

console.log(customerName + "님이 " + itemName + "를 장바구니에 담았습니다.");
console.log("수량: " + itemCount);
console.log("총액: " + itemPrice * itemCount);
console.log("쿠폰 사용 여부: " + hasCoupon);

이제 수량과 쿠폰 사용 여부를 바꿔 보겠습니다.

itemCount = 3;
hasCoupon = true;

console.log("변경된 수량: " + itemCount);
console.log("변경된 총액: " + itemPrice * itemCount);
console.log("쿠폰 사용 여부: " + hasCoupon);

여기서 확인할 점은 두 가지입니다.

첫째, itemCount와 hasCoupon은 let으로 만들었기 때문에 값을 바꿀 수 있습니다.

둘째, itemName과 itemPrice는 const로 만들었기 때문에 다시 다른 값을 넣으면 오류가 납니다.

직접 아래 코드를 실행해 보세요.

itemPrice = 20000;

오류가 나면 실패한 것이 아닙니다. 오히려 중요한 규칙을 확인한 것입니다. 오류 메시지를 보고 "아, const로 만든 이름에는 다시 값을 넣을 수 없구나"라고 읽을 수 있으면 충분합니다.

만약 실습을 여러 번 반복하다가 "이미 선언되어 있다"는 오류가 보이면, 새로고침한 뒤 다시 실행해 보세요. 같은 콘솔 화면에서 같은 이름을 다시 const나 let으로 선언하려고 해서 생긴 오류일 수 있습니다.

이번 장에서 기억할 것

자바스크립트의 많은 작업은 값을 저장하고, 바꾸고, 다시 꺼내 쓰는 일에서 시작됩니다.

• 변수는 값을 담아 두는 이름표가 붙은 상자처럼 생각할 수 있습니다.

• const는 다시 바꾸지 않을 값에 사용합니다.

• let은 나중에 바뀔 수 있는 값에 사용합니다.

• 문자는 따옴표로 감싸고, 숫자는 계산할 수 있게 따옴표 없이 씁니다.

• true와 false는 참·거짓을 나타냅니다.

• undefined는 아직 값이 없는 상태, null은 일부러 비워 둔 상태에 가깝습니다.

• 변수 이름에는 공백을 넣지 않고, 보통 userName처럼 camelCase를 사용합니다.

다음 장에서는 이렇게 저장한 문자와 숫자를 이용해 화면에 더 의미 있는 문장을 만들고, 계산 결과를 표현하는 방법을 배웁니다.