🔎 indexOf() 개념
✅ 배열 버전
array.indexOf(searchElement[, fromIndex])
- searchElement: 찾고 싶은 값
- fromIndex (선택): 검색을 시작할 위치 (기본은 0)
- 결과값: 찾은 값의 인덱스(위치) 반환
못 찾으면 -1 반환
✅ 문자열 버전
string.indexOf(searchValue[, fromIndex])
📦 배열 예시
const fruits = ['apple', 'banana', 'cherry'];
console.log(fruits.indexOf('banana')); // 1
console.log(fruits.indexOf('grape')); // -1
📦 문자열 예시
const message = "hello world";
console.log(message.indexOf('o')); // 4 (첫 번째 'o' 위치)
console.log(message.indexOf('world')); // 6
console.log(message.indexOf('z')); // -1
🔁 응용: 포함 여부 확인
if (colors.indexOf('blue') !== -1) {
console.log('blue가 있어요!');
}
📌 주의사항
- 처음 발견된 위치만 반환해.
- 대소문자 구분해.
'Hello'.indexOf('h'); // -1 (대소문자 다름)
🔁 lastIndexOf() — 뒤에서부터 찾기
📌 개념:
indexOf()는 앞에서부터 찾지만,
lastIndexOf()는 뒤에서부터 특정 값을 찾아서 가장 마지막 위치를 알려줘.
📌 문법:
array.lastIndexOf(searchElement[, fromIndex])
string.lastIndexOf(searchValue[, fromIndex])
- fromIndex는 어디부터 거꾸로 찾을지 지정 가능 (생략하면 끝에서부터)
- 결과값은 마지막으로 일치하는 인덱스 (없으면 -1)
✅ 배열 예시:
console.log(nums.indexOf(2)); // 1
console.log(nums.lastIndexOf(2)); // 3
console.log(msg.indexOf("lo")); // 3
console.log(msg.lastIndexOf("lo")); // 9
✅ includes() — 포함 여부 확인 (true/false)
📌 개념:
값이 있는지 없는지 간단하게 true/false로 확인할 수 있어.
indexOf()를 쓸 때 !== -1 비교 안 해도 돼서 간결해!
📌 문법:
array.includes(valueToFind[, fromIndex])
string.includes(searchString[, position])
✅ 배열 예시:
const animals = ['cat', 'dog', 'bird'];
console.log(animals.includes('dog')); // true
console.log(animals.includes('tiger')); // false
✅ 문자열 예시:
const sentence = "I love JavaScript";
console.log(sentence.includes("love")); // true
console.log(sentence.includes("python")); // false
✅ 차이 정리 요약
indexOf() | 위치 (숫자) 또는 -1 | 앞에서부터 | 첫 번째 위치 찾기 |
lastIndexOf() | 위치 (숫자) 또는 -1 | 뒤에서부터 | 마지막 위치 찾기 |
includes() | true 또는 false | 앞에서부터 | 포함 여부만 확인 |
'js' 카테고리의 다른 글
DOM 조작이란 (0) | 2025.03.22 |
---|---|
HTML 요소에 내용 추가하는 3가지 방법 — append, textContent, innerHTML (0) | 2025.03.22 |
배열의 내용을 합치고 나누는 join과 split (0) | 2025.03.22 |
랜덤으로 숫자 뽑기 Math.random() (0) | 2025.03.22 |
태그 선택과 이벤트 리스너 (0) | 2025.03.21 |