[Javascript] 배열에 특정 값이 포함되어 있는지 여부 체크하기

 

Javascript의 배열 안에

특정 값이 포함되어 있는지 여부를 체크하는 방법을 소개합니다.

 

 

배열에 특정 값이 포함되어 있는지 여부 체크하기 

 

배열 안에 특정 값이 포함되어 있는지 여부를 체크하기 위해서

기본적으로 반복문을 사용하여 체크할 수도 있지만,

여기서는 몇 가지 Javascript 함수를 소개합니다.

1. indexOf(), lastIndexOf()
2. includes()
3. findIndex()
4. some()
5. includes() vs some()

 

 

1. indexOf(), lastIndexOf()

arr.indexOf(searchElement[, fromIndex])
arr.lastIndexOf(searchElement[, fromIndex])

 indexOf() 함수는 

배열 안에서 찾으려는 값(searchElement)과 정확하게 일치(===)하는'첫번째' element의 index를 리턴합니다. 

 lastIndexOf() 함수는 

배열 안에서 찾으려는 값(searchElement)과 정확하게 일치(===)하는 '마지막' element의 index 를 리턴합니다.

 

두 함수 모두 찾으려는 값이 배열에 없으면 -1을 리턴합니다.

 

이 특징을 이용해서 특정 값이 배열에 포함되어 있는지 확인할 수 있습니다.

 

 

See the Pen 배열 by anna (@hianna) on CodePen.

 

이 예제는 숫자 3이 배열에 포함되어 있는지를 체크합니다.

배열은 숫자 3을 포함하지 않고 있으므로, arr.indexOf(3)은 -1을 리턴합니다.

2. includes()

arr.includes(valueToFind[, fromIndex])

includes() 함수는 배열이 특정값을 포함하고 있는지의 여부를 boolean 값으로 반환합니다.

 

 파라미터 

valueToFind

찾으려는 값

 

fromIndex

검색을 시작할 index

기본값은 0

음수가 입력되면 arr.length+fromIndex로 계산

 

 리턴값 

배열이 valueToFind 값을 포함하고 있는지의 여부(boolean)

 

 

See the Pen 배열 by anna (@hianna) on CodePen.

 

 

arr.includes(1); // true

arr[0]의 값이 1이므로 true를 리턴합니다.

arr.includes(3); // false

arr에는 3이라는 값이 없으므로 false를 리턴합니다.

arr.includes(1, 1); // false

arr[1] 이후에는 1이라는 값이 없으므로 false를 리턴합니다.

arr.includes(1, 2); // false

두 번째 파라미터인 fromIndex에 배열의 길이보다 크거나 같은 값이 들어가면 무조건 false를 리턴합니다.

여기서 배열의 길이는 2인데, fromIndex 자리에 2가 들어갔으므로 false가 리턴되었습니다.

arr.includes(2, -1); // true

fromIndex 자리에 음수가 들어가면, 실제 시작 index는 '배열의 길이 + fromIndex'로 계산됩니다.

배열의 길이는 2이고, fromIndex는 -1이므로, 

실제 검색을 시작하는 index는 1이 됩니다.  (2 + (-1))

arr[1]에 2가 있으므로, true가 리턴 되었습니다.

 

3. findIndex()

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

 findIndex() 함수는 

배열에서 값을 찾는 조건을 callback 함수로 전달하고,

배열에서 조건에 맞는 값의 '첫번째 index'를 리턴하는 함수입니다.

만약, 조건에 맞는 값이 배열에 없으면 -1을 리턴합니다.

 

findIndex() 함수의 자세한 사용 방법은 아래 링크를 참조하세요.

[Javascript] 배열 특정 값 위치(index) 찾기 - findIndex()

 

 

See the Pen 배열 by anna (@hianna) on CodePen.

 

코드를 자세히 살펴보겠습니다.

function findNumberTwo(element) {
  if(element === 2) {
    return true;
  }
}

arr.findIndex에 전달된 callback 함수입니다.

이 함수는 배열의 각각의 element를 받아서, 그 값이 2인지 확인하고,

그 값이 2이면 true를 리턴합니다.

 

document.writeln(arr.findIndex(findNumberTwo)); // 1

arr.findIndex 함수에서 findNumberTwo 함수를 callback 함수로 전달하였습니다.

이제, callback 함수는 arr의 각 element를 하나씩 callback함수에 전달하여 처리합니다.

callback 함수는 element의 값이 2이면 true를 리턴하고, 

callback 함수가 true를 리턴하면 findIndex 함수는 true가 리턴 된 element의 index값을 리턴합니다.

따라서, 배열에 찾으려는 값이 있다면(여기서는 2를 찾고 있습니다)

findIndex 함수는 0 이상의 값을 리턴하게 됩니다.

그리고, 만약 찾으려는 값이 없으면, findIndex 함수는 -1을 리턴합니다.

 

document.writeln(arr.findIndex(findNumberTwo) > -1); // true

따라서, 위의 예제와 같이 findIndex 함수에 특정 값을 찾는 callback 함수를 전달하고,

