오늘은 룡

자바스크립트 some(), indexOf(), lastIndexOf() 을 이용한 배열 중복 체크

화면단에서 유효성체크 작업중 배열에 값이 중복 값이 들어있는지 확인해야할 일이 생겼다.
정통적인 방법인 for문 돌려 체크하는 방법도 있지만, 이제 조금 세련된 방법으로 중복체크를 해보자

언제까지 for문만 돌릴껀가!!

일단 3가지 자바스크립트 함수에 대해 알아야 한다. 

1. some() 함수 

array.some(function(currentValue, index, arr), thisValue)

/*예시*/
const ages = [3, 10, 18, 20];
function checkAdult(age) {
  return age >= 18;
}
ages.some(checkAdult)   // Returns true

some() 함수는 callback이 참을 반환하는 요소를 찾을 때까지 배열에 있는 각 요소에 대해 한 번씩 callback 함수를 실행하여, 해당하는 요소를 발견한 경우 즉시 true를 반환하는 함수 입니다. 찾지 못하면 false 를 반환 합니다. 

https://www.w3schools.com/jsref/jsref_some.asp

2. indexOf()

array.indexOf(item, start)

/*예시*/
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.indexOf("Apple")   // Returns 2

indexOf() 함수는 배열 안에서 찾으려는 값과 정확하게 일치 하는 '첫번째' 값의 index를 반환 합니다. 

https://www.w3schools.com/jsref/jsref_indexof_array.asp

3. lastIndexOf() 

array.lastIndexOf(item, start)

/*예시*/
const fruits = ["Apple", "Orange", "Apple", "Mango"];
fruits.lastIndexOf("Apple") // Returns 2

lastIndexOf() 함수는 배열 안에서 찾으려는 값과 정확하게 일치 하는 '마지막' 값의 index를 반환 합니다. 

https://www.w3schools.com/jsref/jsref_lastindexof_array.asp

이 세 가지 함수를 조합하면 배열의 중복 값 여부를 체크할 수 있습니다.

var arr = ['a', 'b', 'c', 'a'];

function isDup(arr)  {
  return arr.some(function(x) {
    return arr.indexOf(x) !== arr.lastIndexOf(x);
  });  
}

var result = isDup(arr);

document.writeln(result);

1. some() 함수로 배열 arr의 값을 순서대로 callback 함수로 전달 하여 실행 arr.some(function(x) {});

2. 배열에서 x값의 index를 indexOf() 와 lastIndexOf() 로 확인 하여 같지 않으면 true 리턴 

   return arr.indexOf(x) !== arr.lastIndexOf(x);

   배열의 x값의 중복이 없다면 두 index 값은 동일 : false

                     중복이 있다면 두 index 값은 다름 : true

3.  some() 함수의 callback 함수는 중복이 존재하면 true를 리턴하고, 중복이 존재하지 않으면 false를 리턴

some() 함수를 이용하면 for문을 돌려서 체크 하는것보다 더 깔끔하고 세련되게 코드를 짤수 있다.