[Javascript] 배열(Array)의 요소들이 특정 조건에 맞는 지 확인하는 방법 (some, every)

어느 언어든 배열(Array) 문법이 존재합니다. 자바스크립트에서도 배열 문법을 당연히 제공하고 있습니다.

 

흔히, 배열이라고 하면 아래와 같은 모습이겠죠.

var array = [1, 2, 3, 4, 5];

 

그런데, 이러한 배열의 요소들 중에서 어떠한 조건에 부합하는지, 아닌 지를 확인하려면 어떻게 해야 할까요?

아주 간단하게 생각을 한다면, 아래와 같이 구현할 수 있을 것입니다.

var array = [1, 2, 3, 4, 5];
function haveNumberInArray(num, array) {
    for (idx in array) {
        console.log(array[idx])
        if (array[idx] === num) {
            return true;
        }
    }
    return false;
}
console.log(haveNumberInArray(1, array)); // true
console.log(haveNumberInArray(6, array)); // false

아주 간단하게 짜긴 했지만, 위와 같은 기능의 함수는 9줄이나 되어버렸습니다.

 

자바스크립트에서는 이러한 기능을 단 3줄만으로 구현할 수 있도록 함수를 제공하고 있습니다. 때문에, 위와 같은 예제보다 경제적으로 코드를 구현할 수 있겠죠?

 

사실, 이번 포스팅은 위와 같은 경우에 사용할 수 있는 함수를 정리하려고, 위와 같은 서론을 적고 있었습니다.

 

 

바로, some(), every() 함수입니다. 이 함수는 배열(Array)에 사용하는 함수입니다. 그럼, 바로 예제와 함께 각각의 함수를 설명하도록 하겠습니다.

 

some() - 특정 조건이 배열의 요소 중 하나라도 맞는 지를 확인할 때 사용하는 함수.

먼저, some() 함수에 대해서 설명하도록 하겠습니다.

some() 함수는 배열의 요소 중, 하나라도 특정 조건에 부합하는 경우에 true를 리턴하고, 부합하지 않는다면 false를 리턴합니다.

 

먼저, some() 함수의 문법은 다음과 같습니다.

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

callback - 함수라고 생각하시면 되겠습니다. element, index, array, thisArg를 인자로 가지는 함수로, 조건문을 만들어서 참 또는 거짓 값을 반환하는 함수입니다.

  element - 배열의 요소 중에서 현재 처리되고 있는 요소입니다.

  index - 배열에서 처리되고 있는 현재 요소의 index값입니다. 이 값은 옵션이므로, 없어도 상관없습니다.

  array - 배열을 가리킵니다. 이 값은 옵션이므로, 없어도 상관없습니다.

thisArg - callback이 실행될 때, callback의 this 값으로 사용됩니다.

 

간단한 예제로 이해하도록 해볼까요? 아래 예제는 배열의 요소 중, 홀수가 있는지 판단하는 함수입니다.

var array = [1, 2, 3, 4, 5];
var odd = function(element) {
  return (element % 2 === 1);
};
console.log(array.some(odd)); // true

처음에 소개했던 예제와 위의 예제의 기능이 다르지만, 코드를 간단하게 구현할 수 있다는 것은 느낄 수 있겠죠?

때문에, 배열의 값들이 특정 조건에 부합하는지, 아닌 지를 판단할 때 굉장히 유용하게 사용할 수 있습니다.

 

아래와 같은 방법으로도 사용할 수 있습니다.

1. 배열 형식을 따로 가지지 않고, 바로 some 함수를 이용하는 방법.

- 아래 예제는 문자열 배열을 some 함수를 이용하여, StringLength 함수에서 문자열의 길이가 6이 넘는 것이 있는지 확인합니다. 당연히, true 값을 반환합니다.

function StringLength(element) {
    return (element.length > 6);
}
console.log(['apple', 'banana', 'mango', 'watermelon', 'melon', 'grape'].some(StringLength)); // true

2. 화살표 함수를 이용한 배열 요소 조건 확인.

- 1번에서 사용한 방법을 더 줄여서 표현할 수 있는데, 이때, 화살표(arrow) 함수라는 것을 사용합니다. 바로 예제를 보시면, 이해하시기 편하실 거예요.

console.log(['apple', 'banana', 'mango', 'watermelon', 'melon', 'grape'].some(x => x.length > 6));

