이슈

let selectedRole = fetchRoles.filter((r) => {
  return r.id === roleId;
});

console.log(selectedRole); // [{ id: ..., name: ..., }]

selectedRole = selectedRole[0]; // 다른 방법은 없을까🤔
setCurrentTarget(selectedRole);

const id = selectedRole.id;

위 코드에서 [{...}] 형식으로 출력되는 값(selectedRole)에서
id 등 객체 속성에 접근하려면 selectedRole.id 같은 방식으로 값을 가져오게 되는데요

객체가 항상 한개만 들어오는 위 배열같은 경우
selectedRole[0] 으로 재지정해주는게 불필요한 코드 같아서 개선해보려고 합니다.

해결

Array.prototype.find 메서드를 사용하면 첫 번째로 일치하는 요소를 반환하므로, 해당 요소를 쉽게 추출할 수 있습니다. Array.prototype.find 메서드는 배열에서 주어진 조건을 만족하는 첫 번째 요소를 반환합니다.
일치하는 요소가 있으면 그 값을, 없으면 undefined를 반환합니다.

const selectedRole = fetchRoles.find((r) => r.id === roleId);

위 코드에선 id가 일치하는 요소를 selectedRole로 저장합니다.

filter vs find

filter와 find 함수는 배열을 처리하는 데 사용되지만, 목적과 동작 방식이 다릅니다.

filter 함수

• 목적: 조건을 만족하는 모든 요소를 찾기 위해 사용됩니다.
• 반환 값: 조건을 만족하는 모든 요소를 포함하는 새로운 배열을 반환합니다.
• 사용 예: 여러 요소가 조건을 만족하는 경우 모든 해당 요소를 얻고자 할 때 유용합니다.

find 함수

• 목적: 조건을 만족하는 첫 번째 요소를 찾기 위해 사용됩니다.
• 반환 값: 조건을 만족하는 첫 번째 요소를 반환합니다. 조건을 만족하는 요소가 없으면 undefined를 반환합니다.
• 사용 예: 첫 번째로 조건을 만족하는 요소 하나만 필요할 때 유용합니다.

const numbers = [1, 2, 3, 4, 5, 6];

// filter 사용
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]

// find 사용
const firstEvenNumber = numbers.find(num => num % 2 === 0);
console.log(firstEvenNumber); // 2