When calling the findProd function with the number 1, everything works correctly. However, if I replace the number 1 with the idToFind variable, the console outputs undefined. Why is this happening?
P.S. in my file, if I print idToFind, the result is 1.
addToCartButtons.forEach(button => {
button.addEventListener('click', (event) => {
const idToFind = event.target.dataset.id;
let array = [{id: 1, name: 'mattia'}, {id: 2, name: 'cesare'}];
function findProd(product) {
return product.id === 1;
}
const result = array.find(findProd);
console.log(result);
})
});
I need to make the comparison value of the function dynamic.
>Solution :
It’s because the event.target.dataset.id is a string. The strict comparison operator you use compares types first, so 1 === '1' results in false.
Notice how you can convert string value to a number value with an unary +. Then 1 === 1 would result in true and in consequence, your find function will work as expected.
addToCartButtons.forEach(button => {
button.addEventListener('click', (event) => {
const idToFind = event.target.dataset.id;
let array = [{id: 1, name: 'mattia'}, {id: 2, name: 'cesare'}];
function findProd(product) {
return product.id === +idToFind;
}
const result = array.find(findProd);
console.log(result);
})
});
Also, the code would benefit in readability from using an array function and converting the identifier to number during the variablie initialization.
addToCartButtons.forEach(button => {
button.addEventListener('click', (event) => {
const idToFind = +event.target.dataset.id;
let array = [{id: 1, name: 'mattia'}, {id: 2, name: 'cesare'}];
const result = array.find((product) => product.id === idToFind);
console.log(result);
})
});
You may want to read more about the strict equality ===.