This question already has answers here:
What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?
(14 answers)
Closed 6 years ago.
I am following a tutorial in javascript/angular2 and I know it is a novice question, but if someone could please explain what exactly is this piece of code doing. I have read at various places and in the Mozilla docs, but I am still confused about it. I am aware that: map calls a provided callback function once for each element in an array, in order, and constructs a new array from the results,but what exactly is the code doing in this context:
map(e => e.target.value)
It's nearly the same as this:
map(function(e) {
return e.target.value;
});
...it's just using the concise arrow function form instead of a function function. There are other differences between function functions and arrow functions (arrow functions close over this and a couple of other things, function functions don't), but that code isn't using any of them.
This is using ES2015/ES6 shorthand syntax. To write it out in ES5:
map(function(e) { return e.target.value; })
The function is the callback function, the e is the current element of the array, and the return value of e.target.value will be the value put in the new array.
Related
This question already has answers here:
java-script arrow function returns (x++,x) [duplicate]
(3 answers)
What does the comma operator do in JavaScript?
(5 answers)
When is the comma operator useful?
(15 answers)
Closed 9 months ago.
I tried looking at MDN on arrow functions, that links to an article ES6 In Depth: Arrow functions and the ECMAScript grammar. I didn't find an example of this style of function body.
See takeStockForBowl in example code below.
Question, what would this style of function definition be called?
Maybe it's a repurposing of a more basic JavaScript syntax and I just don't see it. Apologies if it's obvious.
const takeStockForBowl = bowl => ( // open paren
takeForBowl('protein', bowl), // side effect 1
takeForBowl('grain', bowl), // side effect 2
takeForBowl('veg', bowl), // ...
bowl.supplied = true, // side effect n
bowl // result
) // close paren
First of all, takeStockForBowl is really hard to read.
To understand what's happening here, we need to understand two things:
Arrow functions
Comma operator
Basically what the author has done here is avoided writing the following:
Explicit return statement
Curly braces for the function body
by taking advantage (or abusing) of implicit return in arrow function and the comma operator.
What comma operator does is it evaluates each of its operands from left to right and returns the value of the last operand which in this case is bowl.
More readable version of this function is:
const takeStockForBowl = bowl => {
takeForBowl('protein', bowl);
takeForBowl('grain', bowl);
takeForBowl('veg', bowl);
bowl.supplied = true;
return bowl;
}
This question already has answers here:
What do multiple arrow functions mean in JavaScript?
(7 answers)
Closed 3 years ago.
Below is a code snippet which I came across in one of the blog for redux.
This snippet explains redux-thunk. But I am trying to make sense out of the weird syntax
return ({dispatch, getState}) => next => action =>{}
I tried a google search with this syntax but did not get much help. I am not understanding how next and action objects are getting their values. Can someone please help me understand what's going on here?
Chaining of functions in this way is usually to enable a user to bind arguments to a final function in a controlled fashion, rather than having to supply them all in one go.
In effect it is an API design choice for a piece of functionality.
({dispatch, getState}) => next => action => {}
...is equivalent to:
function({dispatch, getState}) { // destructure two properties into arguments
return function(next) {
return function(action) {
// this function has access to `dispatch`, `getState`, `next` & `action`
}
}
}
Note that the "binding" of the arguments to the inner functions occurs through a feature of JavaScript called closures. Full explanation of closures in JavaScript here.
This question already has answers here:
What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?
(14 answers)
Closed 4 years ago.
I was doing a question on codesignal and when I couldn't get the answer myself for all tests, revealed the answers and saw this one; while I understand what it's trying to do (make sure positions are not divisible by n, and if it is increment n by one) I'm having trouble understanding the arrow function syntax and, rewriting it myself from their code.
function obst(inputArray) {
for (var n=1;;n+=1) if(inputArray.every(x=>x%n)) return n;}
In Javascript, every function written like this:
function(args) {
// DO SOME STUFF
}
can be written like this:
(args) => {// DO SOME STUFF}
In your case, the method .every() expects a function, and
function(x) {
return x%n;
}
is written as
x => x%n
inputArray.every(x=>x%n)
is the same as
inputArray.every(function (x){
return x%n
}))
( except for the way the 'this' keyword works )
For any doubt about Javascript language, i recommend the You Dont Know Js series
written by Kyle Simpson.
It's a very enlightening book.
Tip: When you write a code, ask question to youself like:
what i'm doing?
assigment means equality?
what are the methods that can i use in string variables?
And something like that.
Stimulate yourself to know what in the actual fudge, you are doing.
Cheers!.
This question already has answers here:
What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?
(14 answers)
Closed 5 years ago.
I'm not sure what this is called in Javascript:
exports.withLocalCallback = () => {
return [1, 2, 3].map(x => x + 1)
}
I haven't seen this before and I can't even think of a way to google it. Can someone explain what's happening here?
It's arrow functions, and they work almost the same as normal js functions, with the difference that 'this' is bound to the scope in which the function is defined. So you don't need to bind functions to access the correct object.
The difference is none if you don't need 'this', except is another syntax, which looks more like functional language functions.
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 recently came across a bit of javascript in my quest to self learn the language which is a clever way of turning the string 'code wars' to C.Wars and 'Barack Hussain obama' to B.H.Obama. My question is on the use of the =>. I could not find details on it. Here is the snippet:
n.split(' ').map((v, i, a) => v.charAt(0).toUpperCase() + (i == a.length - 1 ? v.slice(1) : '.')).join('')
the syntax of map in javascript is:
arr.map(callback[, thisArg])
So would it be right to assume that the => is injecting an anonymous callback function with the parameters v, i and a. From the documentation I see that the callback function for map must contain three arguments:
currentValue
The current element being processed in the array.
index
The index of the current element being processed in the array.
array
The array map was called upon.
Is there any where I can find about the => syntax and its other uses or can someone explain it further to me?
A
That is an arrow function. It represent an anonymous function. It came with the EcmaScript 6 standard.
It does mostly the same as a regular function() {<something>} except it carries on with the "this" from the outer scope. It does not have its own "this". This means you do not need to bind "this" into the callback function anymore.
Here you can find further information.