JavaScript에서는 특정 값이 배열이나 문자열에 포함되어 있는지 확인해야 하는 경우가 자주 발생합니다.
이때 매우 유용하게 사용되는 함수가 includes() 함수입니다. 이 글에서는 includes() 함수의 기본 사용법부터 고급 활용법까지 다양한 예제와 함께 자세히 알아보겠습니다.
includes() 함수란?
includes() 함수는 배열이나 문자열에 특정 값이 포함되어 있는지 확인하는 메서드입니다.
이 함수는 불리언 값을 반환하며, 값이 포함되어 있으면 true, 그렇지 않으면 false를 반환합니다.
기본 문법
배열에서 사용
array.includes(valueToFind, startIndex)- array: 값을 찾을 배열
- valueToFind: 배열에서 찾고자 하는 값
- startIndex: (선택 사항) 검색을 시작할 인덱스 (기본값: 0)
문자열에서 사용
string.includes(searchString, position)- string: 값을 찾을 문자열
- searchString: 문자열에서 찾고자 하는 값
- position: (선택 사항) 검색을 시작할 인덱스 (기본값: 0)
배열에서 사용
See the Pen Untitled by saladent (@saladent) on CodePen.
문자열에서 사용
See the Pen javascript includes()-3 by saladent (@saladent) on CodePen.
시작 인덱스를 지정하여 배열에서 사용
See the Pen javascript includes() -4 by saladent (@saladent) on CodePen.
배열 numbers에서 값 2가 인덱스 3 이후에 존재하는지 확인합니다.
배열의 인덱스 3부터 끝까지의 요소는 [4, 5, 2]입니다. 여기서 값 2는 인덱스 5에 존재하므로, 이 함수 호출은 true를 반환합니다.
시작 위치를 지정하여 문자열에서 사용
See the Pen javascript includes() -5 by saladent (@saladent) on CodePen.
문자열 text에서 문자열 "is"가 인덱스 5 이후에 존재하는지 확인합니다.
문자열의 인덱스 5부터 끝까지의 부분 문자열은 "Script is fun"입니다. 여기서 "is"는 인덱스 10부터 시작하므로, 이 함수 호출은 true를 반환합니다.
주의사항
- 대소문자 구분: includes() 함수는 대소문자를 구분합니다. 따라서 대소문자가 다른 경우 false를 반환합니다.
const word = "JavaScript";
console.log(word.includes("javascript")); // false- NaN 확인: 배열의 includes() 함수는 NaN 값을 올바르게 확인할 수 있습니다.
const arrayWithNaN = [1, 2, NaN];
console.log(arrayWithNaN.includes(NaN)); // true
결론
JavaScript의 includes() 함수는 배열과 문자열에서 특정 값이 포함되어 있는지 확인하는 데 매우 유용한 메서드입니다.
이 함수는 간단한 구문과 강력한 기능을 제공하여 다양한 상황에서 활용할 수 있습니다.
소문자 구분과 같은 주의사항을 염두에 두면서, includes() 함수를 적절히 사용하여 코드의 가독성과 효율성을 높일 수 있습니다.