Curly braces inside JavaScript arguments for functions

JavascriptFunctionArgumentsCurly Braces

Javascript Problem Overview


What do the curly braces surrounding JavaScript arguments for functions do?

var port = chrome.extension.connect({name: "testing"});
port.postMessage({found: (count != undefined)});

Javascript Solutions


Solution 1 - Javascript

A second possible answer has arisen since this question was asked. Javascript ES6 introduced [Destructuring Assignment][1].

var x = function({ foo }) {
   console.log(foo)
}

var y = {
  bar: "hello",
  foo: "Good bye"
}

x(y)


Result: "Good bye"

[1]: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment "Restructuring Assignment"

Solution 2 - Javascript

The curly braces denote an object literal. It is a way of sending key/value pairs of data.

So this:

var obj = {name: "testing"};

Is used like this to access the data.

obj.name; // gives you "testing"

You can give the object several comma separated key/value pairs, as long as the keys are unique.

var obj = {name: "testing",
           another: "some other value",
           "a-key": "needed quotes because of the hyphen"
          };

You can also use square brackets to access the properties of the object.

This would be required in the case of the "a-key".

obj["a-key"] // gives you "needed quotes because of the hyphen"

Using the square brackets, you can access a value using a property name stored in a variable.

var some_variable = "name";

obj[ some_variable ] // gives you "testing"

Solution 3 - Javascript

Curly braces in javascript are used as shorthand to create objects. For example:

// Create an object with a key "name" initialized to the value "testing"
var test = { name : "testing" };
alert(test.name); // alerts "testing"

Check out Douglas Crockford's JavaScript Survey for more detail.

Solution 4 - Javascript

var x = {title: 'the title'};

defines an object literal that has properties on it. you can do

x.title 

which will evaluate to 'the title;

this is a common technique for passing configurations to methods, which is what is going on here.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionmilanView Question on Stackoverflow
Solution 1 - JavascriptMatthias WinkelmannView Answer on Stackoverflow
Solution 2 - Javascriptuser113716View Answer on Stackoverflow
Solution 3 - JavascriptcamomilkView Answer on Stackoverflow
Solution 4 - JavascripthvgotcodesView Answer on Stackoverflow