두개의 배열의 값을 비교할때, 조금 더 나은방법 Array.filter (in) Array.indexOf

배열메서드 filter, indexOf 를 사용하여 조금더 발전적인 방법으로 비교하기

1. 메서드 준비

filter : 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

         true를 반환하면 요소를 유지하고, false를 반환하면 버립니다. 다음 세 가지 매개변수를 받습니다.

         주의할 점은 map() 과 같은 배열 메서드의 경우 내부 함수의 리턴값으로 '문자, 숫자, 배열' 등 다양한 타입이 가능하지만

         filter는 오직 boolean 타입만 반환해야 한다는 점 입니다.

 

indexOf : 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환합니다.

 

2. 몸풀기

중복되지 않는 값 가져오기: array1 배열에서 array2 배열을 비교했을 때 중복되지 않는 값 가져오기 (차집합 x - y)

var array1 = ['apples', 'grapes', 'oranges', 'banana'];
var array2 = ['potato', 'pears', 'grapes', 'berries', 'apples', 'oranges'];

var intersection = array1.filter(function(e) {
	let isEmpty = false;
  if( array2.indexOf(e) === -1 ) isEmpty = true;
  
  return isEmpty;
});

console.log(intersection); // banana

array1 에 있는 원소들을 filter 메서드로 순회한다.

필터 내부에 isEmpty 기본값은 false로 적용하여, 중복된 값을 찾기 전까지는 true를 리턴하지 않도록 해둔다.
array2 의 indexOf로 한개씩 비교한다, 중복인 경우 발견한 값의 인덱스를 반환하므로 0을 포함한 양수일 것이다.

중복되지 않는 값인 경우 결과가 -1 이므로 isEmpty를 true로 바꿔 준다

이제 return으로 반환된 true에 해당하는 array1의 원소가 반환되어 모아지며 intersection에 저장된다.

 

중복 제거하기: array3 배열에서 중복되는 값을 제거한다

var array3 = ['potato', 'potato', 'oranges', 'banana', 'pears', 'grapes', 'grapes', 'berries', 'apples', 'oranges'];

var distinct = array3.filter(function(element, index, array) {
	let isFirst = false;
  if( array3.indexOf(element) === index ) isFirst = true;
  
  return isFirst;
});

console.log(distinct); // ["potato","oranges","banana","pears","grapes","berries","apples"]

array3 에 있는 원소들을 filter 메서드로 순회한다.

필터 내부에 isFirst 기본값은 false로 적용하여, 중복된 값을 찾기 전까지는 true를 리턴하지 않도록 해둔다.
array3 에서 리턴되는 array를 indexOf로 원소와 순서대로 한개씩 비교한다

indexOf의 특징 중 하나는 발견한 첫번째 인덱스를 반환하므로, 첫번째로 발견한 원소들은 isFirst = true로 감지하여 저장하고

뒤이어 중복해서 감지하는 원소들은 indexOf에서 조건식으로 판별하는 index와 순서가 맞지 않아 isFirst = false 된다.

첫번째 인덱스로만 가져가기 때문에 순차적으로 선회하는 인덱스와 비교하면 스택 넘버가 맞지 않아서 그렇다.

결과적으로 처음 찾은 index 값들만 true로 가져와지고 나머지는 인덱스가 맞지않아 false로 담지 않는다.

distinct 에 중복되지 않는 원소들만 모아져서 반환하게 된다.

 

3. 화살표 함수(arrow function) 사용하기

* 아래의 3가지 특징을 이해하기

1. 화살표 함수는 인자가 한 개일 경우 소괄호를 생략할 수 있다.
2. 함수 처리 표현에 코드블럭{ }을 생략할 수 있다.
3. 코드블럭{}을 생략하는 경우, return을 적지 않아도 함수의 결과값을 자동으로 return 처리해준다.

중복되지 않는 값 가져오기: array1 배열에서 array2 배열을 비교했을 때 중복되지 않는 값 가져오기 (차집합 x - y)

var array1 = ['apples', 'grapes', 'oranges', 'banana']; 
var array2 = ['potato', 'pears', 'grapes', 'berries', 'apples', 'oranges']; 
var intersection = array1.filter( value => array2.indexOf(value) === -1); 
console.log(intersection); // banana

 

중복 제거하기: array3 배열에서 중복되는 값을 제거한다

var array3 = ['potato', 'potato', 'oranges', 'banana', 'pears', 'grapes', 'grapes', 'berries', 'apples', 'oranges'];

var distinct = array3.filter((e, i, array) => array.indexOf(e) === i);

// 또는 아래 식도 같은 표현이기는 하다, 그러나 함수에서 제공하는 파라메터로 은닉하기에는 윗 문장을 추천한다.
// var distinct = array3.filter((e, i) => array3.indexOf(e) === i);

console.log(distinct); // ["potato","oranges","banana","pears","grapes","berries","apples"]