Array 메소드 (2)

Day 04 - Array 메소드 (1) 에서 이어집니다. 이 글에서는 주로 배열 안에 특정 값이 포함되어 있는지를 확인할 수 있는 배열 검색 메소드들을 다루며, 차이점까지 알아봅니다.

TIL

• 예제용 배열

      const people = [
        { name: "Wes", year: 1988 },
        { name: "Kait", year: 1986 },
        { name: "Irv", year: 1970 },
        { name: "Lux", year: 2015 },
      ];

      const comments = [
        { text: "Love this!", id: 523423 },
        { text: "Super good", id: 823423 },
        { text: "You are the best", id: 2039842 },
        { text: "Ramen is my fav food ever", id: 123523 },
        { text: "Nice Nice Nice!", id: 542328 },
      ];

아래 5~8번 메소드들은 호출 이후 배열에 추가된 요소에 대해서는 콜백함수 판단을 하지 않는다.

5. some

• 구문
  배열.some(콜백함수[, thisArg])

• thisArg : this로 사용하는 값을 지정할 수 있다. 선택 매개변수임

배열 안의 요소 하나라도 콜백함수를 통과하는지 테스트한다. 통과하는 요소를 발견하면 즉시 true를 반환한다. 즉, 배열 안의 요소 중 1개라도 함수를 만족하면 true를 반환한다. 빈 배열에서는 무조건 false를 반환한다.

예제 : 한 사람이라도 19세 이상인가? 판단

 const currentYear = new Date().getFullYear();
 const someExample = people.some(
    (people) => currentYear - people.year >= 19
    );

6. every

• 구문
  배열.every(콜백함수[, thisArg])

every 메소드는 some 메소드와 반대로 배열 안의 모든 요소가 콜백함수를 통과하는지 테스트한다. 콜백함수를 통과하지 않는 요소를 찾을 때까지 배열 안의 모든 요소에 대해 콜백함수를 실행한다. 해당하는 요소를 찾으면 즉시 false를 반환한다. 그렇지 않으면 true를 반환하는데 빈 배열에서는 무조건 true를 반환한다.

7. find

• 구문
  배열.find(콜백함수[, thisArg])

주어진 콜백함수를 만족하는 첫 번째 요소의 값을 반환한다. 그 외에는, 그리고 그런 요소가 없다면 undefined를 반환한다. 만족하는 값을 찾으면 즉시 반환한다.

filter와 비슷해보이지만, filter는 배열 형태로 반환하고 find는 찾고 있는 값의 첫 번째 값만을 반환한다는 점에서 다르다.

예제 : id가 823423인 코멘트를 찾아라

 const comment = comments.find((comment) => comment.id === 823423);
 console.log(comment);

 //찾은 아이디의 코멘트 내용 출력
 console.log(comment.text);

8. findIndex

• 구문
  배열.findIndex(콜백함수[, thisArg])

주어진 콜백함수를 만족하는 첫 번째 요소의 인덱스를 반환한다. 그런 요소가 없다면 -1을 반환한다.

findIndex로 특정 요소의 인덱스를 찾아 배열에서 특정 요소를 삭제할 때 활용할 수 있다.

예제

const index = comments.findIndex((comment) => comment.id === 823423);

//삭제 방법 2가지

 1. 현 배열에서 삭제 
 comments.splice(index, index);

 2. 특정 요소만 빼고 새로 배열 만들기
 const newComments = [
   ...comments.slice(0, index),
   ...comments.slice(index +1)
 ];

---

9. indexOf

• 구문
  배열.indexOf(찾으려는요소[, fromIndex])

• fromIndex : 검색을 시작할 index(위치). 기본값은 0 이고, 음수일 경우 '배열의 length + fromIndex'로 계산하여 검색한다. 배열의 길이보다 같거나 크다면 검색되지 않으므로 false를 반환한다.

배열에서 찾으려는 값과 정확하게 일치하는 첫 번째 요소의 인덱스를 반환하고 존재하지 않으면 -1을 반환한다.

10. includes

• 구문
  배열.includes(찾으려는요소[, fromIndex])

배열이 특정 요소를 포함하고 있는지의 여부를 true/false로 반환한다. 문자나 문자열을 비교할 때에는 대소문자를 구분한다.

예제
const arr=[1,2,3,4,5]

arr.includes(3, 1);
arr[1]부터 3이라는 값이 있는지를 판별한다.

arr.includes(3, -1);
arr.length가 5이므로, 검색을 시작할 위치는 5+(-1)=4이다. arr.[4]부터 3이라는 값이 있는지를 판별한다.

결론

위의 메소드들은 배열 안에 특정 요소가 있는지를 확인한다는 공통점이 있지만, 몇 가지 차이가 있다.

메소드	콜백함수 유무	반환 값	판별 타입	찾은 값의
some	O	불린
find	O	값		첫 번째 요소
findIndex	O	인덱스		첫 번째 요소
indexOf	X	인덱스		첫 번째 요소
includes	X	불린	===

(1)
some, find 등의 메소드는 기본적으로 확인 과정에서 콜백 함수를 이용하여 특정 조건을 만족하는지를 따지는 과정이 포함되어 있다는 차이가 있다.

(2)
include 메소드는 some 메소드와 달리 값을 비교할 때 '==='를 사용하기 때문에 데이터 타입까지 같아야 true를 반환한다. 따라서 같은 값을 가지는 객체의 존재 여부를 확인하는 데에는 적합하지 않다.