[javascript] 배열에서 중복값 제거 해보기

쇼핑몰을 만들어 보고 있는데, 중복되는 id가 장바구니에 포함되는 것이 너무 거슬렸다. 그래서 이를 제거하는 방법을 알아보니까 3가지나 있더라, 그 중에서 제일 어려워 보였지만 알아두면 다양한 곳에 써먹을 만한 것 하나만 정리해 놓을 생각이다.

 

 

let arr = [1,2,2,2,2,4,4,5,6];


let newarr = arr.filter((arrEl,i)=>{
    return arr.indexOf(arrEl) === i
  }
);

console.log(newarr);

 

우선 indexof() 메서드는  배열.indexOf(찾고자하는 배열의 요소) 로 입력하게 되면, 찾고자 하는 배열의 요소가 위치한 인덱스 번호를 반환한다.

 

즉,  배열 [1,2,2,2,4,4,5,6].indexOf(5) 라고 했을 때 '5' 라는 요소가 위치한 인덱스 번호 '6' 을 돌려주는 것이다. 그리고 이 메서드는 중복된 번호가 여러 개 가 있을 경우(ex. 4,4,4,...) 최초로 등장하는 번호의 인덱스만 반환해주고, 그 뒤 중복요소는 무시하는 특성이 있다.

 

다만 이것만 사용 한다면, 배열을 순회하지 않기 때문에 해당하는 숫자만 반환하고 메서드를 종료하므로,

 

배열의 전체 요소를 순회하면서 조건에 해당하는 요소의 값만 배열로 만들어 반환해주는 filter() 메서드를 함께 사용한다.

참고로, filter() 의 첫번째 파라미터는 배열의 각 요소를 저장하고, 두 번째 파라미터는 index 를 저장한다(예를 들어, 배열의 길이가 6이라면, index 번호 또한 그 길이에 맞게 부여된다.)

 

즉, 아래와 같이 배열을 순회하면서 '3'에 해당하는 요소만 제외하고 다시 배열로 반환해주는 것이다.

let arr = [1,2,3,4,5];

let newArr = arr.filter((el,i)=>{
    reuturn el != 3
   }
  );
  
  console.log(newArr) // 출력결과 [1,2,4,5]

  

이러한 원리에 따라서 중복값을 제거한다면 다음과 같은 과정을 거친다. 본래 indexOf() 메서드는 순회하는 특성이 없지만, filter() 메서드는 배열의 모든 요소를 순회하는(전체를 살펴보는) 특성이 있기 때문에, indexOf를 반환되는 메서드로 활용하면 배열의 전체 요소를 각각 비교하면서 중복되는 배열의 요소가 무엇인지 찾을 수 있게 된다.

 

let arr = [1,2,2,2,2,4,4,5,6];

 // arrEl 은 배열 [ ]을 제거하고 1,2,2,2,2,4,4,5,6  이 차례대로 저장된다.
 // index 는 배열의 길이 만큼 저장된다.(길이가 6이라면 0,1,2,3,4,5 가 순차적으로 저장.)

let newarr = arr.filter((arrEl,index)=>{ 
    
    /*배열 arr에서 arrEl의 각 번호가 처음으로 나타나는 인덱스 번호를 찾고, index와 비교해서 
 일치하는 인덱스의 값만 filter() 메서드가 골라서 배열 형태로 return 해준다. */
  
  return arr.indexOf(arrEl) === index   
  }                                
);

console.log(newarr);  //출력결과 [1,2,4,5,6]

 

(괜히 코드블록을 건드려서 왠지 더 알아보기 힘든 느낌이다. 향후 좀 괜찮은 것으로 수정해야 겠다..)