Skip to main content

find() Method

Whereas the filter(callback) method is used to find all elements that satisfy a condition, the find(callback) method helps you find and return the first matching element, after which the array iteration stops. That is, it searches until the first match.

array.find((element, index, array) => {
  // Callback body
});
  • Does not change the original array.
  • Iterates over the original array element by element.
  • Returns the first element that satisfies a condition, that is, when the callback returns true.
  • If no element matches, that is, the callback returns false for all elements, the method returns undefined.

The find() method is used for one task only – finding an element by a unique property value. For example, searching for a user by mail, car by body number, book by name, etc.

const colorPickerOptions = [
  { label: "red", color: "#F44336" },
  { label: "green", color: "#4CAF50" },
  { label: "blue", color: "#2196F3" },
  { label: "pink", color: "#E91E63" },
  { label: "indigo", color: "#3F51B5" },
];

colorPickerOptions.find(option => option.label === "blue"); // { label: 'blue', color: '#2196F3' }
colorPickerOptions.find(option => option.label === "pink"); // { label: 'pink', color: '#E91E63' }
colorPickerOptions.find(option => option.label === "white"); // undefined