📘 2.1.3 숫자 하나씩 늘리고 줄이기 (++, --) - 자동으로 숫자를 세어주는 편리한 도구
여러분과 함께 걸어온 이 길에서, 우리는 이미 더하기와 빼기, 곱하기와 나누기, 그리고 나머지까지 만나보았습니다. 이제 우리 앞에는 조금 더 특별한 도구들이 기다리고 있어요. 오늘 만날 자동 숫자 증감 도구 ++와 --는 마치 우리 일상 속 작은 습관들처럼, 하나씩 차근차근 숫자를 늘리고 줄여주는 도구들입니다.
생각해보세요. 아침에 일어나서 하루를 보내며 우리는 얼마나 많은 것들을 하나씩 세고 있는지를요. 아침 운동을 하며 팔굽혀펴기를 하나씩 세고, 버스를 기다리며 지나가는 차들을 하나씩 세고, 저녁에는 오늘 읽은 책 페이지를 하나씩 세어봅니다. 이런 일상의 리듬처럼, 프로그래밍에서도 숫자를 하나씩 늘리고 줄이는 일은 자연스럽고 필요한 일이에요.
🧠 새로운 단어들과 친해지기
이 작은 기호들 속에 담긴 의미를 차근차근 살펴보겠습니다.
| 단어 | 부드러운 설명 |
|---|---|
| 늘리기 도구 (++) | 상자 안의 숫자를 조용히 1씩 키워주는 친절한 도구입니다. |
| 줄이기 도구 (--) | 상자 안의 숫자를 살며시 1씩 줄여주는 세심한 도구입니다. |
| 앞에서 계산 (++상자) | 상자 앞에 자리한 채로 먼저 계산하고 그 결과를 건네주는 방식입니다. |
| 뒤에서 계산 (상자++) | 상자 뒤에 자리한 채로 원래 값을 먼저 보여주고 조용히 계산하는 방식입니다. |
이 증감 도구들은 마치 "조용한 계수기"와 같습니다. 게임에서 점수가 차곡차곡 쌓이거나, 시간이 하나씩 줄어들거나, 서랍 속 물건들을 하나씩 세어보는 순간들처럼, 우리 삶의 작은 변화들을 담아내는 도구들이에요.
✨ 자동 숫자 증감 도구가 뭔지 알아보기
이 작은 도구들 속에는 단순함이 주는 아름다움이 있습니다. number = number + 1이라고 길게 써야 할 것을 number++로 간결하게 표현할 수 있어요. 이런 간결함은 마치 시 한 줄이 긴 문장보다 때로는 더 깊은 감동을 주는 것처럼, 코드를 아름답게 만들어 줍니다.
늘리기 도구 (++)는 상자 안의 값을 정확히 1만큼 늘려줍니다. 아이가 하루하루 자라듯이, 읽은 책 페이지가 하나씩 늘어나듯이, 조용히 그러나 확실하게 값을 증가시켜 줘요. 줄이기 도구 (--) 는 그와 반대로 값을 1만큼 줄여줍니다. 달력의 날짜가 하나씩 지나가듯이, 남은 시간이 조용히 줄어들듯이 말이에요.
특히 흥미로운 점은 앞에서 계산과 뒤에서 계산의 미묘한 차이입니다. 앞에서 계산(++상자)은 "먼저 계산하고 나서 보여주기"이고, 뒤에서 계산(상자++)은 "먼저 보여주고 나서 계산하기"예요. 이런 섬세한 차이가 때로는 우리가 작성하는 프로그램에서 중요한 역할을 하게 됩니다.
일상의 이야기: 우리 동네 작은 상점
이 증감 도구를 더 친근하게 이해하기 위해 '우리 동네 작은 상점' 이야기를 들어보실래요?
우리 동네에는 정말 작은 상점이 하나 있습니다. 그곳에는 두 명의 친절한 점원이 일하고 있어요. 이들은 각자 다른 특별한 성격을 가지고 있답니다.
밝은 점원 (++)은 항상 "조금씩 더 좋아질 거예요"라고 말하며 숫자들을 1씩 늘려주는 일을 합니다. 손님이 "포인트를 올려주세요"라고 하면 포인트++로 자연스럽게 점수를 올려주죠. 마치 봄날 새싹이 하루하루 자라는 것처럼요.
차분한 점원 (--) 은 "천천히 줄여나가요"라고 말하며 숫자들을 1씩 줄여주는 일을 합니다. 재고를 관리하거나 할인 쿠폰의 사용 횟수를 줄일 때 재고--나 쿠폰--으로 조심스럽게 숫자를 줄여주는 거예요.
더 흥미로운 것은 이 두 점원이 가진 각각의 습관입니다. 성급한 보조 (++상자)는 "먼저 처리하고 결과를 알려드릴게요!"라고 하면서 숫자를 먼저 바꾸고 나서 그 결과를 보여줍니다. 반면 신중한 보조 (상자++)는 "원래 것을 먼저 확인해 드리고 나중에 처리할게요!"라고 하면서 원래 값을 먼저 알려주고 나중에 조용히 숫자를 바꿔놓습니다.
이런 각각의 특성 때문에 손님들은 상황에 따라 적절한 점원을 찾아가게 됩니다.
🎯 왜 자동 증감 도구를 배워야 할까요?
이 작은 도구들이 우리에게 왜 소중할까요? 여러 가지 따뜻한 이유들이 있습니다.
먼저 반복되는 일상에서의 활용입니다. 우리가 매일 반복하는 일들처럼, 프로그래밍에서도 반복 작업에서 i++같은 형태로 횟수를 세는 데 꼭 필요해요. 두 번째는 게임과 놀이에서의 활용입니다. 점수나 레벨, 아이템 개수처럼 우리가 게임에서 경험하는 모든 수치들을 관리할 때 유용하죠.
세 번째는 일상의 카운터입니다. 블로그 방문자 수나 좋아요 수처럼 실시간으로 변하는 숫자들을 관리할 때 간단하게 사용할 수 있어요. 네 번째는 목록 관리입니다. 사진첩에서 다음 사진으로 넘어가거나 음악 플레이리스트에서 다음 곡으로 이동할 때 번호를 조정하는 데 활용됩니다.
마지막으로 아름다운 코드를 만드는 일입니다. number = number + 1 대신 number++라고 쓰면 코드가 훨씬 깔끔해지고 읽기 쉬워져요. 마치 간결한 문장이 때로는 더 깊은 의미를 전달하는 것처럼요.
⚙️ 기본 사용법 배우기
이 도구들의 기본 사용법은 매우 자연스럽습니다.
let number = 5; // 숫자를 담을 상자 만들기
// 늘리기 도구
number++; // number = number + 1; 과 똑같아요
++number; // number = number + 1; 과 똑같아요
// 줄이기 도구
number--; // number = number - 1; 과 똑같아요
--number; // number = number - 1; 과 똑같아요앞에서 계산과 뒤에서 계산의 차이점:
let a = 5; // a라는 상자에 5를 넣기
let b = 5; // b라는 상자에 5를 넣기
let result1 = ++a; // 앞에서 계산: a를 먼저 6으로 증가 → result1 = 6
let result2 = b++; // 뒤에서 계산: result2 = 5 먼저 저장 → b를 6으로 증가🧪 직접 해보면서 배우기
이제 실제 예시를 통해서 증감 도구의 사용법을 차근차근 알아보겠습니다.
🔹 첫 번째 예시: 증감 도구의 기본 동작 체험하기
첫 번째 예시에서는 증감 도구가 어떻게 조용히 작동하는지 단계별로 지켜보겠습니다.
// 기본적인 카운터를 만들어보자.
let counter = 0; // 숫자를 세는 상자를 만들고 0으로 시작하기
console.log("카운터 시작: " + counter); // 0이 출력돼요
// 늘리기 도구로 하나씩 늘려보자.
counter++; // counter = counter + 1과 완전히 똑같아요
console.log("1 증가 후: " + counter); // 1이 출력돼요
counter++; // 또 하나 증가시키기
console.log("2 증가 후: " + counter); // 2가 출력돼요
counter++; // 또 하나 증가시키기
console.log("3 증가 후: " + counter); // 3이 출력돼요
// 이제 줄이기 도구로 하나씩 줄여보자.
counter--; // counter = counter - 1과 완전히 똑같아요
console.log("1 감소 후: " + counter); // 2가 출력돼요
counter--; // 또 하나 감소시키기
console.log("2 감소 후: " + counter); // 1이 출력돼요
counter--; // 또 하나 감소시키기
console.log("3 감소 후: " + counter); // 0이 출력돼요
// 게임 점수로 예를 들어보자.
let gameScore = 50; // 게임 점수를 담는 상자
console.log("\n게임 점수 관리:");
console.log("초기 점수: " + gameScore); // 50점으로 시작
// 몬스터를 5마리 잡아서 점수를 올려보자.
gameScore++; // 첫 번째 몬스터 처치
console.log("몬스터 처치 후 점수: " + gameScore); // 51점
gameScore++; // 두 번째 몬스터 처치
console.log("몬스터 처치 후 점수: " + gameScore); // 52점
gameScore++; // 세 번째 몬스터 처치
console.log("몬스터 처치 후 점수: " + gameScore); // 53점
gameScore++; // 네 번째 몬스터 처치
console.log("몬스터 처치 후 점수: " + gameScore); // 54점
gameScore++; // 다섯 번째 몬스터 처치
console.log("몬스터 처치 후 점수: " + gameScore); // 55점
// 실수로 함정에 빠져서 점수가 줄어들었어요.
gameScore--; // 함정에 빠짐 (점수 1점 감소)
console.log("함정 후 점수: " + gameScore); // 54점
console.log("최종 점수: " + gameScore); // 54점이 과정을 차근차근 따라가보면, 먼저 0부터 시작하는 카운터를 만들고 늘리기 도구로 값을 하나씩 늘려가며 각 단계의 변화를 지켜봅니다. 그다음 줄이기 도구로 값을 하나씩 줄여가며 그 조용한 변화를 관찰하죠. 마지막으로 게임 점수라는 친근한 상황에 적용하여 증감 도구가 우리 일상에 얼마나 가까이 있는지를 경험해봅니다.
🔹 두 번째 예시: 앞에서 계산과 뒤에서 계산의 차이점 명확히 알기
두 번째 예시에서는 앞에서 계산과 뒤에서 계산의 미묘하지만 중요한 차이점을 자세히 살펴보겠습니다.
// 앞에서 계산부터 살펴보자.
console.log("=== 앞에서 계산 (++상자) ===");
let preNumber = 10; // 숫자를 담을 상자에 10을 넣기
console.log("원래 값: " + preNumber); // 10
// 앞에서 계산은 먼저 계산하고 그 결과를 돌려줘요.
let preResult = ++preNumber; // preNumber를 먼저 11로 증가시키고, preResult에 11을 저장하기
console.log("++preNumber의 결과: " + preResult); // 11 (증가된 값)
console.log("상자의 현재 값: " + preNumber); // 11 (증가된 값)
// 뒤에서 계산을 살펴보자.
console.log("\n=== 뒤에서 계산 (상자++) ===");
let postNumber = 10; // 숫자를 담을 상자에 10을 넣기
console.log("원래 값: " + postNumber); // 10
// 뒤에서 계산은 먼저 원래 값을 돌려주고 나중에 계산해요.
let postResult = postNumber++; // postResult에 원래 값인 10을 먼저 저장하고, postNumber를 11로 증가시키기
console.log("postNumber++의 결과: " + postResult); // 10 (원래 값)
console.log("상자의 현재 값: " + postNumber); // 11 (증가된 값)
// 차이점을 더 명확히 비교해보자.
console.log("\n=== 직접 비교 실험 ===");
let a = 20; // a 상자에 20을 넣기
let b = 20; // b 상자에 20을 넣기
console.log("초기 상태 - a: " + a + ", b: " + b); // 20, 20
// 앞에서 계산과 뒤에서 계산을 동시에 사용해보자.
let x = ++a; // a를 먼저 21로 증가시키고, x에 21을 저장하기
let y = b++; // y에 원래 값인 20을 먼저 저장하고, b를 21로 증가시키기
console.log("앞에서 계산 결과 x: " + x); // 21 (증가된 값)
console.log("뒤에서 계산 결과 y: " + y); // 20 (원래 값)
console.log("최종 a: " + a); // 21 (증가됨)
console.log("최종 b: " + b); // 21 (증가됨)
// 줄이기 도구도 같은 원리예요.
console.log("\n=== 줄이기 도구 비교 ===");
let c = 15; // c 상자에 15를 넣기
let d = 15; // d 상자에 15를 넣기
let decreaseResult1 = --c; // c를 먼저 14로 감소시키고, 14를 돌려주기
let decreaseResult2 = d--; // 15를 먼저 돌려주고, d를 14로 감소시키기
console.log("--c의 결과: " + decreaseResult1); // 14 (감소된 값)
console.log("d--의 결과: " + decreaseResult2); // 15 (원래 값)
console.log("최종 c: " + c); // 14
console.log("최종 d: " + d); // 14
// 실제 활용 예시
console.log("\n=== 실제 활용 상황 ===");
let currentPage = 1; // 현재 페이지 번호를 담는 상자
console.log("현재 페이지: " + currentPage);
// 다음 페이지로 이동하면서 이전 페이지 번호를 기록하고 싶다면
let previousPage = currentPage++; // 현재 페이지 번호를 먼저 저장하고 페이지를 증가시키기
console.log("이전 페이지: " + previousPage); // 1 (원래 값)
console.log("현재 페이지: " + currentPage); // 2 (증가된 값)이 예시를 통해 앞에서 계산과 뒤에서 계산의 차이점을 분명히 이해할 수 있습니다. 앞에서 계산은 상자를 먼저 변경하고 새로운 값을 건네주는 반면, 뒤에서 계산은 원래 값을 먼저 건네주고 나중에 상자를 조용히 변경한다는 소중한 차이점을 확인할 수 있어요.
🔹 세 번째 예시: 실생활 상황에서의 다양한 활용
세 번째 예시에서는 실제 우리 주변에서 증감 도구가 어떻게 자연스럽게 활용되는지 경험해보겠습니다.
// 온라인 쇼핑몰 장바구니 관리 시스템
console.log("=== 온라인 쇼핑몰 장바구니 ===");
let cartItems = 0; // 장바구니에 담긴 상품 개수를 세는 상자
console.log("초기 상태: 장바구니에 " + cartItems + "개 상품");
// 상품을 하나씩 추가하는 상황
console.log("\n상품 추가 과정:");
cartItems++; // 첫 번째 상품 추가 (셔츠)
console.log("셔츠 추가 → 장바구니: " + cartItems + "개");
cartItems++; // 두 번째 상품 추가 (바지)
console.log("바지 추가 → 장바구니: " + cartItems + "개");
cartItems++; // 세 번째 상품 추가 (신발)
console.log("신발 추가 → 장바구니: " + cartItems + "개");
// 마음이 바뀌어서 상품을 제거하는 상황
console.log("\n상품 제거 과정:");
cartItems--; // 상품 제거 (신발 제거)
console.log("신발 제거 → 장바구니: " + cartItems + "개");
console.log("최종 장바구니: " + cartItems + "개 상품");
// 게임 캐릭터 레벨 시스템
console.log("\n=== 게임 캐릭터 레벨 시스템 ===");
let playerLevel = 1; // 플레이어 레벨을 담는 상자
let experience = 0; // 경험치를 담는 상자
let monstersDefeated = 0; // 처치한 몬스터 수를 세는 상자
console.log("게임 시작!");
console.log("초기 레벨: " + playerLevel);
console.log("초기 경험치: " + experience);
// 몬스터를 잡으면서 경험치와 레벨이 오르는 과정
console.log("\n모험 과정:");
monstersDefeated++; // 첫 번째 몬스터 처치 (몬스터 카운트 1 증가)
experience = experience + 50; // 경험치 50 획득
console.log("몬스터 " + monstersDefeated + "마리 처치! 경험치: " + experience);
monstersDefeated++; // 두 번째 몬스터 처치 (몬스터 카운트 1 증가)
experience = experience + 50; // 경험치 50 획득
console.log("몬스터 " + monstersDefeated + "마리 처치! 경험치: " + experience);
// 경험치가 100이 되면 레벨업!
console.log("경험치가 100이 되어 레벨업!");
playerLevel++; // 레벨 1 증가
console.log("🎉 레벨업! 현재 레벨: " + playerLevel);
monstersDefeated++; // 세 번째 몬스터 처치 (몬스터 카운트 1 증가)
experience = experience + 50; // 경험치 50 획득
console.log("몬스터 " + monstersDefeated + "마리 처치! 경험치: " + experience);
// 웹사이트 실시간 방문자 카운터
console.log("\n=== 웹사이트 방문자 카운터 ===");
let currentVisitors = 1250; // 현재 동시 접속자 수를 담는 상자
console.log("현재 동시 접속자: " + currentVisitors + "명");
// 방문자가 들어오고 나가는 실시간 상황
console.log("\n실시간 상황:");
currentVisitors++; // 새 방문자 입장 (방문자 수 1 증가)
console.log("새 방문자 입장! 현재: " + currentVisitors + "명");
currentVisitors++; // 또 다른 방문자 입장 (방문자 수 1 증가)
console.log("새 방문자 입장! 현재: " + currentVisitors + "명");
currentVisitors--; // 한 명 퇴장 (방문자 수 1 감소)
console.log("방문자 퇴장! 현재: " + currentVisitors + "명");
currentVisitors++; // 다시 한 명 입장 (방문자 수 1 증가)
console.log("새 방문자 입장! 현재: " + currentVisitors + "명");
console.log("최종 동시 접속자: " + currentVisitors + "명");
// 도서관 대출 관리 시스템
console.log("\n=== 도서관 대출 관리 시스템 ===");
let availableBooks = 500; // 대출 가능한 책 수를 담는 상자
let borrowedBooks = 0; // 대출 중인 책 수를 담는 상자
console.log("도서관 운영 시작!");
console.log("대출 가능한 책: " + availableBooks + "권");
console.log("대출 중인 책: " + borrowedBooks + "권");
// 학생들이 책을 대출하는 상황
console.log("\n대출 과정:");
availableBooks--; // 대출 가능한 책 1권 감소
borrowedBooks++; // 대출 중인 책 1권 증가
console.log("책 1권 대출 → 대출 가능: " + availableBooks + "권, 대출 중: " + borrowedBooks + "권");
availableBooks--; // 또 다른 책 대출 (대출 가능한 책 1권 감소)
borrowedBooks++; // 대출 중인 책 1권 증가
console.log("책 1권 대출 → 대출 가능: " + availableBooks + "권, 대출 중: " + borrowedBooks + "권");
// 학생이 책을 반납하는 상황
availableBooks++; // 대출 가능한 책 1권 증가
borrowedBooks--; // 대출 중인 책 1권 감소
console.log("책 1권 반납 → 대출 가능: " + availableBooks + "권, 대출 중: " + borrowedBooks + "권");
console.log("최종 상태: 대출 가능 " + availableBooks + "권, 대출 중 " + borrowedBooks + "권");이 예시는 증감 도구가 우리 일상에 얼마나 자연스럽게 스며들어 있는지를 보여줍니다. 쇼핑몰 장바구니의 변화, 게임에서의 성장, 웹사이트의 생동감, 도서관의 따뜻한 일상 등 다양한 순간에서 숫자의 증감을 간단하게 처리할 수 있다는 것을 확인할 수 있어요.
🔄 증감 도구 사용하는 순서 정리하기
지금까지 함께 걸어온 증감 도구 사용 과정을 자연스럽게 정리해보겠습니다.
첫 번째 단계는 상황을 이해하기입니다. 어떤 값이 1씩 증가하거나 감소해야 하는 상황인지 차분히 살펴보는 것이죠. 두 번째는 적절한 도구 선택하기입니다. 단순히 값을 변경하기만 하면 되는지, 아니면 변경된 값을 즉시 사용해야 하는지에 따라 앞에서 계산 또는 뒤에서 계산을 선택하는 거예요.
세 번째는 자연스럽게 적용하기입니다. 상자++, ++상자, 상자--, --상자 중에서 상황에 맞는 것을 선택하여 적용해요. 네 번째는 결과를 확인하기입니다. 상자의 값이 예상대로 변경되었는지, 다른 상자에 영향을 주지 않았는지 확인하는 거죠.
마지막으로 더 큰 그림으로 활용하기입니다. 앞으로 만날 다른 내용들과 함께 사용하여 더 아름다운 프로그램을 만들어 나갈 수 있어요.
🧚♀️ 이야기로 다시 배우기: 우리 동네 작은 상점
지금까지 배운 내용을 하나의 따뜻한 이야기로 다시 정리해볼까요?
우리 동네 끝자락에 작은 상점이 하나 있습니다. 이 상점에는 두 명의 친절한 숫자 관리사가 일하고 있어요.
플러스 관리사 (++)는 항상 온화한 미소를 지으며 "조금씩 더 나아져요"라고 말하면서 숫자들을 1씩 늘려주는 일을 합니다. 손님들이 게임 점수를 올려달라고 하면 점수++라는 도구로 자연스럽게 점수를 올려주죠. 마치 정원에서 꽃이 하루하루 자라는 것처럼 조용히, 그러나 확실하게요.
마이너스 관리사 (--) 는 차분하고 세심한 성격으로 "차근차근 줄여나가요"라고 말하며 숫자들을 1씩 줄여주는 일을 합니다. 타이머나 재고 관리가 필요할 때 시간--이나 재고--로 조심스럽게 숫자를 줄여주는 거예요.
어느 날, 두 관리사는 각자 한 명씩 조수를 두기로 했습니다.
플러스 관리사의 부지런한 조수 (++상자)는 "먼저 일을 끝내고 결과를 보여드릴게요!"라고 합니다. 누군가 숫자를 증가시켜 달라고 하면, 바로 그 자리에서 숫자를 증가시키고 새로운 값을 보여주었죠.
플러스 관리사의 신중한 조수 (상자++)는 "원래 값을 먼저 확인해 드리고 나중에 처리할게요!"라고 합니다. 원래 값이 필요한 상황에서는 그 값을 먼저 알려주고, 나중에 조용히 숫자를 증가시켰답니다.
마이너스 관리사의 조수들도 같은 방식으로 일했어요. 부지런한 조수 (--상자)는 먼저 감소시키고 결과를 보여주었고, 신중한 조수 (상자--)는 원래 값을 먼저 보여주고 나중에 감소시켰어요.
동네 사람들은 필요에 따라 적절한 관리사와 조수를 찾아가서 도움을 받았습니다. 기쁜 일이 있어 점수를 올리고 싶을 때는 플러스 관리사를, 시간이 지나가는 것을 표현하고 싶을 때는 마이너스 관리사를 찾았죠. 그리고 즉시 새로운 값이 필요할 때는 부지런한 조수를, 원래 값을 기록해두고 싶을 때는 신중한 조수를 찾았답니다.
이렇게 작은 상점의 숫자 관리사들은 동네 사람들의 일상을 도와주며 모두가 편안하게 지낼 수 있게 도와주었습니다.
🧠 자주 하는 실수와 주의할 점
증감 도구를 사용할 때 흔히 발생하는 실수들을 살펴보고, 어떻게 조심할 수 있는지 알아보겠습니다.
❌ 실수 1: 앞에서 계산과 뒤에서 계산의 차이를 이해하지 못하고 사용하기
let count = 5; // count 상자에 5를 넣기
let result = count++; // 뒤에서 계산 사용
console.log("result: " + result); // 5 (원래 값)
console.log("count: " + count); // 6 (증가된 값)
// 많은 사람이 result도 6일 것이라고 예상하지만 실제로는 5예요.이런 실수가 발생하는 이유는 뒤에서 계산이 "먼저 사용하고 나중에 계산"한다는 특성을 놓치기 때문입니다. 만약 증가된 값을 바로 사용하고 싶다면 앞에서 계산 ++count를 사용해야 해요.
❌ 실수 2: 바뀌지 않는 상자(const)에 증감 도구 사용하려고 하기
const maxScore = 100; // 바뀌지 않는 상자로 선언
maxScore++; // TypeError: Assignment to constant variable.
// 바뀌지 않는 상자는 값을 변경할 수 없으므로 에러가 발생해요.이 실수는 const로 선언된 상자의 특성을 잊어버려서 발생합니다. 증감 도구를 사용하려면 let으로 선언해야 해요.
❌ 실수 3: 숫자가 아닌 값에 증감 도구 사용하기
let message = "hello"; // 문자를 담는 상자
message++; // NaN (숫자가 아니라는 뜻)
console.log(message); // NaN증감 도구는 숫자에서만 자연스럽게 작동합니다. 문자나 다른 종류의 값에 사용하면 NaN이 되어 예상치 못한 결과를 낳을 수 있어요.
💭 연습 문제를 시작하기 전에
이제 우리는 작은 연습 문제들을 통해 오늘 배운 내용을 직접 경험해보려 합니다. 연습 문제란, 마치 피아노를 배운 후 간단한 곡을 연주해보는 것과 같습니다. 처음에는 어색할 수 있지만, 한 음 한 음 정확히 짚어가다 보면 어느새 자연스러운 연주가 됩니다.
우리가 지금까지 함께 걸어온 길을 생각해보세요. 증감 도구의 작동 원리를 이해하고, 앞에서 계산과 뒤에서 계산의 미묘한 차이를 알아보았습니다. 이제 그 지식을 손끝으로 직접 확인해볼 시간입니다.
✏️ 직접 해보기 - 쉬운 연습 문제들
이제 배운 내용을 연습 문제를 통해서 차근차근 익혀보겠습니다.
Ex1) 점수를 관리하는 간단한 게임 점수판을 만들어보자
// 점수를 관리하는 프로그램을 만들어보자.
let score = 0; // 게임 점수를 담는 상자
// 점수를 5번 증가시키기
score++; // 1점 획득 (현재 점수: 1점)
score++; // 1점 획득 (현재 점수: 2점)
score++; // 1점 획득 (현재 점수: 3점)
score++; // 1점 획득 (현재 점수: 4점)
score++; // 1점 획득 (현재 점수: 5점)
console.log("5번 증가 후 점수: " + score); // 5점 출력
// 점수를 2번 감소시키기
score--; // 1점 감소 (현재 점수: 4점)
score--; // 1점 감소 (현재 점수: 3점)
console.log("2번 감소 후 점수: " + score); // 3점 출력
// 최종 점수 확인
console.log("최종 점수: " + score); // 3점 출력Ex2) 로켓 발사 카운트다운 프로그램을 만들어보자
// 카운트다운 프로그램을 만들어보자.
let countdown = 10; // 카운트다운 시작 숫자를 담는 상자
console.log("로켓 발사 카운트다운 시작!");
console.log(countdown); // 10 출력
countdown--; // 카운트 1 감소 (현재: 9)
console.log(countdown); // 9 출력
countdown--; // 카운트 1 감소 (현재: 8)
console.log(countdown); // 8 출력
countdown--; // 카운트 1 감소 (현재: 7)
console.log(countdown); // 7 출력
countdown--; // 카운트 1 감소 (현재: 6)
console.log(countdown); // 6 출력
countdown--; // 카운트 1 감소 (현재: 5)
console.log(countdown); // 5 출력
console.log("🚀 로켓 발사 준비 완료!");Ex3) 앞에서 계산과 뒤에서 계산의 차이를 직접 확인해보자
// 앞에서 계산과 뒤에서 계산의 차이를 직접 확인해보자.
let a = 10; // a 상자에 10을 넣기
let b = 10; // b 상자에 10을 넣기
console.log("초기값 - a: " + a + ", b: " + b); // a: 10, b: 10 출력
// 앞에서 계산과 뒤에서 계산을 각각 사용해보자.
let preResult = ++a; // a를 먼저 11로 증가시키고, preResult에 11을 저장하기
let postResult = b++; // postResult에 원래 값 10을 먼저 저장하고, b를 11로 증가시키기
console.log("앞에서 계산 결과: " + preResult); // 11 출력 (증가된 값)
console.log("뒤에서 계산 결과: " + postResult); // 10 출력 (원래 값)
console.log("최종 a: " + a); // 11 출력 (증가됨)
console.log("최종 b: " + b); // 11 출력 (증가됨)🤔 조금 더 어려운 문제로 실력 확인하기
기본 연습을 마쳤다면, 이제 조금 더 깊이 있는 문제들을 통해서 증감 도구에 대한 이해를 확인해보겠습니다.
Q1. 다음 코드의 실행 결과를 예측해보세요.
let x = 5; // x 상자에 5를 넣기
let y = x++; // y에 x의 원래 값을 저장하고, x를 1 증가시키기
console.log("x: " + x);
console.log("y: " + y);정답: x: 6, y: 5
해설: x++는 뒤에서 계산이므로 y에는 원래 값인 5가 저장되고, x는 나중에 6으로 증가합니다.
Q2. 다음 중 문법 오류가 발생하는 코드는 무엇인가요?
A) let count = 5; count++;
B) const num = 10; num++;
C) let score = 0; ++score;
D) let level = 1; level--;
정답: B) const num = 10; num++;
해설: const로 선언한 상자는 값을 변경할 수 없으므로 증감 도구를 사용할 수 없습니다.
지금까지 증감 도구의 모든 특성과 활용법을 차근차근 알아보았습니다. 이 작은 ++와 -- 기호가 프로그래밍에서 얼마나 자주 사용되는지, 그리고 얼마나 유용한지 이제 느끼실 수 있을 거예요. 앞으로 더 복잡한 프로그램을 만들 때 이 증감 도구들과 자주 만나게 될 텐데, 오늘 배운 내용을 따뜻하게 기억해두시기 바랍니다.
✅ 학습 완료 체크리스트
이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!
| 학습 내용 | 이해했나요? |
|---|---|
| 2.1.3의 기본 개념 | ✅ |
| 기본 사용법과 문법 | ✅ |
| 주요 특징과 차이점 | ✅ |
| 자주 하는 실수들 | ✅ |
| 실전 예제 이해 | ✅ |
🎯 추가 연습 문제들
조금 더 연습하고 싶은 분들을 위한 추가 문제들입니다!
추가 문제 1. 기본 증감 연산자를 사용해보세요.
let score = 0;
// 점수를 5번 증가시키기
score++; // 1
score++; // 2
score++; // 3
score++; // 4
score++; // 5
console.log("5번 증가 후 점수:", score); // 5
// 점수를 2번 감소시키기
score--; // 4
score--; // 3
console.log("2번 감소 후 점수:", score); // 3추가 문제 2. 연속적으로 증감 연산자를 사용해보세요.
let count = 0;
// 5번 증가시키기
count++; // 1번째 증가
console.log("증가 1번째, count: " + count); // 1
count++; // 2번째 증가
console.log("증가 2번째, count: " + count); // 2
count++; // 3번째 증가
console.log("증가 3번째, count: " + count); // 3
count++; // 4번째 증가
console.log("증가 4번째, count: " + count); // 4
count++; // 5번째 증가
console.log("증가 5번째, count: " + count); // 5
console.log("최종 count:", count); // 5
// 다시 감소시키기
console.log("카운트다운:", count); // 5
count--;
console.log("카운트다운:", count); // 4
count--;
console.log("카운트다운:", count); // 3
count--;
console.log("카운트다운:", count); // 2
count--;
console.log("카운트다운:", count); // 1
count--;
console.log("카운트다운 완료! count:", count); // 0추가 문제 3. 전위와 후위 연산자의 차이를 확인해보세요.
let a = 10;
let b = 10;
console.log("초기값 - a:", a + ", b:", b); // 10, 10
let preResult = ++a; // 전위: a를 11로 먼저 증가, preResult = 11
let postResult = b++; // 후위: postResult = 10 먼저 저장, b를 11로 나중에 증가
console.log("전위 결과:", preResult); // 11
console.log("후위 결과:", postResult); // 10
console.log("최종 a:", a); // 11
console.log("최종 b:", b); // 11🔄 단계별 진행 과정 정리
지금까지 배운 내용을 단계별로 다시 한번 정리해보겠습니다.
1단계 과정: 1) 시작값을 가진 변수 준비 → 2) ++/-- 연산자로 1씩 증감 → 3) 각 단계마다 값 확인 → 4) 연속적인 증감 동작 수행 → 5) 최종 결과 확인
2단계 과정: 1) 동일한 초기값을 가진 변수 2개 준비 → 2) 전위 연산자 적용하여 결과 확인 → 3) 후위 연산자 적용하여 결과 확인 → 4) 반환값과 변수값의 차이 관찰 → 5) 감소 연산자에도 동일 원리 적용 확인
3단계 과정: 1) 각 상황별 초기값 설정 → 2) 상황에 따라 증가/감소 연산자 적용 → 3) 각 단계마다 상태 변화 확인 → 4) 특정 상황에서 자동적인 수치 변경 → 5) 실시간 상태 관리 시스템 구현
📂 마무리 정보
오늘 배운 2.1.3 내용이 여러분의 자바스크립트 지식 상자에 잘 저장되었나요? 다음 시간에는 더 재미있는 내용으로 만나요!
기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
'2. 계산하고 비교하기 (연산자) > 2.1 계산기처럼 계산하기 (산술 연산자)' 카테고리의 다른 글
| 2.1.2 나머지 구하기 (%) - 나누고 남은 것을 찾는 특별한 계산 (0) | 2025.06.28 |
|---|---|
| 2.1.1 더하기, 빼기, 곱하기, 나누기 - 숫자 계산의 기본기 (0) | 2025.06.28 |