This question already has answers here:
How does this object method definition work without the "function" keyword?
(2 answers)
Closed 6 years ago.
I'm having trouble understanding these javascript syntaxes. In the block of code below, on the second line. The square bracket is quickly followed by a round bracket or parentheses which I suspected is used to get arguments. I do not understand how this two is being chained to form an expression and what it means.
export const recipeCount = createReducer(0, {
[types.ADD_RECIPE](state, action){
return state + 1;
}
});
Also on this line, the connect method takes in two arguments, (state) => {return {}} and mapDispatchToProps . Then it is quickly follwed by () with an argument. At first, i though it was some of object casting in java but that doesn't make sense.
export default connect((state) => {return {}}, mapDispatchToProps)(AppContainer);
The code executes fine and produces expected result. I just don't understand what is going on. Pls Help, would be glad to get answersre accompanied with links to pages i can read for better understanding. Thanks.
Answers are in the comment to the question. Had to copy them out again, so i can mark the question as answered and close it.
"Not sure what's going on with the first one. For the second one, connect() is a function that returns a function so the second () is to immediately call that returned function." – Ouroborus
"The first one is a dynamic object literal property that is also an object method. I find this not readable at all. I would re-write that one. – Davin Tryon"
and also a link to Computed property names to make it clearer from – Denys Séguret
Thanks Guys.
Related
This question already has answers here:
ECMAScript 6 arrow function that returns an object
(6 answers)
Closed 11 months ago.
So basically I have list of objects. I am iterating and have to change one property of the object. I have two scenarios, in one I have to change the property of a particular object.
setList(list.map((list_item)=>
list_item.id===id?{...list_item,doubleClick:true}:list_item
)
And there is another scenario where I have to change the property of every object in the list.
setList(list.map((list_item)=>{...list_item,doubleClick:false}))
The first case is working fine but the second case is throwing error >Parsing error: Unexpected token (34:35)
To me they don't look that different except first one has ternary operator? Is that what's making a difference?
How to fix the second case?
Edit: So I think spread operator works with an expression or declaration.
setList(list.map((list_item)=>list_item={...list_item,doubleClick:false}))
This works.
Is there any better or correct way to do it?
In your second case, you need to return the new object.
setList(
list.map((list_item) => {
return { ...list_item, doubleClick: false };
})
);
Or a shorter way is to wrap the new object inside ()
setList(list.map((list_item) => ({ ...list_item, doubleClick: false })));
Read more about the syntax here
Edit:
The syntax in the third case is fine but the logic isn't correct. You want to return the new object, not reassign elements in .map()
This question already has answers here:
How to interpret function parameters in software and language documentation?
(4 answers)
Closed 2 years ago.
I'm trying to get a good sense of reading documentation instead of asking so many questions here and there.
The first thing i'm confused of is the symbols.What do the symbols below mean?
example) app.use([path,] callback [, callback...])
reference source:https://expressjs.com/en/5x/api.html#app.use
Question1&2 can be solve by the similar posting.
Another example is like
bisector.left(array, x[, lo[, hi]])
what does x[, mean?
what does **lo[,**mean?
what does ,hi] mean?
reference source: https://devdocs.io/d3~5/d3-array#bisect
It would be very grateful if anyone could help me to under stand these cryptic symbols.
[xxx] means that this parameter is optional. You can use it or omit it.
[callback] is also an optional parameter. In this case it's a function that will be called under some circumstances.
Nested bisector.left(array, x[, lo[, hi]]) means that you need to have some options before you can specify others. For example, you cannot specify lo in this case without specifying hi first.
This question already has answers here:
What do curly braces inside of function parameter lists do in es6?
(3 answers)
Closed 2 years ago.
I came accross this line of javascript code
let {max}=Math;
that allows you to do this:
let a=max(1,2) //2
Without using the Math object like this:
Math.max(1,2)
I don't know where to find the documentation of this syntax because all I have is that line of code and not a single clue to help me search on google so anyone knows about this practice ?
This is called Destructuring Assignment and you can find documentation here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
What you see there is called Destructuring assignment.
You'll find plety of examples when you Google for Destructuring assignment JS ;)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
Anyway, in this particular case you assign the property max (a function in this case) from Class Math.
This allows you to just call max directly.
Imagine having an object DestructTest with a property x
Then you can get the property x by just typing const {x} = DestructTest
Instead of const propX = DestructTest.x
JavaScript takes care for you to get the wanted property for you if you just ask for the right name ;)
Hope this makes things a bit more clear.
Cheers
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:
Is there a way to provide named parameters in a function call in JavaScript?
(12 answers)
Closed 7 years ago.
Calling a Javascript function with something like
someFunction(1, true, 'foo');
is not very clear without familiarity with the function.
I have seen and used the style where comments are inserted to name the arguments:
someFunction(/*itemsToAdd*/1, /*displayLabel*/ true, /*labelText*/ 'foo');
But when it gets beyond 3 or more parameters, it seems better to pass arguments in a JSON object which makes it order-independent, and allows default values to be provided in the called function
someFunction({'itemsToAdd':1, 'labelText':'foo', 'displayLabel':true});
My question is; what is the general practice in the industry, and are there overriding reasons for not using any of these methods. Lint for example does not like the second method.
Personally I'd just grep the function name and take a look at the comment associated with it. Well maintained code will have a comment above the function explaining what the arguments are and what it does with them, and you can just paste that above the function call if you need to explain why your arguments are the way they are.
Using a JSON to pass arguments seems like a way to add unnecessary parsing overhead and to possibly confuse the maintainer - just add more fields and pass in NULLs to the fields where you want default values, and you can explain why you're passing in NULLs in the call comment instead of just having them not appear in the JSON.