안녕하세요, 코딩하는곰입니다! JavaScript를 배우는 많은 개발자들이 처음 마주하는 개념 중 하나가 바로 산술 연산자입니다. 더하기, 빼기, 곱하기, 나누기 등 우리가 일상에서 사용하는 기본적인 수학 연산을 JavaScript에서 어떻게 표현하고 활용하는지 알아보는 시간을 가져보겠습니다. 이 글에서는 JavaScript의 5가지 기본 산술 연산자(+, -, *, /, %)를 자세히 설명하고, 복잡한 표현식에서 어떤 순서로 연산이 수행되는지에 대한 우선순위 규칙까지 깊이 있게 다루어보겠습니다. JavaScript의 기초를 탄탄하게 다지고 싶은 분들에게 꼭 필요한 내용입니다.

JavaScript 산술 연산자 기본 이해

JavaScript에서 산술 연산자는 수학적 계산을 수행하는 데 사용되는 기본적인 연산자입니다. 프로그래밍에서 숫자 데이터를 다루는 거의 모든 상황에서 이러한 연산자들이 활용되므로, 이를 정확히 이해하는 것은 JavaScript 학습의 첫걸음이라고 할 수 있습니다.

기본 산술 연산자 종류

JavaScript에서는 다음과 같은 5가지 주요 산술 연산자를 제공합니다:

1. 덧셈 연산자(+) : 두 값을 더합니다
2. 뺄셈 연산자(-) : 왼쪽 값에서 오른쪽 값을 뺍니다
3. 곱셈 연산자(*) : 두 값을 곱합니다
4. 나눗셈 연산자(/) : 왼쪽 값을 오른쪽 값으로 나눕니다
5. 나머지 연산자(%) : 왼쪽 값을 오른쪽 값으로 나눈 나머지를 구합니다

각 연산자의 상세 설명

덧셈 연산자(+)

덧셈 연산자는 두 숫자의 합을 계산하는 가장 기본적인 연산자입니다.

let a = 10;
let b = 5;
let sum = a + b; // 15
console.log(7 + 3); // 10
console.log(12.5 + 4.3); // 16.8
console.log(-5 + 10); // 5

덧셈 연산자는 숫자 타입뿐만 아니라 문자열 연결에도 사용될 수 있습니다. 이는 JavaScript의 동적 타입 특성 때문인데, 이에 대해서는 조금 뒤에 더 자세히 설명하겠습니다.

뺄셈 연산자(-)

뺄셈 연산자는 첫 번째 피연산자에서 두 번째 피연산자를 빼는 연산을 수행합니다.

let x = 15;
let y = 8;
let difference = x - y; // 7
console.log(20 - 5); // 15
console.log(7.5 - 2.2); // 5.3
console.log(10 - 15); // -5
console.log(-5 - 3); // -8

곱셈 연산자(*)

곱셈 연산자는 두 피연산자의 곱을 계산합니다.

let num1 = 6;
let num2 = 7;
let product = num1 * num2; // 42
console.log(5 * 4); // 20
console.log(2.5 * 4); // 10
console.log(-3 * 5); // -15
console.log(-4 * -6); // 24

나눗셈 연산자(/)

나눗셈 연산자는 첫 번째 피연산자를 두 번째 피연산자로 나눈 몫을 계산합니다.

let dividend = 20;
let divisor = 4;
let quotient = dividend / divisor; // 5
console.log(15 / 3); // 5
console.log(10 / 4); // 2.5
console.log(7 / 2); // 3.5
console.log(0 / 5); // 0
console.log(5 / 0); // Infinity

0으로 나누는 경우 JavaScript는 Infinity 값을 반환하며, 이는 수학적 규칙과 일치합니다.

나머지 연산자(%)

나머지 연산자는 첫 번째 피연산자를 두 번째 피연산자로 나눈 나머지를 계산합니다. 모듈로 연산자라고도 불립니다.

let result1 = 17 % 5; // 2 (17을 5로 나누면 몫은 3, 나머지는 2)
let result2 = 20 % 6; // 2 (20을 6으로 나누면 몫은 3, 나머지는 2)
let result3 = 15 % 3; // 0 (15는 3으로 나누어 떨어짐)
console.log(10 % 3); // 1
console.log(8 % 2); // 0
console.log(7 % 4); // 3
console.log(5 % 0); // NaN (0으로 나눌 수 없음)

나머지 연산자는 짝수/홀수 판별, 주기적 작업 처리, 특정 범위 내 값 순환 등 다양한 상황에서 유용하게 사용됩니다.

📚 코딩 지식을 쌓고 싶다면, (자바 기초) 자바 프로그램의 컴파일과 실행 과정 완벽 이해하기를 참고해보세요.

JavaScript 산술 연산자의 특별한 동작과 주의사항

