2.1.1 더하기, 빼기, 곱하기, 나누기 - 숫자 계산의 기본기

📘 2.1.1 더하기, 빼기, 곱하기, 나누기 - 숫자 계산의 기본기

안녕하세요, 여러분. 지난 시간에 우리는 정보를 담는 소중한 상자들을 만드는 방법을 차근차근 배웠죠? 이제 그 상자들 안에 담긴 숫자들로 재미있는 계산을 해볼 차례예요! 자바스크립트에서 숫자 계산을 하는 방법은 여러분이 일상에서 사용하는 계산기와 거의 똑같답니다.

오늘은 가장 기본이 되는 네 가지 계산 방법, 즉 더하기, 빼기, 곱하기, 나누기에 대해 부드럽게 알아볼까요? 마치 수학 시간처럼 숫자들을 자유자재로 다룰 수 있게 될 거예요!

🧠 새로운 단어들과 친해지기

계산과 관련된 중요한 단어들을 쉽게 풀어서 설명해드릴게요.

단어	쉬운 설명
계산 기호들	숫자끼리 계산을 할 때 사용하는 기호들을 통틀어 부르는 말이에요.
더하기 기호 (+)	두 숫자를 합쳐서 더 큰 값을 만들 때 사용하는 기호예요.
빼기 기호 (-)	큰 숫자에서 작은 숫자를 빼서 차이를 구할 때 사용하는 기호예요.
곱하기 기호 (*)	같은 숫자를 여러 번 더하는 것을 간단하게 표현할 때 사용하는 기호예요.
나누기 기호 (/)	큰 숫자를 여러 부분으로 똑같이 나눌 때 사용하는 기호예요.

계산 기호들은 마치 계산기의 버튼과 똑같은 역할을 해요. 여러분이 계산기에서 사용하던 +, -, *, / 버튼을 자바스크립트에서도 그대로 사용할 수 있어요!

✨ 숫자 계산이 뭔지 알아보기

자바스크립트의 계산 기호들은 일상생활의 계산과 완전히 똑같은 방식으로 동작해요. 이는 자바스크립트가 사람들이 이미 알고 있는 수학 개념을 그대로 활용하도록 설계되었기 때문이에요.

더하기 (+) 기호는 두 개 이상의 숫자를 하나로 합치는 역할을 해요. 마치 여러 개의 사탕을 한 곳에 모으는 것처럼, 숫자들을 결합하여 더 큰 값을 만들어내죠. 빼기 (-) 기호는 그 반대로, 큰 숫자에서 작은 숫자를 제거하여 그 차이를 알려줘요.

곱하기 (*) 기호는 같은 숫자를 여러 번 더하는 과정을 간단하게 만들어줘요. 예를 들어 3 * 4는 3 + 3 + 3 + 3과 같은 결과를 훨씬 빠르게 계산해주는 거죠. 나누기 (/) 기호는 큰 숫자를 여러 부분으로 똑같이 나누어 각 부분의 크기를 알려줘요.

재미있는 비유: 우리 반의 수학 시간

계산 기호들을 더 재미있게 이해하기 위해 '우리 반의 수학 시간'을 상상해볼까요?

우리 반에는 네 명의 계산 도우미가 있어요. 각각의 도우미는 특별한 능력을 가지고 있답니다.

더하기 도우미 (+)는 "모아요!" 하고 부드럽게 말해요. 그러면 여러 개의 숫자들이 하나로 모여서 더 큰 숫자가 돼요. 사탕 5개와 사탕 3개가 만나면 "모아요!" 하는 순간 사탕 8개가 되는 것처럼요.

빼기 도우미 (-)는 "빼요!" 하고 정중하게 말해요. 큰 숫자에서 작은 숫자를 빼서 차이를 보여줘요. 용돈 1000원에서 과자값 300원을 "빼요!" 하면 700원이 남는 것을 확인할 수 있답니다.

곱하기 도우미 (*)는 "여러 번!" 하고 친근하게 말해요. 하나의 숫자를 여러 개로 만들어서 모두 더한 결과를 즉시 보여줘요. 연필 4자루를 3번 "여러 번!" 하면 총 12자루가 되는 것처럼요.

