This question already has answers here:
What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?
(14 answers)
Closed 7 years ago.
I am reading this explanation in order to get a better understanding of ES6.
In the bit about Enhanced Object Literals, this is given as example code:
var obj = {
... (removed as not relevant) ...
// Computed (dynamic) property names
[ 'prop_' + (() => 42)() ]: 42
};
I understand what is happening except for the last sentence
I get that
: 42
Is the value (Number) that will be given to the property, and that
[ 'prop_' + ... ]
Is a dynamic variable name that starts with the string prop_.
However, what does this mean/do?
(() => 42)()
(() => 42)() is a long way of writing 42 in ES6 using an arrow function.
Related
This question already has answers here:
JavaScript get variable in current scope by name
(2 answers)
Closed 1 year ago.
You have a variable:
const test = "Some random value."
and the name of the variable in a string format:
const input = "test"
is there a way to get the value without a enum?
console.log(someMagicFunction(input))
$ => "Some random value."
Thanks!
Short answer - no.
You are kind of describing the behavior of a pointer - sort of... You want to get what is stored in memory and referenced as the variable test. JS does not support that.
There are things you could do such as store the keys and values in a hash map (an object) and have a similar effect.
const store = {
test: "Some random value.",
foo: "bar"
};
const magicHappensHere = (key) => {
return store[key];
};
console.log(magicHappensHere('test')); // "Some random value."
This question already has answers here:
Multiple assignment in JavaScript? What does `[ a, b, c ] = [ 1, 2, 3 ]` mean?
(4 answers)
Closed 5 years ago.
Take the following line of code
const [component] = router.getMatchedComponents({ ...to })
Could anyone advise what the square brackets around component means here? I have tried to google this but struggling to find an answer
It's called Destructuring assignment, and it's used to unpack the values of an array and assign them to new variables.
So here in your code:
const [component] = router.getMatchedComponents({ ...to })
You are assigning to the component variable the first element held in the array that will be returned by router.getMatchedComponents({...to}), where to is an array-like structure turned into object using the spread operation.
This question already has answers here:
Multiple assignment in JavaScript? What does `[ a, b, c ] = [ 1, 2, 3 ]` mean?
(4 answers)
Closed 5 years ago.
Take the following line of code
const [component] = router.getMatchedComponents({ ...to })
Could anyone advise what the square brackets around component means here? I have tried to google this but struggling to find an answer
It's called Destructuring assignment, and it's used to unpack the values of an array and assign them to new variables.
So here in your code:
const [component] = router.getMatchedComponents({ ...to })
You are assigning to the component variable the first element held in the array that will be returned by router.getMatchedComponents({...to}), where to is an array-like structure turned into object using the spread operation.
This question already has answers here:
javascript es6 array feature [...data, 0] "spread operator"
(2 answers)
Javascript Property with three dots (...)
(5 answers)
Closed 5 years ago.
I'm using Vuetify for a vue app, in this file I saw a very strange syntax which I can't find what it is
on line 38:
const data = {
attrs: { disabled: this.disabled },
class: this.classes,
props: {},
directives: [{
name: 'ripple',
value: this.ripple || false
}],
on: {
...(this.$listeners || {}), // <<<---- here
click: this.click
}
}
can anyone tell what is that three dots? any articles about this would be nice
thanks
That's the spread operator! It grabs all the properties from the object.
In that example, it'll copy the object without mutating it.
it's a spread operator, which is used in ES6 for both objects and arrays in Javascript. Here, the returned value of (this.$listeners || {}) is extracted. This returned value, combined with click: this.click is added into another empty object, following the "on: "
This question already has answers here:
ECMAScript 6 arrow function that returns an object
(6 answers)
Closed 6 years ago.
According to the documentation, you can return an expression from an arrow function:
(param1, param2, …, paramN) => expression
// equivalent to: => { return expression; }
but this doesn't seem to work as I would expect (nodejs 4.2.3)
> [1,2,3].map(i => i);
[ 1, 2, 3 ]
> [1,2,3].map(i => {});
[ undefined, undefined, undefined ]
Shouldn't the 2nd example return 3 empty objects? Or am I missing something?
According to the docs, the body of fat arrow function can be written as either a single expression or a series of statements wrapped into {} (just as you write bodies of plain old functions).
The point is, if parser encounters { after the =>, it goes with the second option. Now, it doesn't matter whether or not you use empty object literal or full object literal (like { a: 2 } in the first edit of this answer) - it's never treated as object literal, only as a function's body.
And what happens if function doesn't have a return statement? Right - this function returns undefined. That's why you get three of those as result of map (both for => {} and for => { a: 2 }).
To get three empty objects instead, just wrap {} into (), like this:
[1,2,3].map(i => ({}));
... as it forces the parser to go with expression path.