알고리즘을 풀거나 서버에서 받은 데이터를 가공하여 사용할 때나 배열 안에 특정 값을 찾아야 하는 경우가 많다. 특정 값이 포함되어 있는 지 확인할 수 있는 배열 함수들을 정리하고 비교해보려한다.
배열 내 특정 값 포함 여부를 확인할 수 있는
JavaScript Array methods 비교
배열 내 특정 값 포함 여부 확인할 수 있는 함수에는 아래와 같은 것들이 있는데 for문을 이용해서 확인할 수도 있다. 기능을 수행할 수 있는 방식이 다양하기 때문에 현 상황에 가장 적합한 함수를 선택하는 것이 관건이다. 그러므로 간단 요약을 통한 선비교 후설명을 진행하겠다.
🔽🔽🔽🔽🔽
indexOf()
: 찾으려는 값과 일치하는 '첫번째 index'를 반환
includes()
: 특정 값 포함 '여부(boolean)' 반환 💥IE호환❌
findIndex()
: callback함수 조건에 충족하는 값의 '첫번째 index'를 반환 💥IE호환❌
some()
: callback함수 조건에 충족하는 값의 포함 '여부(boolean)' 반환
🔼🔼🔼🔼🔼
고려해야 할 사항
얻고자 하는 정보 (위치 vs 존재 여부)
: 필요한 정보가 위치인지 포함 여부인지에 따라 의도에 알맞는 함수를 이용한다.
indexOf()와 includes()의 performance를 검색해 얻은 결과 중 스택오버플로우에서 인사이트를 얻었다. 속도는 indexOf가 약간 더 빠를 수 있지만 의도를 명확히 할 수 있는 함수를 사용하라는 것이었다.
내가 생각하기에도 좋은 코드란 읽기 좋은 코드이고 읽기 좋은 코드란 코드의 의도를 쉽게 파악할 수 있는 것이므로 의도에 맞는 함수를 이용하는 것이 더 중요하게 느껴진다.
비교대상의 자료형 (Primitive type vs object)
: 원시타입의 경우는 indexOf()와 inxludes()로도 비교가 가능하지만
만약 Object를 비교해야 한다면 다른 메소드를 이용하는 것이 좋다. 객체 특성 상 값이 동일하더라도 참조 위치가 다를 때 서로 다른 값으로 인식하기 때문이다. Object를 비교하고자 할 때는 findIndex()와 some() 함수의 callback함수 조건을 활용해야 한다.
브라우저 호환성
: IE 지원을 하지 않는 함수가 생각보다 많다는 것을 알게 되었다. 사용 전에 잘 확인해야겠다. 스택오버플로우에서도 제시되는 답안마다 이 함수는 IE지원이 안되는데요! 식의 댓글이 많아서 웃펐다..
Method별 사용방법
indexOf()
arr.indexOf(searchElement[, fromIndex])
매개변수
searchElement 탐색할 요소
fromIndex Optional 검색을 시작할 위치, 기본값은 0이다(index 0부터 전체 배열 검색).
특징
- 엄격한 동등성(===)을 사용하여 비교함.
- 문자열에 이용 가능 String.prototype.indexOf()
- 제공된 색인 값이 음수이면 배열 끝에서부터의 오프셋 값으로 사용,
이 때 실제 비교 자체는 여전히 좌에서 우로 이루어진다.
➕ 뒤에서부터 앞으로 비교하는 메소드는 lastIndexOf()가 있다.
ex) fromIndex가 음수일 때 배열 끝에서부터 오프셋 값으로 반영
const array = [2, 9, 9];
array.indexOf(2, -1); // -1
array.indexOf(9, -1); // 2
array.indexOf(9, -2); // 1
array.indexOf(2, -3); // 0반환 값
배열 내의 요소의 최초의 인덱스. 발견되지 않으면 -1
includes()
arr.includes(valueToFind[, fromIndex])
매개변수
valueToFind 탐색할 요소
fromIndex Optional 검색을 시작할 위치, 기본값은 0이다(index 0부터 전체 배열 검색).
특징
- Internet Explorer No support
- 문자열에 이용 가능 String.prototype.indexOf()
- 문자나 문자열을 비교할 때 대소문자를 구분합니다.
- fromIndex가 배열의 길이보다 같거나 크다면 false
- fromIndex가 음의 값일 때, array.length + fromIndex의 인덱스로 검색합니다.
ex) array.length + fromIndex(음수) 계산된 인덱스가 -1 * array.length 보다 작거나 같다면, 전체 배열이 검색
// array length is 3
// fromIndex is -100
// computed index is 3 + (-100) = -97
const arr = ['a', 'b', 'c'];
arr.includes('a', -100); // true
arr.includes('b', -100); // true
arr.includes('c', -100); // true
arr.includes('a', -2); // false반환 값
Boolean.
findIndex()
arr.findIndex(callback(element[, index[, array]])[, thisArg])
매개변수
callback 3개의 인수를 취하여 배열의 각 값에 대해 실행할 함수
element 배열 요소 중 현재 처리 중인 요소 (배열 내 각 값을 의미)
index 현재 처리중인 요소의 인덱스
array findIndex 함수가 호출된 배열
thisArg 선택 사항. 콜백을 실행할 때 this로 사용할 객체
특징
- Internet Explorer No support
- true를 반환하는 값이 발견되면 즉시 반복 중단 후 결과 반환
(true가 발견되어도 배열의 마지막까지 반복을 진행하는 메소드도 존재하므로 효율면에서 우위에 있다.) - some과 같은 다른 배열 메소드와는 달리, 배열에 존재하지 않는 엔트리의 인덱스에 대해서조차 콜백이 호출
- 호출 된 배열을 변경하지 않는다.
반환 값
callback 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스, 발견되지 않으면 -1
➕ 값을 반환하는 메소드로 find()가 있다. 발견되지 않으면 undefined
some()
arr.some(callback[, thisArg])
매개변수
callback 각 요소를 시험할 함수
currentValue 처리할 현재 요소
index Optional 처리할 현재 요소의 인덱스
array Optional some을 호출한 배열
thisArg Optional callback을 실행할 때 this로 사용하는 값
특징
- 요소를 발견한 경우 즉시 true를 반환, 모든 값에서 거짓을 반환하면 false를 반환
- 삭제했거나 값을 할당한 적이 없는 인덱스에서는 호출하지 않는다. (findIndex()와의 차이점)
- 빈 배열에서 호출하면 무조건 false를 반환
- 호출 된 배열을 변경하지 않는다.
반환 값
callback이 배열 요소 중 하나라도 참인(truthy) 값을 반환하는 경우 true
모든 값에서 거짓을 반환하면 false
참고자료 : MDN
