📘 7.4.3 배열에서 보물찾기 게임하기 - indexOf()와 includes()
어떤 오후, 낡은 상자 속에서 어린 시절의 추억들을 찾고 있었어요. "저 작은 인형이 어디 있을까?", "그때 그 편지는 어디 갔을까?" 하면서 하나하나 들여다보았죠. 때로는 그것들이 정확히 몇 번째에 있는지 알고 싶었고, 때로는 단순히 있는지 없는지만 궁금했어요.
우리가 지금까지 배운 배열에서도 이런 순간들이 있어요. 넣고, 빼고, 복사하고, 편집하는 것도 중요하지만, 때로는 그 안에 우리가 찾고 있는 무언가가 있는지, 그리고 그것이 어디에 있는지 알아야 할 때가 있어요. 오늘 만날 두 명의 탐정 indexOf()와 includes()가 바로 그런 일을 도와주는 친구들이에요.
🧠 새로운 단어들과 친해지기
새로운 개념과 만날 때마다 그 개념을 품고 있는 단어들을 천천히 이해하는 것이 중요해요. 마치 새로운 사람과 만날 때 그 사람의 이름을 기억하려고 노력하는 것처럼요.
| 단어 | 쉬운 설명 |
|---|---|
| indexOf() | "몇 번째에 있나요?"라고 물어보는 탐정이에요. 정확한 위치를 숫자로 알려줘요 |
| includes() | "있나요? 없나요?"라고 물어보는 탐정이에요. 있으면 true, 없으면 false로 대답해줘요 |
| -1 (마이너스 원) | indexOf 탐정이 "못 찾았어요!"라고 말할 때 사용하는 특별한 신호예요 |
| true/false | includes 탐정이 사용하는 간단한 대답이에요. true는 "있어요", false는 "없어요" |
indexOf는 "어떤 것의 위치"를 뜻하고, includes는 "포함하다"를 의미해요. 이름 자체가 그들이 하는 일을 친절하게 설명해주고 있어요.
✨ indexOf()와 includes()가 뭔지 알아보기
이 두 친구는 배열에서 특별한 탐정 역할을 해요. 하지만 각각의 방식으로 우리에게 다른 종류의 답을 주어요.
indexOf() 탐정은 "몇 번째에 있나요?"라는 질문에 전문가예요. 우리가 찾는 것이 배열에서 정확히 몇 번째 자리에 있는지 숫자로 알려줘요. 만약 찾는 것이 없다면 -1이라는 특별한 신호를 보내서 "찾지 못했어요"라고 말해줘요.
includes() 탐정은 "있나요? 없나요?"라는 질문에 전문가예요. 찾는 것이 배열에 있으면 true(네), 없으면 false(아니요)라고 아주 간단하고 명확하게 대답해줘요.
두 탐정 모두 첫 번째로 찾은 것만 기준으로 답해준다는 공통점이 있어요. 같은 것이 여러 개 있어도 맨 처음에 발견된 것만 고려해요. 그리고 정확히 똑같은 것만 찾을 수 있어서, 조금이라도 다르면 "못 찾았어요"라고 답해요.
재미있는 비유: 학교 도서관의 친절한 사서 쌍둥이
이 개념을 더 친근하게 이해하기 위해 하나의 이야기를 들려드릴게요.
우리 학교 도서관에는 인덱스(indexOf) 사서와 인클루드(includes) 사서라는 쌍둥이가 일하고 있어요. 두 사서는 성격이 조금 달라요.
어느 날 여러분이 도서관에 가서 "어린왕자 책이 있나요?"라고 물어보면:
인덱스 사서는 정말 꼼꼼한 성격이에요. "네, 있습니다! 정확히 5번 책장에 있어요!"라고 구체적인 위치를 숫자로 알려줘요. 만약 책이 없다면 "죄송해요, -1이에요. 즉, 우리 도서관에는 없어요!"라고 특별한 암호 같은 답으로 알려줘요.
인클루드 사서는 간단명료한 성격이에요. "네, 있어요!" 또는 "아니요, 없어요!"라고 정말 짧고 확실하게 대답해줘요. 어디에 있는지는 말해주지 않지만, 있는지 없는지만큼은 확실히 알 수 있어요.
두 사서 모두 같은 제목의 책이 여러 권 있어도 처음 발견한 것만 기준으로 답해주어요. 그리고 정확한 제목을 말해야만 찾아주어서, 제목이 조금이라도 다르면 "없어요"라고 답해요.
이것이 바로 indexOf()와 includes()가 하는 일이에요. 상황에 따라 정확한 위치가 필요한지, 아니면 단순히 있는지 없는지만 알면 되는지에 따라 적절한 사서를 선택하면 되어요.
🎯 왜 indexOf()와 includes()를 사용할까요?
이런 탐정들을 사용하는 이유들을 생각해보면, 일상생활의 많은 순간들과 닮아있어요.
첫 번째는 내가 원하는 것이 있는지 확인하기 위해서예요. 좋아하는 음식 목록에서 "피자"가 있는지 확인하거나, 학급 명단에서 특정 친구가 있는지 확인할 때 사용해요. 이런 순간에는 단순히 있는지 없는지만 알면 충분하죠.
두 번째는 조건에 따라 다른 일을 하기 위해서예요. "만약 이 값이 배열에 있다면 이렇게 하고, 없다면 저렇게 해라" 같은 상황에서 정말 유용해요. 프로그램이 상황을 판단하고 적절하게 행동할 수 있게 해주는 거예요.
세 번째는 정확한 위치를 알아서 무언가를 하기 위해서예요. 찾은 값을 다른 값으로 바꾸거나 제거할 때는 정확한 위치를 알아야 해요. 그럴 때 indexOf()가 큰 도움이 되죠.
네 번째는 검색 기능을 만들 때 정말 유용해요. 사용자가 입력한 단어가 목록에 있는지 확인하거나, 자동완성 기능을 만들 때 활용할 수 있어요.
마지막으로 중복을 확인하거나 올바른 값인지 검사하는 작업에서도 꼭 필요한 도구들이에요.
⚙️ 사용법 배우기
이제 우리의 탐정 친구들을 어떻게 사용하는지 천천히 배워보겠어요.
// indexOf() 탐정 사용법
let 위치 = 배열이름.indexOf(찾을값);
let 위치2 = 배열이름.indexOf(찾을값, 시작위치);
// includes() 탐정 사용법
let 있는지 = 배열이름.includes(찾을값);
let 있는지2 = 배열이름.includes(찾을값, 시작위치);
// 조건문에서 사용하는 방법들
if (배열이름.includes(값)) {
// 값이 있을 때 실행할 일
}
if (배열이름.indexOf(값) !== -1) {
// 값이 있을 때 실행할 일 (indexOf 방식)
}중요한 특징들:
- indexOf(): 찾으면 위치 번호, 못 찾으면 -1을 알려줘요
- includes(): 찾으면 true, 못 찾으면 false를 알려줘요
- 시작위치: 원한다면 어디서부터 찾을지 정할 수 있어요
- 첫 번째만: 같은 것이 여러 개 있어도 첫 번째 것만 알려줘요
실제 예시:
let toys = ["로봇", "인형", "자동차", "인형"];
// indexOf 탐정에게 물어보기
let robotPosition = toys.indexOf("로봇"); // 0 (첫 번째)
let dollPosition = toys.indexOf("인형"); // 1 (첫 번째 인형)
let ballPosition = toys.indexOf("공"); // -1 (없어요!)
// includes 탐정에게 물어보기
let hasRobot = toys.includes("로봇"); // true (있어요!)
let hasDoll = toys.includes("인형"); // true (있어요!)
let hasBall = toys.includes("공"); // false (없어요!)🧪 직접 해보면서 배우기
이제 실제 예시들을 통해 우리의 탐정 친구들과 함께하는 모험을 시작해보겠어요. 각각의 예시는 우리가 실제로 마주할 수 있는 상황들이에요.
🔹 첫 번째 예시: 우리 반 친구들 찾기 게임
새 학기가 시작되고, 선생님이 우리 반 친구들 중에서 특정 친구를 찾는 게임을 제안하셨어요. 전체 명단에서 친구들을 찾는 이 게임을 통해 indexOf() 탐정의 능력을 확인해보겠어요.
// 우리 반 친구들 명단이에요
let ourClassmates = ["김민수", "이지은", "박준호", "최서연", "정다영"];
console.log("=== 우리 반 친구들 ===");
console.log("전체 친구들:", ourClassmates);
console.log("총 친구 수:", ourClassmates.length + "명");
console.log("\n=== indexOf 탐정과 함께 위치 찾기 ===");
// indexOf 탐정에게 친구들의 위치를 물어보기
let jieunPosition = ourClassmates.indexOf("이지은");
console.log("이지은이의 번호:", jieunPosition + "번 (0부터 시작)");
let junhoPosition = ourClassmates.indexOf("박준호");
console.log("박준호의 번호:", junhoPosition + "번");
// 우리 반에 없는 친구 찾아보기
let hyunwooPosition = ourClassmates.indexOf("강현우");
console.log("강현우의 번호:", hyunwooPosition); // -1 (없어요!)
console.log("\n=== 결과 해석해보기 ===");
if (jieunPosition !== -1) {
console.log("이지은이는 " + (jieunPosition + 1) + "번째 친구예요!");
} else {
console.log("이지은이는 우리 반 친구가 아니에요.");
}
if (hyunwooPosition !== -1) {
console.log("강현우는 " + (hyunwooPosition + 1) + "번째 친구예요!");
} else {
console.log("강현우는 우리 반에 없어요."); // 이 메시지가 나와요
}
console.log("\n=== 재미있는 정보 ===");
console.log("첫 번째 친구:", ourClassmates[0]);
console.log("마지막 친구:", ourClassmates[ourClassmates.length - 1]);
console.log("인덱스 탐정이 정확한 위치를 알려줬어요!");indexOf 탐정이 얼마나 정확한 위치를 알려주는지, 그리고 없는 친구에 대해서는 -1을 알려주는지 확인할 수 있어요.
🔹 두 번째 예시: 좋아하는 음식 확인하기
오늘 점심 메뉴를 정하기 위해 내가 좋아하는 음식 목록을 확인해보는 상황이에요. includes() 탐정과 함께 어떤 음식이 목록에 있는지 알아보겠어요.
// 내가 좋아하는 음식들 목록이에요
let favoriteFoods = ["피자", "치킨", "햄버거", "파스타", "아이스크림"];
console.log("=== 내가 좋아하는 음식들 ===");
console.log("좋아하는 음식:", favoriteFoods);
console.log("총 개수:", favoriteFoods.length + "가지");
console.log("\n=== includes 탐정과 함께 확인하기 ===");
// includes 탐정에게 음식이 있는지 물어보기
let hasPizza = favoriteFoods.includes("피자");
console.log("피자를 좋아하나요?", hasPizza ? "네!" : "아니요");
let hasSushi = favoriteFoods.includes("초밥");
console.log("초밥을 좋아하나요?", hasSushi ? "네!" : "아니요");
let hasChicken = favoriteFoods.includes("치킨");
console.log("치킨을 좋아하나요?", hasChicken ? "네!" : "아니요");
console.log("\n=== 똑똑한 메뉴 추천 시스템 ===");
// 조건문으로 메뉴 추천 받기
if (favoriteFoods.includes("피자")) {
console.log("🍕 오늘 피자 어때요? 좋아하시는 메뉴예요!");
}
if (favoriteFoods.includes("초밥")) {
console.log("🍣 초밥집에 가볼까요?");
} else {
console.log("🍣 초밥은 별로 안 좋아하시는군요."); // 이 메시지가 나와요
}
if (favoriteFoods.includes("아이스크림")) {
console.log("🍦 식사 후 디저트로 아이스크림은 어떠세요?");
}
console.log("\n=== 친구가 제안한 음식들 평가하기 ===");
let friendSuggestions = ["라면", "피자", "샐러드"];
for (let i = 0; i < friendSuggestions.length; i++) {
let food = friendSuggestions[i];
if (favoriteFoods.includes(food)) {
console.log(food + " - 좋아요! ❤️");
} else {
console.log(food + " - 별로예요. 😅");
}
}
console.log("includes 탐정이 간단하고 명확하게 알려줬어요!");includes 탐정이 얼마나 간단하고 명확하게 있는지 없는지를 알려주는지, 그리고 조건문과 함께 얼마나 유용한지 확인할 수 있어요.
🔹 세 번째 예시: 두 탐정 비교하고 중복값 이해하기
이번에는 같은 배열에서 두 탐정을 모두 사용해보고, 중복값이 있을 때의 동작을 비교해보겠어요. 오늘 한 운동들을 기록했는데, 같은 운동을 여러 번 했다고 상상해보세요.
// 오늘 한 운동들을 기록했는데, 같은 운동을 여러 번 했어요
let todayExercises = ["달리기", "스트레칭", "달리기", "요가", "스트레칭", "수영"];
console.log("=== 오늘의 운동 기록 ===");
console.log("한 운동들:", todayExercises);
console.log("총 운동 횟수:", todayExercises.length + "번");
console.log("\n=== indexOf 탐정의 정확한 위치 찾기 ===");
// indexOf 탐정에게 각 운동의 첫 번째 위치 물어보기
let runningPosition = todayExercises.indexOf("달리기");
console.log("달리기 첫 번째 위치:", runningPosition + "번째");
let stretchingPosition = todayExercises.indexOf("스트레칭");
console.log("스트레칭 첫 번째 위치:", stretchingPosition + "번째");
let swimmingPosition = todayExercises.indexOf("수영");
console.log("수영 위치:", swimmingPosition + "번째");
let cyclingPosition = todayExercises.indexOf("자전거");
console.log("자전거 위치:", cyclingPosition); // -1 (안 했어요!)
console.log("\n=== includes 탐정의 간단한 확인 ===");
// includes 탐정에게 각 운동을 했는지 물어보기
let didRunning = todayExercises.includes("달리기");
console.log("달리기를 했나요?", didRunning ? "네!" : "아니요");
let didStretching = todayExercises.includes("스트레칭");
console.log("스트레칭을 했나요?", didStretching ? "네!" : "아니요");
let didSwimming = todayExercises.includes("수영");
console.log("수영을 했나요?", didSwimming ? "네!" : "아니요");
let didCycling = todayExercises.includes("자전거");
console.log("자전거를 했나요?", didCycling ? "네!" : "아니요");
console.log("\n=== 두 탐정의 차이점 이해하기 ===");
console.log("🏃 달리기 예시:");
console.log(" indexOf 결과:", runningPosition, "← 첫 번째 위치만 알려줘요");
console.log(" includes 결과:", didRunning, "← 있는지 없는지만 알려줘요");
console.log("🚴 자전거 예시 (안 한 운동):");
console.log(" indexOf 결과:", cyclingPosition, "← -1은 '없어요'라는 뜻");
console.log(" includes 결과:", didCycling, "← false는 '없어요'라는 뜻");
console.log("\n=== 언제 어떤 탐정을 부를까? ===");
console.log("📍 정확한 위치가 필요할 때 → indexOf 탐정 호출!");
console.log("🔍 있는지 없는지만 알면 될 때 → includes 탐정 호출!");
console.log("⚠️ 조건문에서는 includes 탐정이 더 안전하고 읽기 쉬워요!");이 예시를 통해 두 탐정의 차이점과 중복값이 있을 때의 동작, 그리고 언제 어떤 탐정을 불러야 하는지 이해할 수 있어요.
🧠 자주 하는 실수와 주의할 점
새로운 도구를 배울 때는 자주 하는 실수들을 미리 알아두는 것이 도움이 되어요. 실수는 배움의 한 부분이지만, 미리 알고 있으면 더 부드럽게 배울 수 있어요.
❌ 실수 1: indexOf() 결과를 조건문에서 잘못 사용하기
가장 흔한 실수 중 하나는 indexOf의 결과를 조건문에서 바로 사용하는 거예요.
let snacks = ["과자", "사탕", "초콜릿"];
console.log("=== 잘못된 사용법과 올바른 사용법 ===");
// ❌ 잘못된 방법: indexOf 결과를 바로 조건으로 사용
if (snacks.indexOf("과자")) { // 0이 나와서 false로 생각해요!
console.log("과자가 있어요!"); // 실행되지 않아요!
} else {
console.log("과자가 없어요!"); // 잘못된 결과가 나와요!
}
console.log("\n=== 올바른 방법들 ===");
// ✅ 방법 1: includes() 사용 (가장 안전!)
if (snacks.includes("과자")) {
console.log("과자가 있어요! (includes 사용)"); // 정확하게 실행돼요
}
// ✅ 방법 2: indexOf()와 -1 비교
if (snacks.indexOf("과자") !== -1) {
console.log("과자가 있어요! (indexOf !== -1 사용)"); // 정확하게 실행돼요
}
// ✅ 방법 3: indexOf()와 0 이상 비교
if (snacks.indexOf("과자") >= 0) {
console.log("과자가 있어요! (indexOf >= 0 사용)"); // 정확하게 실행돼요
}
console.log("\n=== 왜 이런 일이 일어날까요? ===");
console.log("0은 조건문에서 '거짓'으로 여겨져요");
console.log("그래서 첫 번째 자리(0번)에 있는 값을 찾을 때 문제가 생겨요");
console.log("1이나 -1은 '참'으로 여겨져요");
console.log("그래서 includes()를 사용하는 게 더 안전해요!");❌ 실수 2: 중복값이 있을 때 모든 위치를 알려줄 거라고 생각하기
두 번째로 자주 하는 실수는 중복값이 있을 때 모든 위치를 다 알려줄 거라고 생각하는 거예요.
let pets = ["강아지", "고양이", "강아지", "토끼", "강아지"];
console.log("=== 중복값이 있는 배열 ===");
console.log("우리 집 애완동물들:", pets);
console.log("\n=== 첫 번째만 찾아준다는 것을 이해하기 ===");
// ❌ 잘못된 기대: 모든 강아지 위치를 다 알려줄 거라고 생각
let dogPosition = pets.indexOf("강아지");
console.log("강아지 위치:", dogPosition); // 0 (첫 번째만!)
// ✅ 올바른 이해: 첫 번째 위치만 알려줘요
console.log("첫 번째 강아지 위치:", pets.indexOf("강아지")); // 0
console.log("강아지가 있나요?", pets.includes("강아지")); // true
console.log("\n=== 다른 강아지들도 찾고 싶다면? ===");
// 시작 위치를 지정해서 다음 강아지들 찾기
console.log("두 번째 강아지 위치:", pets.indexOf("강아지", 1)); // 2
console.log("세 번째 강아지 위치:", pets.indexOf("강아지", 3)); // 4
console.log("\n=== includes는 하나라도 있으면 true ===");
let colors = ["빨강", "파랑", "빨강", "노랑"];
console.log("색깔들:", colors);
console.log("빨강이 있나요?", colors.includes("빨강")); // true
console.log("빨강의 첫 번째 위치:", colors.indexOf("빨강")); // 0✏️ 직접 해보기 - 쉬운 연습 문제들
이제 배운 내용들을 연습문제를 통해 우리의 마음과 손에 익혀보겠어요. 연습은 이해를 더욱 깊게 만들고, 실제로 사용할 수 있는 능력으로 바꾸어주는 소중한 과정이에요.
Ex1) 무지개 색깔에서 특정 색깔 찾기
// 무지개 색깔 배열에서 indexOf 탐정과 함께 위치 찾기
let rainbowColors = ["빨강", "주황", "노랑", "초록", "파랑", "남색", "보라"];
console.log("🌈 무지개 색깔들:", rainbowColors);
// 파랑의 위치 찾기
let bluePosition = rainbowColors.indexOf("파랑");
console.log("파랑의 위치:", bluePosition + "번째");
// 분홍 찾기 (없는 색깔)
let pinkPosition = rainbowColors.indexOf("분홍");
console.log("분홍의 위치:", pinkPosition); // -1
// 결과 해석하기
if (bluePosition !== -1) {
console.log("파랑은 무지개의 " + (bluePosition + 1) + "번째 색깔이에요!");
} else {
console.log("파랑은 무지개에 없어요.");
}
if (pinkPosition !== -1) {
console.log("분홍은 무지개의 " + (pinkPosition + 1) + "번째 색깔이에요!");
} else {
console.log("분홍은 무지개에 없어요!"); // 이 메시지가 나와요
}Ex2) 좋아하는 과목에서 includes 탐정과 확인하기
// 좋아하는 과목 배열에서 includes 탐정과 함께 확인하기
let favoriteSubjects = ["수학", "과학", "영어", "체육", "미술"];
console.log("📚 좋아하는 과목들:", favoriteSubjects);
// 수학이 있는지 확인
let hasMath = favoriteSubjects.includes("수학");
console.log("수학을 좋아하나요?", hasMath ? "네!" : "아니요");
// 음악이 있는지 확인
let hasMusic = favoriteSubjects.includes("음악");
console.log("음악을 좋아하나요?", hasMusic ? "네!" : "아니요");
// 조건문으로 메시지 출력
if (favoriteSubjects.includes("체육")) {
console.log("🏃 체육을 좋아하시는군요! 운동을 즐기세요!");
}
if (favoriteSubjects.includes("음악")) {
console.log("🎵 음악 시간이 즐거우시겠어요!");
} else {
console.log("🎵 음악은 별로 안 좋아하시는군요."); // 이 메시지가 나와요
}Ex3) 두 탐정 모두 사용해보기
// 행운의 숫자들에서 두 탐정 모두 사용해보기
let luckyNumbers = [7, 13, 21, 7, 42];
console.log("🍀 행운의 숫자들:", luckyNumbers);
// indexOf 탐정으로 첫 번째 7의 위치 찾기
let firstSevenPosition = luckyNumbers.indexOf(7);
console.log("첫 번째 7의 위치:", firstSevenPosition + "번째");
// includes 탐정으로 21이 있는지 확인
let hasTwentyOne = luckyNumbers.includes(21);
console.log("21이 있나요?", hasTwentyOne ? "네!" : "아니요");
// 99가 있는지 두 탐정에게 모두 물어보기
let ninetyNinePosition = luckyNumbers.indexOf(99);
let hasNinetyNine = luckyNumbers.includes(99);
console.log("99의 위치:", ninetyNinePosition); // -1
console.log("99가 있나요?", hasNinetyNine ? "네!" : "아니요"); // 아니요
console.log("\n두 탐정이 서로 다른 방식으로 같은 답을 줬어요!");지금까지 indexOf()와 includes()의 모든 특성과 활용법을 자세히 알아봤어요. 이 두 탐정 친구들은 배열에서 원하는 값을 찾을 때 정말 든든한 도우미들이에요. 앞으로 배열에서 보물찾기가 필요할 때는 이 두 친구들을 자신 있게 불러보세요.
🔄 복습 문제 - 이전에 배운 내용들 기억하나요?
새로운 것을 배우는 것과 이전에 배운 것을 기억하는 것, 이 둘 사이의 균형을 맞추는 것이 진정한 학습이에요. 우리가 함께 걸어온 길을 다시 한번 돌아보면서 기억을 되살려보겠어요.
🔁 5단원 복습: 함수 만들어보기
함수에 대한 기억을 조용히 불러와 보세요. 함수는 우리가 반복해서 사용할 코드를 하나의 이름으로 묶어준 소중한 도구였어요.
// 문제: 배열에서 특정 값을 찾는 함수를 만들어보세요
function findItemInArray(array, item) {
if (array.includes(item)) {
let position = array.indexOf(item);
return "찾았어요! " + (position + 1) + "번째에 있습니다.";
} else {
return "못 찾았어요. 배열에 없습니다.";
}
}
// 사용해보기
let fruits = ["사과", "바나나", "오렌지"];
console.log(findItemInArray(fruits, "바나나")); // 찾았어요! 2번째에 있습니다.
console.log(findItemInArray(fruits, "포도")); // 못 찾았어요. 배열에 없습니다.
// 화살표 함수로도 만들어보세요
const hasItem = (array, item) => array.includes(item);
console.log("사과가 있나요?", hasItem(fruits, "사과")); // true🔁 4단원 복습: for문과 배열 함께 사용하기
반복문도 기억나시나요? 같은 일을 여러 번 해야 할 때 우리를 도와주던 친구였어요.
// 문제: for문으로 배열의 모든 요소를 확인해보세요
let colors = ["빨강", "파랑", "노랑", "초록"];
let findColor = "파랑";
console.log("색깔 목록에서", findColor, "찾기:");
let found = false;
for (let i = 0; i < colors.length; i++) {
console.log((i + 1) + "번째 색깔:", colors[i]);
if (colors[i] === findColor) {
console.log("★ 찾았어요!", findColor, "는", (i + 1), "번째에 있어요!");
found = true;
}
}
if (!found) {
console.log(findColor, "는 목록에 없어요.");
}
// includes나 indexOf를 사용하면 더 쉬워요!
console.log("\n더 쉬운 방법:");
console.log(findColor, "가 있나요?", colors.includes(findColor));✅ 학습 완료 체크리스트
우리가 오늘 함께 걸어온 길을 돌아보며, 각각의 내용을 마음속에 잘 정리했는지 확인해보세요.
| 학습 내용 | 이해했나요? |
|---|---|
| indexOf()의 기본 개념 | ✅ |
| includes()의 기본 개념 | ✅ |
| 두 메서드의 차이점 | ✅ |
| 자주 하는 실수들 | ✅ |
| 실전 예제 이해 | ✅ |
🎯 추가 연습 문제들
더 깊이 있는 이해를 원하는 여러분을 위해 몇 가지 문제를 더 준비했어요. 이 문제들을 통해 오늘 배운 내용을 더욱 단단하게 만들어보세요.
추가 문제 1. 과일 배열에서 특정 과일의 위치를 찾아보세요.
let fruits = ["딸기", "사과", "바나나", "오렌지"];
console.log("과일들:", fruits);
// 바나나의 위치 찾기
let bananaPos = fruits.indexOf("바나나");
console.log("바나나 위치:", bananaPos);
// 포도 찾기 (없는 과일)
let grapePos = fruits.indexOf("포도");
console.log("포도 위치:", grapePos);추가 문제 2. 숫자 배열에서 특정 숫자가 있는지 확인해보세요.
let numbers = [5, 10, 15, 20, 25];
console.log("숫자들:", numbers);
// 15가 있는지 확인
let has15 = numbers.includes(15);
console.log("15가 있나요?", has15);
// 조건문으로 확인
if(numbers.includes(20)) {
console.log("20을 찾았습니다!");
}추가 문제 3. 색깔 배열에서 indexOf와 includes를 모두 사용해보세요.
let colors = ["빨강", "파랑", "노랑"];
console.log("색깔들:", colors);
let blueIndex = colors.indexOf("파랑");
let hasYellow = colors.includes("노랑");
console.log("파랑 위치:", blueIndex);
console.log("노랑이 있나요?", hasYellow);추가 문제 4. 학생 이름 배열에서 특정 학생이 있는지 확인하고 메시지를 출력해보세요.
let students = ["철수", "영희", "민수", "지영"];
function checkStudent(name) {
if(students.includes(name)) {
let position = students.indexOf(name);
console.log(name + "는 " + position + "번째에 있습니다.");
} else {
console.log(name + "는 우리 반에 없습니다.");
}
}
checkStudent("영희");
checkStudent("현우");답: 위 코드가 정답이에요.
설명: includes로 존재 여부를 확인하고, indexOf로 정확한 위치를 찾아서 적절한 메시지를 출력할 수 있어요.
📂 마무리 정보
오늘 우리가 함께 배운 7.4.3의 내용이 여러분의 마음속 지식 정원에 잘 심어졌기를 바라요. indexOf()와 includes() 두 탐정이 여러분의 프로그래밍 여정에서 언제나 든든한 동반자가 되기를 바랍니다.
기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요. 그것이 바로 진정한 학습이 일어나는 방식이니까요.
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
'7. 여러 개 모아두기 (배열) > 7.4 배열 조작하기' 카테고리의 다른 글
| 7.4.4 배열의 모든 친구들을 하나씩 만나보기 - `forEach()` (0) | 2025.07.09 |
|---|---|
| 7.4.2 배열에서 필요한 부분만 복사해서 가져오기 - `slice()` (0) | 2025.07.09 |
| 7.4.1 배열의 어느 곳에서든 자유자재로 편집하기 - `splice()` (0) | 2025.07.09 |