나누기 도우미 (/)는 "나눠요!" 하고 따뜻하게 말해요. 큰 숫자를 여러 부분으로 똑같이 나누어줘요. 피자 12조각을 친구 4명과 나누면 한 명당 3조각씩 받게 되는 거죠.

🎯 왜 숫자 계산을 배워야 할까요?

그렇다면 자바스크립트에서 계산 기호들을 배우는 이유는 무엇일까요?

첫 번째로 실생활 문제 해결에 꼭 필요해요. 용돈 계산, 성적 평균 구하기, 게임 점수 계산 등 우리 주변의 수많은 상황에서 계산이 필요하거든요. 두 번째는 프로그램의 핵심 기능 구성을 위해서예요. 대부분의 프로그램은 어떤 형태로든 숫자 계산을 포함하고 있어요.

세 번째로는 더 복잡한 개념의 기초가 되기 때문이에요. 앞으로 배울 조건문, 반복문, 함수 등에서도 계산 기호들이 계속 사용돼요. 마지막으로 논리적 사고력 향상에 도움이 돼요. 계산 과정을 단계별로 생각하는 습관은 프로그래밍 전반에 매우 유용해요.

⚙️ 기본 사용법 배우기

계산 기호들의 기본 사용법은 매우 쉬워요.

let result1 = 숫자1 + 숫자2;    // 더하기
let result2 = 숫자1 - 숫자2;    // 빼기  
let result3 = 숫자1 * 숫자2;    // 곱하기
let result4 = 숫자1 / 숫자2;    // 나누기

중요한 점은 계산 순서예요. 일반 수학과 마찬가지로 곱하기와 나누기가 더하기와 빼기보다 먼저 계산돼요:

let result = 2 + 3 * 4;         // 곱하기가 먼저: 2 + 12 = 14
let result2 = (2 + 3) * 4;      // 괄호가 먼저: 5 * 4 = 20

🧪 직접 해보면서 배우기

이제 실제 예시를 통해서 계산 기호들의 사용법을 자세히 알아볼게요.

🔹 첫 번째 예시: 네 가지 기본 계산 마스터하기

첫 번째 예시에서는 모든 계산 기호들을 사용해보면서 각각의 특징을 차분히 파악해볼게요.

// 계산에 사용할 기본 숫자들을 상자에 준비해요.
let firstNumber = 15;    // 첫 번째 숫자를 담는 상자
let secondNumber = 4;    // 두 번째 숫자를 담는 상자

// 더하기: 두 숫자를 합쳐서 더 큰 값을 만들어요.
let addResult = firstNumber + secondNumber;  // 15 + 4 = 19를 계산하는 상자
console.log("더하기 결과: " + firstNumber + " + " + secondNumber + " = " + addResult);

// 빼기: 큰 숫자에서 작은 숫자를 빼서 차이를 구해요.
let subtractResult = firstNumber - secondNumber;  // 15 - 4 = 11을 계산하는 상자
console.log("빼기 결과: " + firstNumber + " - " + secondNumber + " = " + subtractResult);

// 곱하기: 한 숫자를 다른 숫자만큼 여러 번 더한 것과 같아요.
let multiplyResult = firstNumber * secondNumber;  // 15 * 4 = 60을 계산하는 상자
console.log("곱하기 결과: " + firstNumber + " * " + secondNumber + " = " + multiplyResult);

// 나누기: 큰 숫자를 작은 숫자로 나누어 몫을 구해요.
let divideResult = firstNumber / secondNumber;  // 15 / 4 = 3.75를 계산하는 상자
console.log("나누기 결과: " + firstNumber + " / " + secondNumber + " = " + divideResult);

이렇게 관련있는 계산들을 차례로 수행하면서 각 계산 기호의 역할을 명확히 이해할 수 있어요. 계산에 사용할 숫자들을 미리 상자에 저장하고, 각 계산의 결과를 새로운 상자에 담아 확인하는 과정을 거쳐요.

