[JavaScript] 자바스크립트 some 메서드 이해하기

some 메서드란?

some 메서드는 배열의 요소들중 특정 조건을 만족하는 요소가 하나 이상 있는지를 확인하는 배열(Array)의 메서드다.

문법은 forEach, map, filter와 거의 비슷하게 첫 번째 파라미터가 콜백 함수를 전달받지만, 앞의 메서드들과는 다르게 boolean 타입의 값을 리턴한다.

 

문법

const values = [1, 2, 3, 4, 5, 6];

const hasOver5 = values.some((currentElement, index, currentArray) => {
    console.log(`요소: ${currentElement}`);
    console.log(`index: ${index}`);
    console.log(currentArray);
      
    return currentElement > 5;
});

console.log('hasOver5');
console.log(hasOver5); // ?

문법은 filter 메서드와 거의 똑같다. some 메서드 또한 filter 메서드와 같이 첫 번째 파라미터로 전달해되는 함수의 리턴 값이 중요한데, filter 메서드와 마찬가지로  마지막 리턴 값을 boolean 타입으로 평가한다.

다만, 한가지 다른 점은 이 평가를 토대로 true, 혹은 false를 리턴한다는 것이다.

 

독특한 점?

한 가지 독특한 점은 지금부터다. 위 예제 결과를 봐서는 잘 모르겠지만 some 은 그동안 살펴본 배열의 메서드와는 조금 다르게 동작한다.

앞서 설명한 some 메서드의 정의를 다시 한번 곱씹어보자.

some 메서드는 배열의 요소들중
특정 조건을 만족하는 요소가 하나 이상 있는지를 확인하는 
배열(Array)의 메서드다.

 

조금만 디테일 하면서도 약간 복잡하게 말하면 배열의 각 요소를 반복하면서 콜백 함수의 첫 번째 아규먼트(currentElement)로 배열의 요소를 넘겨줬을 때, 콜백 함수가 truthy를 리턴하게 되는 경우가 하나라도 있는지를 확인하는 메서드인 것이다.

지금 계속 하나 이상을 강조하고 있는데, 위 예시 코드에서 배열의 순서만 123456 에서 654321로 바꿔서 실행해보자.

const values = [6, 5, ,4, 3, 2, 1];

const hasOver5 = values.some((currentElement, index, currentArray) => {
    console.log(`요소: ${currentElement}`);
    console.log(`index: ${index}`);
    console.log(currentArray);
      
    return currentElement > 5;
});

console.log('hasOver5');
console.log(hasOver5); // true

hasOver5는 true 로 결과는 똑같다. 하지만 콘솔에 찍힌 반복 횟수가 단 한 번이다.

 

values의 첫 번째 요소인 6이 이미 주어진 콜백 함수의 truthy 리턴을 이뤄냈기 때문에 some은 ture 값으로 반복이 종료된 것이다.

기존에 공부한 forEach, map, filter와 다르게 독특한 점이 바로 이 부분이다.

some 은 배열의 요소 개수만큼 콜백 함수를 실행하지 않을 수도 있다.

이 부분은 상황에 따라 효율을 관리하는데 충분히 이용될 수 있을 것 같다.

 

참고

const values = [];

const hasOver5 = values.some((currentElement, index, currentArray) => {
    console.log(`요소: ${currentElement}`);
    console.log(`index: ${index}`);
    console.log(currentArray);
      
    return currentElement > 5;
});

console.log('hasOver5');
console.log(hasOver5); // ?

만약 요소가 아무것도 없는 빈 배열에서 some 메서드를 호출하면 어떻게 될까?

결과는 false, 그리고 콜백 함수는 한 번도 실행되지 않는다.

그렇다면 만약 undefined 나 null 요소가 들어가면 어떻게 될까?

values를 [null, undefined]로 바꿔서 실행해봤다.

결과는 false, 그리고 콜백 함수는 null 과 undefined 모두 요소로 인식해서 콜백함수는 2번 실행이 되었다.

그럼 마지막으로 요소 3개짜리 Array를 만들어서 실행하면 어떻게 될까?

const values = new Array(3);

const hasOver5 = values.some((currentElement, index, currentArray) => {
    console.log(`요소: ${currentElement}`);
    console.log(`index: ${index}`);
    console.log(currentArray);
      
    return currentElement > 5;
});

console.log('hasOver5');
console.log(hasOver5); 
console.log(values);
console.log(values.length);

결과는 false 그대로지만, 배열의 길이(values.length)가 분명히 3 임에도 불구하고 콜백 함수는 한 번도 실행되지 않았다.