02. 값에 이름 붙이고 계산하기

01. 변수는 값을 다시 부르기 위한 이름입니다

계산할 때 200이 예산인지 지출인지 기억하기는 어렵습니다. const budget = 200;이라고 쓰면 200이라는 값을 budget이라는 이름으로 사용할 수 있습니다. 이때 =는 ‘양쪽이 같다’는 수학 기호가 아니라 오른쪽 값을 왼쪽 이름에 저장한다는 대입 기호입니다. let count = 1; 다음에 count = count + 1;이라고 쓰면 오른쪽의 현재 값 1에 1을 더해 2를 다시 저장합니다.

우선 const로 시작하고, 재할당이 필요한 경우 let을 씁니다. const budget = 100; 뒤에 budget = 200;을 실행하면 오류입니다. const가 ‘세상의 모든 값이 영원히 변하지 않는다’는 뜻은 아닙니다. 6단원의 객체와 4단원의 배열은 const로 선언해도 내부 내용을 바꿀 수 있습니다. 이 수업에서는 읽기 중심으로 사용합니다.

const budget = 200;
const spent = 50;
const rate = (spent / budget) * 100;
console.log(rate);
let count = 1;
count = count + 1;
console.log(count);

25
2

02. 숫자와 문자열은 다릅니다

100은 숫자, "100"은 숫자 모양의 글자입니다. 문자열은 부서명, 보고서 제목, 입력창에서 읽은 원문에 사용합니다. +는 숫자끼리 더할 때 덧셈이지만 문자열이 끼면 글자를 연결할 수 있습니다. Number("100")은 숫자로 바꾸는 명령이고, typeof는 값의 자료형을 확인하는 연산자입니다.

console.log("100" + 20);
console.log(Number("100") + 20);
console.log(typeof "100");
console.log(typeof 100);

10020
120
string
number

03. 계산식을 업무 문장으로 설명합니다

집행률은 (spent / budget) * 100입니다. /는 나눗셈, *는 곱셈, -는 뺄셈입니다. 괄호는 먼저 계산할 부분을 드러냅니다. 예산 200, 지출 50이면 50÷200×100=25입니다. 숫자 25를 출력한 것이므로 ‘%’라는 단위는 설명이나 화면 문구로 붙여야 합니다. console.log(rate + "%");로 써 봅니다.

변수 이름은 의미를 드러내면 좋습니다. budget은 예산, spent는 지출, rate는 비율입니다. 띄어쓰기 없이 budgetTotal처럼 단어 경계에서 대문자를 쓸 수 있습니다. 숫자로 시작하는 이름은 사용할 수 없고, budget과 Budget은 다른 이름입니다. 한글 이름도 가능하지만 수업에서는 자료와 맞추기 쉽게 이 세 이름을 사용합니다.

선택 · 숫자에 이름표를 붙이는 TypeScript

JavaScript는 값을 실행하며 처리합니다. TypeScript는 실행 전에 ‘이 값은 숫자여야 한다’ 같은 약속을 검사합니다. : number는 숫자라는 타입 표시입니다. 실행할 때에는 이 표시가 없는 JavaScript로 바뀝니다.

const budget: number = 400;
const spent: number = 100;
console.log((spent / budget) * 100);

실습창에서 TypeScript 모드로 실행한 뒤 spent의 값을 "100"으로 바꿔 보세요. 숫자 자리에 문자를 넣으면 실행 전에 오류를 보여 줍니다. 타입 표기를 생략해도 값에서 타입을 추론할 수 있습니다.