🔹 두 번째 예시: 실생활 문제를 계산으로 해결하기

두 번째 예시에서는 일상생활에서 마주치는 실제 상황을 계산 기호들로 해결해볼게요.

// 용돈 관리 상황을 설정해요.
let monthlyAllowance = 20000;     // 한 달 용돈을 담는 상자
let alreadySaved = 8000;          // 이미 저축한 금액을 담는 상자
let thisWeekSpent = 3500;         // 이번 주에 쓴 돈을 담는 상자

// 이번 주 후 남은 용돈을 계산해요.
let remainingAllowance = monthlyAllowance - thisWeekSpent;  // 빼기로 계산하는 상자
console.log("이번 주 후 남은 용돈: " + remainingAllowance + "원");

// 총 저축 금액을 계산해요.
let totalSavings = alreadySaved + (monthlyAllowance - thisWeekSpent);  // 더하기와 빼기를 조합하는 상자
console.log("총 저축 가능 금액: " + totalSavings + "원");

// 친구들과 간식을 나누어 사먹는 상황
let snackTotalPrice = 4800;       // 간식 총 가격을 담는 상자
let friendCount = 6;              // 함께 먹을 친구 수를 담는 상자
let pricePerPerson = snackTotalPrice / friendCount;  // 나누기로 계산하는 상자
console.log("한 명당 지불할 금액: " + pricePerPerson + "원");

// 하루 예산을 계산해봐요.
let daysInMonth = 30;            // 한 달 일수를 담는 상자
let dailyBudget = monthlyAllowance / daysInMonth;  // 나누기로 일일 예산을 계산하는 상자
console.log("하루 권장 예산: " + dailyBudget + "원");

이 예시를 통해 계산 기호들이 실제 생활에서 어떻게 활용되는지 경험할 수 있어요. 용돈 관리부터 친구들과의 비용 분담까지, 다양한 상황에서 각각 적절한 계산 기호를 선택하여 문제를 해결하는 과정을 보여줘요.

🔹 세 번째 예시: 계산 순서와 괄호의 중요성 알아보기

세 번째 예시에서는 복잡한 계산에서 순서가 얼마나 중요한지 알아볼게요.

// 시험 점수 관리 상황을 만들어봐요.
let koreanScore = 85;       // 국어 점수를 담는 상자
let mathScore = 92;         // 수학 점수를 담는 상자
let englishScore = 78;      // 영어 점수를 담는 상자
let bonusPoints = 5;        // 보너스 점수를 담는 상자

// 잘못된 계산: 순서를 고려하지 않은 경우
let wrongCalculation = koreanScore + mathScore + englishScore / 3 + bonusPoints;  // 잘못된 계산을 하는 상자
console.log("잘못된 평균 계산: " + wrongCalculation);
// 결과: 85 + 92 + 26 + 5 = 208 (엉터리!)

// 올바른 계산: 괄호를 사용하여 순서를 명확히 한 경우
let correctAverage = (koreanScore + mathScore + englishScore) / 3 + bonusPoints;  // 올바른 계산을 하는 상자
console.log("올바른 평균 계산: " + correctAverage);
// 결과: (85 + 92 + 78) / 3 + 5 = 255 / 3 + 5 = 85 + 5 = 90

// 복잡한 쇼핑 계산 상황
let itemPrice1 = 2500;        // 첫 번째 상품 가격을 담는 상자
let itemQuantity1 = 3;        // 첫 번째 상품 개수를 담는 상자
let itemPrice2 = 1800;        // 두 번째 상품 가격을 담는 상자
let itemQuantity2 = 2;        // 두 번째 상품 개수를 담는 상자
let discountRate = 0.1;       // 10% 할인율을 담는 상자

