JavaScript의 array.includes() 메서드는 배열에 특정 요소가 포함되어 있는지 확인할 때 사용하는 메서드입니다. 결과값으로 true 또는 false를 반환하며, 코드가 간결하고 직관적이어서 배열 검색 시 자주 활용됩니다.
includes() 메서드 문법
array.includes(ele, start)
- ele: 배열에서 찾고자 하는 요소 (필수)
- start: 검색을 시작할 위치(인덱스)로, 생략하면 기본값 0부터 검색합니다. 음수를 지정하면 배열 끝에서부터 역산한 위치에서 시작합니다.
예제 1: 특정 값 포함 여부 확인하기
아래 예제는 자동차 ID 배열에 "230"이라는 값이 존재하는지 확인하는 코드입니다.
<!DOCTYPE html>
<html>
<body>
<h2>Car Variant</h2>
<button onclick="display()">Result</button>
<p id="test"></p>
<script>
var carid = ["110", "230", "299", "399"];
document.getElementById("test").innerHTML = carid;
function display() {
var n = carid.includes("230");
document.getElementById("test").innerHTML = "배열에 230이 포함되어 있나요? = "+n;
}
</script>
</body>
</html>실행 결과
페이지를 열면 다음과 같이 배열 값이 표시됩니다.
여기서 "Result" 버튼을 클릭하면 아래와 같이 true가 출력됩니다.
예제 2: 문자열 요소 검색하기
다음 예제는 차종 배열에 "Crossover"라는 요소가 있는지 확인하는 코드입니다.
<!DOCTYPE html>
<html>
<body>
<h2>Car Variant</h2>
<p>배열에 Crossover 요소가 포함되어 있나요?</p>
<button onclick="display()">Result</button>
<p id="test"></p>
<script>
var car = ["Hatchback", "Convertible"];
var res2 = car.entries();
for (val of res2) {
document.getElementById("test").innerHTML += val + "<br>";
}
function display() {
var res = car.includes("Crossover");
document.getElementById("test").innerHTML = res;
}
</script>
</body>
</html>실행 결과
초기 화면에서는 entries() 메서드로 생성된 인덱스-값 쌍이 표시됩니다.
"Result" 버튼을 클릭하면 배열에 "Crossover"가 없으므로 false가 출력됩니다.
정리
includes() 메서드는 대소문자를 구분하며, NaN 같은 특수한 값도 정확하게 비교할 수 있다는 점에서 기존의 indexOf()보다 편리합니다. 단순히 요소의 존재 여부만 필요하다면 indexOf() 대신 includes()를 사용하는 것이 좋습니다.