배열 Array 에서 filter 사용해 중복된 값 제거하기

wecode 사전 스터디 레플릿 과제를 풀며 정리한 내용입니다.

아래 정의된 두가지 배열을 concat 메서드로 더하고, 중복된 값을 filter 메서드로 제거하는 과제입니다.

let pasta = ['tomato', 'basil', 'onion', 'chicken'];
let pizza = ['tomato', 'cheese', 'onion', 'olive', 'beef'];

위 배열을 concat 메서드로 합치고, menu 란 변수에 담습니다.

let menu = pasta.concat(pizza);

console.log(menu);//-> ["tomato", "basil", "onion", "chicken", "tomato", "cheese", "onion", "olive", "beef"]

콘솔을 찍어보면 중복된 요소가 들어간 배열을 확인할 수 있습니다. 이제 새로운 변수 menu2 에 filter 메서드로 중복을 제거한 배열을 담아보겠습니다. indexOf 는 해당 값의 인덱스 값을 반환합니다.

let menu2 = menu.filter((value, index)=>{
	return menu.indexOf(value) === index;
})

console.log(menu2);
//-> ["tomato", "basil", "onion", "chicken", "cheese", "olive", "beef"]

filter 는 배열의 요소를 하나씩 순회하며 filter 안의 콜백 함수를 실행합니다. 실행하면서 조건이 true 인 값만 리턴합니다. 위 함수의 조건은 index 값을 비교하는 것입니다. 0, 1, 2, 3.. 으로 증가하는 기존의 index 값과 value 값이 가진 index 값을 비교합니다. 중복된 값은 꾸준히 증가하는 index 값과 같지 않기 때문에 출력되지 않습니다. (중복된 tomato 의 index 값은 계속 0입니다.)

• 배열의 요소가 객체일 경우 filter 를 아래와 같이 사용할 수 있습니다. (참고영상)

const arr = [{id: 1, text:'1'}, {id: 2, text:'2'}]

// id 가 1이 아닌 객체 리턴하기

arr.filter(object => {
	return object.id !== 1;
})