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

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

_____
Q1: Array.prototype.includes() 메서드는 무엇인가요?
A1: `includes()` 메서드는 배열이 특정 요소를 포함하고 있는지 여부를 확인하여 `true` 또는 `false`를 반환하는 메서드입니다.

---

Q2: 사용법은 어떻게 되나요?
A2: 기본 문법은 다음과 같습니다.
```javascript
array.includes(searchElement, fromIndex)
```
- `searchElement`: 배열 내에서 찾고자 하는 요소입니다.
- `fromIndex` (선택): 검색 시작 인덱스이며 기본값은 0입니다. 음수일 경우 배열 끝에서부터 계산합니다.

---

Q3: 사용 예시는 어떤 것이 있나요?
A3:
```javascript
const fruits = ['apple', 'banana', 'mango'];

fruits.includes('banana'); // true
fruits.includes('cherry'); // false
fruits.includes('mango', 2); // true (2번 인덱스부터 검색)
fruits.includes('apple', 1); // false (1번 인덱스부터 검색하기 때문에 못 찾음)
```

---

Q4: includes()는 배열 내에서 어디까지 검색하나요?
A4: 배열 전체를 검색하며, 요소를 찾으면 즉시 `true`를 반환하고 탐색을 종료합니다. 찾지 못하면 `false`를 반환합니다.

---

Q5: includes()는 NaN 값을 올바르게 탐색하나요?
A5: 네, `includes()`는 `NaN` 값을 찾을 때도 제대로 작동합니다. 이는 `indexOf`의 한계와 다릅니다.

```javascript
const arr = [NaN, 1, 2];
arr.includes(NaN); // true
arr.indexOf(NaN); // -1 (찾지 못함)
```

---

Q6: 문자열에 대해서도 사용 가능한가요?
A6: `includes` 메서드는 배열뿐만 아니라 문자열에도 존재하는 메서드입니다. 하지만 여기서 설명하는 건 배열의 `includes`입니다.

---

Q7: 성능상의 주의점이 있나요?
A7: `includes()`는 선형 탐색을 하므로 매우 큰 배열에서 빈번히 호출하면 성능 저하가 있을 수 있습니다. 성능이 중요한 경우 다른 자료구조(예: Set)를 고려하세요.

---

Q8: 지원되는 브라우저 및 환경은 어떻게 되나요?
A8: ES2016(ES7)부터 표준에 포함되어 현대 브라우저 및 Node.js에서 광범위하게 지원합니다. 구형 브라우저에서는 폴리필이 필요할 수 있습니다.

---

요약하면, `Array.prototype.includes()`는 배열 내 특정 값이 존재하는지 쉽고 명확하게 확인할 수 있게 해 주는 메서드입니다.
`Array.prototype.includes()`는 자바스크립트에서 배열에 특정 요소가 포함되어 있는지를 확인하는 메서드입니다.

이 메서드는 ES6(ECMAScript 201

5)에서 도입되었으며, 배열의 특정 값이 존재하는지 여부를 boolean 값으로 반환합니다.

사용법과 다양한 예제를 통해 자세히 알아보겠습니다.

기본 문법 ```javascript array.includes(valueToFind[, fromIndex]) ``` - valueToFind : 배열에서 찾고자 하는 값입니다.

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

기본값은 0입니다.

이 값이 음수인 경우, 배열의 끝에서부터의 오프셋으로 간주됩니다.

반환값 - `true`: 배열이 `valueToFind`를 포함하는 경우. - `false`: 배열이 `valueToFind`를 포함하지 않는 경우. 사용 예제 1. 기본 사용법 ```javascript const fruits = ['apple', 'banana', 'mango']; console.log(fruits.includes('banana')); // true console.log(fruits.includes('grape')); // false ```

2. fromIndex 사용하기 ```javascript const numbers = [1, 2, 3, 4, 5]; console.log(numbers.includes(3,

2)); // true (인덱스 2부터 검색) console.log(numbers.includes(2,

2)); // false (인덱스 2부터 검색하므로 2는 포함되지 않음) ```

3. 음수 인덱스 사용하기 ```javascript const colors = ['red', 'green', 'blue']; console.log(colors.includes('green', -

2)); // true (끝에서 두 번째 인덱스부터 검색) console.log(colors.includes('red', -1)); // false (끝에서 첫 번째 인덱스부터 검색하므로 'red'는 포함되지 않음) ```

4. NaN 값 확인하기 `includes` 메서드는 `NaN` 값을 정확하게 확인할 수 있습니다.

이는 `===` 연산자가 아닌 `SameValueZero` 알고리즘을 사용하기 때문입니다.

```javascript const arr = [1, 2, NaN]; console.log(arr.includes(NaN)); // true ```

5. 대소문자 구분 `includes` 메서드는 대소문자를 구분합니다.

따라서 문자열을 비교할 때 대소문자가 다르면 `false`를 반환합니다.

```javascript const animals = ['Dog', 'Cat', 'Elephant']; console.log(animals.includes('dog')); // false console.log(animals.includes('Dog')); // true ``` 성능 고려사항 `includes` 메서드는 배열을 순회하면서 값을 찾기 때문에, 배열의 크기가 클 경우 성능에 영향을 줄 수 있습니다.

만약 배열이 매우 크고, 자주 검색해야 하는 경우에는 Set 또는 Map과 같은 자료구조를 사용하는 것이 더 효율적일 수 있습니다.

결론 `Array.prototype.includes()`는 배열에서 특정 요소의 존재 여부를 확인하는 간단하고 직관적인 방법을 제공합니다.

다양한 옵션과 사용법을 통해, 배열을 다룰 때 유용하게 활용할 수 있습니다.

이 메서드는 특히 배열의 요소가 무엇인지 확인해야 할 때 유용하며, 코드의 가독성을 높이는 데 기여합니다.

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