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
}
Related
This question already has answers here:
var functionName = function() {} vs function functionName() {}
(41 answers)
Closed 2 years ago.
I have this in my code:
const [dimensions, setDimensions] = useState(getDimensions())
const getDimensions = () => {
// stuff
}
The function hasn't be declarated when I call it, so I get an error. But, if I declare it as a traditional function no error is going on.
const [dimensions, setDimensions] = useState(getDimensions())
function getDimensions() {
// stuff
}
Is there any way to do this with an arrow function?
This is because with the arrow function example you are declaring a function expression. Function expressions are not hoisted. If you need to use an arrow function, you would need to declare it before use.
I can't speak to why arrow and traditional functions behave differently.
But if you wanted to use an arrow function then you can update your code to set an initial state and only call getDimensions once component is mounted with useEffect.
Example:
const [dimensions, setDimensions] = useState({})
const getDimensions = () => {
// stuff
}
useEffect(()=> {
getDimensions()
}, [])
This question already has answers here:
"Variable" variables in JavaScript
(9 answers)
Closed 2 years ago.
Can anyone tell me what I can replace the evil eval with in this code?
var x = function(funcName) {
function funcA () {
console.log("a");
}
function funcB () {
console.log("b");
}
var funcToRun = eval(funcName);
return funcToRun();
};
x("funcA");
x("funcB");
I've see a bunch of different solutions, but none seem to fit this scenario. Essentially, I need to be able to pass a string into a function as a "config" of which sub-function to run. I don't have access to the code that calls x, I've just been instructed that only primitive and string values can be configured in the call.
P.S. This is a super simplified version of the actual function.
Thanks!
James
You could just create an object and add those functions as properties that you can then access with a string.
var x = function(funcName) {
function funcA() {
console.log("a");
}
function funcB() {
console.log("b");
}
const fs = {
funcA,
funcB
}
var funcToRun = fs[funcName]
return funcToRun();
};
x("funcA");
x("funcB");
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'});
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