FAQ: Iterators - The .filter() Method

const randomNumbers = [375, 200, 3.14, 7, 13, 852];

// Call .filter() on randomNumbers below
const smallNumbers = randomNumbers.filter(num => {
  return num < 250;
})

const favoriteWords = ['nostalgia', 'hyperbole', 'fervent', 'esoteric', 'serene'];


// Call .filter() on favoriteWords below

const longFavoriteWords = favoriteWords.filter(word => {
  return word.length > 7;
})

This is the given solution for this exercise. However, shouldn’t this section of the code

const longFavoriteWords = favoriteWords.filter(word => {
  return word.length > 7;

read this instead?

const longFavoriteWords = favoriteWords.filter(longFavoriteWords => {
  return favoriteWords.length > 7;

Hello, @thegreysmith.

No. The solution code syntax is correct. Let’s break it down.
const longFavoriteWords = We are assigning a value to a newly declared variable with the const keyword.

favoriteWords.filter() The value to be assigned to longFavoriteWords will be the words ‘filtered’ out of the favoriteWords array.

filter(word => { return word.length > 7;}) Inside the parenthesis, word is the placeholder variable that will be assigned each element of the favoriteWords array one at a time in turn. If word.length > 7 evaluates to true the word will be returned. If it evaluates to false the word will not be returned. The returned words become elements of a new array that is returned by the .filter() method. This new array is the value assigned to longFavoriteWords.

Hi, I don’t get why sometimes there is ‘return’ and sometimes there isn’t!
In the example it’s some strings in an Array, ‘return’ is written and in the exercice 2. another Array of strings and no need for return.
Please enlight me,
Best

It’s a matter of which syntax is deployed. Arrow functions with only a single statement or expression in the body do not need explicit return and may forego the curly braces.

a_add_b = (a, b) => a + b;

Note that it is all on one line. The implicit return value is the sum of a and b.

When curly braces are used, the return must be explicit.

a_add_b = (a, b) => {
    return a + b;
}
2 Likes

Hello, @miribel38.

In JavaScript all functions return something whether implicitly or explicitly. Typically, when we leave out the return keyword, our function will implicitly return undefined. Concise arrow body functions are an exception as @mtf has shown. A concise body arrow function will implicitly return the value rather than undefined as long as we don’t put curly braces around the body of the function. If we include the curly braces, and don’t explicitly use the return keyword, undefined will be returned.

const a_add_b1 = (a, b) => {a + b}
const a_add_b2 = (a, b) => {return a + b}
const a_add_b3 = (a, b) => a + b

console.log(a_add_b1(2, 2)) //undefined
console.log(a_add_b2(2, 2)) //4
console.log(a_add_b3(2, 2)) //4
2 Likes

I wonder if somone could me understand something:

const longFavoriteWords = favoriteWords.filter

( words => {

return words.length > 7

})

This returns words more than 7 letters but I was curious and removed the > 7 as I wanted to see if this would return the length of the words instead but it doesn’t. It gives me all the words from the array.

The callback of the filter method is a predicate function that only returns values that meet with the specified condition. words.length will be a number greater than zero, hence it is truthy, so the word is returned.