Variable initiation inside curly braces [duplicate] - javascript

This question already has answers here:
Javascript object bracket notation ({ Navigation } =) on left side of assign
(5 answers)
Closed 7 years ago.
What does this code translate to? I can't figure out how the variables inside the curly braces are related to = require('react-router').
var { create: createRouter, HistoryLocation, HashLocation } = require('react-router')
It is from this repo

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

Looks like it's destructuring assignment. It is a part of Javascript ES6 and is described here.
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.
Cool new feature! I'm looking forward to using it.

Related

Javascript weird syntax in function parameter [duplicate]

This question already has an answer here:
Where can I get info on the object parameter syntax for JavaScript functions?
(1 answer)
Closed 3 years ago.
I am learning vue and I came across this weird syntax in defining a function, I am curious what it is called and where i can learn more about it
register({commit}, credentials){
}
Why are there brackets around commit? Shouldn't it just be simple:
register(commit, credentials){
}
What's the purpose of placing brackets around commit variable?
This is object destructuring assignment. You can read about it on MDN here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
Basically, your function's first parameter is an object that has a commit property. Destructuring lets you pull that property out of the object. Here's an example of destructuring being used (but not within function arguments):
const obj = {
commit: "Hi there"
}
const { commit } = obj;
console.log(commit);
// "Hi there"

Understanding Module Require Syntax of Javascript [duplicate]

This question already has answers here:
Javascript object bracket notation ({ Navigation } =) on left side of assign
(5 answers)
Closed 5 years ago.
I have recently come across this line of code.
const { Bar, Data: { Selectors } } = require('some-module');
Can someone please tell me what does Data: { Selectors } do in this piece of code? I understand that it is importing some module in my codebase, just confused about the {Selectors} part.
Also, if I want to write it using import syntax what would be the equivalent code for the same?
e.g : import Bar from "some-module"
It doesn't really have to do with modules (syntax is the same for import or require: import {Bar} from "some-module" ), it's just a destructuring assignment creating two variables, Bar and Selector.
Here's another example along with many other ES6 features http://es6-features.org/#ObjectMatchingDeepMatching
const obj = {Bar: 1, Data: { Selectors: [1,2]}};
const { Bar, Data: { Selectors } } = obj;
// This is another ES6 feature, same as saying
// console.log({Bar: Bar})
console.log({Bar});
console.log({Selectors});
The above is the same as saying
const Bar = obj.Bar;
const Selectors = obj.Data.Selectors

What is this es6 assignment operator? [duplicate]

This question already has answers here:
Javascript object bracket notation ({ Navigation } =) on left side of assign
(5 answers)
Closed 5 years ago.
If this operator declared:
const { assign, isEmpty, run } = Ember;
Then, instead of:
Ember.run(() => { ... });
Ember.assign(foo, {});
It can be written as:
run(() => { ... });
assign(foo, {});
Which is much nicer!
What is it and how does it work?
Note: I'll edit this question to make it clearer when I know...
It's called destructuring and yes, it's very nice. Very convenient for cleaning up your code.
As explained by MDN:
The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
Full reference here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Javascript: set object variable to inner object instance [duplicate]

This question already has answers here:
Self-references in object literals / initializers
(30 answers)
Closed 6 years ago.
I'm trying to create a class to better organize my code, I decided to go the object literal route
var MyClass = {
}
I'm currently running into issues migrating some of my functionality though, previously I had global scope variables Channels for example set to an object instance. Is there a way to still do this in javascript within a class without moving the object into global scope?
var Prime = {
Channel: new __Prime__Channel(),
//The object in question
__Prime__Channel: function() {
this.Property = Value;
},
}
this throws
Undefined reference __Prime__Channel() at line 2
In global scope you could do
var Channel = new __Prime__Channel();
function __Prime__Channel() {
this.Property = Value;
}
without any errors
An object is no class, please ensure you're using the right terminology.
With an object literal it is not possible to do what you want, the only way is
var Prime = {
__Prime__Channel: function() {
this.Property = Value;
}
}
Prime.Channel = new Prime.__Prime__Channel();
However, maybe an object literal is the wrong pattern anyway. If you want to avoid global variables, look into the module pattern and IIFEs.

What is this js syntax called? [duplicate]

This question already has answers here:
Javascript object bracket notation ({ Navigation } =) on left side of assign
(5 answers)
Closed 6 years ago.
I'm not sure if there is a specific name for this way to pull object properties into their own variable? If there is a name, does anyone know?
var object = {
something: 'a string',
another: 'another string',
}
var { something, another } = object;
This is called object destructuring.
Object destructuring, read up on it here:
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
A lot of this new syntax isn't fully implemented in all js engines, so be careful when using it!
If you want to learn more about it, checkout this tutorial:
https://www.eventbrite.com/engineering/learning-es6-destructuring/

Categories

Resources