📘 3.1.1 기본 if 사용하기 - 컴퓨터에게 생각하는 법을 가르쳐주자!
따스한 오후 햇살이 창문을 통해 스며드는 이 시간, 지금까지 우리는 컴퓨터의 기억 상자(변수)에 여러 가지 소중한 정보를 넣고 빼는 방법을 배워왔습니다. 이제 한 걸음 더 나아가서, 컴퓨터가 스스로 "생각하고 판단"할 수 있게 만드는 방법을 배워보겠습니다.
여러분도 매일 작은 선택들을 하며 살아가고 계시지요? "오늘 비가 오니까 우산을 가져가야겠어", "숙제를 다 했으니까 조금 쉬어도 괜찮을 것 같아" 이런 식으로 말이에요. 오늘 배울 if라는 도구를 사용하면, 컴퓨터도 이런 식으로 상황을 살펴보고 스스로 결정을 내릴 수 있게 된답니다.
🧠 새로운 단어들과 친해지기
코딩을 배우다 보면 처음 만나는 단어들이 나오는데, 걱정하지 마세요. 우리가 차근차근 풀어서 설명해드릴게요.
| 단어 | 쉬운 설명 |
|---|---|
| if문 | "만약에 ~라면"을 컴퓨터 언어로 말하는 방법이에요. 마치 "만약에 날씨가 좋으면 놀러가자" 할 때처럼요. |
| 조건 | 컴퓨터가 확인해보는 상황이에요. "점수가 100점인가?", "비가 오고 있나?" 같은 질문이에요. |
| 코드 블록 | 중괄호 {} 안에 들어있는 명령어들이에요. 마치 상자 안에 정리된 물건들 같아요. |
| 참/거짓 | 조건을 확인했을 때 맞거나 틀린 결과예요. "맞아!" 또는 "아니야!" 같은 답변이에요. |
if는 영어로 "만약에"라는 뜻이에요. 우리가 "만약에 숙제를 다 하면 TV를 볼 수 있어"라고 말하는 것처럼, 컴퓨터도 if를 사용해서 "만약에 ~라면 ~를 해라"라고 명령할 수 있답니다.
✨ if문이 뭔지 알아보기
여러분, if문은 컴퓨터에게 "만약에 이런 상황이라면, 저런 일을 해라"라고 가르쳐주는 특별한 도구예요. 마치 현명한 친구에게 규칙을 알려주는 것과 같지요.
지금까지 우리가 배운 코드들은 위에서부터 아래로 차례차례 실행되기만 했어요. 하지만 if문을 사용하면 컴퓨터가 상황을 살펴보고 스스로 결정을 내릴 수 있게 돼요. 정말 신기하지 않나요?
컴퓨터는 우리가 주는 조건을 확인해서 "맞아!"(참) 또는 "아니야!"(거짓) 중 하나로 답해요. 그리고 "맞아!"라고 답하면 우리가 준비한 특별한 명령어들을 실행하고, "아니야!"라고 답하면 조용히 넘어가버린답니다.
재미있는 비유: 똑똑한 자동문 이야기
if문을 더 쉽게 이해하기 위해서 '똑똑한 자동문' 이야기를 들려드리겠습니다.
마트에 가면 자동으로 열리는 문이 있지요? 이 문은 정말 똑똑해서 여러 가지를 확인한 다음에 문을 열지 말지 결정해요.
자동문의 생각 과정:
- "어? 누군가 다가오고 있나?" 👀
- "지금이 마트가 열려있는 시간인가?" ⏰
- "문을 열어도 안전한가?" 🛡️
- "사람이 마트 안으로 들어가려는 건가?" 🚶♀️
이 모든 조건이 "맞아!"라면 문이 슈욱 열리고, 하나라도 "아니야!"라면 문이 그대로 닫혀있어요.
if (사람이_다가온다 && 영업시간이다 && 안전하다 && 입장하려고한다) {
문을_열어라(); // 모든 조건이 맞을 때만 실행돼요!
}우리가 만드는 if문도 이 똑똑한 자동문처럼 조건을 확인하고 행동을 결정해요. 정말 현명하죠?
🎯 왜 if문을 배워야 할까요?
여러분이 "왜 if문을 배워야 하지?"라고 궁금해하실 것 같아요. 실제로 우리 주변의 모든 프로그램들이 if문을 사용해서 만들어졌거든요.
첫 번째 이유는 개인 맞춤 서비스를 만들기 위해서예요. 모든 사람에게 똑같은 화면을 보여주는 것이 아니라, 각자에게 맞는 특별한 내용을 보여줄 수 있어요. 예를 들어 어린이에게는 어린이용 게임을, 어른에게는 어른용 내용을 보여주는 것처럼요.
두 번째 이유는 실수를 방지하기 위해서예요. 만약 누군가 나이를 -5세라고 잘못 입력했다면, 컴퓨터가 "어? 이상하네요? 나이는 0보다 커야 하는데?"라고 알아차리고 "다시 입력해주세요"라고 말해줄 수 있어요.
세 번째 이유는 게임이나 앱의 재미있는 기능을 만들기 위해서예요. 게임에서 "몬스터를 잡으면 경험치를 주고", "레벨이 올라가면 새로운 기술을 배우게 하고" 같은 재미있는 규칙들을 모두 if문으로 만들어요.
마지막으로 안전한 프로그램을 만들기 위해서예요. 컴퓨터가 이상한 상황을 미리 발견하고 문제가 생기기 전에 막아줄 수 있거든요.
⚙️ if문 사용법 배우기
if문의 기본 모양은 정말 간단해요. 마치 우리가 말하는 것과 거의 비슷하답니다.
if (확인할조건) {
// 조건이 맞을 때 할 일
}각 부분 설명하기:
if: "만약에"라는 뜻의 특별한 단어(확인할조건): 컴퓨터가 확인해볼 내용 (괄호 안에 써야 해요){}: 조건이 맞을 때 실행할 명령어들을 담는 상자
조건으로 사용할 수 있는 것들:
- 크기 비교:
나이 > 10(나이가 10보다 크니?) - 같은지 확인:
이름 === "철수"(이름이 철수니?) - 여러 조건 확인:
비가온다 && 바람분다(비도 오고 바람도 부니?)
🧪 직접 해보면서 배우기
이제 실제로 if문을 사용해서 컴퓨터와 대화해볼까요?
🔹 Ex1) 나이를 확인해서 "성인이에요!" 메시지를 띄워보자
우리의 첫 번째 도전은 나이를 확인해서 성인인지 알아보는 프로그램을 만드는 것입니다.
// 사용자 정보를 상자에 넣어요
let userName = "김민수"; // 이름 저장하는 상자
let userAge = 16; // 나이 저장하는 상자
console.log("안녕하세요, " + userName + "님!");
console.log(userName + "님의 나이는 " + userAge + "세네요.");
console.log("성인인지 확인해보고 있어요...");
// if문으로 나이 확인하기
if (userAge >= 18) { // 만약 나이가 18세 이상이라면
console.log("🎉 성인이에요!"); // 성인 축하 메시지
console.log("모든 서비스를 이용할 수 있어요!");
}
console.log("확인이 끝났어요!");
// 다른 나이로도 테스트해보기
console.log("\n=== 다른 사람도 확인해볼까요? ===");
let adultName = "이영희"; // 성인 사용자 이름
let adultAge = 25; // 성인 나이
console.log(adultName + "님의 나이: " + adultAge + "세");
if (adultAge >= 18) { // 25 >= 18 이므로 참(true)
console.log("✅ 성인 확인 완료!");
console.log("🛒 온라인 쇼핑도 가능해요!");
}이 예시에서는 if문이 조건을 확인하고, 조건이 맞을 때만 특별한 메시지를 보여줘요. 16세인 민수는 조건에 맞지 않아서 메시지가 안 나오고, 25세인 영희는 조건에 맞아서 메시지가 나온답니다.
🔹 Ex2) 시험 점수를 확인해서 "합격!" 메시지를 보여주자
이번에는 시험 점수를 확인해서 합격인지 알아보는 프로그램을 만들어보겠습니다.
// 시험 응시자 정보 설정
let studentName = "박수빈"; // 학생 이름 상자
let examScore = 78; // 시험 점수 상자
let passingScore = 60; // 합격 점수 기준 상자
console.log("=== 🎓 시험 결과 발표 ===");
console.log("응시자: " + studentName);
console.log("획득 점수: " + examScore + "점");
console.log("합격 기준: " + passingScore + "점 이상");
console.log("결과를 확인하고 있어요...");
// if문으로 합격 여부 확인
if (examScore >= passingScore) { // 점수가 합격선 이상인가?
console.log("🎊 축하해요! 시험에 합격하셨어요!");
console.log("✅ " + passingScore + "점 이상 달성!");
console.log("📜 자격증이 발급될 예정이에요.");
}
console.log("시험 결과 확인이 끝났어요.");
// 경계선 케이스 테스트 (정확히 합격점)
console.log("\n=== 경계선 테스트 ===");
let borderStudent = "김민지"; // 경계선 학생 이름
let borderScore = 60; // 정확히 합격선 점수
console.log(borderStudent + " 학생의 점수: " + borderScore + "점");
if (borderScore >= passingScore) { // 60 >= 60 이므로 참(true)
console.log("✅ 합격! 아슬아슬하지만 합격이에요!");
}
// 불합격 케이스도 확인
console.log("\n=== 불합격 케이스 ===");
let failStudent = "최철수"; // 불합격 학생 이름
let failScore = 45; // 합격선 미달 점수
console.log(failStudent + " 학생의 점수: " + failScore + "점");
if (failScore >= passingScore) { // 45 >= 60 이므로 거짓(false)
console.log("이 메시지는 나오지 않아요!"); // 실행 안됨
}
console.log("다음 기회에 더 좋은 결과 기대해요!");이 예시에서는 점수를 비교해서 합격 여부를 판단해요. 78점인 수빈이와 60점인 민지는 합격 메시지가 나오고, 45점인 철수는 조건에 맞지 않아서 합격 메시지가 나오지 않아요.
🔹 Ex3) 좋아하는 색깔을 확인해서 "취향이 같네요!" 메시지를 띄워보자
마지막으로 문자(글자)를 비교하는 if문을 만들어보겠습니다.
// 사용자와 컴퓨터의 좋아하는 색깔 설정
let userFavoriteColor = "파랑"; // 사용자가 좋아하는 색깔 상자
let computerFavoriteColor = "파랑"; // 컴퓨터가 좋아하는 색깔 상자
console.log("=== 🎨 색깔 취향 비교하기 ===");
console.log("사용자가 좋아하는 색깔: " + userFavoriteColor);
console.log("컴퓨터가 좋아하는 색깔: " + computerFavoriteColor);
console.log("취향이 같은지 확인해보고 있어요...");
// if문으로 색깔 비교하기
if (userFavoriteColor === computerFavoriteColor) { // 두 색깔이 똑같은가?
console.log("🤝 와! 우리 취향이 똑같네요!");
console.log("💙 파랑색 정말 예쁘죠!");
console.log("🌊 바다나 하늘 생각이 나요!");
}
console.log("색깔 비교가 끝났어요!");
// 다른 색깔로도 테스트해보기
console.log("\n=== 다른 색깔 테스트 ===");
let otherUserColor = "빨강"; // 다른 사용자 색깔
let sameComputerColor = "파랑"; // 컴퓨터 색깔은 그대로
console.log("새로운 사용자 색깔: " + otherUserColor);
console.log("컴퓨터 색깔: " + sameComputerColor);
if (otherUserColor === sameComputerColor) { // "빨강" === "파랑" 이므로 거짓(false)
console.log("이 메시지는 나오지 않아요!"); // 실행 안됨
}
console.log("이번엔 취향이 달라요. 그래도 괜찮아요!");
// 대소문자도 확인해보기
console.log("\n=== 대소문자 주의사항 ===");
let upperCaseColor = "BLUE"; // 대문자로 쓴 색깔
let lowerCaseColor = "blue"; // 소문자로 쓴 색깔
console.log("대문자: " + upperCaseColor);
console.log("소문자: " + lowerCaseColor);
if (upperCaseColor === lowerCaseColor) { // "BLUE" === "blue" 이므로 거짓!
console.log("이 메시지는 나오지 않아요!");
}
console.log("⚠️ 컴퓨터는 대문자와 소문자를 다르게 봐요!");이 예시에서는 문자를 비교하는 방법을 배워요. 똑같은 문자일 때만 특별한 메시지가 나오고, 다르면 나오지 않아요. 대소문자도 다르게 인식한다는 점도 알 수 있답니다.
🔄 if문 사용하는 순서 정리하기
지금까지 배운 if문의 사용 과정을 차근차근 정리해보겠습니다.
1단계: 무엇을 확인할지 정하기
- "나이가 몇 살 이상인지", "점수가 얼마 이상인지", "색깔이 같은지" 같은 확인하고 싶은 내용을 먼저 정해요.
2단계: 조건문 만들기
- 정한 내용을 컴퓨터가 이해할 수 있는 방식으로 써요.
>=,===,!==같은 비교 기호를 사용해서 조건을 만들어요.
3단계: 할 일 정하기
- 조건이 맞을 때 컴퓨터가 무엇을 해야 할지
{}중괄호 안에 차례대로 써요. 메시지를 보여주거나, 계산을 하거나, 다른 일들을 시킬 수 있어요.
4단계: 테스트해보기
- 여러 가지 다른 값들로 실험해서 우리가 원하는 대로 동작하는지 확인해봐요. 예상한 것과 다르게 동작하면 조건이나 할 일을 다시 살펴보면 돼요.
🧠 자주 하는 실수와 주의할 점
if문을 사용할 때 자주 실수하는 부분들을 미리 알아두면 더 쉽게 코딩할 수 있어요.
❌ 실수 1: = 와 === 헷갈리기
let userScore = 85;
// 잘못된 방법 (= 사용)
if (userScore = 100) { // 점수를 100으로 바꿔버림!
console.log("만점이에요!"); // 항상 실행됨
}
console.log("현재 점수:", userScore); // 100 (원래 85였는데 바뀜!)
// 올바른 방법 (=== 사용)
userScore = 85; // 다시 원래 점수로 설정
if (userScore === 100) { // 점수가 100인지만 확인
console.log("만점이에요!"); // 실행되지 않음 (85 ≠ 100)
}
console.log("현재 점수:", userScore); // 85 (바뀌지 않음)=는 "값을 넣어라"라는 뜻이고, ===는 "같은지 확인해봐"라는 뜻이에요. 조건 확인할 때는 반드시 ===를 사용해야 해요!
❌ 실수 2: 중괄호 { } 빼먹기
let temperature = 15;
// 위험한 방법 (중괄호 없음)
if (temperature > 20)
console.log("따뜻해요!"); // 조건부로 실행
console.log("놀러가기 좋은 날씨예요!"); // 항상 실행됨!
// 안전한 방법 (중괄호 사용)
if (temperature > 20) {
console.log("따뜻해요!"); // 조건부로 실행
console.log("놀러가기 좋은 날씨예요!"); // 조건부로 실행
}중괄호 {}를 빼먹으면 첫 번째 줄만 조건을 따르고, 두 번째 줄부터는 항상 실행돼서 원하지 않는 결과가 나올 수 있어요.
❌ 실수 3: 문자와 숫자 헷갈리기
let inputAge = "18"; // 문자로 된 18
// 예상과 다른 결과
if (inputAge === 18) { // "18" === 18 이므로 거짓!
console.log("성인이에요!"); // 실행되지 않음
}
// 올바른 방법들
if (inputAge === "18") { // 문자끼리 비교
console.log("성인이에요!");
}
// 또는 숫자로 바꿔서 비교
let ageNumber = Number(inputAge); // 문자를 숫자로 변환
if (ageNumber === 18) { // 숫자끼리 비교
console.log("성인이에요!");
}문자 "18"과 숫자 18은 컴퓨터가 다르게 인식해요. 비교할 때는 같은 종류끼리 비교해야 해요.
✅ 학습 완료 체크리스트
이번 시간에 배운 내용들을 모두 마음에 담았는지 확인해보세요.
| 학습 내용 | 이해했나요? |
|---|---|
| if문의 기본 개념 | ✅ |
| 기본 사용법과 문법 | ✅ |
| 조건 만들기 방법 | ✅ |
| 자주 하는 실수들 | ✅ |
| 실전 예제 이해 | ✅ |
🎯 기본 연습 문제들
저녁이 깊어가는 이 시간, 하루 종일 배운 내용들을 차분히 되새기며 연습해보는 시간을 가져보겠습니다. 마치 일기를 쓰듯 정성스럽게, 하나하나 새겨보세요.
기본 문제 1. 좋아하는 동물이 "강아지"면 "멍멍!" 메시지를 띄워보자
// 여기에 여러분이 좋아하는 동물을 써보세요
let favoriteAnimal = "강아지"; // 좋아하는 동물 저장
console.log("좋아하는 동물: " + favoriteAnimal);
// if문으로 강아지인지 확인하기
if (favoriteAnimal === "강아지") { // 강아지인지 확인
console.log("🐕 멍멍!"); // 강아지일 때 소리
console.log("강아지는 정말 귀여워요!"); // 추가 메시지
}
console.log("동물 확인 끝!");기본 문제 2. 점심시간(12시)이면 "밥 먹을 시간이에요!" 메시지를 보여주자
let currentHour = 12; // 현재 시간 (시)
console.log("현재 시간: " + currentHour + "시");
// if문으로 점심시간인지 확인
if (currentHour === 12) { // 12시인지 확인
console.log("🍽️ 밥 먹을 시간이에요!"); // 점심시간 알림
console.log("맛있게 드세요!"); // 인사말
}
console.log("시간 확인 완료!");기본 문제 3. 숫자가 10보다 크면 "큰 숫자네요!" 메시지를 띄워보자
let myNumber = 15; // 확인할 숫자
console.log("확인할 숫자: " + myNumber);
// if문으로 크기 비교하기
if (myNumber > 10) { // 10보다 큰지 확인
console.log("📈 큰 숫자네요!"); // 큰 숫자일 때 메시지
console.log("10보다 크군요!"); // 설명 추가
}
console.log("숫자 확인 끝!");🔄 2단원 복습하기
3단원을 차근차근 공부했으니, 2단원에서 배운 소중한 내용들을 복습해보는 시간을 가져볼까요?
복습 문제 1. 연산자 기억하기 (2단원 복습)
다음 연산자들의 의미를 설명해보세요.
let a = 10;
let b = 5;
console.log(a + b); // ?
console.log(a === b); // ?
console.log(a >= b); // ?정답:
a + b: 덧셈 연산자, 10 + 5 = 15a === b: 같은지 확인하는 연산자, 10 === 5는 false (거짓)a >= b: 크거나 같은지 확인하는 연산자, 10 >= 5는 true (참)
해설:
2단원에서 배웠듯이 ===는 엄격한 비교로 값과 타입이 모두 같아야 true가 되고, >=는 크거나 같을 때 true가 돼요.
복습 문제 2. 형변환 기억하기 (2단원 복습)
다음 코드의 실행 결과를 예측해보세요.
let userInput = "25"; // 사용자가 입력한 나이 (문자열)
let minimumAge = 18; // 최소 나이 (숫자)
console.log(userInput + minimumAge); // ?
console.log(Number(userInput) + minimumAge); // ?정답:
userInput + minimumAge: "2518" (문자열 연결)Number(userInput) + minimumAge: 43 (숫자 덧셈)
해설:
2단원에서 배웠듯이 + 연산자는 문자열이 포함되면 연결을 하고, 모두 숫자면 덧셈을 해요. Number()로 명시적 형변환을 하면 안전하게 숫자 계산을 할 수 있어요.
지금까지 if문의 기초를 모두 배웠습니다! if문은 컴퓨터가 생각하고 판단할 수 있게 해주는 정말 중요한 도구예요. 처음에는 어려울 수 있지만, 계속 연습하다 보면 자연스럽게 사용할 수 있게 될 거예요. 다음 시간에는 if와 함께 사용하는 else에 대해 배워볼 예정이에요.
📂 마무리 정보
오늘 배운 3.1.1 내용이 여러분의 자바스크립트 지식 상자에 잘 자리잡았나요? 다음 시간에는 더욱 흥미로운 내용으로 만나뵙겠습니다.
기억할 점: 오늘 배운 내용을 꼭 직접 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보시기 바랍니다.
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
'3. 선택하고 결정하기 (조건문) > 3.1 만약에... 라면 (if, else if, else)' 카테고리의 다른 글
| 3.1.3 또 다른 조건 (else if) - 여러 가지 경우를 모두 챙기는 방법 (0) | 2025.06.30 |
|---|---|
| 3.1.2 아니라면 (else) - 모든 상황을 빠뜨리지 않는 방법 (0) | 2025.06.30 |