[Array] JS - findIndex() 메서드 - 맨처음 조건 충족/일치 배열값 색인번호 찾기 (= findIndex메서드 = 파인드인덱스메서드)

1. findIndex() 예제 - 15 이상인 첫번째 일치요소 색인번호 찾기
2. findIndex() 정의
3. findIndex() 구문
4. findIndex() 예제 - 입력값보다 큰 첫번째 일치요소 색인번호 찾기

findIndex() 예제 - 15 이상인 첫번째 일치요소 색인번호 찾기 

 

<button onclick="homzzang()">클릭</button>

<p id="demo"></p>

<script>

var num = [5, 10, 15, 20];

function checkNum(num) {

  return num >= 15;

}

function homzzang() {

  document.getElementById("demo").innerHTML = num.findIndex(checkNum);

}

</script>

 

결과보기 (결과값: 2)

주의: IE11 및 그 이전 브라우저는 지원 X

findIndex() 정의

 

각 배열 요소에 함수 적용 후, 일치하는 첫 번째 요소의 색인번호 반환.

 

---

 

1.

• 일치하는 요소 없으면, -1 반환.
• 빈 배열요소에 대해선 실행 X
• 원래 배열 변경 X

 

2.

• ECMAScript6 (ES6: JavaScript 2015)
• IE11 이하 제외한 주요 최신 브라우저 모두 지원.

 

3. 관련글

• Array (배열): https://homzzang.com/b/js-25
• Array Method (배열 메서드): https://homzzang.com/b/js-26
• Array Sort (배열 정렬): https://homzzang.com/b/js-27

 

3. MDN findIndex() 예제 보기

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex

 

findIndex() 구문

 

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

 

---

[매개변수]

 

function()

필수. 배열 각 요소에 대해 실행할 함수

• currentValue - 필수. 현재요소 값
• index - 선택. 현재요소 색인번호
• arr - 선택. 현재요소의 배열

thisValue

선택. this 값으로 함수에 전달된 값 (기본값: undefined)

 

---

[반환값]

 

• 일치요소 존재 O 경우, 일치요소의 첫번째 색인번호 반환.
• 일치요소 존재 X 경우, -1 반환.

 

findIndex() 예제 - 입력값보다 큰 첫번째 일치요소 색인번호 찾기

 

<input type="number" id="hz" value="5"></p>

<button onclick="homzzang()">클릭</button>

<p id="demo"></p>

<script>

const nums = [1, 3, 6, 10];

function checkValue(x) {

  return x > document.getElementById("hz").value;

}

function homzzang() {

  document.getElementById("demo").innerHTML = nums.findIndex(checkValue);

}

</script>

결과보기 (결과값: 2)