문자와 숫자로 화면에 의미 만들기

숫자처럼 보이는 값과 진짜 숫자

지난 장에서 변수와 상수는 값을 담는 상자라고 했습니다. 이제 그 상자에 담긴 값으로 계산하고, 사람이 읽을 수 있는 문장을 만들어 보겠습니다.

먼저 브라우저 콘솔에서 다음 코드를 실행해 보세요.

const price = 1000;
console.log(price + 500);

결과는 1500입니다. 가격 1000원에 500원을 더한 계산입니다.

이번에는 숫자 1000을 따옴표로 감싸 보겠습니다.

const price = '1000';
console.log(price + 500);

결과는 1000500입니다. 계산 결과처럼 보이지 않습니다. 이유는 '1000'이 숫자가 아니라 문자열이기 때문입니다. 문자열은 글자입니다. 자바스크립트에서 +는 숫자끼리 만나면 더하기가 되지만, 문자열이 함께 있으면 이어 붙이기로 동작할 수 있습니다.

정리하면 이렇게 다릅니다.

console.log(1000 + 500);   // 1500
console.log('1000' + 500); // 1000500

1000은 계산할 수 있는 숫자입니다. '1000'은 글자 1, 0, 0, 0을 나란히 적은 문자열입니다. 사람 눈에는 비슷해 보여도 컴퓨터에게는 다른 종류의 값입니다.

웹페이지 입력칸에서 받은 값은 보통 문자열입니다. 사용자가 가격 입력칸에 1000이라고 입력해도 자바스크립트는 그것을 먼저 '1000'이라는 글자로 받는 경우가 많습니다. 이 값을 계산에 쓰려면 숫자로 바꿔야 합니다.

그때 사용하는 것이 Number()입니다.

const inputPrice = '1000';
const price = Number(inputPrice);

console.log(price + 500); // 1500

Number()는 괄호 안의 값을 숫자로 바꿔 보려는 기능입니다. 글자로 된 숫자를 계산 가능한 숫자로 바꾸는 도구라고 생각하면 됩니다.

단, 모든 글자가 숫자로 바뀌지는 않습니다.

console.log(Number('1000'));  // 1000
console.log(Number('hello')); // NaN

NaN은 Not a Number의 줄임말입니다. 숫자가 아니라는 뜻입니다. 오류 메시지는 아니지만, 숫자로 바꾸는 데 실패했다는 중요한 신호입니다. NaN이 나온 값을 그대로 계산에 사용하면 결과도 기대와 다르게 나올 수 있으니, 입력값이 정말 숫자인지 확인하는 습관이 필요합니다.

AI 생성 이미지

기본 연산으로 가격 계산하기

자바스크립트에서 자주 쓰는 계산 기호는 다음과 같습니다.

곱하기는 ×가 아니라 *를 씁니다. 나누기는 ÷가 아니라 /를 씁니다. 키보드에서 바로 입력하기 쉬운 기호를 사용하는 것입니다.

배송비 계산을 해 보겠습니다.

const productPrice = 12000;
const deliveryFee = 3000;
const totalPrice = productPrice + deliveryFee;

console.log(totalPrice); // 15000

이제 무료 배송 조건을 아직 배우지 않은 조건문 없이, 숫자 계산만으로 확인해 보겠습니다.

const freeDeliveryMinimum = 30000;
const currentTotal = 12000;
const remainingAmount = freeDeliveryMinimum - currentTotal;

console.log(remainingAmount); // 18000

이 결과를 보면 무료 배송까지 18000원이 더 필요하다는 것을 알 수 있습니다.

할인 가격도 계산해 보겠습니다.

const originalPrice = 20000;
const discountRate = 10;

const discountAmount = originalPrice * discountRate / 100;
const finalPrice = originalPrice - discountAmount;

console.log(discountAmount); // 2000
console.log(finalPrice);     // 18000

여기서 discountRate는 할인율입니다. 10%는 전체 가격의 100분의 10이므로 originalPrice * discountRate / 100으로 할인 금액을 구합니다.

나머지 연산 %는 처음에는 낯설 수 있습니다. 나누고 남은 값을 구하는 연산입니다.

console.log(10 % 3); // 1
console.log(8 % 2);  // 0

10 % 3은 10을 3으로 나누면 9까지 나누어지고 1이 남기 때문에 결과가 1입니다. 이 연산은 나중에 짝수와 홀수를 구분할 때 자주 씁니다.

