[javascript] Array.prototype.find() 메소드

구독하고 있는 chris@gomakethings.com의 메일링 리스트로 온 내용을 번역했습니다.

Array.prototype.find() 메서드는 배열에서 콜백 함수로 전달한 테스트와 일치하는 첫 번째 항목을 찾습니다. 콜백은 배열의 현재 항목을 참조하는 참조 변수를 위한 인수를 제공합니다.

다음은 샌드위치 배열에서 참치를 찾는 간단한 예입니다.

let sandwiches = ['turkey', 'chicken salad', 'tuna', 'pb&j', 'egg salad'];

let tuna = sandwiches.find(function (sandwich) {
	return sandwich === 'tuna';
});

console.log(tuna); // logs "tuna"

항목을 찾지 못하면 undefined를 반환합니다.

let hamburger = sandwiches.find(function (sandwich) {
	return sandwich === 'hamburger';
});

console.log(hamburger); // logs undefined

Array.prototype.find() 메서드가 진짜 잘 작동하는 곳은 복잡한 배열입니다.

예를 들어, todo 객체가 포함된 배열을 가지는 JSON 파일을 반환하는 API가 있다고 가정해봅시다.

let todos = [
	{
		item: 'Wash the dog',
		added: 20180322,
		completed: false
	},
	{
		item: 'Plan surprise party for Bailey',
		added: 20180314,
		completed: false
	},
	{
		item: 'Go see Black Panther',
		added: 20180312,
		completed: true
	},
	{
		item: 'Launch a podcast',
		added: 20180305,
		completed: false
	}
];

어떻게 하면 'Go see Black Panther' 아이템이 언제 추가됐는지, 완료됐는지 확인할 수 있을까?

Array.prototype.find() 메서드가 없을 경우, 각각의 할 일을 반복하여 아이템을 확인하고, 일치하는 결과를 저장하고, 루프을 종료해야 합니다.

let item;
for (let todo of todos) {
	if (todo.item === 'Go see Black Panther') {
		item = todo;
		break;
	}
}

Array.prototype.find() 메서드를 사용할 경우, todo.item 속성이 'Go see Black Panther' 인 것을 확인하면 됩니다.

let item = todos.find(function (todo) {
	return todo.item === 'Go see Black Panther';
});