JavaScript의 산술 연산자는 몇 가지 독특한 동작 방식을 가지고 있습니다. 이러한 특성을 이해하지 못하면 예상치 못한 버그를 만날 수 있으니 주의가 필요합니다.

문자열과의 연산

JavaScript는 동적 타입 언어이기 때문에, 산술 연산자가 숫자뿐만 아니라 다른 데이터 타입과도 연산을 수행할 수 있습니다. 특히 덧셈 연산자는 문자열 연결 연산자로도 사용됩니다.

// 숫자 덧셈
console.log(5 + 3); // 8
// 문자열 연결
console.log("Hello" + "World"); // "HelloWorld"
console.log("나이는: " + 25); // "나이는: 25"
// 혼합된 타입
console.log(10 + "5"); // "105" (숫자 10이 문자열로 변환됨)
console.log("5" + 10); // "510" (숫자 10이 문자열로 변환됨)
console.log(10 + 5 + "2"); // "152" (10+5=15, 15+"2"="152")
console.log("2" + 10 + 5); // "2105" ("2"+10="210", "210"+5="2105")

다른 연산자들의 문자열 동작

덧셈을 제외한 다른 산술 연산자들은 문자열을 숫자로 변환하려고 시도합니다.

console.log("10" - 3); // 7 (문자열 "10"이 숫자 10으로 변환됨)
console.log("10" * 2); // 20
console.log("10" / 2); // 5
console.log("10" % 3); // 1
console.log("abc" - 3); // NaN (문자열 "abc"는 숫자로 변환할 수 없음)
console.log("10.5" * 2); // 21

NaN과 Infinity 처리

산술 연산 중 유효하지 않은 연산을 수행하면 NaN(Not a Number)이나 Infinity가 반환될 수 있습니다.

console.log(0 / 0); // NaN
console.log(5 / 0); // Infinity
console.log(-5 / 0); // -Infinity
console.log(Infinity - Infinity); // NaN
console.log(Infinity / Infinity); // NaN
// NaN은 어떤 값과도 비교가 false로 나옴
console.log(NaN === NaN); // false
console.log(isNaN(NaN)); // true (NaN 확인은 isNaN 함수 사용)

단항 연산자와의 조합

산술 연산자는 단항 연산자(++, —, +, -)와 함께 사용될 수 있습니다.

let count = 5;
count++; // count = count + 1 과 동일 (6)
count--; // count = count - 1 과 동일 (5)
let value = 10;
console.log(-value); // -10
console.log(+"5"); // 5 (문자열을 숫자로 변환)
let x = "10";
let y = "5";
console.log(+x + +y); // 15 (문자열을 숫자로 변환 후 덧셈)

실수 연산의 정밀도 문제

JavaScript는 부동소수점 숫자를 사용하므로, 일부 실수 연산에서 정밀도 문제가 발생할 수 있습니다.

console.log(0.1 + 0.2); // 0.30000000000000004 (정확히 0.3이 아님)
console.log(0.1 + 0.2 === 0.3); // false
// 정밀도 문제 해결 방법
console.log((0.1 * 10 + 0.2 * 10) / 10); // 0.3
console.log(Number((0.1 + 0.2).toFixed(1))); // 0.3

이러한 특성들을 이해하면 JavaScript에서 산술 연산을 더 정확하고 효율적으로 사용할 수 있습니다.

닉네임을 고르다가 마음에 드는 걸 놓쳤다면? 생성 이력을 저장해주는 닉네임 추천 도구가 딱입니다.

JavaScript 연산자 우선순위와 복합 표현식

여러 개의 연산자가 하나의 표현식에 함께 사용될 때, JavaScript는 미리 정의된 우선순위 규칙에 따라 연산을 수행합니다. 이 규칙을 이해하지 못하면 예상과 다른 결과를 얻을 수 있으므로 매우 중요합니다.

연산자 우선순위 기본 개념

연산자 우선순위는 표현식에서 연산이 수행되는 순서를 결정합니다. 수학에서 곱셈과 나눗셈이 덧셈과 뺄셈보다 먼저 수행되는 것처럼, JavaScript도 비슷한 규칙을 따릅니다.

let result1 = 10 + 5 * 2; // 5*2=10, 10+10=20 (곱셈이 먼저)
let result2 = (10 + 5) * 2; // 10+5=15, 15*2=30 (괄호가 먼저)
console.log(20 / 4 + 3); // 5+3=8 (나눗셈이 먼저)
console.log(20 / (4 + 3)); // 20/7≈2.857 (괄호가 먼저)

산술 연산자 우선순위 표

