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;
}
Related
This question already has answers here:
When do we have to use () and {} in ES6 Arrow Functions
(2 answers)
Arrow function without curly braces
(9 answers)
Curly Brackets in Arrow Functions
(3 answers)
What does the comma operator do in JavaScript?
(5 answers)
Closed 2 months ago.
In my years of JS development I've seen the following examples:
let a = () => console.log("a");
let b = () => { console.log("b"); }
let c = () => (console.log("c"));
I know the difference between the first two options, but the last one always seem'd a little off to me. I've also tried to do the following, which surprisingly works:
let c = () => (console.log("c1"), console.log("c2")); // Outputs both console logs.
And also this:
let c = () => (1, 2, 3, 4 ,5);
let x = c(); // 5
I've searched about this way of defining function bodies, yet I'm not satisfied with what I have found since every example I've stumbled on was poorly explained.
Can anyone please explain to me a bit more in-depth the difference between the three examples, and also what's special about the last one?
Thanks in advance.
let c = () => (console.log("c"))
I know the difference between the first two options, but the last one always seem'd a little off to me.
Arrow syntax allows you to return the value of the expression directly without having to enclose in curly braces and using a return statement. In the example above, enclosing the value (returned by console.log) in brackets does not change its value.
And also this:
let c = () => (1, 2, 3, 4, 5);
What you are seeing is the comma operator in action. It will return the value of the last operand, which is why c returns 5.
I've also tried to do the following, which surprisingly works:
let c = () => (console.log("c1"), console.log("c2")); // Outputs both console log
In this case, both expressions are evaluated, and thus both strings are logged. However, the expression yields a value of undefined, since console.log returns undefined.
First of all, you're talking specifically about arrow (=>) functions. Traditional functions must have a body enclosed in { }.
An arrow function can have a traditional body enclosed in { }. It can also have a single expression as its body, in which case the result of evaluating the expression is implicitly the return value. Given that, note that any expression in JavaScript in any context can be enclosed in parentheses ( ) and the value is the same as the enclosed expression.
The comma effect is the operator in the JavaScript expression grammar ,, which allows disparate expressions to be chained together into a list that, syntactically, is still a single expression. The comma operator is useful sometimes because expressions can have side-effects; for example, a function call is an expression, and a function call may do almost anything. The value of a list of expressions in a comma operator list is the value of the last one of the expressions after evaluation.
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 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.
This question already has answers here:
Why does javascript accept commas in if statements?
(5 answers)
Closed 8 years ago.
I've searched in SO but I didn't find something similar. Maybe I am using wrong search keys.
I was editing a javascript library when I found this if statment
var a = location.hash.replace(/^#/, "");
if (container = $("#content"), a) {
..content
} else {
...other code
}
the first part container = $("#content") is assigning the value of $("#content") to container but I don't understand why there is a comma inside the If. Is it like an AND operator?
Something like if (container = $("#content") && a) ?
What is it evaluating?
The comma operator in JavaScript is pretty similar to the concept in other C-like languages. It's a way of stringing multiple expressions together into one (syntactic) expression. The value of the whole thing is the value of the last expression in the list.
Thus in this case, container = $("#content") is evaluated, and then a is evaluated. The value of the whole thing is the value of a.
A good question is why that code was written that way. There are times when the comma operator is useful, but usually it's just a way to save some typing and make code a little more concise.
It is comma operator.
Basically its doing two things. First there is assignment and then the , just evaluates a and validates against it in the if condition.