[JavaScript] 중복 체크에 활용하면 좋은 indexOf()

개념

indexOf()

생긴 것부터 인덱스의 위치를 알려주는 것처럼 생긴 함수가 있다.

이름은 indexOf()로, String 타입과 Array 타입에서 파라미터안에 있는 특정 문자의 위치를 찾아주는 역할을 한다. 예를 들어, str.indexOf('가')라고 하면 str 변수 안에서 '가' 문자의 인덱스 위치를 반환해준다.

(Number 타입에서는 indexOf() 함수가 통하지 않으니 주의해야 한다.)

 

그냥 인덱스 위치만 알려주는 데 쓸모가 있냐라고 물어본다면, "매우!"라고 대답할 수 있다.

그 이유는 바로 indexOf() 함수를 통해 문자 혹은 배열에 특정 문자가 있는지 "체크"할 수 있기 때문이다.

 

let arr = ['가', '나', '다'];
arr.indexOf('가')  //  0
arr.indexOf('라')  //  -1

indexOf()의 파라미터 안의 문자가 해당 배열안에 없다면 결과값으로 -1을 반환한다.

위의 코드에서는 arr 배열에 '라'가 없기 때문에 결과값으로 -1을 반환했다.

 

있으면 0 이상의 값을 반환하고 없으면 -1을 반환한다는 것을 if문과 잘 활용한다면, 특정 문자가 있는 경우 특정 실행문을 실행시켜라는 식의 함수 또한 만들 수 있는 것이다.

 

lastIndexOf()

let str = '가나다가나다';
str.lastIndexOf('가');  //  3

lastIndexOf()는 IndexOf()의 리버스 버전이라고 생각하면 된다. 즉, 뒤에서 앞으로, 오른쪽에서 왼쪽으로 함수의 진행 방향이 바뀐 것이다. 이외에 indexOf()와 다른점은 없다.

위의 코드에서 str의 '가'가 원래 indexOf() 함수라면 결과값으로 0을 반환했겠지만, 오른쪽에서 왼쪽으로 반대로 진행 방향이 리버스돼서 결과값으로 3을 반환하게 되는 것이다.

 

문제

indexOf()를 활용하여 특정 배열 안의 숫자 5개를 무작위로 추출해라.
(단, 추출된 숫자끼리의 중복이 없어야 한다.)

let arr = [10, 20, 30, 40, 50];
let ran = [];

for (i = 0; i < arr.length; i++){
    let ranNum = Math.floor(Math.random() * 5);
    let arrNum = arr[ranNum];
    if (ran.indexOf(arrNum) === -1){  //  중복 체크
        ran.push(arrNum);
    } else {
        i--;
    }
}

document.write(ran);

먼저 arr은 추출할 특정 배열, ran은 추출한 결과가 있는 배열이라고 정의했다.

그다음 for문을 활용하여 배열 안의 값들을 추출했는데, ranNum은 Math.random()을 활용하여 랜덤 숫자를 추출하고 그 추출한 랜덤 숫자를 arr 배열의 인덱스 값으로 넣어 arr의 추출당할 문자를 arrNum으로 정의하였다.

 

여기까지 해도 arr 배열안의 숫자들이 추출은 된다. 하지만 중복체크를 안 했기 때문에 중복 숫자가 나오게 된다.

중복 숫자 추출을 방지하기 위해서 필요한 게 if문을 활용한 indexOf() 함수이다.

 

if문의 조건문인 ran.indexOf(arrNum) === -1을 한 이유는 '만약 ran 배열안에 추출할 문자가 존재하지 않으면 push(arrNum)을 하게 하고, 아니면 i--을 통해 다시 반복문을 돌려라'라는 중복 체크를 하기 위함이다.

 

이런 식으로 indexOf()의 -1 값을 잘 이용하기만 한다면, 배열 안에 특정 문자가 있는지 체크해볼 수 있고 중복 없는 숫자 또한 추출할 수 있게 되는 것이다.

 

2명의 이름을 물어보는 입력창을 띄워라.
(단, 두 번째 이름은 첫 번째 이름과 중복되면 안 된다.)

let name = [];

for (i = 0; i < 2; i++){
    let que = prompt('이름을 입력하시오.');
    if (name.indexOf(que) === -1){
        name.push(que);
    } else {
        alert('중복된 이름은 입력하실 수 없습니다.')
        i--;
    }
}

document.write(name);

두 명의 이름을 물어본 후, 만약 이름끼리의 중복이 있을 경우 알림창을 띄운 후 다시 물어보게 하는 방식의 코드이다. 역시 indexOf()의 -1 값을 활용하여 만들 수 있는 중복 체크의 간단한 코드이다.