What does curly braces inside parentheses mean in javascript?

Question

I'm relatively new to javascript and I'm learning VueJS.. When initiating a new vue object I realized the code is similar to this:

new Vue({
    el: ‘#app’,
    data: {
        title: ‘hello World’
    }
});

I know from working with js objects is that we can initiate objects with curly braces like this:

var car = {
   type: "Fiat", 
   model: "500", 
   color: "white"
};

and I also know that parentheses are used for functions and we can have curly braces inside parentheses like so:

connect({ name: "testing" });

but the next notation in vue confused me because I know vue is an object not a function so I dont know why there are paranthesis, can someone clarify this part to me:

new Vue({});

Thank you.. Any reply is appreciated

Answer 1

Yep - just the same as your usage here:

connect({ name: "testing" })

new signifies a constructor, which is called like a function, so you use parentheses. And the Vue constructor expects an object, which is signified by the curly braces. So this:

new Vue({})

Means you're passing no options to the Vue constructor.

If you're confused about why Vue "isn't a function", then it's because using new with the name of a class constructs an instance of that class. If you're using an ES5-style constructor function:

function Construction(option) {
  this.option = option;
}

Then it's fairly obvious how that happens. Class constructors are a little different, but there's no difference whatsoever in how they're created - just like a function call. And like any function, you can pass an object.