Looking for help with the .filter() method?

Question

Looking for help with the .filter() method?

Have you ever wondered why adding curly braces to the filter argument causes it to not work as expected? Let's explore this issue further.

// Dive into your code here:
function justCoolStuff(arr1,arr2){
  var newArray = arr1.filter(word => {arr2.includes(word)});
  return newArray
}

const coolStuff = ['gameboys', 'skateboards', 'backwards hats', 'fruit-by-the-foot', 'pogs', 'my room', 'temporary tattoos'];

const myStuff = [ 'rules', 'fruit-by-the-foot', 'wedgies', 'sweaters', 'skateboards', 'family-night', 'my room', 'braces', 'the information superhighway']; 

console.log(justCoolStuff(myStuff, coolStuff)

It might seem strange that when the curly braces are removed, the code runs smoothly. After all, shouldn't it be correct syntax since we are using a function? Share your thoughts on this!

// Dive into your code here:
function justCoolStuff(arr1,arr2){
  var newArray = arr1.filter((word) => arr2.includes(word));
  return newArray
}

const coolStuff = ['gameboys', 'skateboards', 'backwards hats', 'fruit-by-the-foot', 'pogs', 'my room', 'temporary tattoos'];

const myStuff = [ 'rules', 'fruit-by-the-foot', 'wedgies', 'sweaters', 'skateboards', 'family-night', 'my room', 'braces', 'the information superhighway']; 

console.log(justCoolStuff(myStuff, coolStuff)

javascript

Answer 1

Answer №1

In order to find out if a word is included in an array, make sure to use the return statement followed by arr2.includes(word)

Answer 2

In order to find out if a word is included in an array, make sure to use the return statement followed by arr2.includes(word)

Answer 3

Answer №2

When you include curly braces, the automatic return feature no longer functions as expected. In this case, you must manually specify the return value like so:

let filteredArray = arr1.filter(item => { return arr2.includes(item) });

For more information on arrow functions, you can check out the basic syntax documentation.

Answer 4

When you include curly braces, the automatic return feature no longer functions as expected. In this case, you must manually specify the return value like so:

let filteredArray = arr1.filter(item => { return arr2.includes(item) });

For more information on arrow functions, you can check out the basic syntax documentation.

Answer 5

Answer №3

Maybe you'll find it easier to grasp if you reorganize it like this -

let newArray = arr1.filter(word => {arr2.includes(word)});

let newArray = arr1.filter(word => {
  arr2.includes(word)
});

Viewing it in that way, you can see that the missing piece is the return statement. When using curly braces, the use of return must be explicit.

Answer 6

Maybe you'll find it easier to grasp if you reorganize it like this -

let newArray = arr1.filter(word => {arr2.includes(word)});

let newArray = arr1.filter(word => {
  arr2.includes(word)
});

Viewing it in that way, you can see that the missing piece is the return statement. When using curly braces, the use of return must be explicit.

Answer 7

Answer №4

When the arrow is followed by curly braces, it signifies the block of function code that will be carried out. In the initial scenario mentioned, there is no explicit return statement provided, indicating that nothing is being returned. On the contrary, in the second scenario utilizing this syntax, it is implicit that the boolean value is being returned, aligning with the expectations of the filter method.

Answer 8

When the arrow is followed by curly braces, it signifies the block of function code that will be carried out. In the initial scenario mentioned, there is no explicit return statement provided, indicating that nothing is being returned. On the contrary, in the second scenario utilizing this syntax, it is implicit that the boolean value is being returned, aligning with the expectations of the filter method.

Answer 9

Answer №5

When using braces in JavaScript, they are often treated as the start of a function and require an implicit return statement.

However, there are ways to use braces without needing to return, as demonstrated below:

// Implementing a function that filters out items from one array that are also present in another array:

function justCoolStuff(arr1,arr2) {
    var newArray = arr1.filter(word => {
        return arr2.includes(word);
    });
    return newArray;
}

const coolStuff = ['gameboys', 'skateboards', 'backwards hats', 'fruit-by-the-foot', 'pogs', 'my room', 'temporary tattoos'];

const myStuff = [ 'rules', 'fruit-by-the-foot', 'wedgies', 'sweaters', 'skateboards', 'family-night', 'my room', 'braces', 'the information superhighway']; 

console.log(justCoolStuff(myStuff, coolStuff))

Note the following syntax comparisons:

function doSomehting() {
  return 1;
}

// is equivalent to
const doSomething = () => 1;

// also equivalent to
const doSomething = () => {
  return 1;
}

// but not equivalent to
const doSomething = () => {
  1
}

Answer 10

When using braces in JavaScript, they are often treated as the start of a function and require an implicit return statement.

However, there are ways to use braces without needing to return, as demonstrated below:

// Implementing a function that filters out items from one array that are also present in another array:

function justCoolStuff(arr1,arr2) {
    var newArray = arr1.filter(word => {
        return arr2.includes(word);
    });
    return newArray;
}

const coolStuff = ['gameboys', 'skateboards', 'backwards hats', 'fruit-by-the-foot', 'pogs', 'my room', 'temporary tattoos'];

const myStuff = [ 'rules', 'fruit-by-the-foot', 'wedgies', 'sweaters', 'skateboards', 'family-night', 'my room', 'braces', 'the information superhighway']; 

console.log(justCoolStuff(myStuff, coolStuff))

Note the following syntax comparisons:

function doSomehting() {
  return 1;
}

// is equivalent to
const doSomething = () => 1;

// also equivalent to
const doSomething = () => {
  return 1;
}

// but not equivalent to
const doSomething = () => {
  1
}

Looking for help with the .filter() method?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

`Scrolling through a horizontal menu with no scrollbar present`

The middleware code remains dormant and is left untouched

A guide to reversing video playback with react-native-video

How to link a JavaScript file within a PHP document

Tips for dynamically adjusting the size of a div container according to the user's

What is the best way to combine two arrays of objects with varying values for the same key, and add a new object to the mix?

Material UI autocomplete bug: a frustrating issue with suggestions

Using Jquery to assign negative values in CSS styling

Looking for assistance with designing a responsive login box

Click to dynamically change the input number variable

Updating array object properties within nested for loops in JavaScript can be challenging

invoking a function from a parent controller within an EXTjs application using an Iframe

Differences between Typescript React.ReactElement and JSX.Element

navigation bar: retain link hover state even after displaying sub-menu

The issue persists as AJAX data and text box data are not being saved simultaneously

Tips on aligning a span element at the center of an image without losing its mouseover

What is the best way to utilize XMLHttpRequest for sending POST requests to multiple pages simultaneously?

Executing a function when a specific element is triggered within an ng-repeat in AngularJS

Display jqgrid with borders and insert extra headers text at the top of the grid

I encounter an error message stating "Cannot read property 'push' of undefined" when trying to add an item to a property within an interface