// 단계별로 명확하게 계산해요.
let subtotal1 = itemPrice1 * itemQuantity1;        // 첫 번째 상품 소계를 계산하는 상자
let subtotal2 = itemPrice2 * itemQuantity2;        // 두 번째 상품 소계를 계산하는 상자
let totalBeforeDiscount = subtotal1 + subtotal2;   // 할인 전 총액을 계산하는 상자
let discountAmount = totalBeforeDiscount * discountRate;  // 할인 금액을 계산하는 상자
let finalTotal = totalBeforeDiscount - discountAmount;    // 최종 금액을 계산하는 상자

console.log("첫 번째 상품 소계: " + subtotal1 + "원");
console.log("두 번째 상품 소계: " + subtotal2 + "원");
console.log("할인 전 총액: " + totalBeforeDiscount + "원");
console.log("할인 금액: " + discountAmount + "원");
console.log("최종 결제 금액: " + finalTotal + "원");

이 예시는 계산 순서의 중요성을 명확히 보여줘요. 잘못된 계산과 올바른 계산을 비교하여 괄호의 필요성을 강조하고, 복잡한 상황에서는 단계별로 계산하는 것이 실수를 줄이는 방법임을 알려줘요.

🔄 계산 사용하는 순서 정리하기

지금까지 학습한 계산 기호 사용 과정을 정리해볼게요.

첫 번째 단계는 상황 분석하기예요. 해결하려는 문제가 어떤 종류의 계산을 필요로 하는지 파악하는 것이죠. 두 번째는 적절한 계산 기호 선택하기예요. 더하기, 빼기, 곱하기, 나누기 중에서 상황에 맞는 것을 고르는 거예요.

세 번째는 계산 순서 생각하기예요. 복잡한 계산에서는 괄호를 사용하여 의도한 순서대로 계산되도록 해야 해요. 네 번째는 결과 확인하기예요. 계산 결과가 상식적으로 맞는지, 예상한 범위 내에 있는지 검토하는 거죠.

마지막으로 코드 읽기 쉽게 만들기예요. 복잡한 계산은 여러 단계로 나누어 각 단계의 의미를 명확하게 표현하는 것이 좋아요.

🧚‍♀️ 이야기로 다시 배우기: 계산 도우미들의 모험

지금까지 배운 내용을 하나의 이야기로 다시 정리해볼까요?

어느 학교에 네 명의 계산 도우미가 있었어요. 이들은 각자 특별한 능력을 가지고 있어서 학생들의 수학 문제를 해결해주곤 했답니다.

어느 날, 한 학생이 계산 도우미들을 찾아왔어요. "도와주세요! 친구들과 함께 간식을 사먹으려는데 계산이 너무 어려워요!"

더하기 도우미가 먼저 나섰어요. "걱정 마! 내가 모든 간식의 가격을 하나로 모아줄게." 그는 "모아요!" 하며 과자 1500원, 음료수 2000원, 아이스크림 1200원을 모두 합쳐 4700원으로 만들어주었어요.

하지만 학생은 또 고민에 빠졌어요. "저희가 가진 돈은 5000원인데, 간식을 사고 얼마나 남을까요?" 이때 빼기 도우미가 나타났어요. "빼요!" 하며 5000원에서 4700원을 빼자 300원이 남았어요.

"그런데 이 간식을 친구 4명과 똑같이 나누어 먹으려면 어떻게 하죠?" 학생이 또 물었어요. 나누기 도우미가 웃으며 대답했어요. "나눠요!" 하여 간식을 4명에게 똑같이 나누어주었더니, 한 명당 1175원치씩 먹을 수 있다는 것을 알 수 있었어요.

마지막으로 곱하기 도우미가 말했어요. "만약 매주 이런 간식 파티를 한 달 동안 한다면 총 얼마가 들까?" "여러 번!" 하여 4700원을 4번 늘려보니 18800원이 필요하다는 것을 알 수 있었어요.

학생은 네 도우미 덕분에 모든 계산 문제를 해결할 수 있었고, 그날부터 수학이 훨씬 재미있어졌답니다.

🧠 자주 하는 실수와 주의할 점

계산 기호들을 사용할 때 흔히 발생하는 실수들을 알아보고, 어떻게 예방할 수 있는지 살펴볼게요.

