[JavaScript] 특정 값의 배열 위치(index) 찾기

배열에서 특정 값의 위치 index를 찾는 방법은 아래와 같은 메소드들이 활용된다.

1. indexOf()
2. lastIndexOf()
3. includes()
4. findIndex()

특정 조건을 모두 만족하는 inde를 찾는 방법은 아래와 같다.

1. 반복문
2. map()과 filter() 조합
3. reduce()

---

특정값의 배열 내 위치 찾기

1. indexOf()

str.indexOf(searchValue[, fromIndex])

• 파라미터
  • searchValue : 찾으려는 값
  • fromIndex : 검색을 시작할 index, 입력하지 않으면 0부터 검색 시작 (*optional)
• 리턴값
  • 배열에서 searchElement와 값과 정확하게 일치하는 첫 번째 element의 index를 반환한다.
  • 찾으려는 값이 배열에 없으면 아래 예시 코드와 같이 -1을 반환한다.
  • fromIndex를 파라미터로 전달하면, 아래 예시 코드와 같이 fromIndex부터 값을 찾는다.

let str = [1, 2, 'a', 'b', 5, 6, 2, 8];

let search1 = str.indexOf('a'); //2
let search2 = str.indexOf(3); //-1 (배열 내 없는 문자열이므로 -1 반환)
let search3 = str.indexOf(2, 4); //6 (배열 내 4번째 인덱스인 5 이후에 만난 2의 인덱스 반환)

2. lastIndexOf()

str.lastIndexOf(searchValue[, fromIndex])

• 파라미터
  • searchValue : 찾으려는 값
  • fromIndex : 검색을 시작할 index, 입력하지 않으면 -1부터 검색 시작 (*optional)
• 리턴값
  • 배열에서 searchElement와 값과 정확하게 일치하는 마지막 element의 index를 반환한다.
  • 찾으려는 값이 배열에 없으면 아래 예시 코드와 같이 -1을 반환한다.
  • fromIndex를 파라미터로 전달하지않으면 배열의 가장 마지막 부터 (배열의 길이 -1) 역방향으로 배열을 탐색한다. fromIndex를 전달하면, fromIndex부터 역방향으로(끝에서부터) index값을 줄여나가며 serchElement와 첫 번째로 같은 값을 가지는 Index를 반환한다.

let str = [1, 2, 'a', 'b', 5, 6, 2, 'a'];

let search1 = str.lastIndexOf('a'); //7
let search2 = str.lastIndexOf(3); //-1 (배열 내 없는 문자열이므로 -1 반환)
let search3 = str.lastIndexOf(2, 4); //1 (배열 내 끝에서부터 4번째 인덱스인 'b' 이후에 만난 2의 인덱스 반환)

3.  includes() 

str.includes(searchValue[, fromIndex])

• 파라미터
  • searchValue : 찾으려는 값
  • fromIndex : 검색을 시작할 index, 입력하지 않으면 0부터 검색 시작 (*optional)
• 리턴값
  • 배열에서 searchElement와 값과 일치하는 요소를 발견한 경우 즉시 true를 반환한다.
  • 모든 요소에 대한 값이 불일치할 경우 false를 반환한다.
  • 빈배열에서 호출하면 false를 반환한다.

let str = [1, 2, 'a', 'b', 5, 6, 'a'];
let empty = [];

let search1 = str.includes('a'); //true
let search2 = str.includes(2, 4); //false (검색값을 4로 설정했으므로 4번째 이후에는 2라는 값이 없으므로 false 반환)
let search3 = str.includes(7); //false (배열 내 없는 값이므로 false 반환)
let search4 = empty.includes(); //false (빈배열에서 호출하면 false 반환)

4. findIndex()

str.findIndex(callback(currentValue[, currentIndex[,array]])[,thisArg])

• 파라미터
  • callback : 원하는 값을 발견할 때까지 배열의 각 요소에 대해 실행하는 함수이다.
    • 현재 값 (currentValue)
      - 현재 처리할 요소
    • 현재 인덱스 (currentIndex) - optional
      - 현재 처리할 요소의 인덱스
      
    • array(array/src) - optional
      - findIndex()가 호출된 배열/원본 배열
  • thisArg : callback 함수를 실행할 때 사용할 선택적 객체이다. thisArg 인수는 선택 항목인데, thisArg 인수를 생략하면 findIndex()함수는 undefined 값을 사용 (*optional)
