결론
우선 결론을 적어둘테니, 샘플코드 안볼 사람은 아래 3개만 기억하자.
1. 배열을 리턴받아야 하는 상황(리턴값이 여러개인 경우)에는 Filter함수를 사용한다.
2. 단일 데이터를 리턴 받아야 하는 상황(리턴값이 1개인 경우)에는 Find함수를 사용한다.
3. 단 대용량 데이터가 아닌 경우에는 Filter, Find 함수간의 성능 차이는 거의 없다. 오히려 Filter가 빠르다.
(웹브라우저 엔진이나 성능에 따라 결과값은 바뀔 수 있다.)
4. 개발시 실데이터로 양쪽의 함수를 테스트 해보고 성능이 빠른 쪽을 사용하도록 한다.(중요!!!)
Find함수와 Filter함수는 어떻게 다를까?
Find함수과 Filter함수 양쪽 다 Array를 지원하는 javascript 내장함수로 조건에 맞는 값을 리턴해준다.
단 다음과 같은 차이점이 있다.
차이점1. Find함수는 단일값(Object, String...)을, Filter함수는 배열(Array)을 리턴해준다.
차이점2. Find함수는 조건에 맞는 첫번째 값을 리턴한다. Filter함수는 조건에 맞는 모든 값을 배열에 담아 리턴한다.
차이점3. Find함수는 조건에 맞으면 그 즉시 수행을 멈추지만, Filter함수는 조건에 맞더라도 모든 배열을 순회한다.
차이점3이 중요한데, 성능에서 차이가 생기기 때문이다.
그럼 이제 샘플코드를 보도록 하자.
샘플코드1은 faker.js 라이브러리를 사용해서 100만건의 데이터로 테스트하고(faker.js사건에 대해서도 쓰고 싶네..)
샘플코드2는 API통신을 통해 5000건의 데이터를 가져와 테스트했다.
샘플코드1 (100만건 데이터)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js"></script>
<script>
const dataList = [];
for (var i = 0; i < 1000000; i++) {
dataList.push({
id: i,
value: faker.commerce.product(),
});
}
console.time();
dataList.find((item) => {
return item.id == 541543;
});
console.timeEnd();
//결과=> default: 4.783935546875 ms
console.time();
dataList.filter((item) => {
return item.id == 541543;
});
conconsole.timeEnd();
//결과=> default: 9.56689453125 ms
</script>
</head>
<body></body>
</html>
샘플코드2 (5000건 데이터)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
fetch("https://jsonplaceholder.typicode.com/photos")
.then((response) => response.json())
.then((json) => {
console.time();
const temp1 = json.find((item) => item.id === "3512");
console.timeEnd();
//결과=> default: 0.1220703125 ms
console.time();
const temp2 = json.filter((item) => item.id === "3512");
console.timeEnd();
//결과=> default: 0.10791015625 ms
});
</script>
</head>
<body></body>
</html>
결과를 보면 조금 이상하다...
find함수는 조건에 맞는 값을 찾으면 즉시 로직을 중단하고 해당 값을 리턴하니 무조건 빠르다고 예상했지만
5000건 정도의 적은 데이터에서는 오히려 filter함수가 더 빠른 걸 확인할 수 있다..
하지만 100만건이 넘어가는 대용량 데이터에서는 오히려 filter함수가 2배이상 빠르다...
그래서 왜 이런 결과가 나왔을까. 생각을 해보았는데
1. 100만건이 넘어가는 대용량 데이터는 값을 찾는 순간, 리턴하는 Find가 당연히 빠르다. Filter함수는 값을 찾더라도
계속 배열을 순회하는 특성상 Find는 끝난 시점에도 계속 배열을 순회하기 때문이다.
2. 작은 배열의 경우에는 Filter함수가 매우 빠른 속도로 배열을 순회할 수 있기 때문에 성능차이가 미미하거나
더 빠를 수 있다. (Filter함수와 Find함수가 배열을 순회하는 로직이 다른걸까? 자세히는 모르겠다..)
'FrontEnd > JavaScript' 카테고리의 다른 글
| [JS] 프론트엔드에서 Node의 crypto 모듈을 이용한 암호화 및 복호화 (0) | 2024.02.21 |
|---|---|
| [JS] dom-to-image.js 사용 방법 및 사용한 이유에 대한 정리 ( vs html2canvas ) : html to image (2) | 2024.02.01 |
| [JS] map(), foreach(), (for...of)에서의 await에 대한 정리... ( map()/forEach VS Promise.all 어떤 걸 사용할까?) (0) | 2024.01.27 |
| [JS] javascript에서 로직 실행시간을 측정하는 방법 ( feat. console.time 함수 사용 ) (0) | 2024.01.27 |
| [JS] 프로미스(Promise) 객체를 생성하는 여러가지 방법 (0) | 2024.01.27 |
