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"
Related
This question already has answers here:
What does curly brackets in the `var { ... } = ...` statements do?
(4 answers)
Closed 4 years ago.
I upgraded a npm and now my webpack fails around this line here.
const { theme } = params;
What does this mean when you have { } around the variable name?
This is called destructuring assignment. The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
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
This question already has answers here:
Calling function inside object using bracket notation
(2 answers)
Closed 6 years ago.
I rather have a seemingly trivial issue, but am not able to figure out an efficient approach.
I have a list of about 50 functions to be called such as :
globalClient.funcA(...)
globalClient.funcB(...)
globalClient.funcC(...)
My code should ideally dynamically create the name of the function (funcA / funcB/ funcC and then proceed to actually call that function. My approach below does not work (please note that these aren't exactly the actual names of the functions. I'm only giving these arbitrary names for simplicity of understanding):
var functionName = 'func'.concat('A');
globalClient.functionName
The second line is where it errors out. Now JS thinks that functionName itself is the name of the function. What I want it to do is resolve functionName to funcA and then call globalClient.funcA(...) instead.
I've thought about implementing a switch / case for this but I'm sure there is a far simpler appraoch. Any ideas?
You could use the bracket notation as property accessor.
globalClient[functionName]()
You can use the [ ] operator for accessing the properties.
var globalClient = {
funcA: function(){
console.log('funcA is called');
}
}
var functionName = 'func'.concat('A');
globalClient[functionName]();
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/
This question already has an answer here:
Where can I get info on the object parameter syntax for JavaScript functions?
(1 answer)
Closed 7 years ago.
I was reading some tweets and I came across this tweet by Dan Abromov
The syntax has me confused.
const Font = ({ children }) =>
<Block...
What is the point of { } around children? Clearly its not an object. I presume its ES2015 feature.
Many thanks
It's a destructuring binding pattern. It indicates that the parameter children should be bound to the value of the children property of an object passed to the function.
Try this in an ES2015 environment:
function x({ foo }) {
console.log(foo);
}
x({ hello: "world", foo: "bar", well: "that's all"});
The string "bar" will be logged to the console, because that's the value of the "foo" property of the object passed to the function.
If the value passed to the function is an object with no "children" property, of if it's not an object at all, then the parameter will be undefined.