JavaScript 산술 연산자의 우선순위는 다음과 같습니다 (높을수록 먼저 수행): | 우선순위 | 연산자 | 설명 | 결합성 | |---------|--------|------|---------| | 18 | () | 괄호 | n/a | | 16 | ++, — | 후위 증감 | 왼쪽에서 오른쪽 | | 15 | ++, — | 전위 증감 | 오른쪽에서 왼쪽 | | 15 | +, - | 단항 플러스, 마이너스 | 오른쪽에서 왼쪽 | | 14 | *, /, % | 곱셈, 나눗셈, 나머지 | 왼쪽에서 오른쪽 | | 13 | +, - | 덧셈, 뺄셈 | 왼쪽에서 오른쪽 |

우선순위 예제 분석

다양한 예제를 통해 우선순위가 어떻게 작동하는지 자세히 알아보겠습니다.

// 예제 1: 기본 우선순위
console.log(2 + 3 * 4); // 3*4=12, 2+12=14 (곱셈 먼저)
// 예제 2: 동일 우선순위 연산자
console.log(10 - 3 + 2); // 10-3=7, 7+2=9 (왼쪽에서 오른쪽)
console.log(20 / 5 * 2); // 20/5=4, 4*2=8 (왼쪽에서 오른쪽)
// 예제 3: 괄호를 사용한 명시적 우선순위 지정
console.log((2 + 3) * 4); // 2+3=5, 5*4=20 (괄호 먼저)
// 예제 4: 복합 표현식
console.log(5 + 3 * 2 - 8 / 4); 
// 계산 순서: 3*2=6, 8/4=2, 5+6=11, 11-2=9
// 예제 5: 나머지 연산자의 우선순위
console.log(10 + 15 % 4); // 15%4=3, 10+3=13
console.log((10 + 15) % 4); // 10+15=25, 25%4=1

실전 활용 예제

우선순위 이해는 실제 프로그래밍에서 매우 중요합니다.

// 할인율 계산
let originalPrice = 10000;
let discountRate = 0.2;
let taxRate = 0.1;
// 올바른 계산: 할인 적용 후 세금 계산
let finalPrice1 = originalPrice * (1 - discountRate) * (1 + taxRate);
console.log(finalPrice1); // 10000 * 0.8 * 1.1 = 8800
// 잘못된 계산: 우선순위 실수
let finalPrice2 = originalPrice * 1 - discountRate * 1 + taxRate;
console.log(finalPrice2); // 10000 - 0.2 + 0.1 = 9999.9 (잘못된 결과)
// 평균 계산
let scores = [85, 92, 78, 96];
let average = (scores[0] + scores[1] + scores[2] + scores[3]) / scores.length;
console.log(average); // (85+92+78+96)/4 = 87.75
// 나머지 연산자를 이용한 짝수/홀수 판별
function isEven(number) {
    return number % 2 === 0;
}
console.log(isEven(10)); // true
console.log(isEven(15)); // false
// 분 단위를 시/분으로 변환
let totalMinutes = 135;
let hours = Math.floor(totalMinutes / 60);
let minutes = totalMinutes % 60;
console.log(`${hours}시간 ${minutes}분`); // 2시간 15분

우선순위 관련 실수 방지 팁

1. 명시적 괄호 사용: 불확실할 때는 괄호를 사용하여 의도를 명확히 표현하세요
2. 표현식 분할: 복잡한 표현식은 여러 줄로 나누어 작성하세요
3. 코드 리뷰: 동료와의 코드 리뷰를 통해 우선순위 관련 실수를 발견하세요

// 좋은 예: 명확한 괄호 사용
let result = (a * b) + (c / d) - (e % f);
// 좋은 예: 복잡한 표현식 분할
let temp1 = a * b;
let temp2 = c / d;
let temp3 = e % f;
let finalResult = temp1 + temp2 - temp3;

연산자 우선순위를 완벽히 이해하면 더 읽기 쉽고 유지보수하기 좋은 코드를 작성할 수 있습니다.

정확한 시간 기록이 필요한 실험이나 트레이닝에는 실시간 스톱워치 기능을 활용하는 것이 좋습니다.

JavaScript 산술 연산자와 우선순위에 대해 깊이 있게 알아보았습니다. 기본적인 연산자 사용법부터 시작해서 각 연산자의 특별한 동작 방식, 그리고 복잡한 표현식에서의 우선순위 규칙까지 다루었습니다. 이러한 기초 개념을 탄탄하게 이해하는 것이 JavaScript 마스터로 가는 첫걸음입니다. 실제 프로젝트에서 이러한 개념들을 적용하다 보면 더 깊은 통찰력을 얻을 수 있을 것입니다. 항상 궁금한 점이 있으면 주저하지 마시고 질문해주세요! 코딩하는곰이 여러분의 JavaScript 학습 여정을 응원하겠습니다. 다음 포스팅에서 또 만나요!

🎤 놓치면 아쉬운 대회와 전시 일정이 궁금하다면, 2025 화성 학생동아리 축제를 참고해보세요.