리턴 받는 값을 위와 같이 체크하면, 배열에 특정값의 존재 여부를 확인할 수 있습니다.

 

4. some()

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

 some() 함수는 

배열에서 값을 찾는 조건을 callback 함수로 전달하고,

배열에 조건에 맞는 값이 있는지 여부(boolean)를 리턴하는 하는 함수입니다.

조건에 맞는 값이 있으면 true, 조건에 맞는 값이 없으면 false를 리턴합니다.

 

 파라미터 

callback(element, index, array) 함수

조건을 비교할 callback 함수이고, 다음 3개의 파라미터가 전달됩니다.

callback 함수에서 사용자가 테스트할 조건을 정의하고,

만약 배열의 값이 조건에 부합하면 true를 리턴하면,

some() 함수는 true를 리턴합니다.

조건에 부합하는 값을 찾으면, 그 이후의 배열 값은 테스트 되지 않습니다.

• element : 현재 처리 중인 배열의 element입니다.
• index : 현재 처리 중인 배열의 index입니다. (optional)
• array : some() 함수가 호출된 배열입니다. (optional)

thisArg (optional)

callback을 실행할 때 this로 사용할 객체입니다.

 

 리턴 값 

조건에 부합하는 값이 있으면 true, 없으면 false를 리턴합니다.

 

 

See the Pen 배열 by anna (@hianna) on CodePen.

 

function findNumberTwo(element) {
  if(element === 2) {
    return true;
  }
}

배열에서 전달된 element를 파라미터로 입력받아서, 

element가 2인지 아닌지를 판단하는 함수를 하나 정의하였습니다.

 

const arr1 = [1, 2, 3, 2];
const arr2 = [1, 3, 4, 5];
document.writeln(arr1.some(findNumberTwo)); // true
document.writeln(arr2.some(findNumberTwo)); // false

some() 함수에 findNumberTwo 함수를 callback 함수로 전달하였습니다.

arr1의 element들은 callback 함수에 전달되고,

element의 값이 2인지 판단하고, 2이면 callback 함수는 true를 리턴합니다.

callback 함수가 true를 리턴하면 some() 함수도 true를 리턴합니다.

 

arr1은 2를 포함하고 있으므로, some 함수는 true를 리턴하였고,

arr2는 2를 포함하지 않으므로, some 함수는 false를 리턴하였습니다.

 

 some() 함수로 배열에 짝수가 있는지 확인하기 

See the Pen 배열 by anna (@hianna) on CodePen.

 

callback 함수를 조금 수정하였습니다.

배열의 숫자가 짝수인지 체크하기 위해서

callback 함수에서 element의 값을 체크하는 로직을 수정하였습니다.

 

이와 같이 some() 함수를 사용해서는

단순히 특정 값이 배열에 존재하는지의 여부뿐만 아니라,

callback 함수에 조건을 추가하여 배열의 값을 테스트할 수 있습니다.

 

이것이 includes() 함수와 some() 함수의 차이입니다.

 

 

 

5. includes() vs some() 

includes()와 some() 함수는 모두 특정 값이 배열에 포함되어 있는지를 체크할 수 있습니다.

 

하지만, 두 함수는 약간의 차이가 있습니다.

See the Pen 배열 by anna (@hianna) on CodePen.

 

arr1.includes(1);

includes() 함수를 이용해서 배열에 1이 있는지 체크하였고, 

배열에 1이 있으므로 true를 리턴하였습니다.

 

arr1.includes({name: 'apple'});

마찬가지로 includes() 함수를 이용해서 배열에 object인 {name: 'apple'} 이 있는지 체크하였습니다.

arr1[2]에 분명 같은 object가 있는데 includes()는 false를 리턴하였습니다.

 

이유는

includes() 함수는 내부적으로 값을 비교할 때 '===' 연산자를 사용하기 때문입니다.

'===' 연산자는 primitive type이 아닌 object를 비교할 때,

object의 값이 같은지 비교하는 것이 아니라, 같은 객체를 가리키고 있는지를 비교합니다.

See the Pen 배열 by anna (@hianna) on CodePen.

위 예제에서

obj1과 obj2는 같은 값을 가지고 있지만, 각각 다른 객체입니다.

obj1과 obj3는 같은 객체를 가리키고 있습니다.

 

includes() 함수는 값을 비교할 때 '===' 연산자를 사용하기 때문에 위와 같은 이유로

같은 값을 가지는 object의 존재 여부를 체크하는 데에는 적합하지 않습니다.

 

object의 값을 체크할 때는 some() 함수를 사용합니다.

See the Pen 배열 by anna (@hianna) on CodePen.

some() 함수에 callback 함수로 전달되는 checkApple() 함수에

object의 내용을 체크하는 로직이 담겨져 있습니다.

 

 정리해 보면 

includes() 함수는 primitive type을 체크하는 적절하고,

some() 함수는 primitive type 외의 타입을 체크하는데 적절하고,

체크 로직을 다양하게 적용할 수 있는 장점이 있습니다.

 

---

 

배열에 특정 값이 포함되어 있는지 여부를 체크하는 방법을 알아보았습니다.