What is "el", what relation do these codes have with each other, and how does the fat arrow work?

Question

I need to understand what the code means, or a better break down of how/why it works.

This function should find an object in an array called items by it's id number, and return the objects properties of which there are 9 for each object.

I've googled how the fat arrow works, but the examples given don't match this code very well, or I'm still to ignorant to see the relation. I also don't COMPLETELY understand how el is being used. I assume it's a place holder for "item" or a Boolean. I feel it's on the tip of my tongue.

pantry{

//.. other code of an empty array, and a function that fills the array at run time

getItem: function(id) {
    return this.items.find(el => {
        return el.id == id
    });
}

}

My tutor showed me that this code is equivalent to

     for(var i = 0; i < items.length; i++){
         let item = items[i];

         if(item.id == id){
             return item;
         }

This code works as is, but I'm just barely not understanding what el does, I've changed it to ed, and do and se, and it still works, but I'm trying to understand deeply.

I'm very new to JavaScript. I've been reading "You Don't Know JavaScript" for a month now, and practicing for 3 months. I don't know if I'm learning in the best way, but I put work into learning every single day --- at any rate I digress.

Thank you for any amount of your time.

possible duplicate of https://stackoverflow.com/questions/34361379/are-arrow-functions-and-functions-equivalent-exchangeable — Naga Sai A, Jul 24 '19 at 17:52
Maybe it would have been clearer if you tutor had done `for (var i = 0; i < items.length; i++) {let el = items[i]; if (el.id == id) { return el; }}` — 001, Jul 24 '19 at 17:54

score 2 · Answer 1 · answered Jul 24 '19 at 17:53

2

el is just a variable. When you pass it into a function like find, it represents the element of the array that you are looking at during that iteration.

The arrow is just another way of defining a function. Broadly speaking, these two functions are equivilant:

(el) => {
    return el.id == id
});

function(el) {
    return el.id == id
}

You can read more about them and the differences between arrow and normal functions here.

answered Jul 24 '19 at 17:53

ldtcoop

680
4
14

Thank you so much. The multiple answers from people is helping me understand better. Did I something wrong in my question to deserve -2 votes? Thank you so much. – frozenmonkey Jul 25 '19 at 18:14

score 1 · Answer 2 · answered Jul 24 '19 at 18:28

for beginner simple function and arrow function are same it's just the short way of doing stuff i. e

function(param) {} = (param) => {} = param => {}

what array find function (in your case array is items) does is that it pass every item to the function and return only those item which pass the condition or return true i.e its id is equal to the given id e.g

arr = [{id: 2, name: 'temp'}, {id: 1, name: 'other'}]

on first iteration el is equal to {id: 2, name: 'temp'} on second iteration its equal to {id: 1, name: 'other'} now if the given id is 2 it will return {id: 2, name: 'temp'} because it pass the condition or it return true now point to note is the el is just a name of a variable you can replace it with any name like you can replace id with other variable like tempId in getItem: function(id) but you have to give it only one parameter because the find function expect only one argument

Thank you so much. The multiple answers from people is helping me understand better. Did I something wrong in my question to deserve -2 votes? Thank you so much. — frozenmonkey, Jul 25 '19 at 18:14

What is "el", what relation do these codes have with each other, and how does the fat arrow work?

2 Answers2