연산자와 타입 변환

2026-04-04Views 40약 8분

지난 챕터에서 우리는 값, 변수, 자료형을 배웠다. 이제 재료는 준비됐다. 이번에는 그 재료를 가지고 계산하고, 비교하고, 이어 붙이고, 때로는 다른 형태로 바꾸는 방법을 배운다.

자바스크립트에서 연산자는 일종의 행동 버튼이다. 숫자끼리 더하게 만들고, 두 값이 같은지 물어보고, 참과 거짓을 뒤집게 만든다. 그리고 이 과정에서 자바스크립트는 가끔 스스로 타입을 바꾸기도 한다. 여기서 많은 초보자가 처음으로 "어? 왜 이렇게 되지?"를 경험한다.

하지만 걱정할 필요는 없다. 이번 챕터의 핵심은 딱 하나다.

자바스크립트는 값의 모양에 따라 다르게 계산한다.

이 감각만 잡히면 "5"와 5가 왜 다른지, 왜 "5" + 1은 51인데 "5" - 1은 4가 되는지도 자연스럽게 이해된다.

연산자란 무엇일까

연산자는 값에 어떤 동작을 하게 만드는 기호다. 예를 들어 +는 더하기에 쓰이고, >는 크기 비교에 쓰이고, &&는 논리 판단에 쓰인다.¹

아래 코드는 아주 짧지만 연산자가 무엇을 하는지 잘 보여 준다.

console.log(10 + 5);   // 15
console.log(10 > 5);   // true
console.log(true && false); // false

첫 줄은 계산, 둘째 줄은 비교, 셋째 줄은 논리 판단이다. 같은 코드처럼 보여도 연산자의 종류에 따라 자바스크립트가 하는 일이 완전히 달라진다.

산술 연산자: 숫자를 계산하는 도구

산술 연산자는 숫자를 가지고 계산할 때 쓴다. 가장 자주 만나는 것은 +, -, *, /다.¹

console.log(7 + 3);  // 10
console.log(7 - 3);  // 4
console.log(7 * 3);  // 21
console.log(7 / 3);  // 2.3333333333333335

컴퓨터는 계산기를 아주 성실하게 닮았다. 더하라면 더하고, 나누라면 나눈다. 다만 나눗셈 결과가 소수로 길게 나올 수 있다는 점이 눈에 띈다.

나머지를 구하는 `%`

%는 나머지 연산자다. 어떤 수를 나눈 뒤 남는 값을 알려 준다.¹

console.log(10 % 3); // 1
console.log(12 % 4); // 0

이 연산자는 처음엔 조금 낯설지만 꽤 유용하다. 예를 들어 짝수와 홀수를 구분할 때 많이 쓴다.

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

2로 나누었을 때 나머지가 0이면 짝수, 1이면 홀수다. 숫자 세계의 간단한 탐정 도구라고 생각하면 된다.

거듭제곱

는 거듭제곱 연산자다. 쉽게 말해 "몇 번 곱할까?"를 나타낸다.¹

console.log(2 ** 3); // 8
console.log(5  2); // 25

2 3은 2 * 2 * 2와 같다.

계산에도 순서가 있다

자바스크립트는 아무 순서로나 계산하지 않는다. 일반 수학처럼 곱셈과 나눗셈이 덧셈과 뺄셈보다 먼저 계산된다.¹

console.log(5 + 2 * 3);   // 11
console.log((5 + 2) * 3); // 21

첫 번째는 2 * 3이 먼저 계산돼서 6이 되고, 그 뒤에 5를 더해 11이 된다. 두 번째는 괄호가 있으니 5 + 2가 먼저 계산된다.

헷갈릴 것 같으면 괄호를 쓰는 습관이 좋다. 컴퓨터도 편하고, 미래의 나도 편하다.

값을 1 늘리거나 줄이기

++는 1 증가, --는 1 감소다.¹

let count = 3;
count++;
console.log(count); // 4

count--;
console.log(count); // 3

반복문을 배울 때 아주 자주 만나게 된다. 지금은 "숫자를 한 칸씩 움직이는 버튼" 정도로 기억해 두면 충분하다.

`+`는 숫자에서만 더하기가 아니다

여기서부터 자바스크립트가 슬쩍 장난을 치기 시작한다. +는 숫자끼리 만나면 더하기지만, 문자열이 끼어 있으면 문자열 이어 붙이기가 된다.³

console.log(10 + 5);       // 15
console.log("10" + "5"); // 105
console.log("안녕" + "하세요"); // 안녕하세요

숫자 10과 숫자 5는 더하면 15다. 하지만 문자열 "10"과 문자열 "5"는 계산되지 않고 그냥 이어 붙어서 "105"가 된다.

이 차이는 아주 중요하다. 겉보기에는 비슷해 보여도, 자바스크립트는 따옴표가 붙었는지를 엄청 중요하게 본다.

숫자와 문자열을 섞으면 어떻게 될까

console.log("5" + 1); // 51
console.log(1 + "5"); // 15

결과만 보면 "왜 6이 아니지?" 싶다. 이유는 간단하다. 문자열이 하나라도 있으면 +는 숫자 계산보다 문자열 결합 쪽으로 기울기 때문이다.³

즉,

"5" + 1은 "5" + "1"처럼 동작해서 "51"
1 + "5"는 "1" + "5"처럼 동작해서 "15"

가 된다.

그래서 사용자 입력값처럼 문자열로 들어온 데이터를 숫자 계산에 바로 쓰면 결과가 이상해질 수 있다.

문자열을 더 읽기 쉽게 만드는 템플릿 리터럴

문자열을 이어 붙일 때 +만 써도 되지만, 내용이 길어지면 금방 복잡해진다.

const name = "지민";
const age = 20;

const message = "안녕하세요, 제 이름은 " + name + "이고 나이는 " + age + "살입니다.";
console.log(message);

이 코드는 틀리지는 않지만, 눈이 조금 바쁘다. 어디가 글자이고 어디가 변수인지 한 번 더 봐야 한다.

