Weird javascript code convention with "const" [duplicate] - javascript

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"

Related

Overriding function named params in Javascript? [duplicate]

This question already has answers here:
Where can I get info on the object parameter syntax for JavaScript functions?
(1 answer)
ES6 Object Destructuring Default Parameters
(1 answer)
Closed 2 years ago.
function lookupRecord2({value1 = "blue", value2 = 7}) {
console.log('theValues');
console.log(value1);
console.log(value2);
}
lookupRecord2( { value1: 'pink', value2: 9 } );
I've read that Javascript doesn't allow for named parameters so I'm confused how the above code works. What is happening here that's allowing me to override the params?
I think what's confusing is that the params are assigned with "=" whereas the object I'm passing uses ":" ...
ADDED:
I know this is a form of destructuring, but I still can't make sense of it b/c it's in the function declaration.
function des({ a = 1, b = 2 } = {}) {
console.log(a);
console.log(b);
}
des();
This is a destructing syntax where we're able to pass default values.
It works everywhere, not just in function declarations.
{ a = 1, b = 2 } = { b:3 }
// assigns 1 to "a" and because "b" already exists, "b" is 3
MORE INFO HERE: can someone explain this seemingly weird assignment `{key=value} = argument`

What are Exceptions to javascript's Object pass by reference? [duplicate]

This question already has answers here:
How does variable assignment work in JavaScript?
(7 answers)
Is JavaScript a pass-by-reference or pass-by-value language?
(33 answers)
Closed 3 years ago.
Consider the Two Snippets
const sayMyName = wizard => {
wizard.name = 'Shazam';
}
let boy = { name: 'Billy' };
sayMyName(boy);
console.log(boy.name);
Since We know that objects in js are passed by reference hence a reference to boy object is assigned a property with value 'Shazam'. Since Object at the stored Reference is changed hence boy's name is changed to 'Shazam'.
const sayMyName = wizard => {
wizard = { name: 'Shazam' };
}
let boy = { name: 'Billy' };
sayMyName(boy);
console.log(boy.name);
Considering above case Here When Boy is passed in sayMyName function why it is behaving as pass by value and boy.name still return 'billy' ?

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);

Categories