This question already has answers here:
Destructuring and rename property
(2 answers)
Closed 5 months ago.
In Javascaript, I publicly assigned the variable A. I now want to assign A to a destructured variable. But all I can think of is:
const {variable} = getVariable();
A = variable;
How can I make this into a one-liner?
You can write
({variable: A} = getVariable());
if you insist on using destructuring to assign a previously declared variable, but really there's no good reason to use destructuring here. Normal property access is so much simpler, shorter, and more readable:
A = getVariable().variable;
You can do this
const {variable:A} = getVariable();
Related
This question already has answers here:
What do curly braces inside of function parameter lists do in es6?
(3 answers)
Closed 2 years ago.
I came accross this line of javascript code
let {max}=Math;
that allows you to do this:
let a=max(1,2) //2
Without using the Math object like this:
Math.max(1,2)
I don't know where to find the documentation of this syntax because all I have is that line of code and not a single clue to help me search on google so anyone knows about this practice ?
This is called Destructuring Assignment and you can find documentation here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
What you see there is called Destructuring assignment.
You'll find plety of examples when you Google for Destructuring assignment JS ;)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
Anyway, in this particular case you assign the property max (a function in this case) from Class Math.
This allows you to just call max directly.
Imagine having an object DestructTest with a property x
Then you can get the property x by just typing const {x} = DestructTest
Instead of const propX = DestructTest.x
JavaScript takes care for you to get the wanted property for you if you just ask for the right name ;)
Hope this makes things a bit more clear.
Cheers
This question already has answers here:
Destructuring of es6 but passing dynamic variable
(2 answers)
Closed 2 years ago.
I am using Context API to pass items from one component to another. I am destructuring items as one would do:
const { smallPrice, bigPrice } = useContext(Context)
I wondered if it would be possible to destructure them with interpolated strings, so that I can use the props.id from the component.
const { `smallPrice${props.id}`, `bigPrice${props.id}` } = useContext(Context)
This won't work however. Are there any alternatives to destructure things coming from context with interpolated strings?
You can do this by using destructuring assignment. You reference the variable by a key and assign it to a known variable name. Example:
const {
[`smallPrice${props.id}`]: smallPrices,
[`bigPrice${props.id}`]: bigPrices
} = useContext(Context);
console.log(smallPrices);
console.log(bigPrices);
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"
This question already has answers here:
Javascript object bracket notation ({ Navigation } =) on left side of assign
(5 answers)
What is destructuring assignment and its uses?
(3 answers)
Closed 3 years ago.
I know how to declare const variable like const a = 1;
but I dont get what is this
const { app, BrowserWindow } = require('electron')
can anyone explain me?
That’s a destructuring assignment.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
It lets you make shortcuts to members of an array or structure.
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