Javascript variable declaration with brackets around initialized variables [duplicate] - javascript

This question already has answers here:
Javascript object bracket notation ({ Navigation } =) on left side of assign
(5 answers)
Closed 7 years ago.
In the React native website, there is the following line of code:
var React = require('react-native');
var { TabBarIOS, NavigatorIOS } = React;
In the second line of the example, what is the meaning of the brackets around the TabBarIOS and NavigatorIOS variables?

This is called a destructuring assignment. It's a newer feature being brought in the ECMAScript 6 spec.
Here is an example object:
var test = {
"hello": 1,
"world": 2
}
If we deconstruct it like this:
var {hello, world} = test;
This is the equivalent to doing:
var hello = test.hello,
world = test.world;
But, there is more fun stuff you can do with destructuring assignments...
Lets say we have this object:
var bucket = {
ExampleObject: function(input){
this.input = input.trim();
return this.input;
},
TestingObject: function(example){
this.example = example || {};
console.log(this.example.input);
}
}
Just for the record, I've given the members annoying names... So when destructuring, we can rename them like this:
var {ExampleObject: Example, TestingObject: Test} = bucket;
The binding pattern follows a syntax like so:
{ObjectMemberName}
// Or
{ObjectMemberName: VariableName}
For more information, you can look at the ECMAScript 6 specification draft or the MDN documentation

Related

What does this line of code mean? const {"intl": { formatMessage }, } = this.context [duplicate]

This question already has answers here:
Javascript object bracket notation ({ Navigation } =) on left side of assign
(5 answers)
Closed 4 years ago.
I'm new in react and I'm reading some code i found this line of code:
const {intl: { formatMessage }, } = this.context
is a const declaration but i don't understand
I know is JS ES6 but i don't understand what is it for?
How can I check the value of this const?
thanks
As people already answered. This is object destructuring
Simple example: const contact = {name: 'John', email: 'john#doe.com'}
With ES6 you can do const {email} = contact; //email = contact.email
In case you want to name the variable differently, it would be:
const {email: mailbox} = contact //equivalent to mailbox = contact.email;
Back to the original question: {intl: { formatMessage }, } = this.context
=> {formatMessage} = this.context.intl => formatMessage = this.context.intl.formatMessage
The code that you have is, actually a representation of the following code,
const formatMessage = this.context.intl.formatMessage
You can read about object destructuring to know more about it.
This simply means that this.context contains a structure similar to this
this.context = {
intl:{
formatMessage: // This has a value let's say "Hello"
},
//Other key-value pairs could be contained in the context object }
This line of code is a shorthand syntax telling you that only the formatMessage property which can be found inside "intl" should be retrieved from the large object called "this.context"

What is writing { } in Javascript? [duplicate]

This question already has answers here:
Javascript object bracket notation ({ Navigation } =) on left side of assign
(5 answers)
Syntax: const {} = variableName, can anyone explain or point me into the right direction [duplicate]
(1 answer)
Closed 4 years ago.
On this page (https://nodejs.org/api/modules.html), I found this writing: { }.
const { PI } = Math;
Does it have a particular name, so that I can get more information about it, and especially what does it produce?
Thanks in advance. :D
This is called "destructuring assignment". You can think of it as being equivalent to:
const PI = Math.PI;
…but a little more compact. It really shines when being used to pluck multiple properties off an object:
const { foo, bar, baz } = require('quux').util;
You can also destructure arrays using [ ]:
const [ first, second, third ] = array;
The curly brackets in javascript typically represent an object, but in this case, it is a "destructuring assignment". For example:
const obj = { value: 'hello world' };
const {value} = obj;
console.log(value); // outputs: hello world

ES6 - Possible to destructure from object into another object property? [duplicate]

This question already has answers here:
Object destructuring without var, let or const
(4 answers)
Closed 4 years ago.
So I'm trying to figure out if there's any simple ES6 syntax to do the following:
If I have an object
const config = { foo: null, bar: null }
And I want to assign the values of those properties from another object such as:
const source = { hello: "hello", world: "world", another: "lorem", onemore: "ipsum" }
I want to do something like the following but it doesn't work
{ hello:config.foo, world:config.bar } = source
I know I can do something very close like:
{ hello:foo, world:bar } = source
But this creates new variables foo and bar, whereas I want to assign to existing properties on another object. I'm just curious if there's an ES6 shorthand for this; I don't need help doing this with traditional code, I know there are a dozen ways and I already know most of them.
You're just missing brackets () around the statement.
const config = {};
const source = { hello: "hello", world: "world", another: "lorem", onemore: "ipsum" };
({hello: config.foo, world: config.bar} = source);
console.log(config);

Weird javascript code convention with "const" [duplicate]

This question already has answers here:
beginner's: const definition in Redux confusing
(1 answer)
What does curly brackets in the `var { ... } = ...` statements do?
(4 answers)
Closed 5 years ago.
What is this code convention in javascript?
const { navigate } = //whatever
As in, what sense does it make. I saw it in RNs React navigation
https://reactnavigation.org/docs/intro/
It's named destructuring. When you have an object and you want to take only a property of that object, you can get only it by using that convention.
let fullName = {
first: 'John',
last: 'Smith'
}
const { first } = fullName;
You can take a look here for more info's
http://wesbos.com/destructuring-renaming/
It's called destructuring
Example:
var myObject = {a: "what", b: "ever"};
const {a} = myObject;
console.log(a); // will give "what"

What does it mean to add a prototype to a function? [duplicate]

This question already has answers here:
How does JavaScript .prototype work?
(26 answers)
Closed 8 years ago.
Given:
var x = function () {
};
x.prototype = { abc: 25 };
Can someone explain to me what this means. Could this be done all inside a function without the .prototype?
var x = function () {
// something here ?
};
Prototypes are how the class model works in JavaScript - you've created a class x that has a property abc which defaults to 25:
var obj = new x();
alert(obj.abc); // 25
The function x is the class constructor, it is called when a new instance of that class is created and can initialize it. And that means of course that you can just set the abc property there:
var x = function()
{
this.abc = 25;
};
var obj = new x();
alert(obj.abc); // 25
This is supposedly the less efficient approach however:
You have to manipulate each object created rather than setting the property on the prototype once and forever.
The property is stored on each object and consumes memory each time, as opposed to being stored once on the prototype.
ECMAScript Harmony has a nicer syntax for defining classes and prototypes, however this one isn't implemented in any browser yet:
class x {
constructor() {
...
}
public abc = 25;
}
This is equivalent to your code defining the prototype, merely grouping related operations a little better.

Categories