Brackets in ES6 JavaScript

Question

I'm desperate for someone to give me just some concise information about when I should use which brackets where and why in JS ES6. I know the basics but when we start talking about arrow syntax I just lose it and then can't see why we're wrapping braces in brackets etc... I feel like in order to truly understand why we lay things out the way we do I need to first understand what all of the use cases are for both {} and ().

For example. I'm really struggling to work out syntax like this:

const func = (obj) => {
console.log(obj.a)
}

func({a: "blue"})

It's the func({a: "blue"}) part I'm struggling with here.

Here's another example:

makeSound({
    a: "bark",
    b: 2,
    c: "hiss"
})

function makeSound(options)
console.log("the" + options.a + "was a " + options.c)

I don't know what to make of this. What are we doing at the top with makeSound? I can see we're making an object but then why aren't we just declaring it as a variable with standard let makeSound = {}. What are we actually doing here? Is makeSound nothing untill we make it into a function further down the code?

Its a function taking an object as an argument. The use of a function is that you can instantiate it when you want to but variables are created in runtime. — arunmmanoharan, Feb 19 '19 at 14:04
the second snippet is not complete since the makeSound function is not defined — Silvio Biasiol, Feb 19 '19 at 14:05

score 10 · Answer 1 · answered Feb 19 '19 at 14:03

10

It's the func({a: "blue"}) part I'm struggling with here.

{a: "blue"} is an object literal. The resulting object is passed as an argument to func(...).

I can see we're making an object but then why aren't we just declaring it as a variable with standard let makeSound = {}.

Because it is only needed once.

let details = {
    a: "bark",
    b: 2,
    c: "hiss"
};

makeSound(details);

… would give the same result, but now you've got a details variable you don't need any more.

Is makeSound nothing untill we make it into a function further down the code?

function declarations are hoisted so it is a function even though the declaration appears later on.

answered Feb 19 '19 at 14:03

Quentin

914,110
126
1,211
1,335

Thank you for your answer. Definitely helped. I've just been practicing destructing and I've noticed when using arrow syntax to declare my function I no longer have hoisting capabilities. Why is this? – Maximilian Feb 19 '19 at 15:38
1

Function **declarations** are hosted. Arrow functions are not function declarations, like traditional function expressions they are assigned when they are assigned. – Quentin Feb 19 '19 at 16:16

score 4 · Accepted Answer · answered Feb 19 '19 at 14:16

I understand your confusion as there are quite a lot of curly braces indeed!

First, objects. You define an object using brackets like this.

const obj = { a: 1 };

But you can also define an object inline, directly in a function argument list, using an object literal like this:

myFunc({ a: 1 }); // same as myFunc(obj);

Then you have arrow functions.

Their bodies is defined using curly braces too, just as regular functions, in which case you have to use the return keyword if you want to return a value from your function:

const myFunc = (arg) => { return 'hello ' + arg; }

However, arrow function also support implicit return, if you omit the curly braces, the return value will be implicit:

const myFunc = (arg) => 'hello ' + arg;

Now, you can also use the curly braces for desctructuring assignment. For example:

const { a } = { a: 1 };

Here the desctructuring happens to the left of = and it allows you to extract properties from objects and assign them to variables.

You can also use object destructuring in function arguments, to access specific properties, like so:

const myFunc = ({ name }) => 'Hello ' + name;

This is equivalent to:

const myFunc = (person) => 'Hello ' + person.name;

And you could call this function with an object literal like this:

myFunc({ name: 'Jo' });

Exactly what I needed. It seems so clear and obvious when you lay it all out like that. Thanks! — Maximilian, Feb 19 '19 at 15:44

score 0 · Answer 3 · answered Feb 19 '19 at 14:49

const func = (obj) => {
    console.log(obj.a)
}

(obj) is basically saying func function takes obj as an argument.

You can also write it as such if you are passing only one argument;

const func = obj => {
    console.log(obj.a)
}

What the parenthesis does basically giving you the ability to add multiple arguments. So like below;

const func = (obj1, obj2) => {
console.log(obj1.a, obj2.a)
}

func({a: "blue"})

Next func({a: "blue"})

Basically here you are calling func function with an object as an argument as a short hand.

So you can call it also like this

const argument = {a: "blue"}

func(argument)

Also you might see a lot of this kind of code

const func = (obj1, obj2) => console.log(obj1.a, obj2.a)

See there aren't anymore the curly braces around the console.log(). You can omit curly braces when you have only one line in the function. When you have multiple lines you will need to use curly braces to wrap the function body like so

func = (obj) => {
   if (obj.a === "blue") {
      return true
   } 
   return false
}

Brackets in ES6 JavaScript

3 Answers3