자바스크립트(JavaScript) - find(), findIndex() 배열의 내장함수 #7 [엄탱 개발일지]

안녕하세요. 숯 같은 개발자 엄태민입니다!!

요새 회사일이 바빠 블로그 포스팅을 못 했습니다. 

포스팅하는 게 예전에 정리한 글들을 하나씩 올리면 되겠거니 쉽게 생각하고 시작했는데 

생각보다 많은 시간이 소요되네요 ㅎㅎㅎ

 

바로 시작하겠습니다.

 

오늘은 find, findIndex에 대해서 정리해보겠습니다.

find와 findIndex는 별 차이가 없기 때문에 find를 자세히 설명하고 findIndex는 간단히 정리해 보겠습니다!

 

간단 한 줄 정리

• find: 콜백 함수의 조건에 만족하는 첫 번째 요소의 값을 반환합니다.
• findIndex: 콜백 함수의 조건에 만족하는 첫 번째 요소의 인덱스를 반환합니다.

 

find 정의

find의 사전적 의미는 찾다 [발견하다]입니다.

아마 값을 찾는다 아닐까요?? 단어가 쉬워서 그런지 금방 유추할 수 있는 것 같아요.

 

MDN 사이트에서 확인해보겠습니다

MDN

find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다.
그런 요소가 없다면 undefined를 반환합니다.
find메서드는 callback함수가 참을 반환 할 때까지 해당 배열의 각 요소에 대해서 callback함수를 실행합니다.
만약 어느 요소를 찾았다면 find메서드는 해당 요소의 값을 즉시 반환하고, 그렇지 않았다면 undefined를 반환합니다.

find는 호출의 대상이 된 배열을 변경(mutate) 하지 않습니다.

 

즉 find() 함수는 호출된 배열을 변경하지 않고 콜백 함수의 조건을 만족하는 값을 찾아 첫 번째 요소의 값을 반환하는 함수입니다.

 

MDN 사이트 예시를 한번 살펴보겠습니다.

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(array1); // 결과 [ 5, 12, 8, 130, 44 ]
console.log(found); // 결과 12

위의 예제를 보시면 두 가지를 확인할 수 있습니다.

• 기존 배열은 변경되지 않습니다.
• 콜백 함수의 조건에 해당하는 첫 번째 ‘값'이 반환됩니다. (참고로 얕은 복사)

find 사용방법

find의 사용방법 어렵지 않습니다!

우선 find의 구문 한번 살펴보겠습니다.

 

arr.find(callback [, thisArg])

 

callback(필수)

배열의 각 값에 대해 실행할 함수이며 총 세 가지 인자를 갖고 있습니다.

• element(필수): 값 (콜백 함수에서 처리할 현재 요소)
• index(선택): 인덱스 (콜백 함수에서 처리할 현재 요소의 인덱스)
• array(선택): find() 함수를 호출한 배열

thisArg(선택)

콜백함수에서 this가 참조할 객체, 정의하지 않으면 this는 window를 참조합니다.

 

제가 어렵지 않다고 말씀드려놓고 뭔가 처음 보시는 분들이 어렵다고 생각하실 수 있을 것 같지만 알면 좋지만 우선 모르고 지나가셔도 되는 내용입니다.

callback 함수 첫 번째 인자는 현재 값이라고 딱 하나만 기억하셔도 됩니다.

 

밑에 예제를 한번 봐보겠습니다.

바로 위에서 간단한 숫자 배열을 이용했으니 이번엔 객체 배열로 예제를 만들어 봤습니다. 배열의 값 중에 age가 10 이상인 첫 번째 값을 반환하는 것을 볼 수 있습니다.

제가 위에서 언급한 대로 첫 번째 인자가 값이라는 것만 알아도 충분히 사용하실 수 있습니다.

 

find 주의 사항

find함수의 주의사항은 보통 내장 함수의 주의점과 같기 때문에 글로만 간략히 설명하겠습니다.

자세한 주의사항은 concat, map 을 참고해주세요.

추후에 내장 함수의 주의점만 따로 빼서 정리를 하도록 해보겠습니다!

• find는 호출한 배열은 변형되지 않습니다. 단, callback 함수에 의해서 변형될 수 있습니다.
• find가 처리할 요소의 범위는 첫 callback을 호출하기 전에 정해집니다. find가 시작한 이후 배열에 추가되는 요소 들은 callback을 호출하지 않습니다.
• 배열에 존재하는 요소들의 값이 바뀐 경우 find가 방문하는 시점의 값이 callback에 전달됩니다.
• find가 시작되고, 방문하기 전에 삭제된 요소들은 방문하지 않습니다.
• 명세서에 정의된 알고리즘으로 인해 find를 호출한 배열의 중간이 비어있는 경우, 결과 배열 또한 동일한 인덱스를 빈 값으로 유지합니다.
• 사용 시 원본에 변형이 없지만, 원본 배열의 요소를 얕은 복사(참조 복사)를 하여 새배 열에 넣어서 반환합니다. (중요) 

마지막 주의사항이 중요하다고 생각해서 예제로 한번 설명드리겠습니다!

---

find가 Reference Type 요소(객체)를 반환할 때, 얕은 복사로 인한 주의사항

위의 예제를 살펴보겠습니다.

findArray에 내장 함수 find를 이용해여 ‘얕은 복사’로 find에 값을 반환해줍니다.

로그를 찍어본 결과 find와 findArray[1]의 값이 동일한 것을 볼 수 있습니다.

그리고 find의 nickName의 값을 변경해주고 나서 로그를 찍어 보니 find의 값만 변경해줬는데도 findArray[1]의 값도 변경된 것을 확인할 수 있습니다.

 

만약 findArray의 값은 변경을 원하지 않는다면 아래와 같이 사용하시면 됩니다.

위와 같이 코드를 작성하면, 최종 결과 값이 find nickName만 값이 변경된 것을 볼 수 있습니다.

이러한 이유는 간단히 설명드리자면, javascript에서 배열은 객체로서 변수에 값을 저장하는 것이 아니라 주소를 저장하게 됩니다.

---

find가 Primitive Type 요소를 반환할 때

위의 예제를 보시면 참조형 요소(객체)를 반환했을 때와는 다르게 반환 값을 변경해도 기존 배열에는 영향을 미치지 않습니다.

 

정리

• 첫 번째 예제에서는 변수가 참조하는 주소에 해당하는 메모리의 값을 변경하기 때문에 값이 동일하게 나오게 되는 것입니다.
• 두 번째 예제에서는 변수가 참조하는 주소 자체를 새로운 객체의 주소로 변경해주기 때문에 find와 findArray [1]이 바라보고 있는 값을 갖고 있는 공간(메모리)이 다르기 때문에 값이 다르게 출력되는 것입니다.
• 참고로 위의 예제는 반환되는 값이 객체(참조형)라는 전제하에 설명드린 것입니다. 기본형은 얕은 복사의 의미가 없기 때문에 값 자체를 복사하여 반환된 값을 변경하여도 다른 값이 반환됩니다.

 

findIndex 사용방법

findIndex는 find와 다르게 조건에 맞는 값을 반환하는 게 아니라 index를 반환합니다.

 

오늘 준비한 내용은 여기까지 입니다. 
읽어주셔서 감사합니다 :)

좋아요 및 댓글 달아주시면 감사하겠습니다 :) 

궁금한 내용 및 잘못된 내용을 위한 댓글 혹은 토론하고 싶은 댓글은 백번, 만 번 환영입니다!!!