What Do Double Brackets Mean in JavaScript and How to Access Them

What is the significance of the double brackets for the [[prototype]] property in JavaScript?

It is an "internal property" of the object. From ECMAScript 8.6.2:

This specification uses various internal properties to define the semantics of object values. These internal properties are not part of the ECMAScript language. They are defined by this specification purely for expository purposes. An implementation of ECMAScript must behave as if it produced and operated upon internal properties in the manner described here. The names of internal properties are enclosed in double square brackets [[ ]].

The statement, "These internal properties are not part of the ECMAScript language," means that internal properties are not identifiers that can be used in actual code -- internal properties are not accessible as members of the objects that contain them. However, they may be made accessible by particular functions or properties (e.g., some browsers are kind enough let you set and get [[Prototype]] through the __proto__ property, and the ES5 spec allows read-only access through Object.getPrototypeOf).

The use of double brackets over single brackets is probably to avoid any possible confusion with actual bracket notation (i.e., property access).

What do similar double brackets mean ()()?

(0, _state2.default) is an expression which contains comma operator. It evaluates to its last operand. Here _state2.default is last operand. So

(0, _state2.default)(servicePath, stateOptions);

Is same as

_state2.default(servicePath, stateOptions);

The second brackets call the function with two arguments.

The first () are used to group an expression. While the second () are used to call the function.

What do these double parentheses do in JS?

This

(function(){
  alert('hello');
})();

although it is a function is it called automatically so you dont/can't call it manually

These can be useful for for loops like so

This will fail because i would be equal to 9 after 5 seconds

for(var i = 0; i < 10; i++) {
   window.setTimeout(function(){
      console.log(i);
   }, 5000)
}

So you could do this

for(var i = 0; i < 10; i++) {
   (function(a){
      window.setTimeout(function(){
         console.log(a);
      }, 5000)
   })(i);
}

Also good for creating a "private" scope like this

(function(){
   var test = 'hello';
   console.log( test ); // 'hello'
}());

   console.log( test ); // 'undefined'

What is the significance of double square brackets in javascript property names when initializing the object?

In ES6, [expression]: value is interpreted as follows:

• evaluate expression
• convert the result to a string
• use this string as a key

Respectively,

 given [ [a] ]: 'boo'

 evaluate [a]   => ['foo']
 String ['foo'] => 'foo'
 result         => {'foo': 'boo'}

In other words, extra brackets are ignored.

Undestanding double bracket operation in Javascript

• [1,2,3] is an Array literal
• <obj>[p] is the bracket notation for property access
• 1, 2 is a comma operator expression that evaluates to 2

So the [1,2,3][1,2] as a whole accesses the index 2 of the array, and yields 3.

Function calling in Javascript with double brackets

The double parenthesis would have been useful if hi had returned a function instead of its name, like in

function hi(){
    return hello;
}
hi()();

That's probably what was the intent.

What is the purpose of double curly braces in React's JSX syntax?

It's just an object literal inlined in the prop value. It's the same as

var obj = {__html: rawMarkup};

<span dangerouslySetInnerHTML={obj} />

Why do we need double braces in this javascript function?

First of all you're writing JSX which looks like an HTML but with javascript syntax.

(JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.)

So, when you want to reference a Javascript object in JSX, you use {}, let's say you have this:

const text = 'Hi There!';

and you want that text to be rendered in an HTML <p> tag, you'd write something like this:

<p> { text } </p>

In this case : style={{display: 'flex', justifyContent: 'flex-end'}}, the first {} indicate that you want to reference a javascript variable, and the second { display: ... } is the javascript variable itself. (Styles in JSX are defined as object which is different from HTML style attribute that takes string).

the second part regarding returning {} or () is very straightforward, you use () when you have a multi line return statement, and use {} when you are just returning a normal (literal) javascript object.

---

Related Topics