Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript Array Iteration Methods Combining Array Methods Combining filter() and map()

Arrow functions don't always use curly braces though.

I'm confused by the statement that arrow functions always use curly braces. A lot of what we've seen so far dont use braces users.filter( user => user.name !== "Samir");

is this because this is a declaration & not a logic function?

then the big leap to .map(name => ({ name })); can anyone explain why this is read as a declaration to create/add a property to the object?

Thanks!

2 Answers

Sharon Hartsell
Sharon Hartsell
2,769 Points

I'll add on to Blake's great explanation in order to address your .map question:

const users = userNames
    .filter(name => user.name !== "Samir")
    .map(name => ({ name }));

is the same as

const users = userNames
    .filter(name => user.name !== "Samir")
    .map(name => {
        return {
            name: name
        };
    });

The first code snippet is just using some shorthand syntax.


Shorthand Part 1: { name }

Creating an object property and setting it equal to a variable with the same name is pretty common, so JavaScript ES6 provides a shortcut to do that.

const dog = 'Woof';
// this...
const myPet = {
    dog: dog
};
// { dog: 'Woof' }

// ...is the same as:
const yourPet = { dog };
// { dog: 'Woof' }

Shorthand Part 2: Parentheses ({ name })

The parentheses around { name } tell the arrow function to return it as an object with the property name. Without the parentheses, JS assumes you're just creating a function that doesn't do anything, like this

.map(name => { 
    name // yes, this is a variable, but we're not returning it, so it doesn't do anything
});

Hope this helps. Also, while syntax shortcuts are handy, I often choose to write out the longer version to make it easier for another developer to look at my code and quickly grasp what's going on. Code readability is more important than making the function happen in as few lines as possible.

Brilliant, thanks so much Sharon.

Blake Larson
Blake Larson
12,932 Points

When you have one line of code you can remove the curly braces and return keyword because the arrow function will automatically know the one line is to be returned.

 users.filter( user => user.name !== "Samir" );

is the same as

 users.filter( user => { return user.name !== "Samir" } );

Thanks Blake!