This question already has answers here:
Curly Brackets in Arrow Functions
(3 answers)
What does the arrow function with a () after means? [duplicate]
(3 answers)
Closed 4 years ago.
I am taking a course on React Native and realize that the instructor declares functions in two different ways, for seemingly no different reasons. Please explain when each function declaration should be used:
example = () => ();
vs
example = () => {};
Thank you
Arrow functions can differ in function bodies (Thanks Robbie). The concise function body can only consist of a single expression which is evaluated and implicitly returned. The conventional block function body requires the return keyword or it will return void.
example1 = () => 1 + 1;
example2 = () => {
const result = 1 + 1;
return result;
};
example3 = () => {
const result = 1 + 1;
};
example1() has a concise body and will implicitly return the result of the expression 2.
example2() has a block body and does explicitly return 2.
example3() has a block body and no explicit return, therefore it returns void.
Note that the normal braces () around a concise function body are required if you want to return an object literal:
example = () => ({some: 'object'});
Related
This question already has answers here:
Object destructuring without var, let or const
(4 answers)
Closed 1 year ago.
let b = { a: 123123123 };
try {
({ a } = b); <<< what is the meaning of ()
} catch (error) {}
console.log({'a':a})
why this script work, what is the meaning of () in try-catch .
the { a } = b is wrong but ({ a } = b) is correct and the variable will go out of try-catch and give new value to a.
if there are a function in () may be a IIFE, if in expressions the () is a Grouping operator.and in my example,what is the meaning of ()
A pair of parenthesis force the contents to be treated as an expression instead of a statement.
This causes the { to be seen at the start of an object or dereferencing structure (the latter in this case) instead of a block.
This question already has answers here:
When should I use a return statement in ES6 arrow functions
(6 answers)
Es6 Arrow function to normal js
(2 answers)
What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?
(14 answers)
Closed 3 years ago.
Actually, I'm working with someone else code and they used arrow function in a line. I'm having trouble to replace it with regular function.
This is the line:
const R = (elem) => object(document.querySelector(elem));
I've tried to change it like:
const R = function(elem) {
object(document.querySelector(elem))
};
But no good result. :(
Arrow functions have a built in way to shorten a return syntax: If an arrow function is simply returning a single line of code, you can omit the statement brackets and the return keyword. This tells the arrow function to return the statement. So the only thing you need to do is to add the return keyword explicit if you are not using an arrow function.
const R = function(elem){ return object(document.querySelector(elem)) };
And be careful if you try to translate an arrow function which is using this keyword.
UPDATE: Response to comment
In the following code there are parenteses used to define an object with a function as property. If you don't use parenteses you need braces and return inside this arrow function, otherwise you get an SyntaxError.
const object = (elem) => ({
css: function(attribute, value) {
elem.style[attribute] = value;
return object(elem);
}
});
Without arrow functions it becomes:
const object = function(elem) {
return {
css: function(attribute, value) {
elem.style[attribute] = value;
return object(elem);
}
};
}
This question already has answers here:
Syntax for an async arrow function
(11 answers)
Closed 4 years ago.
When defining an asynchronous function I normally go for
async function myFunc(){
// ...
}
I would like to switch over to lambda expressions. I tried
async myFunc() => { // throws an syntax error
// ...
}
and
myFunc = async () => { // weird things come up
// ...
}
I think the second example does not work because this code would try to store the functions result into myFunc like
let myFunc = f(); // store the result
Is it possible to define functions with lambda expressions or are they only used within other functions?
You can try this code:
const foo = async () => {
// do something here
}
This question already has answers here:
Methods in ES6 objects: using arrow functions
(6 answers)
Closed 5 years ago.
I creating an object that uses async function methods with babel-polyfill/babel-preset-es2017, however I am having a problem with this:
let obj = () => {
return {
doAsync: async () => {
let thing = await longProcess()
return this.transform(thing)
},
transform: (thing) => {
return psuedoCodeTransform(thing)
}
}
}
let instance = obj()
instance.doAsync()
// TypeError: cannot read property 'transform' of undefined`.
Is this something described in ES2017, a babel-polyfill/regeneratorRuntime gotcha?
Arrow functions do not create their own context. They don't have their own this and this will refer to the enclosing scope's context. In this case (no pun intended), this does not refer to the same object as instance at all.
If you log this inside doAsync, you'll notice it's the window global.
Joseph the Dreamer's response is exactly right obviously, but since I work best by example, here is your code changed which should make it work. Notice the only change is actually defining doAsync as a normal function instead of arrow function:
let obj = () => {
return {
doAsync: async function() {
let thing = await longProcess()
return this.transform(thing)
},
transform: (thing) => {
return psuedoCodeTransform(thing)
}
}
}
let instance = obj()
instance.doAsync()
// TypeError: cannot read property 'transform' of undefined`.
This question already has answers here:
What does arrow function '() => {}' mean in Javascript? [duplicate]
(2 answers)
Closed 7 years ago.
The following code:
angular.module('socially').controller('PartiesListCtrl', function ($scope)
{
$scope.helpers({
parties: () => {
return Parties.find({});
}
});
});
demo at Angular Meteor Tutorial
Can't understand the syntax used for parties: object. Why is => used ? Is there more explanation for this kind of anonymous function.
This is an arrow function, new syntax from ES2015 standard which was accepted this year. Not only arrow functions are shorter in declaration and sometimes looks nicer, they also share binding context with their surrounding code
!function() {
this.name = 'global';
var nonArrowFunc = function() {
console.log(this.name); // undefined, because this is bind to nonArrowFunc
}
var arrowFunc = () => {
console.log(this.name); // this taken from outer scope
}
}();
You can read more about arrow functions here and here and here