CODEWITHSUNDEEP
javascriptbracketsbraces
Maximilian
Maximilian

Reputation: 537

Brackets in ES6 JavaScript

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?

Upvotes: 4

Views: 1668

Answers (3)

Nur Ketene
Nur Ketene

Reputation: 13

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
}

Upvotes: 0

jo_va
jo_va

Reputation: 13964

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' });

Upvotes: 4

Quentin
Quentin

Reputation: 943157

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.

Upvotes: 10

Related Questions