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.