[Javascript&JQuery] indexOf 에 대해 자세히 알아보자. 그 친구 lastIndexOf 까지^^

자바스크립트와 jQuery에서 indexOf, 이 친구는 대체 어디까지 할 수 있을까?

안녕하세요, 여러분! 👩‍🏫
오늘도 신비한 자바스크립트와 jQuery 세상으로 떠나볼까요?
특히 오늘의 주인공은 indexOf!
"아니, 이 친구가 그렇게 대단한가요?" 싶으시죠?
그럼요, 이 친구는 겉으론 심플해 보여도, 속은 아주 알차고 귀여운 친구랍니다.
준비되셨나요? 고고씽~ 🚀

---

indexOf의 기본, 다시 짚고 넘어가기!

indexOf란 간단히 말해서 문자열 안에서 특정 문자열을 찾고, 그 위치를 알려주는 탐정이에요.
"이 문장에 '감자'라는 단어가 어디 있는지 찾아줘!" 라고 명령하면, "여기, 여기 5번째에서 시작해요!" 하고 알려주는 거죠.
예제를 보면서 이해를 더 확실히 해볼게요.

let sentence = "오늘 저녁 메뉴는 감자튀김입니다.";
let word = "감자";
let position = sentence.indexOf(word);

console.log(position); // 8 출력

이 코드는 아주 간단하죠.
"감자"가 8번째에 등장한다는 사실을 바로 알려줘요. (숫자는 0부터 시작!)

---

indexOf의 숨겨진 매력 탐구!

1. 찾을 시작점을 정할 수 있다고요?

헉, 몰랐죠? 사실 indexOf는 두 번째 매개변수를 받을 수 있어요.
이 두 번째 매개변수는 **"몇 번째부터 찾아볼래?"**를 지정하는 거예요.

let sentence = "감자 감자 감자튀김";
let word = "감자";
let firstPosition = sentence.indexOf(word); // 첫 번째 감자
let secondPosition = sentence.indexOf(word, firstPosition + 1); // 두 번째 감자

console.log(firstPosition); // 0
console.log(secondPosition); // 3

이 기능, 은근히 강력하지 않나요?
예를 들어, "두 번째 감자를 찾으라"는 왕의 명령을 받을 때 쓸 수 있겠죠. 👑

---

2. lastIndexOf로 끝에서부터 검색하기

어라, indexOf가 있다면 뒤집어서 **lastIndexOf**도 있겠죠?
이건 뒤에서부터 찾아주는 친구에요.
한 번 예제를 볼게요!

let sentence = "감자 감자 감자튀김";
let position = sentence.lastIndexOf("감자");

console.log(position); // 6

"6이 뭐죠?"
네, 이건 마지막 감자가 6번째에서 시작된다는 뜻이에요.
왠지 끝자락에 숨어 있는 걸 찾는 느낌, 멋지지 않나요? 🌟

---

예시로 배우는 indexOf의 100가지 활용법 (과장 조금만 😆)

예시 1: 이메일 유효성 검사

어느 날, 고객님이 이상한 이메일을 입력했어요.
"asdfgmail.com", 헉, '@'가 없잖아요!
indexOf로 바로 검증해볼까요?

function isValidEmail(email) {
    return email.indexOf("@") !== -1; // -1이 아니면 '@' 있음
}

console.log(isValidEmail("asdf@gmail.com")); // true
console.log(isValidEmail("asdfgmail.com"));  // false

단순하면서도 깔끔하죠? @가 있는지만 확인하면 끝!

---

예시 2: 금칙어 필터링

어린이가 쓰는 웹 서비스에서 금지어를 찾아내야 한다면?
indexOf로 걸러낼 수 있어요!

function hasForbiddenWord(text) {
    let forbiddenWords = ["나쁜말", "욕설", "비속어"];
    for (let word of forbiddenWords) {
        if (text.indexOf(word) !== -1) {
            return true; // 금지어 발견!
        }
    }
    return false; // 안전!
}

console.log(hasForbiddenWord("오늘은 정말 나쁜말 쓰면 안 돼요!")); // true
console.log(hasForbiddenWord("오늘은 정말 행복해요!")); // false

스스로 나쁜말을 잡아내는 작은 AI 시스템, 매력적이지 않나요? 🕵️‍♀️

---

예시 3: 여러 번 등장하는 문자열 세기

아까 살짝 맛보셨죠? 문자열 안에 특정 문자가 몇 번 등장하는지도 셀 수 있어요.
예를 들어 볼까요?

let text = "감자 감자 감자튀김";
let searchWord = "감자";
let count = 0;
let index = text.indexOf(searchWord);

while (index !== -1) {
    count++;
    index = text.indexOf(searchWord, index + 1); // 다음 위치부터 검색
}

console.log(`"${searchWord}"는 총 ${count}번 등장했습니다.`);
// 출력: "감자"는 총 3번 등장했습니다.

여러분, 이건 정말 강력한 도구예요. 😍
어떤 단어가 몇 번 나오는지 아는 것만으로도 통계 자료로 활용할 수 있거든요.

---

jQuery에서 활용하기?

자바스크립트를 알면, jQuery에서도 문제없죠.
jQuery에서는 요소 안의 텍스트를 가져오는 **.text()**와 indexOf를 함께 쓰면 끝이에요.

if ($("#myDiv").text().indexOf("감자") !== -1) {
    console.log("감자가 발견되었습니다!");
} else {
    console.log("감자가 없네요.");
}

웹 페이지에서 특정 단어가 포함되어 있는지 검색할 때 단 2줄로 끝낼 수 있다니!

---

추억 속으로: includes와 indexOf의 대결

"잠깐만요! includes라는 친구도 있잖아요?"
맞아요, ES6 이후 등장한 **includes**도 비슷한 일을 한답니다.
하지만 차이점은 뭘까요?

기능 indexOf includes

반환값	위치 (숫자)	true/false
지원 여부	오래된 브라우저 지원	ES6 이상

결론적으로, **위치를 알고 싶으면 indexOf, 존재 여부만 알면 includes**를 쓰면 돼요.
정답은 없다구요~! 💃

---

마무리하며: indexOf는 기본 중의 기본!

여러분, 오늘은 정말 많은 걸 배웠죠?
문자열 탐정 indexOf, 생각보다 쓸모가 많아요.
그리고 이 친구를 잘 다루면, 여러분의 자바스크립트 실력도 **레벨 업!**될 거예요.

궁금한 점 있으면 댓글로 남겨주세요!
저는 언제나 여러분의 코딩 친구가 되어줄 준비가 되어 있으니까요! 💛