2026년 상식닷컴 선정 식당 & 카페 리스트
최근에 오픈한 호텔을 찾는다면 살펴보세요

자바스크립트에서 Array.prototype.indexOf()의 사용법은 무엇인가요?

_____
Q1: JavaScript에서 Array.prototype.indexOf()란 무엇인가요?
A1: `indexOf()`는 배열에서 특정 요소를 찾아 그 요소의 첫 번째 인덱스를 반환하는 메서드입니다. 만약 요소가 배열에 없으면 -1을 반환합니다.

---

Q2: 기본 사용법은 어떻게 되나요?
A2: 배열에 `indexOf()`를 호출하며 찾으려는 값을 인자로 전달합니다.
```javascript
const arr = ['apple', 'banana', 'cherry'];
console.log(arr.indexOf('banana')); // 출력: 1
console.log(arr.indexOf('grape')); // 출력: -1 (없음)
```

---

Q3: 두 번째 인자인 검색 시작 인덱스(fromIndex)는 무엇인가요?
A3: `indexOf(searchElement, fromIndex)`에서 두 번째 인자는 검색을 시작할 배열의 위치(index)입니다. 기본값은 0이며, 음수일 경우 배열 끝에서부터의 상대적 위치를 의미합니다.
```javascript
const arr = [1, 2, 3, 2, 1];
console.log(arr.indexOf(2, 2)); // 출력: 3 (인덱스 2부터 탐색)
console.log(arr.indexOf(2, -2)); // 출력: 3 (끝에서부터 두번째 위치부터 탐색)
```

---

Q4: indexOf()는 배열에서 객체를 어떻게 찾나요?
A4: 객체는 참조값이 비교되므로, 배열 내의 객체와 동일한 참조를 가진 경우에만 찾습니다. 내용이 같은 다른 객체라도 다른 참조이므로 찾지 못합니다.
```javascript
const obj = {a: 1};
const arr = [obj, {a: 1}];
console.log(arr.indexOf(obj)); // 출력: 0
console.log(arr.indexOf({a: 1})); // 출력: -1 (다른 객체 참조)
```

---

Q5: 빈 배열에서 indexOf()를 호출하면 어떻게 되나요?
A5: 항상 -1을 반환합니다.
```javascript
const emptyArr = [];
console.log(emptyArr.indexOf(1)); // 출력: -1
```

---

Q6: 문자열에도 indexOf()를 사용할 수 있나요?
A6: `Array.prototype.indexOf()`는 배열에만 적용되며 문자열에는 `String.prototype.indexOf()`를 사용해야 합니다.
---

Q7: 요소가 NaN인 경우 indexOf()는 어떻게 작동하나요?
A7: `indexOf()`는 내부적으로 엄격한 동등 연산(`===`)을 사용하기 때문에 NaN은 자기 자신과도 같지 않아 찾을 수 없습니다.
```javascript
const arr = [NaN];
console.log(arr.indexOf(NaN)); // 출력: -1
```

---

Q8: indexOf()의 시간 복잡도는 어떻게 되나요?
A8: O(n)으로, 배열 길이에 비례해 처음부터 끝까지 순차 탐색합니다.

---

Q9: indexOf()와 includes()의 차이는 무엇인가요?
A9: `indexOf()`는 요소가 있으면 인덱스를 반환하고 없으면 -1을 반환합니다. `includes()`는 존재 여부(boolean)를 반환합니다.
```javascript
const arr = [1,2,3];
console.log(arr.indexOf(2)); // 1
console.log(arr.includes(2)); // true
```

---

Q10: IE8 이하 구형 브라우저에서 indexOf()를 사용하려면?
A10: IE8 이하에서는 `indexOf()`가 지원되지 않으므로 폴리필을 추가해야 합니다. 예:
```javascript
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function(searchElement, fromIndex) {
var k;
if (this == null) throw new TypeError('"this" is null or not defined');
var O = Object(this);
var len = O.length >>> 0;
if (len === 0) return -1;
var n = +fromIndex || 0;
if (Math.abs(n) === Infinity) n = 0;
if (n >= len) return -1;
k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
while (k < len) {
if (k in O && O[k] === searchElement) return k;
k++;
}
return -1;
};
}
```
`Array.prototype.indexOf()`는 자바스크립트에서 배열 내에서 특정 요소의 첫 번째 인덱스를 찾는 메서드입니다.

