Array.find

ES6에서 도입된 find는 배열의 요소에 순회하면서 콜백함수를 호출하여 반환값이 true인 것을 찾는 것을 말합니다. 이때 true 값이면 첫 번째 요소를 반환하고, true 값이 없을 경우에는 undefined를 반환합니다.

 

find가 없었을 때 코드

let result = '';
arr.forEach((v) => {
  if (v.id == id) {
    result = v;
  }
});

forEach를 이용하여 조건절을 삽입해 값이 일치할 경우에 result에 값을 담아서 사용했었는데요

이때 find를 사용하면 조금 더 간편하게 코드를 짤 수 있습니다.

 

find 활용 코드

let result = arr.find((f) => f.id == 0);

find를 이용했을때 코드가 단순화된 걸 확인할 수 있는데요. 이때 f는 this로 배열자체를 말합니다. 즉 배열의 id값이 0인 것이라는 조건이 들어간 것이고, 이 조건과 일치하는 값을 찾아 반환을 하게 되는 것입니다.

즉 find는 아래와 같은 구조로 이우러 져 있으며, 콜백함수로 this를 받고 this와 조건이 일치하는지 확인 후 일치하면 return을 해주는 것입니다. 이때 this에는 요소가 있을 수도 있고 객체가 존재할 수도 있습니다.

arr.find((this) => this == 조건)
// 아래 코드는 위의 코드를 풀어쓴 코드로 이런 코드가 아닐까 추측했습니다.
arr.find((this)=>{
  if(this == 조건) return this
})