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.
Related
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 literal: what exactly is {a, b, c}?
(3 answers)
Closed 4 years ago.
I came across this function, called generateMessage which takes 2 parameters and returns and object. The function is as follows:
var generateMessage = (from, text)=>{
return {
from,
text,
createdAt: new Date().getTime()
}
};
module.exports = {generateMessage};
This does NOT throw any errors, and attaches 3 properties to the returned object: '.from' , '.text' and '.createdAt', I am confused about the '.from' and '.text' properties.
My question is why don't we write from: from , text:text, in this way the returned object will have a proto property of .from and .text, which will have their values as the from and text from the parameters.
Why does just writing from and text for the returned object work in this case?
That's ECMAScript's 'shorthand''s property and notation:
http://es6-features.org/#PropertyShorthand
http://es6-features.org/#ObjectMatchingShorthandNotation
It's as the name suggests, a shorthand method of object definition.
This question already has answers here:
Methods in ES6 objects: using arrow functions
(6 answers)
Closed 5 years ago.
I am little new to ES6, but not with node js, but this looks little weird because when I started using arrow style function instead of function() style, I was in assumption that both are exactly same but the syntax is different. But today came to know about this case.
When I define a function like this.
exports.intent = {
greetings: {
matcher: ["hi", "hello"],
reply: function(){
console.log(this); // it prints {greetings: {..}} expected
return this.matcher[0]; // returns "hi" which is expected.
}
}
}
But when I defined same function in arrow style, it throws error as this here now references the whole object instead of current object.
exports.intent = {
greetings: {
matcher: ["hi", "hello"],
reply: () => {
console.log(this); // it prints whole object {intent: {....}}
return this.matcher[0]; // fail here.
}
}
}
I came to know that there are some changes in this refrencing between these 2 types of declaration. https://stackoverflow.com/a/40498293/2754029
Is there are any way so that I can refrence this to current object only?
No. You will not be able to override this inside an arrow function body. Even if you try to bind it, it doesn't work. This one is an interesting article I came across recently.
This question already has answers here:
Accessing an object property with a dynamically-computed name
(19 answers)
Closed 6 years ago.
Title might be a little confusing, but I have following problem:
var propertyList = {
type1: {property1: 1},
type2: {property1: 2}
}
class Test {
constructor(typ){
this.property1 = propertyList.typ.property1;
}
}
var a = new Test('type1');
Code is pretty self-explanatory - I want to set property1 property of a object not by passing value manually in constructor, but rather chosing one of values from propertyList object literal by passing one of its key to constructor. I expected that when I run above code, object a will be created with property1 value set to 1. However instead of that I got Uncaught TypeError: Cannot read property 'property1' of undefined error. When I pust console.log(typ) in the first line of constructor, it correctly shows that value passed into constructor is type1. Why above code doesn't work and can it be fixed somehow?
Your syntax is a little off. You can't use the passed-in argument typ in your assignment like that because the code will then actually look for the property typ within propertyList (like propertyList { typ: }). To use your passed-in argument, wrap it in brackets:
this.property1 = propertyList[typ].property1;
This question already has answers here:
calling eval() in particular context
(18 answers)
Closed 7 years ago.
I have some trouble using the Object properties. I want to evaluate an expression within the myObject context to avoid using the myObject.property.
My final goal is to evaluate a more complex expression like 'property1+property2' instead of 'myObject.property1+myObject.property2'.
I have tried the call method to change the context but, it doesn't seem to see the Object properties in the passed context(i.e. the Object containing the properties)(see the last line of the code below generating the error).
var myObject = {
property1: 20,
property2: 5000
};
print(myObject.property1); // return 20
print(eval.call(myObject,property1)); // ReferenceError: property1 is not defined
Is there any way to use the Object properties without the usage of this. or myObject. prefix?
Well, there's with statement which is deprecated and you probably shouldn't use it too much, but in this case maybe it wouldn't be considered harmful:
with(myObject){
console.log( property1 ); // 20
console.log( eval('property1') ); //20
console.log( eval('property1+property2') ); // 5020
}
http://jsfiddle.net/f7d1b79b/1/