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);
}
};
}
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:
How does the "this" keyword work, and when should it be used?
(22 answers)
What does "this" refer to in arrow functions in ES6?
(10 answers)
Methods in ES6 objects: using arrow functions
(6 answers)
Closed 1 year ago.
var cat = {
lives: 9,
jumps: () => {
console.log(this.lives)
}
}
I have heard that 'this' keyword in arrow function will point to the parent scope, so I have tried putting a variable with lives=9 in global object in node and this doesn't seems to work, am I missing something?
var lives=9
var cat = {
lives: 9,
jumps: () => {
console.log(this.lives)
}
}
Arrow functions have a lexical this which means that the value of this inside the function is the same as the value of this outside the function.
It does not mean that this points to an object containing all the variables from outside the function.
const anObject = {
aValue: "example value",
aMethod: function() {
console.log("aMethod", this.aValue);
const arrow = () => {
console.log("arrow", this.aValue);
}
arrow();
}
}
anObject.aMethod();
const copyOfAMethod = anObject.aMethod;
copyOfAMethod();
Because aMethod is called as a method on anObject, the value of this inside aMethod is anObject.
Because arrow is declared inside aMethod, the value of this is the same as it is for aMethod.
If the function is copied elsewhere so it has a different this value, then the arrow function created when the copy is called it will have the same different value.
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:
ES6 arrow function and lexical scope inside a function [duplicate]
(2 answers)
Closed 4 years ago.
How can I get the reference to what's being return to the method call? Like how we have the arguments variable to get all arguments being passed to a function. How can I get what's being returned to so I can chain a function?
let myFunc = function(obj, num){
if (typeof obj === 'number' && typeof num === 'undefined') {
num = obj;
obj = this;
}
console.log(obj.name);
console.log(num);
console.log(Object(this));
return obj;
};
let myObj = {
name: 'Devin',
};
myFunc(myObj, 1);
myObj.myFunc = myFunc;
myObj.myFunc(2).myFunc(3);
edit: It's written out this because it's currently used in many places that I will have to refactor down the road but do not have time to right now. So I'm trying to do a few changes that don't affect current code but will work the way I want moving forward. myFunc(myObj, 1) is current but I have done a minor refactor to inline like so... myObj.myFunc(myObj, 2).myFunc(myObj, 3) ... but I thought I could remove myObj as an argument since it's being returned.
edit 2: Changed arrow es6 function to using function keyword to keep this context and added console.log(Object(this)). But still getting undefined from myObj.name and Object(this) only gives the argument
ANSWER: The problem was that I was using an arrow function and that I had typeof num === 'number' instead of equal to 'undefined'. Thank you.
myFunc.bind(myObj) doesn't serve any good purpose because arrows cannot be bound. In order to use dynamic this it should be regular function, e.g. shorthand syntax:
let myObj = {
name: 'Devin',
myFunc(num) {
console.log(num);
return this;
}
};
myObj.myFunc(2).myFunc(3); // basically a noop
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