JavaScript 배열 안에 특정한 값을 찾을 때 사용하기 좋은 find 메소드 (ES6)

 

우리는 작업을 하다보면 많은 값들을 찾고 그 상황에 맞게 값을 변경 또는 삭제를 한다.

 

ES5에서는 주로 Array.prototype.foreach(), Array.prototype.map(), Array.prototype.filter() 를 사용하여 특정 또는 전체 값에 대한 처리를 했다. 처리를 하는 도중 이 모든 함수는 한 배열 안에 있는 모든 데이터를 확인 한 후 변경 및 삭제를 한다.

하지만 이들의 단점 아닌 단점은 어떤 하나의 특정 값만 바꾸려고 하는데 모든 데이터를 확인 한다는 점이다. 배열이 작을 때는 속도 차이가 크게 없지만 배열의 데이터가 클 때 아무래도 모든 데이터를 확인하면서 처리하다 보니 속도가 낮아지는 현상을 볼 수 있다. 그래서 어떤 하나의 값만 찾아서 값을 변경 할 때 ES6에 나온 Array.prototype.find()라는 함수를 유용하게 사용중이다. 이에 대해서 알아보자.

 

Mozila에서는 Array.prototype.find()를 "주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환하며 값이 없을 때는 undefiend를 반환" 이라고 써져있으며, 아래와 같이 사용 가능하다.

만약 내가 [1, 2, 3, 4, 5] 라는 배열에 3 라는 숫자를 찾고 싶다고 했을 때 아래와 같이 사용할 수 있다. 

const arrayData = [1, 2, 3, 4, 5];

 

// filter 사용

arrayData.filter(dataNum => dataNum === 3);

// console.log() => [3]

// find 사용

arrayData.find(dataNum => dataNum === 3);

// console.log() => 3

// find를 사용하는데 찾는 값이 없을 때

arrayData.find(dataNum => dataNum === 9);

// console.log() => undefined

여기서 잠깐 ! 보셨는지 몰라도 반환 하는 데이터 타입이 틀리다.

Array.prototype.filter()는 반환 값이 Array이고, Array.prototype.find()는 반환 값이 해당하는 값 (Number)로 값을 반환하기 때문에 서로의 출력 값이 틀린 것이다.

 

이제 더 재밌는 실험을 해보자. 

만약 [1, 2, 3, 4, 5] 라는 배열에 3 라는 숫자를 찾고 싶다고 똑같이 가정한 후 count 라는 변수를 사용하여 얼마나 카운트 되는지 확인해보자 !

첫 번째로 Array.prototype.filter()를 사용 했을 때이다.

const arrayData = [1, 2, 3, 4, 5];

let count = 0;

// filter 사용

arrayData.filter(dataNum => {

    count++;

    return dataNum === 3;

});

 

// count 값

1

2

3

4

5

위에서 확인 할 수 있듯이 내가 찾고 싶은 값을 찾은 후에도 필요 없는 확인을 끝까지 한다. 즉 count는 arrayData의 length 만큼 출력이 된다. 

이제 두 번째로 Array.prototype.find()를 사용 했을 때이다.

const arrayData = [1, 2, 3, 4, 5];

let count = 0;

// find 사용

arrayData.find(dataNum => {

    count++;

    console.log(count);

    return dataNum === 3;

});

 

// count 값

1

2

3

Array.prototype.find()를 사용하면 필요한 값을 찾고 찾은 즉시 바로 빠져나온다. 이게 예제와 같이 적은 데이터를 처리할 때에는 속도 차이가 없겠지만 직접 몇가지 데이터를 측정해본 결과 큰 데이터를 처리할 때 확실한 속도 차이를 볼 수 있었다.

하지만 Array.prototype.find()를 지원하는 브라우저가 많지 않기 때문에 babel과 같은 transpiler를 이용하여 ES5 지원 코드로 변환하여 사용해야 한다. 그리고 단점은 하나가 아닌 여러개의 데이터를 찾을 때에는 활용하기 어려운 것 같다.

 

긴글 읽어주셔서 감사합니다.

오늘도 해피 코딩하세요 !