위의 예제와 별 차이는 없지만, some 안이 차이가 나는 것을 확인할 수 있습니다.

설명하자면, 배열에서 값을 하나씩 가져와서 x에 넣고, 이 값을 x.length > 6 조건에 확인하는 것입니다. 따라서, 하나라도 조건에 맞는 값이 나온다면 true 값을 반환하겠죠.

 

3. 배열에 주어진 값이 존재하는 지를 확인하는 예제.

- 아래 예제는 배열과 배열에 값이 있는지 확인할 값을 함수에 넣어서, 조건에 부합하는지 확인하는 함수입니다.

이 함수를 이용하면, 특정 값이 조건에 부합하는 지를 확인할 수 있겠죠.

function checkInNumber1(array, value) {
    return array.some(function(arrayValue) {
        return value === arrayValue;
    });
}
var numbers = ['1', '3', '123', '5', '6'];
console.log(checkInNumber1(numbers, '3')); // true
console.log(checkInNumber1(numbers, '4')); // false

이처럼, checkInNumber1이라는 함수는 배열과 특정 값을 받아서, some() 함수를 이용하여 array에서 값을 하나씩 arrayValue에 집어넣습니다.

이후, arrayValue와 value 값이 같은 지를 확인합니다. 그리고, 값이 같다면 true 값을 반환하고, 다르다면 false 값을 반환하는 방식입니다.

 

4. 3번 방식에서 화살표(arrow) 함수를 이용하는 방법.

- 3번 방식을 더욱 간단하게 만들 수 있습니다. 바로, 화살표 함수를 이용하는 방법입니다. 화살표 함수는 2번 방식에서 설명하였으므로, 아래 예제처럼 사용할 수 있다는 정도로만 이해하시면 좋을 것 같습니다.

function checkInNumber2(array, value) {
    return array.some(arrayValue => value === arrayValue);
}
console.log(checkInNumber2(numbers, '3'));
console.log(checkInNumber2(numbers, '4'));

 

 

every() - 특정 조건이 배열의 모든 요소와 부합하는지 확인할 때 사용하는 함수.

some() 함수에 이어서 every() 함수를 설명하도록 하겠습니다. every() 함수도 굉장히 비슷하지만, 용도가 약간 다르다고 할 수 있습니다.

every() 함수는 주어진 배열(array)의 요소를 특정 조건으로 확인하여, 모든 요소가 조건에 부합하는 지를 판단하고 true 또는 false 값을 반환합니다.

 

먼저, every 함수의 문법은 아래와 같습니다.

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

각 요소의 설명은 some과 같으므로, some의 내용을 참고해주세요.

다만, 차이점은 배열의 요소가 특정 조건에 모두 부합해야 true 값을 반환하고, 하나라도 부합하지 않는다면 false 값을 반환합니다.

 

그럼, 글로는 이해하는 데 한계가 있으니, 바로 예제를 보도록 하겠습니다.

아래 예제는 array1 배열의 값이 5보다 큰 지를 확인하는 함수입니다.

function test1(value) {
    return value > 5;
}
  
var array1 = [4, 5, 6, 7, 8];
console.log(array1.every(test1)); // false

array1에는 4, 5 값이 있기 때문에 6, 7, 8이 조건에 부합한다고 하더라도, every() 함수는 false를 반환합니다.

 

every()와 some()의 차이를 이해하시겠죠? 혹시나, 이해가 덜 되실 수도 있으므로, 몇 가지 예제를 덧붙이도록 하겠습니다.

 

1. 배열 형식을 따로 가지지 않고, 바로 every 함수를 이용하는 방법.

- 위에서 some() 함수를 사용했을 때는 'banana' 때문에 true 값을 반환했지만, 아래처럼 every() 함수를 사용했을 경우에는 false 값을 반환하는 것을 확인할 수 있습니다.

function StringLength(element) {
    return (element.length > 5);
}
console.log(['apple', 'banana', 'mango', 'melon', 'grape'].every(StringLength)); // false

 

2. 화살표 함수를 이용한 배열 요소 조건 확인.

- 1번 방법에서 화살표(arrow) 함수를 사용하여, 더욱 간단하게 표현한 방법입니다.

console.log(['apple', 'banana', 'mango', 'melon', 'grape'].every(x => x.length > 6)); // false

 

이상으로 자바스크립트 Array에서 사용할 수 있는 some, every 함수에 대한 정리를 마치겠습니다.