const orderNumber = 17;
console.log(orderNumber % 2); // 1

2로 나누었을 때 나머지가 0이면 짝수, 1이면 홀수입니다. 지금은 이런 방식으로 숫자의 상태를 확인할 수 있다는 정도만 기억해도 충분합니다.

문자열을 이어 붙여 안내 문구 만들기

계산 결과만 콘솔에 찍으면 사람에게는 조금 불친절합니다.

console.log(18000);

이 숫자가 할인 금액인지, 결제 금액인지, 남은 금액인지 알기 어렵습니다. 그래서 계산 결과를 문자열과 함께 보여 주어야 합니다.

가장 단순한 방법은 +로 문자열을 이어 붙이는 것입니다.

const userName = '홍길동';
const paymentAmount = 12000;

console.log(userName + '님, 결제 금액은 ' + paymentAmount + '원입니다.');

결과는 다음과 같습니다.

홍길동님, 결제 금액은 12000원입니다.

여기서 +는 계산이 아니라 문자열 연결로 사용되었습니다. 앞이나 뒤에 문자열이 있으면 자바스크립트는 값을 글자로 바꿔 이어 붙입니다.

하지만 문장이 길어질수록 +가 많아집니다.

const productName = '무선 마우스';
const finalPrice = 18000;
const deliveryFee = 3000;

console.log(productName + '의 상품 금액은 ' + finalPrice + '원이고, 배송비는 ' + deliveryFee + '원입니다.');

읽기가 조금 불편합니다. 따옴표와 더하기 기호가 섞여서 어디가 문장이고 어디가 변수인지 헷갈리기 쉽습니다.

이럴 때 템플릿 리터럴을 사용합니다. 템플릿 리터럴은 문자열 안에 변수를 끼워 넣기 좋은 문법입니다. 작은따옴표나 큰따옴표 대신 백틱을 사용합니다.

백틱은 보통 키보드 왼쪽 위, 숫자 1 왼쪽에 있는 기호입니다.

const userName = '홍길동';
const paymentAmount = 12000;

console.log(`${userName}님, 결제 금액은 ${paymentAmount}원입니다.`);

${} 안에 변수 이름을 넣으면 그 자리에 값이 들어갑니다. 문장 틀을 먼저 만들고, 빈칸에 값을 넣는 방식이라고 생각하면 됩니다.

할인 안내 문구도 만들어 보겠습니다.

const originalPrice = 20000;
const discountRate = 10;
const discountAmount = originalPrice * discountRate / 100;
const finalPrice = originalPrice - discountAmount;

console.log(`정가 ${originalPrice}원에서 ${discountRate}% 할인되어 ${finalPrice}원에 결제됩니다.`);

결과는 다음과 같습니다.

정가 20000원에서 10% 할인되어 18000원에 결제됩니다.

실제 웹페이지에서 사용자가 보는 문구는 이런 방식으로 만들어집니다. 숫자를 계산하고, 그 결과를 사람이 이해할 수 있는 문장으로 바꾸는 것입니다.

문자열 기능으로 검색어와 문구 다듬기

문자열에는 자주 쓰는 기능이 들어 있습니다. 여기서는 네 가지만 다루겠습니다.

• length: 문자열 길이 확인

• includes(): 특정 글자가 들어 있는지 확인

• toLowerCase(): 영어 대문자를 소문자로 바꾸기

• replace(): 일부 글자를 다른 글자로 바꾸기

먼저 length입니다.

const message = '안녕하세요';
console.log(message.length); // 5

length는 문자열에 글자가 몇 개 있는지 알려 줍니다. 비밀번호 길이, 닉네임 길이, 검색어가 비어 있는지 확인할 때 자주 사용합니다.

const searchWord = '커피';
console.log(searchWord.length); // 2

includes()는 문자열 안에 원하는 글자가 들어 있는지 확인합니다. 결과는 true 또는 false입니다.

const productName = '아이스 아메리카노';

console.log(productName.includes('아메리카노')); // true
console.log(productName.includes('라떼'));       // false

검색 기능을 만들 때 이런 생각을 할 수 있습니다. 상품명에 검색어가 들어 있으면 보여 주고, 아니면 숨기는 식입니다. 실제 화면을 바꾸는 방법은 뒤에서 DOM을 배울 때 다루겠습니다. 지금은 문자열 검사만 익히면 됩니다.

영어 검색어는 대소문자 때문에 문제가 생길 수 있습니다.

const title = 'JavaScript Guide';

