20-2 배열과 메서드 2 (forEach, indexOF, lastIndexOf, includes, find, findIndex, filter)

forEach

 - 주어진 함수를 배열 요소 각각에 대해 실행할 수 있게 한다.

문법:

arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

예

["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => {
  alert(`${item} is at index ${index} in ${array}`);
});

// Bilbo is at index 0 in Bilbo,Gandalf,Nazgul
// Gandalf is at index 1 in Bilbo,Gandalf,Nazgul
// Nazgul is at index 2 in Bilbo,Gandalf,Nazgul

 

---

 

배열 탐색하기

indexOf, lastIndexOf, includes (밑에 문법 동일 메서드만 변경하면 됨.)

arr.indexOf(searchElement[, fromIndex])

• indexOf() - fromIndex부터 searchElement 요소가 있는지 찾고 있다면 index를 반환하고 없으면 -1을 반환한다.
• lastIndexOf() - indexOf()와 동일하나 검색을 끝에서부터 시작한다.
• includes() - fromIndex부터 searchElement 요소가 있는지 찾고 있다면 true를 없다면 false를 반환한다.

예시)

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

arr.indexOf('b'); // 1
arr.indexOf('e'); // -1
arr.includes('a'); // true

 

includes와 indexOf은 NaN 처리 시 차이점이 보인다.

const arr = [NaN];
arr.indexOf(NaN); // -1 (완전 항등 비교 === 는 NaN엔 동작하지 않으므로 0이 출력되지 않습니다.)
arr.includes(NaN);// true (NaN의 여부를 확인하였습니다.)

 

 

---

 

find()와 findIndex() (문법 동일 메서드만 변경하면 됨)

arr.find(callback[, thisArg])

 - 함수가 참을 반환하면 탐색은 중단되고 해당 요소가 반환한다. 원하는 요소를 찾지 못했으면 undefined가 반환된다.

주로 배열 안에 객체가 있는 형태의 코드에 많이 사용한다.

let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];

let user = users.find(item => item.id == 1);

alert(user.name); // John

 - arr.findIndex()는 조건에 맞는 요소의 index를 반환하며 없으면 -1을 반환한다.

 

 

---

 

filter()

arr.filter(callback(element[, index[, array]])[, thisArg])

• element - 처리할 현재 요소.
• index - 처리할 현재 요소의 인덱스.
• array - filter를 호출한 배열.
• thisArg - callback을 실행할 때 this로 사용하는 값.

 - 함수의 반환 값을 true로 만드는 요소들을 반환하고 배열 안에 넣는다.

const arr = [1, 2, 3, 4, 5];

arr.filter(e => e >= 3); // [3, 4, 5]

 

---

 

공부한 곳!! 모던 JavaScript 튜토리얼

바로가기!!