Finders Keepers(confused on the syntax)

JavaScript
1

Tell us what’s happening:

Can someone give me a detailed explanation of what this means
num => num % 2 === 0

mostly this part
num => and how it relates to everything else by it

Your code so far


function findElement(arr, func) {
  let num = 0;
  return num;
}

findElement([1, 2, 3, 4], num => num % 2 === 0);

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36.

Link to the challenge:

3

Yes, this is confusing when you first start seeing this.

num => num % 2 === 0

That is an ES6 thing, called a “fat arrow function” or just an “arrow function”. It is (kinda) the same as writing:

function(num) {
  return num % 2 === 0;
}

It is a function that returns true if num is divisible by 2. There are slight differences in writing it as a “normal” function or as an arrow function, but they don’t matter in this case.

Consider the following:

function findString(arr, func) {
  for (let i = 0; i < arr.length; i++) {
    if (func(arr[i])) {
      return arr[i];
    }
  }
  return 'no string found';
}

findString([1, true, 'apple', null], el => typeof el === 'string');
// apple

It is similar and returns the first element that is a string.

We pass findString and array and a function to test if it is a string. The function applies that passed function to each element and returns the first element that passes the test (returns true from the test function).

We could also have written:

function findString(arr, func) {
  for (let i = 0; i < arr.length; i++) {
    if (func(arr[i])) {
      return arr[i];
    }
  }
  return 'no string found';
}

findString([1, true, 'apple', null], function(el) { return typeof el === 'string'});
// apple

That does basically the same thing, just with a “normal” function. In both these cases, we are passing an anonymous (unnamed) function that we just create and pass into the findString.

We could have also used a named function. For example:

function findString(arr, func) {
  for (let i = 0; i < arr.length; i++) {
    if (func(arr[i])) {
      return arr[i];
    }
  }
  return 'no string found';
}

function isAString(el) {
  return typeof el === 'string';
}

findString([1, true, 'apple', null], isAString);
// apple

or with an arrow function:

function findString(arr, func) {
  for (let i = 0; i < arr.length; i++) {
    if (func(arr[i])) {
      return arr[i];
    }
  }
  return 'no string found';
}

const isAString = el => {
  return typeof el === 'string';
}

findString([1, true, 'apple', null], isAString);
// apple

Or with a simplified arrow function, with an implied return:

function findString(arr, func) {
  for (let i = 0; i < arr.length; i++) {
    if (func(arr[i])) {
      return arr[i];
    }
  }
  return 'no string found';
}

const isAString = el => typeof el === 'string';

findString([1, true, 'apple', null], isAString);
// apple

All these do the same thing, the only difference is how we’re defining the function that we’re passing into findString.

Arrow functions are very common in modern JavaScript and are probably more common than “normal” functions. There are usually (but not always) better. There are some slight differences that you can read about here.

On aspect of JavaScript is that functions are “first class citizens” and can be assigned to variables and/or passed around to other functions. You can have functions that accept functions and return other functions. It’s weird at first but very powerful.

Try to understand how each of my examples are basically doing the same thing.

Let us know if there is any other confusion.

4

I think there are three things that can make the syntax a bit confusing to look at. Initially, at least.

  1. It is an anonymous arrow function.

  2. It is using the implicit return of arrow functions. Which means there is no return keyword and the function body is not inside curly braces/brackets ({}).

  3. When an arrow function only takes one argument you can leave off the parentheses.

findElement([1, 2, 3, 4], num => num % 2 === 0);

Normal ES5 anonymous function:

findElement([1, 2, 3, 4], function(num) {
  return num % 2 === 0;
})

More explicit anonymous arrow function:

findElement([1, 2, 3, 4], (num) => {
  return num % 2 === 0;
});

Standalone callback arrow function:

const isEven = (num) => {
  return num % 2 === 0;
}

findElement([1, 2, 3, 4], isEven);
5

ok I see what you mean, Thanks for the help:slightly_smiling_face: