JavaScript Object Bracket Notation ({ Navigation } =) on Left Side of Assign

Javascript object bracket notation ({ Navigation } =) on left side of assign

It's called destructuring assignment and it's part of the ES2015 standard.

The destructuring assignment syntax is a JavaScript expression that
makes it possible to extract data from arrays or objects using a
syntax that mirrors the construction of array and object literals.

Source: Destructuring assignment reference on MDN

Object destructuring

 var o = {p: 42, q: true};
 var {p, q} = o;

 console.log(p); // 42
 console.log(q); // true 

 // Assign new variable names
 var {p: foo, q: bar} = o;

 console.log(foo); // 42
 console.log(bar); // true

Array destructuring

var foo = ["one", "two", "three"];

// without destructuring
var one   = foo[0];
var two   = foo[1];
var three = foo[2];

// with destructuring
var [one, two, three] = foo;

Adding fields to a JS object by the bracket notation that have special characters

That's perfectly normal and usable - it's just shown as a string in the debugger/console you're using because Content-Type isn't a valid variable name, and therefore cannot be displayed as such. You can only access a property called Content-Type through bracket notation - other properties, such as Id, you could access through either params.Id or params["Id"] - but due to the nature of the name of the property, and how it can't be used as a valid variable name in JavaScript, it's displayed with quotes.

tl;dr just a visual issue, it's performing exactly how you want it to be.

Is ES6 dynamic object property or plain bracket notation being used here?

The reason why they called it a dynamic property is because from the perspective of the total object - the language variable that is being passed in as a key can contain any value during the application runtime, hence hypothetically any property can be accessed at different runs - making it dynamic.

So the instructor was correct as there is no other official term to name a variable that is used as a property accessor.

What's the proper name for taking out single key:value from object and storing it as variable?

This is called destructuring assignment. Please refer to MDN web docs

Variable initiation inside curly braces

This is a feature called destructuring assignment in ES6. This is what happens:

// Imagine this is the object you require
var reactRouter = {
  create: 'foo',
  HistoryLocation: 'bar',
  HashLocation: 'baz'
}

// Destructure
var {create: createRouter, HistoryLocation, HashLocation} = reactRouter

// Now the variables are in scope
console.log(createRouter, HistoryLocation, HashLocation)
//^ foo, bar, baz

---

Related Topics