console.log(title.includes('javascript')); // false

사람은 JavaScript와 javascript가 같은 말이라고 느낄 수 있습니다. 하지만 자바스크립트는 대문자 J와 소문자 j를 다르게 봅니다. 이럴 때 양쪽을 모두 소문자로 바꿔 비교합니다.

const title = 'JavaScript Guide';
const searchWord = 'javascript';

console.log(title.toLowerCase().includes(searchWord.toLowerCase())); // true

toLowerCase()는 문자열을 소문자로 바꾼 새 문자열을 만들어 줍니다. 원래 변수에 담긴 값이 바뀌는 것이 아니라, 비교하기 좋은 형태로 잠시 바꿔 쓰는 것입니다.

마지막으로 replace()입니다. 문자열 일부를 다른 내용으로 바꿀 때 사용합니다.

const notice = '오늘 배송비는 3000원입니다.';
const newNotice = notice.replace('3000원', '무료');

console.log(newNotice); // 오늘 배송비는 무료입니다.

입력값에서 쉼표를 없앨 때도 사용할 수 있습니다.

const inputPrice = '12,000';
const cleanPrice = inputPrice.replace(',', '');
const price = Number(cleanPrice);

console.log(price + 3000); // 15000

주의할 점이 있습니다. 위 코드는 쉼표가 하나일 때만 자연스럽게 동작합니다. 1,200,000처럼 쉼표가 여러 개 있으면 첫 번째 쉼표만 바뀝니다. 지금은 replace()가 문자열 일부를 바꾸는 기능이라는 점에 집중하면 됩니다.

자주 만나는 실수 읽기

문자와 숫자를 함께 다룰 때 가장 흔한 실수는 계산할 값을 문자열로 둔 채 더하는 것입니다.

const price = '12000';
const deliveryFee = 3000;

console.log(price + deliveryFee); // 120003000

이 결과가 나오면 +가 계산이 아니라 연결로 동작했다는 뜻입니다. 해결 방법은 계산 전에 숫자로 바꾸는 것입니다.

const price = Number('12000');
const deliveryFee = 3000;

console.log(price + deliveryFee); // 15000

또 다른 실수는 템플릿 리터럴에 백틱이 아니라 따옴표를 쓰는 것입니다.

const userName = '홍길동';

console.log('${userName}님, 환영합니다.');

이 코드는 변수 값이 들어가지 않고 그대로 출력됩니다.

${userName}님, 환영합니다.

${}를 사용하려면 반드시 백틱으로 감싸야 합니다.

const userName = '홍길동';

console.log(`${userName}님, 환영합니다.`);

문법이 어려워서 생기는 문제가 아닙니다. 기호 하나가 다르면 자바스크립트가 다른 뜻으로 읽기 때문에 생기는 문제입니다. 결과가 예상과 다르면 먼저 따옴표, 백틱, 숫자 변환을 확인해 보세요.

작은 실습: 결제 안내 문구 만들기

브라우저 콘솔에 아래 코드를 입력해 보세요.

const userName = '민지';
const inputPrice = '25000';
const deliveryFee = 3000;
const discountRate = 20;

const productPrice = Number(inputPrice);
const discountAmount = productPrice * discountRate / 100;
const finalPrice = productPrice - discountAmount + deliveryFee;

const message = `${userName}님, ${discountRate}% 할인이 적용되어 배송비 포함 결제 금액은 ${finalPrice}원입니다.`;

console.log(message);

결과는 다음과 비슷하게 나옵니다.

민지님, 20% 할인이 적용되어 배송비 포함 결제 금액은 23000원입니다.

계산 과정을 천천히 보면 이렇습니다.

• 입력 가격 '25000'을 Number()로 숫자 25000으로 바꿉니다.

• 20% 할인 금액 5000을 계산합니다.

• 상품 가격에서 할인 금액을 빼고 배송비 3000을 더합니다.

• 마지막으로 템플릿 리터럴로 안내 문구를 만듭니다.

이번 장에서 배운 내용은 실제 서비스의 작은 조각과 닮아 있습니다. 쇼핑몰의 결제 문구, 검색어 검사, 환영 메시지, 배송비 안내는 모두 문자열과 숫자를 함께 다루는 일입니다.

다음 장에서는 조건문을 배웁니다. 조건문을 사용하면 결제 금액이 30000원 이상일 때만 배송비를 무료로 만들거나, 검색어가 너무 짧을 때 안내 문구를 보여 줄 수 있습니다.