• 리턴값
  • 배열에서 callback 함수에 따른 truthy 값에 해당하는 요소를 발견할 때까지 배열의 모든 요소에 대callback 함수를 실행하고 값과 일치하는 요소를 발견한 즉시 발견한 배열의 index를 반환한다. 모든 요소에 대한 값이 불일치할 경우 -1를 반환한다.
  • findIndex()는 callback 함수를 만족하는 값이 여러개 있어도 모든 요소를 가져오지 않는다. 왼쪽부터 값을 찾으며 만족하는 첫 번째(하나의) 요소만 반환하고 함수는 종료된다. 

let str = [1, 2, 'a', 'b', 5, 2, 6, 'a'];

let search1 = str.findIndex(str => str === 6); //6
let search2 = str.findIndex(str => str === 9); //-1 (배열 내 없는 값이므로 -1반환)
let search3 = str.findIndex((num) => num < 10); //0 (배열 내 10보다 작은 수는 총 5개이지만 왼쪽부터 함수를 실행하며 만난 가장 첫 번째 충족하는 값의 index만 반환)

---

특정 조건을 만족하는 모든 값의 배열 내 위치 찾기

1. 반복문

특정 조건을 만족하는 요소가 아닌 왼쪽부터 평가를 진행하며 만난 첫 번째 요소들만 가져오는 메소드들의 단점을 보완하고 만족하는 모든 값을 가져오기 위해서는 반복문을 이용할 수 있다.

 

[💡특정 조건을 만족하는 모든 인덱스를 가져오는 방법]

1. 빈 배열을 생성한다.
2. 배열을 순회하며 특정 조건을 만족하면, 빈 배열에 인덱스를 추가한다.

let str = [1, 2, 'a', 'b', 5, 2, 6, 'a'];
let findIndexArray = []; //특정 조건들을 만족하는 요소들의 인덱스를 담을 빈 배열 생성

for(index = 0; index < str.length; index++) {
  if(str[index] < 10) {
    findIndexArray.push(index);
  }
}

console.log(findIndexArray); //[0,1,4,5,6]

위 예제는 반복문을 사용하여 배열의 요소가 특정 조건을 만족하는 경우 인덱스를 새로운 배열에 추가하는 예제이다.

2. map()과 filter()

map()과 filter()을 조합하여 특정 조건을 만족하는 모든 인덱스를 가져올 수 있다.

 

[💡특정 조건을 만족하는 모든 인덱스를 가져오는 방법]

1. 배열에 map()을 호출해서 특정 조건을 만족하면 index를 반환하고, 그렇지 않으면 -1을 반환하도록 한다.
2. map() 메소드 결과에 filter() 메소드를 사용하여 -1이 아닌 요소만 필터링 한다.

let str = [1, 2, 'a', 'b', 5, 2, 6, 'a'];
let findIndexArray = 
    str.map((item,index) => {
      if(item<10) return index;
      else return -1;
    })
  .filter((item) => item !== -1);

console.log(findIndexArray); //[0,1,4,5,6]

위 예제는 map()메소드를 을 사용하여 배열의 요소가 특정 조건을 만족하는 경우 인덱스를 반환하고, 그렇지 않을 시 -1을 반환하도록 한 후 필터를 통해 -1 값을 걸러서 특정 조건에 만족하는 모든 요소들의 위치를 새로 반환한 예제이다.

3. reduce()

reduce()를 이용해서 특정 조건을 만족하는 모든 인덱스를 가져올 수 있다.

 

[💡특정 조건을 만족하는 모든 인덱스를 가져오는 방법]

1. 배열에 배열에 reduce() 메서드를 호출하여 배열을 순회하며, 누적 값(arr)을 빈 배열로 초기화한다.
2. reduce() 메서드의 콜백 함수에서 배열의 요소가 특정 조건을 만족하면, 누적 값(arr)에 현재 인덱스를 추가 후 반환한다.
3. 배열의 순회가 끝나면, reduce() 메서드는 최종 누적 값(arr)을 반환한다.

let str = [1, 2, 'a', 'b', 5, 2, 6, 'a'];
const findIndexArray = str.reduce((arr, item, index) => {
  // 배열의 요소가 특정 조건을 만족하면 누적 값(arr)에 인덱스를 추가합니다.
  if(item < 10) { 
    arr.push(index);
  }
  return arr;
}, []); // 누적 값(arr)의 초기값을 빈 배열로 설정합니다.

console.log(findIndexArray); //[0,1,4,5,6]