📘 2.2.1 똑같은지 확인하기 (===, !==) - 정확하게 비교하는 도구
지금까지 함께 걸어온 이 길에서, 우리는 숫자들이 담긴 상자들로 계산하는 방법을 차근차근 배워왔습니다. 이제 우리 앞에 놓인 새로운 단계는 상자들 안의 값들을 서로 비교하는 것입니다.
생각해보세요. 우리 일상에서 얼마나 자주 "이것이 저것과 같은가?"라고 묻고 있는지를요. 아침에 입을 옷을 고르며 어제 입은 것과 같은지 확인하고, 친구의 전화번호가 맞는지 확인하고, 시험 답안이 정답과 일치하는지 살펴보죠. 프로그래밍에서도 이런 비교는 마치 호흡처럼 자연스럽고 필수적인 일입니다.
오늘 만날 똑같은지 확인하는 도구와 다른지 확인하는 도구는 이런 비교 작업을 정확하고 안전하게 수행할 수 있도록 도와줄 친구들입니다. 마치 섬세한 감별사가 두 보석을 꼼꼼히 비교하는 것처럼, 이 도구들은 값과 종류까지 세심하게 살펴보며 정확한 판단을 내려줍니다.
🧠 새로운 단어들과 친해지기
비교의 세계로 들어가며 만날 새로운 단어들을 부드럽게 익혀보겠습니다.
| 단어 | 따뜻한 설명 |
|---|---|
| 비교 도구들 | 두 값을 정중하게 비교해서 맞다 또는 틀리다를 알려주는 친절한 기호들입니다. |
| 똑같은지 확인 도구 (===) | 값과 종류가 모두 완벽하게 같은지 확인하는 신중한 비교 도구입니다. |
| 다른지 확인 도구 (!==) | 값이나 종류가 하나라도 다른지 확인하는 섬세한 비교 도구입니다. |
| 참/거짓 값 | 맞다(true) 또는 틀리다(false)만을 값으로 가질 수 있는 소중한 정보입니다. |
이 비교 도구들은 마치 "정확한 판별사"와 같습니다. 그들이 내리는 결과는 언제나 true(맞습니다) 또는 false(틀립니다)로만 나타나며, 이 간결함 속에 깊은 신뢰가 담겨 있어요.
✨ 똑같은지 확인하는 도구가 뭔지 알아보기
똑같은지 확인하는 도구 ===와 다른지 확인하는 도구 !==는 자바스크립트에서 가장 신중하고 정확한 비교를 수행하는 도구들입니다. 이들의 가장 소중한 특징은 값뿐만 아니라 정보의 종류까지 함께 비교한다는 점이에요.
똑같은지 확인하는 도구 (===) 는 두 값이 완벽하게 동일할 때만 true(맞습니다)를 건네줍니다. 여기서 "완벽하게 동일"하다는 것은 값도 같고 종류도 같다는 의미예요. 예를 들어, 숫자 5와 문자 "5"는 표면상으로는 같아 보이지만 종류가 다르므로 === 도구에서는 false(틀립니다)가 됩니다.
다른지 확인하는 도구 (!==) 는 똑같은지 확인하는 도구의 다정한 반대편입니다. 값이나 종류가 하나라도 다르면 true(맞습니다)를 건네주고, 완벽하게 같을 때만 false(틀립니다)를 건네줍니다. 이런 신중한 비교 방식은 예상치 못한 실수를 방지하고 코드의 안정성을 크게 높여줍니다.
일상의 이야기: 우리 동네 작은 도서관
이 비교 도구를 더 친근하게 이해하기 위해 '우리 동네 작은 도서관' 이야기를 들어보실래요?
우리 동네에는 정말 작은 도서관이 하나 있습니다. 그곳에는 두 명의 세심한 사서가 있어요. 이들은 책을 정리하고 관리하는 일에서 특별한 재능을 가지고 있답니다.
정확함 사서 (===) 는 "완벽한 일치"를 추구하는 분입니다. 누군가 "이 두 책이 똑같은 책인가요?"라고 물으면, 그는 돋보기를 꺼내어 매우 꼼꼼하게 조사합니다. 겉표지만 비슷해서는 만족하지 않아요. 내용도 확인하고, 출판사도 확인하고, 심지어 종류까지 확인합니다.
어느 날, 한 어린이가 숫자 5가 적힌 수학 교재와 문자 "5"가 적힌 국어 교재를 가져왔어요. "이 둘이 같은 책인가요?"라고 물었죠. 정확함 사서는 신중하게 살펴본 후 말했습니다. "겉보기에는 둘 다 5라고 되어 있지만, 하나는 숫자로 분류된 수학 교재이고 다른 하나는 문자로 분류된 국어 교재입니다. 분류가 다르므로 이들은 다른 책입니다." 그리고 false(틀립니다)라는 정중한 답변을 드렸어요.
차이점 사서 (!==) 는 "서로 다른 점 찾기"에 특별한 감각을 가진 분입니다. 그는 두 책에서 조금이라도 다른 점이 있으면 "이 둘은 서로 다릅니다"라고 말해요. 하지만 정말로 완벽하게 같은 책들을 보면 "이것들은 정말 같은 책이네요"라고 온화하게 인정하죠.
이 두 사서 덕분에 도서관에서는 정확한 판단을 내릴 수 있게 되었습니다. 대출할 책이 정확한 책인지, 반납된 책이 맞는 책인지, 찾는 책이 원하는 그 책인지 등을 확실하게 알 수 있게 되었답니다.
🎯 왜 똑같은지 확인하는 도구를 배워야 할까요?
이 비교 도구들이 우리에게 왜 소중할까요? 여러 따뜻한 이유들이 있습니다.
첫 번째는 정확한 비교입니다. 앞으로 배울 조건문에서 특정 조건이 맞는지 확인할 때, 이 도구를 사용하면 예상한 대로 정확하게 동작합니다. 두 번째는 안전한 검사입니다. 사용자가 입력한 값이 우리가 기대한 값과 완벽히 일치하는지 확인할 때 꼭 필요해요.
세 번째는 게임에서의 정확한 판정입니다. 플레이어의 점수가 목표 점수와 정확히 같은지, 또는 특정 조건을 만족했는지 판별할 때 사용됩니다. 네 번째는 입력값 검사입니다. 사용자가 입력한 값이 예상한 형태와 내용으로 올바르게 들어왔는지 검증할 때 활용해요.
마지막으로 안전한 비교입니다. 자바스크립트는 유연한 언어이지만, 때로는 정확한 종류 확인이 필요할 때가 있어요. 이 도구는 이런 상황에서 신뢰할 수 있는 비교를 보장해줍니다.
⚙️ 기본 사용법 배우기
이 도구들의 기본 사용법은 매우 자연스럽습니다.
// 기본 비교 작업
let result1 = 값1 === 값2; // 똑같으면 true, 다르면 false
let result2 = 값1 !== 값2; // 다르면 true, 똑같으면 false자주 사용하는 패턴들:
// 문자열 비교
let nameCheck = name === "홍길동"; // 이름이 홍길동인지 확인
// 숫자 비교
let ageCheck = age === 18; // 나이가 정확히 18세인지 확인
// 참/거짓 비교
let studentCheck = isStudent === true; // 학생인지 확인🧪 직접 해보면서 배우기
이제 실제 예시를 통해서 비교 도구의 사용법을 차근차근 알아보겠습니다.
🔹 첫 번째 예시: 똑같은지 확인하는 도구의 기본 동작 이해하기
첫 번째 예시에서는 다양한 상황에서 이 도구가 어떻게 조용히 동작하는지 체계적으로 관찰해보겠습니다.
// 같은 종류, 같은 값을 가진 경우를 비교해보자.
console.log("=== 같은 종류, 같은 값 비교 ===");
let number1 = 10; // 숫자 10을 담는 상자
let number2 = 10; // 숫자 10을 담는 상자
let numbersEqual = number1 === number2; // 두 숫자를 비교하는 상자
console.log("숫자 10과 숫자 10이 똑같나요? " + numbersEqual); // true
let text1 = "안녕하세요"; // 인사말을 담는 상자
let text2 = "안녕하세요"; // 같은 인사말을 담는 상자
let textsEqual = text1 === text2; // 두 문자를 비교하는 상자
console.log("같은 문자열끼리 똑같나요? " + textsEqual); // true
// 같은 종류이지만 다른 값을 가진 경우
console.log("\n=== 같은 종류, 다른 값 비교 ===");
let color1 = "빨강"; // 첫 번째 색깔을 담는 상자
let color2 = "파랑"; // 두 번째 색깔을 담는 상자
let colorsEqual = color1 === color2; // 두 색깔을 비교하는 상자
console.log("빨강과 파랑이 똑같나요? " + colorsEqual); // false
let colorsDifferent = color1 !== color2; // 두 색깔이 다른지 확인하는 상자
console.log("빨강과 파랑이 다른가요? " + colorsDifferent); // true
// 가장 중요한 경우: 종류가 다른 비교
console.log("\n=== 종류가 다른 값 비교 (중요!) ===");
let numberFive = 5; // 숫자 5를 담는 상자
let stringFive = "5"; // 문자 "5"를 담는 상자
let mixedEqual = numberFive === stringFive; // 서로 다른 종류의 5를 비교하는 상자
console.log("숫자 5와 문자 '5'가 똑같나요? " + mixedEqual); // false (종류가 달라요!)
let mixedDifferent = numberFive !== stringFive; // 서로 다른 종류인지 확인하는 상자
console.log("숫자 5와 문자 '5'가 다른가요? " + mixedDifferent); // true (종류가 달라요!)
// 참/거짓 값들의 비교
console.log("\n=== 참/거짓 값 비교 ===");
let isTrue = true; // 참을 담는 상자
let isFalse = false; // 거짓을 담는 상자
let booleanEqual = isTrue === isFalse; // 참과 거짓을 비교하는 상자
console.log("참(true)과 거짓(false)이 똑같나요? " + booleanEqual); // false
let sameBoolean = isTrue === true; // 참과 참을 비교하는 상자
console.log("참(true)과 참(true)이 똑같나요? " + sameBoolean); // true
// 특별한 값들의 비교
console.log("\n=== 특별한 값들 비교 ===");
let undefinedValue = undefined; // 정의되지 않은 값을 담는 상자
let nullValue = null; // 빈 값을 담는 상자
let specialEqual = undefinedValue === nullValue; // 특별한 값들을 비교하는 상자
console.log("undefined와 null이 똑같나요? " + specialEqual); // false (다른 종류!)
let zeroNumber = 0; // 숫자 0을 담는 상자
let emptyString = ""; // 빈 문자열을 담는 상자
let zeroStringEqual = zeroNumber === emptyString; // 0과 빈 문자열을 비교하는 상자
console.log("숫자 0과 빈 문자열이 똑같나요? " + zeroStringEqual); // false (다른 종류!)이 과정을 차근차근 따라가보면, 먼저 같은 종류와 같은 값을 가진 상자들을 비교하여 true가 나오는 것을 확인합니다. 그다음 같은 종류이지만 다른 값을 가진 경우를 비교하여 false가 나오는 것을 관찰하죠. 가장 중요한 부분은 종류가 다른 값들의 비교인데, 이때 겉보기에는 같아 보이지만 실제로는 다르다고 판정되는 검사관의 신중함을 경험할 수 있어요.
🔹 두 번째 예시: 실생활 상황에서의 비교 활용
두 번째 예시에서는 비교 도구를 실제 상황에서 어떻게 자연스럽게 활용하는지 알아보겠습니다.
// 간단한 정보 확인 시스템을 만들어보자.
console.log("=== 정보 확인 시스템 ===");
let correctUsername = "student123"; // 정확한 사용자명을 담는 상자
let correctPassword = "mypassword"; // 정확한 비밀번호를 담는 상자
// 사용자가 입력한 정보 (실제로는 입력창에서 받아옴)
let inputUsername = "student123"; // 사용자가 입력한 이름을 담는 상자
let inputPassword = "mypassword"; // 사용자가 입력한 비밀번호를 담는 상자
// 사용자명 확인
let usernameCorrect = inputUsername === correctUsername; // 입력한 이름이 정확한 이름과 똑같은지 확인
console.log("사용자명이 올바른가요? " + usernameCorrect);
// 비밀번호 확인
let passwordCorrect = inputPassword === correctPassword; // 입력한 비밀번호가 정확한 비밀번호와 똑같은지 확인
console.log("비밀번호가 올바른가요? " + passwordCorrect);
// 게임 점수 시스템
console.log("\n=== 게임 점수 시스템 ===");
let targetScore = 1000; // 목표 점수를 담는 상자
let playerScore = 1000; // 현재 플레이어 점수를 담는 상자
console.log("목표 점수: " + targetScore);
console.log("현재 점수: " + playerScore);
// 목표 점수 달성 여부 확인
let goalAchieved = playerScore === targetScore; // 현재 점수가 목표 점수와 정확히 같은지 확인
console.log("목표 점수를 달성했나요? " + goalAchieved);
let stillNeed = playerScore !== targetScore; // 목표 점수와 다른지 확인
console.log("아직 더 필요한가요? " + stillNeed);
// 퀴즈 시스템
console.log("\n=== 퀴즈 시스템 ===");
let correctAnswer = "서울"; // 정답을 담는 상자
let userAnswer = "서울"; // 사용자 답안을 담는 상자
console.log("문제: 대한민국의 수도는?");
console.log("정답: " + correctAnswer);
console.log("당신의 답: " + userAnswer);
let answerCorrect = userAnswer === correctAnswer; // 사용자 답이 정답과 똑같은지 확인
console.log("정답을 맞췄나요? " + answerCorrect);
let answerWrong = userAnswer !== correctAnswer; // 사용자 답이 정답과 다른지 확인
console.log("답이 틀렸나요? " + answerWrong);
// 나이 확인 시스템
console.log("\n=== 나이 확인 시스템 ===");
let userAge = 18; // 사용자 나이를 담는 상자
let adultAge = 18; // 성인 기준 나이를 담는 상자
let seniorAge = 65; // 경로우대 기준 나이를 담는 상자
console.log("사용자 나이: " + userAge + "세");
let isExactlyAdult = userAge === adultAge; // 사용자 나이가 성인 기준과 정확히 같은지 확인
console.log("정확히 성인이 되었나요? " + isExactlyAdult);
let isExactlySenior = userAge === seniorAge; // 사용자 나이가 경로우대 기준과 정확히 같은지 확인
console.log("정확히 경로우대 대상인가요? " + isExactlySenior);
let isNotAdult = userAge !== adultAge; // 성인 기준과 다른지 확인
console.log("성인 기준과 다른가요? " + isNotAdult);
// 물건 재고 확인
console.log("\n=== 물건 재고 확인 ===");
let requiredStock = 50; // 필요한 재고량을 담는 상자
let currentStock = 50; // 현재 재고량을 담는 상자
console.log("필요한 재고: " + requiredStock + "개");
console.log("현재 재고: " + currentStock + "개");
let stockPerfect = currentStock === requiredStock; // 현재 재고가 필요한 재고와 정확히 같은지 확인
console.log("재고가 정확히 맞나요? " + stockPerfect);
let stockDifferent = currentStock !== requiredStock; // 현재 재고가 필요한 재고와 다른지 확인
console.log("재고량이 다른가요? " + stockDifferent);이 예시를 통해 비교 도구가 실제 상황에서 얼마나 중요한 역할을 하는지 알 수 있습니다. 정보 검증, 게임 점수 판정, 퀴즈 채점, 나이 확인, 재고 관리 등 다양한 순간에서 정확한 비교가 필요하며, 이 도구가 이런 비교를 안전하게 수행해준다는 것을 확인할 수 있어요.
🔹 세 번째 예시: 종류 차이의 중요성 이해하기
세 번째 예시에서는 비교 도구를 사용할 때 가장 주의해야 할 종류 차이 문제를 알아보겠습니다.
// 종류가 다른 값들의 비교에서 주의해야 할 점들
console.log("=== 종류 차이의 중요성 ===");
// 숫자와 문자열이 같아 보이지만 다른 경우
let numberAge = 25; // 숫자 나이를 담는 상자
let stringAge = "25"; // 문자 나이를 담는 상자
console.log("숫자 나이: " + numberAge);
console.log("문자 나이: " + stringAge);
let agesEqual = numberAge === stringAge; // 숫자와 문자를 비교
console.log("숫자 25와 문자 '25'가 같나요? " + agesEqual); // false!
let agesDifferent = numberAge !== stringAge; // 숫자와 문자가 다른지 확인
console.log("숫자 25와 문자 '25'가 다른가요? " + agesDifferent); // true!
// 다른 예시: 점수 비교
let scoreNumber = 100; // 숫자 점수를 담는 상자
let scoreString = "100"; // 문자 점수를 담는 상자
console.log("\n점수 비교:");
console.log("숫자 점수: " + scoreNumber);
console.log("문자 점수: " + scoreString);
let scoresEqual = scoreNumber === scoreString; // 숫자와 문자 점수 비교
console.log("숫자 100과 문자 '100'이 같나요? " + scoresEqual); // false!
// 참/거짓과 숫자의 비교
console.log("\n=== 참/거짓과 숫자 비교 ===");
let truthValue = true; // 참 값을 담는 상자
let numberOne = 1; // 숫자 1을 담는 상자
console.log("참(true) 값: " + truthValue);
console.log("숫자 1: " + numberOne);
let truthNumberEqual = truthValue === numberOne; // 참과 숫자 1 비교
console.log("참(true)과 숫자 1이 같나요? " + truthNumberEqual); // false!
let falseValue = false; // 거짓 값을 담는 상자
let numberZero = 0; // 숫자 0을 담는 상자
console.log("거짓(false) 값: " + falseValue);
console.log("숫자 0: " + numberZero);
let falseZeroEqual = falseValue === numberZero; // 거짓과 숫자 0 비교
console.log("거짓(false)과 숫자 0이 같나요? " + falseZeroEqual); // false!
// 빈 값들의 비교
console.log("\n=== 빈 값들의 비교 ===");
let emptyString = ""; // 빈 문자열을 담는 상자
let zeroValue = 0; // 숫자 0을 담는 상자
let nullValue = null; // 빈 값을 담는 상자
let undefinedValue = undefined; // 정의되지 않은 값을 담는 상자
console.log("빈 문자열: '" + emptyString + "'");
console.log("숫자 0: " + zeroValue);
console.log("null 값: " + nullValue);
console.log("undefined 값: " + undefinedValue);
// 각각 비교해보기
let emptyZeroEqual = emptyString === zeroValue; // 빈 문자열과 0 비교
console.log("빈 문자열과 숫자 0이 같나요? " + emptyZeroEqual); // false!
let nullUndefinedEqual = nullValue === undefinedValue; // null과 undefined 비교
console.log("null과 undefined가 같나요? " + nullUndefinedEqual); // false!
// 정확한 비교의 중요성
console.log("\n=== 정확한 비교가 중요한 이유 ===");
let password = "1234"; // 비밀번호를 담는 상자 (문자)
let inputNumber = 1234; // 입력받은 값을 담는 상자 (숫자)
console.log("설정된 비밀번호: " + password + " (문자열)");
console.log("입력받은 값: " + inputNumber + " (숫자)");
let passwordMatch = password === inputNumber; // 문자와 숫자 비교
console.log("비밀번호가 맞나요? " + passwordMatch); // false! (종류가 달라요)
// 이런 상황에서는 종류를 맞춰주어야 해요
console.log("\n올바른 해결 방법은 나중에 배울게요!");
console.log("지금은 같은 종류끼리만 비교한다는 것을 기억해주세요.");이 예시는 비교 도구의 신중함을 보여줍니다. 겉보기에는 같아 보이는 값들도 종류가 다르면 다른 값으로 판정된다는 중요한 특성을 학습할 수 있어요.
🔄 똑같은지 확인하는 도구 사용하는 순서 정리하기
지금까지 함께 걸어온 비교 도구 사용 과정을 자연스럽게 정리해보겠습니다.
첫 번째 단계는 비교 목적 명확하게 하기입니다. 정확히 똑같은지 확인하고 싶은지, 아니면 다른지 확인하고 싶은지를 분명히 해야 해요. 두 번째는 종류 일치성 검토하기입니다. 비교하려는 두 값의 종류가 같은지 확인하고, 다르다면 나중에 배울 변환 방법을 고려해야 해요.
세 번째는 적절한 도구 선택하기입니다. 똑같은지 확인하려면 ===를, 다른지 확인하려면 !==를 사용해요. 네 번째는 결과 저장하기입니다. 비교 결과를 변수에 저장해서 나중에 활용할 수 있도록 해요.
마지막으로 결과 활용하기입니다. true 또는 false 결과를 바탕으로 적절한 후속 작업을 계획하는 거죠.
🧚♀️ 이야기로 다시 배우기: 신중함의 수호자들
지금까지 배운 내용을 하나의 따뜻한 이야기로 다시 정리해볼까요?
우리 동네 끝자락에 신중함 상점이라는 곳이 있습니다. 이 상점에서는 두 명의 특별한 감별사가 모든 비교와 판단을 담당하고 있어요.
동일성 감별사 (===) 는 완벽함을 추구하는 분이었습니다. 그에게 두 개의 물건을 가져다주면, 섬세한 도구를 사용해서 구석구석 조사했어요. "이 둘이 정말로 완벽하게 똑같은가요?"라고 묻는 그는 겉모습만 비슷해서는 만족하지 않았어요.
어느 날, 한 학생이 숫자 5가 새겨진 동전과 문자 "5"가 적힌 카드를 가져왔어요. "이 둘이 똑같은 건가요?"라고 물었죠. 동일성 감별사는 신중하게 조사한 후 말했어요. "겉보기에는 둘 다 5라고 되어 있지만, 하나는 숫자로 분류된 동전이고 다른 하나는 문자로 분류된 카드입니다. 분류가 다르므로 이들은 다른 것입니다." 그리고 false(틀립니다)라는 정중한 판정을 내렸어요.
차이점 감별사 (!==) 는 서로 다른 점을 찾는 전문가였습니다. 그는 "이 둘 사이에 어떤 차이라도 있는가요?"를 찾는 일을 했어요. 완벽하게 똑같은 물건들을 보면 "정말 같네요"라고 인정했지만, 조금이라도 다른 점이 있으면 즉시 "서로 다릅니다"라고 말했어요.
어느 날, 학교에 시험 채점 시스템을 도입하려는 선생님이 찾아왔어요. "학생들이 올바른 답을 썼는지 확인하고 싶습니다." 동일성 감별사가 나섰어요. "걱정 마세요! 학생이 쓴 답과 정확한 답을 비교해서 완벽하게 같을 때만 정답으로 인정해드리겠습니다."
또 다른 날, 게임을 만드는 학생이 찾아왔어요. "플레이어가 목표 점수에 정확히 도달했는지 알고 싶습니다." 이번에도 두 감별사가 힘을 합쳐 정확한 비교를 해주었답니다.
이렇게 신중함 상점 덕분에 동네 사람들은 모든 비교를 정확하고 안전하게 할 수 있게 되었고, 예상치 못한 실수나 오류 없이 편안하게 지낼 수 있었답니다.
🧠 자주 하는 실수와 주의할 점
비교 도구를 사용할 때 흔히 발생하는 실수들을 살펴보고, 어떻게 조심할 수 있는지 알아보겠습니다.
❌ 실수 1: 저장 기호(=)와 비교 기호(===)를 헷갈리기
let age = 15; // age 상자에 15를 넣기
// 잘못된 사용: 저장 기호 사용
let wrongResult = (age = 18); // age에 18을 넣고 그 값을 돌려줘요
// 올바른 사용: 비교 기호 사용
let rightResult = (age === 18); // age가 18과 똑같은지 비교해요
console.log("잘못된 결과: " + wrongResult); // 18 (저장된 값)
console.log("올바른 결과: " + rightResult); // false (비교 결과)
console.log("age의 값: " + age); // 18 (값이 바뀌었어요!)이런 실수가 발생하는 이유는 =와 ===의 역할을 헷갈리기 때문입니다. =는 값을 저장하는 기호이고, ===는 값을 비교하는 기호예요.
❌ 실수 2: 종류가 다른 값을 똑같다고 생각하기
let userInput = "25"; // 사용자가 입력한 나이 (문자)를 담는 상자
let adultAge = 25; // 성인 기준 나이 (숫자)를 담는 상자
// 잘못된 기대: 문자 "25"와 숫자 25가 똑같을 것이라고 생각
let wrongExpectation = userInput === adultAge; // "25" === 25 는 false!
console.log("문자 25와 숫자 25가 같나요? " + wrongExpectation); // false
// 해결책: 같은 종류끼리 비교하기 (나중에 배울 내용)
console.log("지금은 같은 종류끼리만 비교해주세요!");이 실수는 자바스크립트의 종류 시스템을 제대로 이해하지 못해서 발생합니다. 비교 도구는 값뿐만 아니라 종류도 함께 비교하므로, 겉보기에 같아 보여도 종류가 다르면 다른 값으로 판정됩니다.
❌ 실수 3: 비교 결과를 잘못 이해하기
let score1 = 80; // 첫 번째 점수를 담는 상자
let score2 = 90; // 두 번째 점수를 담는 상자
let comparison = score1 === score2; // 두 점수가 같은지 비교
console.log("점수가 같나요? " + comparison); // false
// 잘못된 이해: false가 나왔으니까 에러가 발생했다고 생각
// 올바른 이해: false는 "같지 않다"는 정확한 결과예요!
let differentCheck = score1 !== score2; // 두 점수가 다른지 확인
console.log("점수가 다른가요? " + differentCheck); // true (맞아요, 달라요!)비교 결과로 나오는 true와 false는 에러가 아니라 정확한 답입니다. false가 나왔다고 해서 잘못된 것이 아니라, "다르다"는 올바른 결과를 알려주는 거예요.
💭 연습 문제를 시작하기 전에
이제 우리는 작은 연습 문제들을 통해 오늘 배운 내용을 직접 경험해보려 합니다. 연습 문제란, 마치 정원에서 새로 배운 원예 기법을 직접 꽃에 적용해보는 것과 같습니다. 처음에는 조심스럽고 어색할 수 있지만, 한 번 한 번 정성껏 해보다 보면 어느새 자연스러운 솜씨가 됩니다.
우리가 지금까지 함께 걸어온 길을 생각해보세요. 비교 도구의 작동 원리를 이해하고, 같은 종류끼리 비교하는 것의 중요성을 알아보았습니다. 이제 그 지식을 손끝으로 직접 확인해볼 시간입니다.
✏️ 직접 해보기 - 쉬운 연습 문제들
이제 배운 내용을 연습 문제를 통해서 차근차근 익혀보겠습니다.
Ex1) 여러 가지 값들을 비교해서 결과를 확인해보자
// 여러 가지 값들을 비교해보자.
let name1 = "이영희"; // 첫 번째 이름을 담는 상자
let name2 = "이영희"; // 두 번째 이름을 담는 상자 (같은 이름)
let name3 = "박민수"; // 세 번째 이름을 담는 상자 (다른 이름)
// 같은 이름끼리 비교
let sameNames = name1 === name2; // 같은 이름인지 확인하는 상자
console.log("같은 이름끼리 비교: " + sameNames); // true (똑같아요!)
// 다른 이름끼리 비교
let differentNames = name1 !== name3; // 다른 이름인지 확인하는 상자
console.log("다른 이름끼리 비교: " + differentNames); // true (달라요!)
// 숫자 비교
let score1 = 95; // 첫 번째 점수를 담는 상자
let score2 = 95; // 두 번째 점수를 담는 상자 (같은 점수)
let score3 = 87; // 세 번째 점수를 담는 상자 (다른 점수)
let sameScores = score1 === score2; // 같은 점수인지 확인하는 상자
console.log("같은 점수끼리 비교: " + sameScores); // true (똑같아요!)
let differentScores = score1 !== score3; // 다른 점수인지 확인하는 상자
console.log("다른 점수끼리 비교: " + differentScores); // true (달라요!)Ex2) 정보 확인에서 비교를 활용해보자
// 간단한 정보 확인
let correctPassword = "secret123"; // 정확한 비밀번호를 담는 상자
let inputPassword = "secret123"; // 사용자가 입력한 비밀번호를 담는 상자
let passwordMatch = inputPassword === correctPassword; // 비밀번호가 정확한지 확인하는 상자
console.log("비밀번호가 맞나요? " + passwordMatch);
let passwordWrong = inputPassword !== correctPassword; // 비밀번호가 틀렸는지 확인하는 상자
console.log("비밀번호가 틀렸나요? " + passwordWrong);
// 게임 레벨 확인
let currentLevel = 5; // 현재 레벨을 담는 상자
let targetLevel = 10; // 목표 레벨을 담는 상자
let levelReached = currentLevel === targetLevel; // 목표 레벨에 도달했는지 확인하는 상자
console.log("목표 레벨에 도달했나요? " + levelReached);
let levelNotReached = currentLevel !== targetLevel; // 목표 레벨에 도달하지 못했는지 확인하는 상자
console.log("아직 목표에 도달하지 못했나요? " + levelNotReached);
let levelDifference = targetLevel - currentLevel; // 목표까지 남은 레벨을 계산하는 상자
console.log("목표까지 " + levelDifference + " 레벨 남았습니다.");Ex3) 종류가 다른 값들을 비교해서 차이를 확인해보자
// 종류가 다른 값들을 비교해보자.
let numberValue = 42; // 숫자 42를 담는 상자
let stringValue = "42"; // 문자 "42"를 담는 상자
console.log("숫자 42: " + numberValue);
console.log("문자 '42': " + stringValue);
// 종류가 다른 비교
let isEqual = numberValue === stringValue; // 숫자와 문자가 똑같은지 확인하는 상자
console.log("숫자 42와 문자 '42'가 똑같나요? " + isEqual); // false (종류가 달라요!)
let isDifferent = numberValue !== stringValue; // 숫자와 문자가 다른지 확인하는 상자
console.log("숫자 42와 문자 '42'가 다른가요? " + isDifferent); // true (종류가 달라요!)
// 참/거짓 값 비교
let trueValue = true; // 참 값을 담는 상자
let falseValue = false; // 거짓 값을 담는 상자
let booleanSame = trueValue === true; // 참과 참 비교
console.log("참과 참이 같나요? " + booleanSame); // true
let booleanDifferent = trueValue !== falseValue; // 참과 거짓 비교
console.log("참과 거짓이 다른가요? " + booleanDifferent); // true🤔 조금 더 어려운 문제로 실력 확인하기
기본 연습을 마쳤다면, 이제 조금 더 깊이 있는 문제들을 통해서 비교 도구에 대한 이해를 확인해보겠습니다.
Q1. 다음 코드의 실행 결과를 예측해보세요.
let a = 10; // 숫자 10을 담는 상자
let b = "10"; // 문자 "10"을 담는 상자
let result = a === b;
console.log(result);정답: false
해설: 숫자 10과 문자열 "10"은 값은 같아 보이지만 종류가 다르므로, 비교 도구 ===에서는 false가 됩니다.
Q2. 다음 중 true가 나오는 비교는?
A) 5 === "5"
B) true === 1
C) "hello" === "hello"
D) null === undefined
정답: C) "hello" === "hello"
해설: 같은 종류(문자열)이면서 같은 값("hello")을 가지고 있으므로 true가 됩니다. 나머지는 모두 종류가 다르거나 값이 다르므로 false가 됩니다.
Q3. 변수 두 개가 모두 특정 값과 같은지 확인하려면?
let user1 = "admin"; // 첫 번째 사용자를 담는 상자
let user2 = "admin"; // 두 번째 사용자를 담는 상자
let targetUser = "admin"; // 확인하고 싶은 사용자를 담는 상자
// 두 사용자가 모두 관리자인지 확인하는 방법은?정답: 각각 비교하기
let user1IsAdmin = user1 === targetUser; // true
let user2IsAdmin = user2 === targetUser; // true
console.log("사용자1이 관리자인가요? " + user1IsAdmin);
console.log("사용자2가 관리자인가요? " + user2IsAdmin);해설: 아직 논리 연산자를 배우지 않았으므로, 각각을 개별적으로 비교하는 것이 좋습니다.
지금까지 비교 도구와 차이 확인 도구의 모든 특성과 활용법을 차근차근 알아보았습니다. 이 도구들은 프로그래밍에서 정확한 비교와 안전한 판단을 위해 꼭 필요한 소중한 도구들입니다. 특히 종류까지 함께 비교한다는 특징을 따뜻하게 기억해두시고, 앞으로 더 복잡한 프로그램을 만들 때 적극 활용해보시기 바랍니다.
✅ 학습 완료 체크리스트
이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!
| 학습 내용 | 이해했나요? |
|---|---|
| 2.2.1의 기본 개념 | ✅ |
| 기본 사용법과 문법 | ✅ |
| 주요 특징과 차이점 | ✅ |
| 자주 하는 실수들 | ✅ |
| 실전 예제 이해 | ✅ |
🎯 추가 연습 문제들
조금 더 연습하고 싶은 분들을 위한 추가 문제들입니다!
추가 문제 1. 기본 비교 연산자를 사용해보세요.
let name1 = "김철수";
let name2 = "김철수";
let name3 = "박영희";
// 같은지 확인하기
let isSameName = name1 === name2;
console.log("이름1과 이름2가 같나요?", isSameName); // true
// 다른지 확인하기
let isDifferentName = name1 !== name3;
console.log("이름1과 이름3이 다른가요?", isDifferentName); // true
// 숫자 비교해보기
let score1 = 85;
let score2 = 90;
let scoreEqual = score1 === score2;
console.log("점수가 같나요?", scoreEqual); // false추가 문제 2. 타입이 다른 값들을 비교해보세요.
let numberValue = 100;
let stringValue = "100";
console.log("숫자 100:", numberValue);
console.log("문자 '100':", stringValue);
let isEqual = numberValue === stringValue;
console.log("숫자100과 문자100이 같나요?", isEqual); // false
let isDifferent = numberValue !== stringValue;
console.log("숫자100과 문자100이 다른가요?", isDifferent); // true🔄 단계별 진행 과정 정리
지금까지 배운 내용을 단계별로 다시 한번 정리해보겠습니다.
1단계 과정: 1) 비교할 두 값 준비 → 2) === 또는 !== 연산자로 비교 → 3) true/false 결과를 변수에 저장 → 4) console.log로 결과 확인 → 5) 다양한 타입 조합으로 패턴 학습
2단계 과정: 1) 비교 기준값과 입력값 설정 → 2) === 연산자로 정확한 일치 여부 확인 → 3) !== 연산자로 차이점 확인 → 4) 각 비교 결과를 의미있게 해석 → 5) 실생활 상황에 비교 결과 적용
3단계 과정: 1) 다양한 타입의 값들 준비 → 2) 겉보기에는 같아 보이는 값들을 === 로 비교 → 3) 타입 차이로 인한 false 결과 확인 → 4) 같은 타입끼리만 비교하는 것의 중요성 학습 → 5) 정확한 비교 습관 기르기
📂 마무리 정보
오늘 배운 2.2.1 내용이 여러분의 자바스크립트 지식 상자에 잘 저장되었나요? 다음 시간에는 더 재미있는 내용으로 만나요!
기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
'2. 계산하고 비교하기 (연산자) > 2.2 크기 비교하기 (비교 연산자)' 카테고리의 다른 글
| 2.2.3 `==`와 `===` - 자바스크립트의 쌍둥이 비교 친구들 (0) | 2025.06.29 |
|---|---|
| 2.2.2 크고 작은지 비교하기 (>, <, >=, <=) - 크기와 순서를 판단하는 비교 도구 (0) | 2025.06.28 |