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: "
Related
This question already has answers here:
What does this symbol mean in JavaScript?
(1 answer)
Javascript object literal: what exactly is {a, b, c}?
(3 answers)
Closed last month.
I'm trying to decipher some code and I stumbled upon this:
var disabled = mswDisabledValue === 'true' ? true : false;
var serviceWorkers = JSON.parse("[{\"scope\":\"/\",\"serviceWorkerUrl\":\"/uxsw/scope/root.js\"},{\"scope\":\"/x\",\"serviceWorkerUrl\":\"/uxsw/scope/now_x.js\"},{\"scope\":\"/now\",\"serviceWorkerUrl\":\"/uxsw/scope/now_x.js\"}]");
var SERVICE_WORKER_MANAGER_CONFIG = { disabled, serviceWorkers };
What does the third line mean?
I tried printing SERVICE_WORKER_MANAGER_CONFIG, and it returned an object:
{
disabled: false,
serviceWorkers: [{
scope: '/',
serviceWorkerUrl: '/uxsw/scope/root.js'
},
{
scope: '/x',
serviceWorkerUrl: '/uxsw/scope/now_x.js'
},
{
scope: '/now',
serviceWorkerUrl: '/uxsw/scope/now_x.js'
}
]
}
Seems like I can declare an object using variables instead of key/value pairs, but I haven't found this documented anywhere. Is this the correct usage of JavaScript?
The line
var SERVICE_WORKER_MANAGER_CONFIG = {disabled, serviceWorkers};
is a valid javascript object initializer. It is also called "Object literal syntax" and it is used as a shorthand for initializing JSON objects. It is identical to calling:
var SERVICE_WORKER_MANAGER_CONFIG = {disabled : disabled, serviceWorkers : serviceWorkers};
More information and examples can be found on MDN.
This question already has answers here:
Why add singe quote to a object's property [duplicate]
(2 answers)
Closed 4 years ago.
In my object literals, I would like to create keys that would not be valid identifiers in order to generate a JSON file like the one in the picture, using JavaScript.
Is it possible to create the object like the following?
var objet = {
targets: [
new Stage(),
{
isStage: false,
name: "Sprite1",
blocks: {
o7d.+f~]6/Bs|=|c/F(=: "Hello"
}
}
]
};
This is what the JSON file looks like:
Yes, you can:
const data = {
blocks: {
"o7d.+f~]6/Bs|=|c/F(=": "Hello"
}
}
console.log(data)
But please be careful what exactly you are doing, because you loose readability with this keys naming.
For understanding purpose, I have picked a sub-set of the object.
You can try following
var blocks = {
"o7d.+f~]6/Bs|=|c/F(=": "Hello" // surround key with quotes
};
console.log(blocks["o7d.+f~]6/Bs|=|c/F(="]); // use bracket notation to fetch
You can use the ES6 feature objet litteral dynamic key:
const illegalKey = 'o7d.+f~]6/Bs|=|c/F(=';
...
blocks: {
[illegalKey]: "Hello"
}
Or just:
blocks: {
'o7d.+f~]6/Bs|=|c/F(=': "Hello"
}
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 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 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.