❌ 실수 1: 문자와 숫자를 헷갈리기

let number1 = "10";    // 이것은 문자 "10"이에요
let number2 = 5;       // 이것은 숫자 5예요
let result = number1 + number2;  // "10" + 5 = "105" (문자 연결)

console.log(result);   // "105" 출력 (원하던 15가 아니에요!)

이런 실수가 발생하는 이유는 자바스크립트에서 문자와 숫자가 함께 더하기 연산을 만나면 숫자를 문자로 바꿔서 연결하기 때문이에요. 따옴표가 있으면 문자이므로 숫자 계산이 아닌 문자 연결이 일어나요.

❌ 실수 2: 계산 우선순위를 잘못 이해하기

let score1 = 80;      // 첫 번째 점수 상자
let score2 = 90;      // 두 번째 점수 상자
let score3 = 85;      // 세 번째 점수 상자

// 잘못된 평균 계산
let wrongAverage = score1 + score2 + score3 / 3;  // 80 + 90 + 28.33... = 198.33...

// 올바른 평균 계산
let correctAverage = (score1 + score2 + score3) / 3;  // (80 + 90 + 85) / 3 = 85

이 실수는 수학의 계산 우선순서를 잊어버려서 발생해요. 곱셈과 나눗셈이 덧셈과 뺄셈보다 먼저 계산되므로, 의도한 순서로 계산하려면 괄호를 반드시 사용해야 해요.

❌ 실수 3: 0으로 나누기를 시도하기

let totalCandies = 20;   // 총 사탕 개수 상자
let friends = 0;         // 친구가 0명인 상자

let candiesPerFriend = totalCandies / friends;  // 20 / 0 
console.log(candiesPerFriend);  // 특별한 값이 나와요

// 더 이상한 경우
let strangeResult = 0 / 0;  
console.log(strangeResult);  // 이상한 값이 나와요

0으로 나누면 수학적으로 정의되지 않은 결과가 나와요. 자바스크립트는 이런 경우 특별한 값을 반환하는데, 이는 정상적인 숫자가 아니므로 주의해야 해요.

✏️ 직접 해보기 - 쉬운 연습 문제들

이제 배운 내용을 편안한 마음으로 연습해볼게요. 천천히, 자신감을 가지고 해보세요.

Ex1) 네 가지 계산을 모두 사용해서 결과를 보여주자

// 두 개의 숫자를 정하고 모든 계산을 수행해보자.
let a = 24;              // 첫 번째 숫자를 담는 상자
let b = 6;               // 두 번째 숫자를 담는 상자

let addition = a + b;        // 더하기: 24 + 6 = 30
let subtraction = a - b;     // 빼기: 24 - 6 = 18
let multiplication = a * b;  // 곱하기: 24 * 6 = 144
let division = a / b;        // 나누기: 24 / 6 = 4

console.log("더하기: " + a + " + " + b + " = " + addition);       // 결과 보여주기
console.log("빼기: " + a + " - " + b + " = " + subtraction);      // 결과 보여주기
console.log("곱하기: " + a + " * " + b + " = " + multiplication); // 결과 보여주기
console.log("나누기: " + a + " / " + b + " = " + division);       // 결과 보여주기

Ex2) 학급 체험학습비 계산해서 남거나 부족한 돈을 알아보자

// 문제: 학급에서 체험학습비를 걷습니다. 
// 한 명당 15000원씩 내고, 총 28명이 참여합니다.
// 실제 체험학습 비용은 380000원입니다. 얼마가 남거나 부족할까요?

let costPerStudent = 15000;    // 학생 1명당 비용을 담는 상자
let totalStudents = 28;        // 총 학생 수를 담는 상자
let actualCost = 380000;       // 실제 필요한 비용을 담는 상자

// 총 걷힌 금액 계산
let totalCollected = costPerStudent * totalStudents;  // 곱하기로 총 걷힌 금액 계산
console.log("총 걷힌 금액: " + totalCollected + "원");

// 남거나 부족한 금액 계산
let difference = totalCollected - actualCost;  // 빼기로 차액 계산
console.log("차액: " + difference + "원");

