23-06-07 T.I.L filter와 find

문제설명

나는 filter()로 특정 데이터 값을 찾았다.

하지만 filter()의 성질이 특정 데이터를 찾는데 효율적이진 않다는 것을 깨달았다.

index가 100개가 있는 배열에서 3번째의 데이터를 찾고 싶다고 가정할 때

filter()는 3번째에 있는 데이터를 찾고나서도 100번째까지 데이터 비교를 한다.

이는 데이터의 량이 많을수록 시간복잡도 또한 증가하기 때문이다.

이를 방지하고자 다른 함수를 사용해서 같은 기능을 구현하고자 한다.

시도

튜터님께서 find() 함수를 한번 알아보라고 하셨다. 위의 문제점을 지적해주신 것도 튜터님이었다. 

find()함수에 대한 공부는 예전에 한번 해봤기 때문에 https://minker.tistory.com/23  내 블로그에 정리된 글을 다시 한번 찾아보았다. 

해결

 

find()는 데이터와 일치하는 첫번째 요소를 반환한다. api로 가져온 데이터의 id값은 같은 요소가 있을리 없다는 가정이 가능하기 때문에 filter()보다 훨씬 효율적인 코드가 될 것이다.

 const moviedata = rows.find(data => data.id == arr[1]);

 양식은 비슷하기 때문에 기존에 있던 filter자리에 find를 넣었다. 하지만 예상과는 다르게 그 어떤 데이터도 템플릿되지 않았다.

console.log(moviedata)와 오류 메세지의 결과를 보고 무엇이 잘못되었는지 깨달았다.

filter는 배열의 형태로 return한다. find는 object를 반환한다.

그리고 템플릿은 map()함수를 사용했다. map()은 기존 배열의 요소를 사용해 새로운 배열로 만드는 것

즉 find의 return이 object였기 때문에 오류가 난 것이다.

const movie1 = [moviedata]

그래서 그냥 object를 배열로 다시 할당하니 정상적으로 작동이 되었다.

알게된 점

filter()가 쓰이는 상황과 find()가 쓰이는 상황에 대한 회고가 가능했다.

시간복잡도에 대한 효율성이 find()가 더 좋다는 사실을 명확하게 깨달았다.

find()의 결과 값은 배열이 아니라 object라는 것을 다시한번 상기시켰다.