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/
Related
This question already has answers here:
Why can I change a constant object in javascript
(12 answers)
Closed 2 years ago.
Consider the following JavaScript code:
const myObject = {
innerValue: 'test'
}
myObject.innerValue = 'I can still change this, this is not a constant';
If I run this code, the browser outputs no errors, I presume, because only the outer object myObject is a constant and its properties are not. But how valid is this JavaScript code? I mean, are there any negative drawbacks to writing something like this?
Looks like you already understand that the variable myObject is const, but the object to which it refers is not. That's very much by design for JavaScript. Using const the way you did does not protect you from modifying the object.
You could use a property to protect the value of innerValue.
const myObject = {};
Object.defineProperty(myObject, 'innerValue', {
value: 'test',
writable: false
});
console.log(myObject.innerValue);
myObject.innerValue = 'this is not an error but will not change the value';
console.log(myObject.innerValue);
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)
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:
JavaScript object: access variable property by name as string [duplicate]
(3 answers)
Closed 6 years ago.
I have defined an object with properties that have hyphen in their names.
var data = {
"foo-bar": "value",
"this-that": "another value"
}
Now I need to reference this property in JS, but both these ways result in syntax error.
console.log( data.foo-bar )
and
console.log( data."foo-bar" )
So my question is. How can I access a property that contains hyphen in the name in JS?
Disclaimer: The server-side functionality require hyphen-naming of the properties and I don't really feel like rewriting somebody else's whole script that takes the input params like this. And yes, I know this current way is not the most clean approach possible.
You Could use data["foo-bar"] Instead.
This question already has answers here:
Accessing nested JavaScript objects and arrays by string path
(44 answers)
Closed 7 years ago.
var myObject = {
sub: {
myFunction: function() {
console.log('check');
}
}
}
var callFn = 'sub.myFunction'; // I want it to solve it here, whats going wrong?
myObject[callFn](); // Works, but not with 'sub.myFunction'
myObject.sub.myFunction(); // This works ofc.
I need a generic solution. Can someone explain why the sub.myFunction does not work? Does anyone have a workaround to solve this?
The . character is a valid part of a property name in javascript as long as you enclose it in quotes.
What that means to you:
myObject["sub.myFunction"] - looks for a property named sub.myFunction on myObject. It does not look for a property named myFunction on the sub property of myObject.
myObject.sub.myFunction - does not have the . in quotes so it's treated as a property accessor. That means we look for a myFunction property on the sub property of myObject.