중복된 작성자 이름을 걸러내는 코드 이해하기

const authrUnique = blogs && (blogs.filter((character, idx, arr) => {
        return arr.findIndex(item => item.author === character.author) === idx
    }));

이 코드가 어찌나 어렵던지 끝까지 이해할려고 노력했다.

이해한게 아까우니 기록!

 

이 배열을 filter 메소드를 이용하여 중복된 작성자 이름을 걸러내는 작업을 진행한다.

 

filter 메소드는 배열 내의 모든 요소에 대해 주어진 함수를 실행하고, 함수의 결과값이 true인 요소만을 새로운 배열로 반환한다.

이 때, filter 메소드에 전달되는 함수의 매개변수로는 세 가지가 있다.

첫 번째 매개변수는 배열의 각 요소이며, 두 번째 매개변수는 현재 요소의 인덱스, 세 번째 매개변수는 원본 배열 자체입니다.

 

따라서, 이 filter 함수 내부에서는 arr.findIndex(item => item.author === character.author) === idx 라는 조건식을 이용하여 중복된 작성자 이름을 걸러낸다.

이 조건식은 현재 요소의 작성자 이름이 원본 배열에서 처음으로 등장하는 인덱스와 현재 요소의 인덱스가 일치하는지를 판단하는 것이다.

일치한다면 중복된 요소가 아니므로 true를 반환하여 새로운 배열에 포함된다.

일치하지 않는다면, 중복된 요소가 되므로 false를 반환하여 새로운 배열에 포함되지 않는다.

 

결과적으로 authrUnique 변수에는 중복되지 않은 작성자 이름이 담긴 배열이 저장된다.

이 배열은 select 컴포넌트의 uniqueArr 속성에 할당되어 중복된 작성자 이름이 제외된 새로운 select 컴포넌트가 생성된다.