[JQuery] 특정 값이 포함되어 있는 지 확인할 수 있는 배열 함수들(indexOf, includes, findIndex, some)

 

 

 

 

 

배열 안에 특정 값을 찾아야 하는 경우가 자주 있는데

, 그럴때 사용할수있는 함수들을 정리하고 비교해본다.

 

 

 

 

배열 내 특정 값 포함 여부 확인 함수

---

배열 내 특정 값이 포함되어있는지 확인하기 위한 함수는 아래와 같이 4가지로 볼수 있는데, 기능을 수행하는 방식이 조금씩 다르기 때문에 상황에 맞도록 사용하는 것이 중요하다.

 

indexOf()

찾으려는 값과 일치하는 '첫번째 index'를 반환

 

includes()

특정 값 포함 '여부(boolean)' 반환하며, IE에서는 호환이 되지 않음

 

findIndex()

callback함수 조건에 충족하는 값의 '첫번째 index'를 반환하며, IE에서는 호환이 되지 않음

 

some()

callback함수 조건에 충족하는 값의 포함 '여부(boolean)' 반환

 

 

 

 

함수 사용 전 고려해야 할 사항

---

 

이 중 어떤 함수를 사용해야 할지 결정하기 전 고려해야 할 점은 아래와 같다.

 

1. 얻고자 하는 정보 (위치 vs 존재 여부)

필요한 정보가 위치인지 포함 여부인지에 따라 알맞는 함수를 이용

 

2. 비교대상의 자료형 (Primitive type VS object)

원시타입의 경우는 indexOf()와 inxludes()로도 비교가 가능하지만, 만약 Object를 비교해야 한다면 다른 함수를 이용하는 것이 좋다. 객체 특성 상 값이 동일하더라도 참조 위치가 다를 때 서로 다른 값으로 인식하기 때문인데, Object를 비교하고자 할 때는 findIndex()와 some() 함수의 callback함수 조건을 활용하는 것이 좋다.

 

3. 브라우저 호환성

브라우저에 따라 동작이 제대로 되지 않는 함수가 있을수 있다. 특히 최근 지원이 중단된 IE에서는 동작이 되지 않는 함수들이 많다.

 

 

 

 

함수별 사용 방법과 예시

---

indexOf

배열 내의 요소의 최초의 인덱스를 반환하며, 발견되지 않으면 -1을 반환

arr.indexOf(searchElement, fromIndex)

searchElement : 탐색할 요소

fromIndex : 필수값은 아님, 검색을 시작할 위치, 기본값은 0 (index 0부터 전체 배열 검색)

 

특징

반환되는 값은 배열 내의 요소의 최초의 인덱스이며, 발견되지 않으면 -1을 반환

엄격한 동등성(===)을 사용하여 비교

문자열에 이용 가능 String.prototype.indexOf()

제공된 색인 값이 음수이면 배열 끝에서부터의 오프셋 값으로 사용, 이 때 실제 비교 자체는 여전히 좌에서 우로 이루어짐 (cf. 뒤에서부터 앞으로 비교하는 함수는 lastIndexOf()가 있음)

 

예시

const array = [2, 9, 9];

array.indexOf(2, -1); // -1
array.indexOf(2); // 0
array.indexOf(9, -1); // 2
array.indexOf(9, -2); // 1
array.indexOf(2, -3); // 0

 

 

includes

배열의 항목에 특정 값이 포함되어 있는지를 판단하여 Boolean 형식(true, false)으로 반환

arr.includes(valueToFind, fromIndex)

valueToFind : 탐색할 요소

fromIndex : 필수값은 아님, 검색을 시작할 위치, 기본값은 0(index 0부터 전체 배열 검색)

 

특징

IE(Internet Explorer)에서는 지원되지 않는 함수

문자열에 이용 가능 String.prototype.indexOf()

문자나 문자열을 비교할 때 대소문자를 구분

fromIndex가 배열의 길이보다 같거나 크다면 false

fromIndex가 음의 값일 때, 배열의 끝부터 거꾸로 센다. 즉, fromIndex < 0이면, fromIndex + array.length가 사용됨. 그러나, 이 경우에도 배열은 여전히 앞에서 뒤로 검색됨

 

예시

//ex1
const array1 = [1, 2, 3];
array1.includes(2);//true

//ex2
const pets = ["cat", "dog", "bat"];
pets.includes("cat");//true
pets.includes("at");//false

//ex3
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true
["1", "2", "3"].includes(3); // false

 

 

findIndex

배열에서 특정 조건을 만족하는 요소를 찾아 첫 번째 요소의 인덱스를 반환

arr.findIndex(callback(element[, index[, array]])[, thisArg])

callback : 3개의 인수를 취하여 배열의 각 값에 대해 실행할 함수
element : 배열 요소 중 현재 처리 중인 요소 (배열 내 각 값을 의미)
index : 현재 처리중인 요소의 인덱스
array : findIndex 함수가 호출된 배열
thisArg : 선택 사항. 콜백을 실행할 때 this로 사용할 객체

 

특징

IE(Internet Explorer)에서는 지원되지 않는 함수

배열의 각 요소에 대해 콜백 함수를 사용하여 원하는 조건의 요소를 찾음

배열에서 특정 요소의 인덱스를 찾는 데 유용

true를 반환하는 값이 발견되면 즉시 반복 중단 후 결과 반환(true가 발견되어도 배열의 마지막까지 반복을 진행하는 다른 함수에 비해 효율적)

 

예시

//ex1
const array1 = [5, 12, 8, 130, 44];
const isLargeNumber = (element) => element > 13;
console.log(array1.findIndex(isLargeNumber)); //3


//ex2
const numbers = [3, -1, 1, 4, 1, 5, 9, 2, 6];
const firstTrough = numbers
  .filter((num) => num > 0)
  .findIndex((num, idx, arr) => {
    // arr 인수가 없으면 변수로 저장하지 않고 중간에 생성된
    // 배열에 쉽게 접근할 수 있는 방법은 없습니다.
    if (idx > 0 && num >= arr[idx - 1]) return false;
    if (idx < arr.length - 1 && num >= arr[idx + 1]) return false;
    return true;
  });
console.log(firstTrough); // 1

 

 

 

some

배열 안의 어떤 요소라도 주어진 판별 함수를 적어도 하나라도 통과하는지 테스트하고 만약 배열에서 주어진 함수가 true을 반환하면 true를 반환, 그렇지 않으면 false를 반환

arr.some(callback[, thisArg])

 

특징

요소를 발견한 경우 즉시 true를 반환, 모든 값에서 거짓을 반환하면 false를 반환

삭제했거나 값을 할당한 적이 없는 인덱스에서는 호출하지 않음

빈 배열에서 호출하면 무조건 false를 반환

호출 된 배열을 변경하지 않음

 

예시

//ex1
const array = [1, 2, 3, 4, 5];
// Checks whether an element is even
const even = (element) => element % 2 === 0;
console.log(array.some(even));//true


//ex2
const fruits = ["apple", "banana", "mango", "guava"];
function checkAvailability(arr, val) {
  return arr.some((arrVal) => val === arrVal);
}

checkAvailability(fruits, "kela"); // false
checkAvailability(fruits, "banana"); // true