이 메서드는 배열에서 주어진 값이 처음으로 나타나는 위치를 반환하며, 만약 해당 값이 배열에 존재하지 않는 경우에는 -1을 반환합니다.

`indexOf()` 메서드는 대소문자를 구분하며, 배열의 요소가 원시 값(숫자, 문자열 등)일 때 주로 사용됩니다.

사용법 `indexOf()` 메서드는 다음과 같은 형식으로 사용됩니다: ```javascript array.indexOf(searchElement[, fromIndex]) ``` - `searchElement`: 배열에서 찾고자 하는 요소입니다.

- `fromIndex` (선택적): 검색을 시작할 인덱스입니다.

기본값은 0이며, 음수 값을 지정할 경우 배열의 끝에서부터의 인덱스를 기준으로 합니다.

예제 1. 기본 사용법 ```javascript const fruits = ['apple', 'banana', 'orange', 'banana']; const index = fruits.indexOf('banana'); console.log(index); // 1 ``` 위의 예제에서 `indexOf`는 배열 `fruits`에서 첫 번째로 나타나는 `'banana'`의 인덱스를 반환합니다.

결과는 1입니다.



2. 존재하지 않는 요소 찾기 ```javascript const index = fruits.indexOf('grape'); console.log(index); // -1 ``` 이 경우 `'grape'`는 배열에 존재하지 않기 때문에 -1을 반환합니다.



3. fromIndex 사용하기 ```javascript const index = fruits.indexOf('banana',

2); console.log(index); // 3 ``` 여기서는 `fromIndex`를 2로 설정하여, 인덱스 2부터 검색을 시작합니다.

따라서 두 번째 `'banana'`의 인덱스인 3이 반환됩니다.



4. 음수 인덱스 사용하기 ```javascript const index = fruits.indexOf('orange', -1); console.log(index); // 2 ``` 음수 인덱스를 사용하면 배열의 끝에서부터 검색을 시작합니다.

여기서는 -1이 배열의 마지막 요소를 가리키므로, `'orange'`의 인덱스인 2가 반환됩니다.

주의사항 - `indexOf()`는 대소문자를 구분합니다.

예를 들어, `'Apple'`과 `'apple'`은 서로 다른 값으로 간주됩니다.

- 배열의 요소가 객체일 경우, `indexOf()`는 참조를 비교합니다.

즉, 두 객체가 동일한 속성을 가지고 있더라도 서로 다른 객체라면 `indexOf()`는 -1을 반환합니다.

```javascript const obj1 = { name: 'apple' }; const obj2 = { name: 'apple' }; const array = [obj1]; console.log(array.indexOf(obj

2)); // -1 ``` 위의 예제에서 `obj1`과 `obj2`는 서로 다른 객체이므로, `indexOf()`는 -1을 반환합니다.

결론 `Array.prototype.indexOf()`는 배열에서 특정 요소의 인덱스를 찾는 간단하고 유용한 방법입니다.

배열 내에서 값의 위치를 확인하거나, 값이 존재하는지 여부를 판단할 때 유용하게 사용될 수 있습니다.

그러나 대소문자 구분과 객체 비교의 특성을 이해하고 사용하는 것이 중요합니다.

이러한 점을 고려하여 적절한 상황에서 `indexOf()`를 활용하면, 자바스크립트 배열 작업을 보다 효율적으로 수행할 수 있습니다.

작성자: 이준수 [비회원] | 작성일자: 1년 전 2024-09-08 14:47:27
조회수: 204 | 댓글: 0 | 좋아요: 0 | 싫어요: 0
내용이 부정확하다면 싫어요를 클릭해주세요.