// 결과 출력
console.log("총 걷힌 금액: " + totalCollected + "원");
console.log("실제 필요 금액: " + actualCost + "원");
console.log("차액: " + difference + "원");
console.log("걷힌 금액이 실제 비용보다 많은지 적은지 확인해보세요!");

Ex3) 온라인 쇼핑몰에서 할인된 최종 가격을 단계별로 계산해보자

// 문제: 온라인 쇼핑몰에서 물건을 삽니다.
// 상품 A: 12000원 × 2개
// 상품 B: 8500원 × 3개  
// 배송비: 3000원
// 할인 쿠폰: 전체 금액의 15% 할인 (배송비 제외)

let priceA = 12000;         // 상품 A 가격을 담는 상자
let quantityA = 2;          // 상품 A 개수를 담는 상자
let priceB = 8500;          // 상품 B 가격을 담는 상자
let quantityB = 3;          // 상품 B 개수를 담는 상자
let shippingCost = 3000;    // 배송비를 담는 상자
let discountRate = 0.15;    // 할인율을 담는 상자

// 단계별로 계산합니다.
let subtotalA = priceA * quantityA;                     // 상품 A 소계 계산 (곱하기)
let subtotalB = priceB * quantityB;                     // 상품 B 소계 계산 (곱하기)
let itemsTotal = subtotalA + subtotalB;                 // 상품 총액 계산 (더하기)
let discountAmount = itemsTotal * discountRate;        // 할인 금액 계산 (곱하기)
let discountedItemsTotal = itemsTotal - discountAmount; // 할인 후 상품 금액 계산 (빼기)
let finalTotal = discountedItemsTotal + shippingCost;   // 최종 결제 금액 계산 (더하기)

console.log("상품 A 소계: " + subtotalA + "원");                // 중간 결과 보여주기
console.log("상품 B 소계: " + subtotalB + "원");                // 중간 결과 보여주기
console.log("상품 총액: " + itemsTotal + "원");                 // 중간 결과 보여주기
console.log("할인 금액: " + discountAmount + "원");             // 중간 결과 보여주기
console.log("할인 후 상품 금액: " + discountedItemsTotal + "원"); // 중간 결과 보여주기
console.log("최종 결제 금액: " + finalTotal + "원");             // 최종 결과 보여주기

🤔 조금 더 어려운 문제로 실력 확인하기

기본 연습을 마치셨다면, 이제 조금 더 깊이 있는 문제들을 통해서 계산 기호들에 대한 이해를 확인해볼게요.

Q1. 다음 계산식의 결과를 예측하고, 그 이유를 설명해보세요.

let result = 5 + 3 * 2 - 1;

정답: 10

해설: 계산 우선순위에 따라 곱셈이 먼저 계산돼요. 5 + (3 * 2) - 1 = 5 + 6 - 1 = 10이 돼요.

Q2. 다음 중에서 결과가 다른 것을 찾고, 왜 다른지 설명해보세요.

A) 10 + 5
B) "10" + "5"
C) 15
D) 3 * 5

정답: B) "10" + "5"

해설: B는 문자끼리의 연결로 "105"가 되고, 나머지는 모두 숫자 계산으로 15가 돼요. 자바스크립트에서 문자와 문자를 +로 연결하면 문자 연결이 일어나요.

✅ 학습 완료 체크리스트

이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!

학습 내용	이해했나요?
네 가지 기본 계산 기호	☐
계산 우선순위와 괄호 사용법	☐
실생활 계산 문제 해결	☐
자주 하는 실수들	☐
실전 예제 이해	☐

지금까지 자바스크립트의 기본 계산들에 대해 차분히 알아보았어요. 이 네 가지 계산 기호들은 앞으로 배울 모든 내용의 기초가 되므로, 충분히 연습해서 자연스럽게 사용할 수 있도록 해보세요!

🚀 더 체계적인 JavaScript 학습을 원하신다면?

이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.

📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼

📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작

💻 무료로 학습하러 가기

---