이럴 때 쓰는 것이 템플릿 리터럴이다. 템플릿 리터럴은 작은따옴표나 큰따옴표 대신 백틱()을 사용하고, ${}` 안에 변수나 표현식을 넣을 수 있다.²

const name = "지민";
const age = 20;

const message = `안녕하세요, 제 이름은 ${name}이고 나이는 ${age}살입니다.`;
console.log(message);

훨씬 자연스럽다. 사람이 읽는 문장과 코드가 거의 같은 모양이 된다.

템플릿 리터럴 안에서는 계산도 가능하다

${} 안에는 변수만 넣는 것이 아니다. 계산식도 넣을 수 있다.²

const price = 3000;
const count = 2;

console.log(`총 가격은 ${price * count}원입니다.`);

결과는 다음과 같다.

총 가격은 6000원입니다.

문장을 만들면서 계산까지 바로 할 수 있으니 꽤 편리하다.

여러 줄 문자열도 쉽게 쓸 수 있다

템플릿 리터럴은 여러 줄 문자열을 쓸 때도 유용하다.²

const text = `첫째 줄
둘째 줄`;

또는 줄바꿈을 코드에 그대로 적을 수도 있다.

const text = `첫째 줄
둘째 줄`;

실제 코드에서는 아래처럼 여러 줄을 자연스럽게 적는 편이 읽기 쉽다.

const text = `첫째 줄
둘째 줄`;

위 세 예시는 결과가 같다는 점을 보여 주기 위한 것이다. 즉, 템플릿 리터럴은 여러 줄 문장을 만들 때 문자열 연결보다 훨씬 편하다. 긴 안내 문구나 HTML 비슷한 문자열을 만들 때 특히 읽기 쉬워진다.

비교 연산자: 같은지, 큰지, 작은지 묻기

비교 연산자는 두 값을 비교해서 true 또는 false를 만든다.¹

console.log(10 > 5);   // true
console.log(10 < 5);   // false
console.log(10 >= 10); // true
console.log(10 <= 9);  // false

조건문은 다음 챕터에서 본격적으로 배우겠지만, 비교 연산자는 그 조건문의 재료다. 즉, "이 값이 맞나?"를 물어보는 역할을 한다.

`==`와 `===`는 꼭 구분하자

초보자가 가장 많이 헷갈리는 부분 중 하나가 ==와 ===다.

console.log(5 == "5");  // true
console.log(5 === "5"); // false

둘 다 비슷해 보이지만 성격이 다르다.

==는 값만 비슷하면 같다고 볼 수 있는지 느슨하게 비교한다. 이때 자바스크립트가 타입을 자동으로 바꿔 비교할 수 있다.³

반면 ===는 값도 같고 타입도 같아야 true가 된다. 타입을 몰래 바꾸지 않는다.¹

그래서 입문 단계에서는 아주 단순하게 이렇게 기억하면 좋다.

==는 느슨한 비교
===는 엄격한 비교
대부분 ===를 쓰는 습관이 안전하다

특히 "5"와 5를 구분하고 싶다면 ===가 훨씬 믿음직하다.

다르다는 비교도 있다

같지 않음을 비교할 때는 !=와 !==를 쓴다.

console.log(5 != "5");  // false
console.log(5 !== "5"); // true

!=는 느슨하게 다름을 보고, !==는 타입까지 포함해 엄격하게 다름을 본다.

논리 연산자: 참과 거짓을 조합하기

논리 연산자는 불리언 값인 true, false를 다룰 때 사용한다. 대표적으로 &&, ||, !가 있다.¹

console.log(true && true);   // true
console.log(true && false);  // false
console.log(true || false);  // true
console.log(!true);          // false

이 연산자들은 처음엔 조금 추상적으로 느껴질 수 있다. 그래서 말로 풀어 읽으면 이해가 쉽다.

`&&`는 그리고

&&는 양쪽이 모두 참일 때만 참이다.

const hasTicket = true;
const isAdult = true;

console.log(hasTicket && isAdult); // true

티켓도 있고, 성인도 맞아야 true다. 둘 중 하나라도 false면 결과는 false다.

`||`는 또는

||는 둘 중 하나만 참이어도 참이다.

const isWeekend = false;
const isHoliday = true;

console.log(isWeekend || isHoliday); // true

주말이거나 공휴일이면 true다.

`!`는 반대로 뒤집기

!는 참과 거짓을 뒤집는다.

console.log(!true);  // false
console.log(!false); // true

문 앞에 붙이는 "아니" 버튼이라고 생각하면 된다.

타입 변환이란 무엇일까

이제 본론이다. 타입 변환은 값을 다른 타입으로 바꾸는 것이다. 자바스크립트에서는 이 일이 두 가지 방식으로 일어난다.

하나는 내가 직접 바꾸는 경우이고, 다른 하나는 자바스크립트가 알아서 바꾸는 경우다.⁴

이 둘을 구분하는 순간, 많은 혼란이 정리된다.

내가 직접 바꾸는 명시적 타입 변환

개발자가 의도적으로 타입을 바꾸는 것을 명시적 타입 변환이라고 한다. 흔히 Number(), String(), Boolean() 같은 방법을 쓴다.⁴

문자열을 숫자로 바꾸기

const score = "100";
const numberScore = Number(score);

console.log(numberScore); // 100
console.log(typeof numberScore); // number

이제 numberScore는 진짜 숫자다. 그래서 계산이 가능하다.

const a = "10";
const b = "20";

console.log(Number(a) + Number(b)); // 30

만약 Number()를 쓰지 않으면 "10" + "20"은 "1020"이 된다. 숫자 계산이 아니라 문자열 결합이기 때문이다.

숫자로 바꿀 수 없으면 `NaN`

모든 문자열이 숫자로 변하는 것은 아니다.

console.log(Number("hello")); // NaN

NaN은 Not-a-Number의 줄임말이다. "숫자로 계산하려 했지만 숫자가 아니다"라는 뜻이다.

겉으로는 조금 무섭게 생겼지만, 그냥 "숫자 변환 실패" 표지판이라고 생각하면 된다.

숫자를 문자열로 바꾸기

const year = 2026;
const textYear = String(year);

console.log(textYear); // "2026"
console.log(typeof textYear); // string

숫자를 문장 속에 넣거나 문자열 메서드를 써야 할 때 유용하다.

불리언으로 바꾸기

console.log(Boolean(1));        // true
console.log(Boolean(0));        // false
console.log(Boolean("hello")); // true
console.log(Boolean(""));      // false

이 부분은 다음 챕터의 조건문과도 연결된다. 지금은 이렇게만 기억하면 좋다.

비어 있지 않은 값은 대체로 true
비어 있거나 0 같은 값은 false가 될 수 있음

자바스크립트가 알아서 바꾸는 암묵적 타입 변환

자바스크립트는 연산을 계속 진행하려고 값의 타입을 자동으로 바꾸는 경우가 있다. 이것을 암묵적 타입 변환 또는 강제 변환(coercion)이라고 한다.³

이 기능은 편리할 때도 있지만, 초보자에게는 함정이 되기도 한다.

`+`는 문자열 쪽으로 끌려가기 쉽다

console.log("5" + 2);   // 52
console.log(true + "!"); // true!

문자열이 끼어 있으면 +는 이어 붙이기 쪽으로 흐르기 쉽다. 그래서 숫자 2가 문자열 "2"처럼 바뀌고, true도 "true"처럼 바뀐다.³

`-`, `*`, `/`는 숫자 쪽으로 끌고 간다

반대로 -, *, /는 숫자 계산을 하려는 성격이 강하다.

console.log("5" - 2);  // 3
console.log("5" * 2);  // 10
console.log("10" / 2); // 5

이번에는 문자열 "5"가 숫자 5로 바뀌었다. 같은 문자열인데도 +를 만났을 때와 결과가 다르다.

바로 이 지점이 자바스크립트의 대표적인 헷갈림 포인트다.

"5" + 2 → "52"
"5" - 2 → 3

겉보기에는 비슷한데 결과는 완전히 다르다. 이유는 연산자마다 원하는 방향이 다르기 때문이다.

불리언도 숫자로 바뀔 수 있다

console.log(true + 1);  // 2
console.log(false + 1); // 1

여기서는 true가 1, false가 0처럼 취급된다.⁴

이 결과는 처음 보면 깜짝 놀랄 수 있지만, 자바스크립트는 숫자 계산을 이어 가기 위해 이렇게 해석한다.

초보자가 꼭 기억해야 할 타입 변환 규칙

처음에는 모든 예외를 외우려고 하지 말고, 자주 쓰는 규칙만 분명히 기억하면 된다.

문자열이 하나라도 섞인 +는 이어 붙이기가 되기 쉽다.
-, *, /는 숫자로 바꾸려는 경향이 강하다.
==는 비교 전에 타입을 바꿀 수 있다.
===는 타입을 바꾸지 않고 비교한다.
숫자 계산이 필요하면 직접 Number()로 바꾸는 편이 안전하다.

이 다섯 줄만 잘 기억해도 실수의 절반은 줄어든다.

실전에서 자주 보는 예제

사용자에게 입력을 받았다고 가정해 보자. 입력값은 문자열로 들어오는 경우가 많다.

const inputAge = "20";

console.log(inputAge + 1);         // 201
console.log(Number(inputAge) + 1); // 21

첫 번째는 문자열 결합이라 201이 되고, 두 번째는 숫자로 바꾼 뒤 계산해서 21이 된다.

이 예제는 아주 중요하다. 웹 개발에서 입력값을 다룰 때 이런 일이 정말 자주 생긴다. 그래서 "지금 이 값은 문자열인가, 숫자인가?"를 확인하는 습관이 필요하다.

헷갈리는 비교 한 번에 정리하기

아래 예제는 꼭 직접 실행해 보자.

console.log("5" == 5);    // true
console.log("5" === 5);   // false
console.log("10" + 2);    // 102
console.log("10" - 2);    // 8
console.log(Boolean(""));  // false
console.log(Boolean("0")); // true

여기서 특히 마지막 두 줄이 재미있다.

빈 문자열 ""은 false로 바뀌지만, 문자열 "0"은 비어 있지 않기 때문에 true다. 숫자 0과 문자열 "0"은 완전히 같은 존재가 아니다. 이 차이를 이해하면 조건문에서도 훨씬 덜 헷갈리게 된다.

좋은 습관: 자바스크립트가 추측하게 두지 말자

자바스크립트는 친절한 척하면서 종종 너무 많은 것을 대신 해 주려 한다. 그런데 그 친절이 가끔 사고를 친다.

그래서 초보자에게 특히 좋은 습관은 이렇다.

비교할 때는 가능하면 ===와 !==를 쓴다.
숫자 계산 전에는 Number()로 타입을 분명히 맞춘다.
긴 문자열 조합에는 +보다 템플릿 리터럴을 우선 고려한다.

이 습관을 들이면 코드는 더 읽기 쉬워지고, 결과도 더 예측 가능해진다.

한 번에 정리해 보는 예제

const userName = "민수";
const itemPrice = "1500";
const itemCount = 2;

const totalPrice = Number(itemPrice) * itemCount;
const message = `${userName}님의 총 결제 금액은 ${totalPrice}원입니다.`;

console.log(message);
console.log(totalPrice === 3000); // true
console.log(totalPrice > 2000 && totalPrice < 5000); // true

이 짧은 코드 안에 이번 챕터의 핵심이 거의 다 들어 있다.

문자열 itemPrice를 Number()로 숫자로 바꾸었고, *로 계산했으며, 템플릿 리터럴로 문장을 만들었다. 마지막에는 ===, >, <, &&를 이용해 비교와 논리 판단까지 했다.

이 정도가 자연스럽게 읽히면 아주 잘 따라오고 있는 것이다.

마무리

이번 챕터에서는 연산자와 타입 변환의 기본을 배웠다. 산술 연산자는 숫자를 계산하고, 비교 연산자는 참과 거짓을 만들고, 논리 연산자는 그 참과 거짓을 조합한다. 문자열은 +로 이어 붙일 수 있고, 템플릿 리터럴을 쓰면 훨씬 읽기 쉬운 문장을 만들 수 있다.

무엇보다 중요한 것은 값의 타입을 의식하는 습관이다. 자바스크립트는 유연한 언어라서 편리하지만, 그만큼 "5"와 5를 구분하지 않으면 뜻밖의 결과가 나오기 쉽다.

이번 챕터의 핵심을 마지막으로 딱 세 줄로 정리해 보자.

+는 숫자 더하기일 수도 있고 문자열 결합일 수도 있다.
비교할 때는 ===를 우선 떠올리자.
계산 전에 타입을 분명히 맞추면 버그가 크게 줄어든다.

다음 챕터에서는 이렇게 만들어진 true와 false를 이용해, 코드가 스스로 판단하도록 만드는 조건문을 배워 본다.

참고

¹Expressions and operators - JavaScript | MDN

²Template literals (Template strings) - JavaScript | MDN

³Coercion and Type Conversion in JavaScript – Explained with Code Examples

⁴Type Conversion and Type Coercion in JavaScript - GeeksforGeeks

책 목록

처음부터 제대로 배우는 JavaScript 기초

전체 목차 보기