This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 4 years ago.
I wanted to understand the behavior of a normal function vs arrow functions.
Arrow Function:
function arrowFunc() {
return () => arguments
}
console.log(arrowFunc(1, 2, 3)(1))
Normal Function
function normalFunc() {
return function() {
return arguments
}
}
console.log(normalFunc(1, 2, 3)(1))
Both the results are expected to be same, but looks like arrowFunc defined above considers the first arg list, where as the normalFunc considers the second set of arg list.
Also tried babel-compilation to understand the difference, but looks like the behavior is different as shown below:
Babel Output:
"use strict";
function arrowFunc() {
var _arguments = arguments;
return function() {
return _arguments;
};
}
console.log(arrowFunc(1, 2, 3)(1));
function normalFunc() {
return function() {
return arguments;
};
}
console.log(normalFunc(1, 2, 3)(1));
Both the results are expected to be same
No, they're not.
From the first line of the MDN page on arrow functions (emphasis mine):
An arrow function expression has a shorter syntax than a function
expression and does not have its own this, arguments, super, or
new.target.
And further down the same page:
Arrow functions do not have their own arguments object. Thus, in
this example, arguments is simply a reference to the arguments of the
enclosing scope [...]
And in the ECMAScript specification:
NOTE: Arrow functions never have an arguments objects. (sic)
Related
This question already has answers here:
Chain functions in JavaScript
(5 answers)
Closed 2 years ago.
I am looking for a way to achieve a function or class with unlimited prototypes each of them is function.
for example, there are many modules that provide this kind of functionality.
app.url("localhost").port(80).listen
or well known eloquents
model.where("field","cslkdfja").where("field2","asdfad").count()
How can I achieve this kind of approach?
This is called function chaining and can be done by returning the enclosing execution context (this) from the functions like so:
const obj = {
func1: function () {
console.log('func1')
return this // returning 'this'
},
func2: function () {
console.log('func2')
return this // returning 'this'
},
func3: function () {
console.log('func3')
return this // returning 'this'
},
}
obj.func1().func2().func3().func1() // Chain all methods
This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Methods in ES6 objects: using arrow functions
(6 answers)
Closed 4 years ago.
Can't find this info anywhere on the web. Is there any difference (e.g. in performance) between these two methods created with object literal syntax? Or is the mechanism under the hood exactly the same?
let test = {
foo(){
console.log("foo");
return 1;
},
bar: () => {
console.log("bar");
}
}
console.log(test.foo());
console.log(test.bar());
There shouldn't be any performance difference -- the shorthand function property is just syntactic sugar.
However, there's an operational difference. The shorthand notation is short for the traditional function syntax, not an arrow function. So it's equivalent to:
foo: function() {
console.log("foo");
}
Arrow functions have a number of different behaviors from traditional function expressions. See Arrow function vs function declaration / expressions: Are they equivalent / exchangeable?
Your example functions don't do anything that depends on the differences, but in a real application they might.
This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 5 years ago.
Is it by design that arrow functions can redefine existing functions behavior? Using jQuery's get (yes, I know) - I'm getting two different values of this inside success depending on whether arrow function is used or not. Can anyone explain why it happens?
var get = (e) => {
return new window.Promise((resolve, reject) => {
$.ajax({
context: {test: 1}, // this
type: "GET",
url: "...",
complete: function () {
// this is only correct when using old syntax, arrow
// function would redefine the value of this to the function's parent
},
complete: ()=>{ } // Is not working, this is not what I'd expect.
});
});
Arrow functions were primarily introduced to change the scoping of this which helps to avoid using .bind(this) all the time. It's natural that you get different values
From MDN: Arrow Functions
An arrow function expression has a shorter syntax than a function expression and does not bind its own this, arguments, super, or new.target.
The cleaner, more succint syntax is of secondary value. They are certainly not an absolute replacement for function
Now that this is taken out of the equation - you've also got 2 oncomplete callbacks in your example.
This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 5 years ago.
I have an arrow function that I am trying to execute with call(). For the sake of simplification, as follows:
Operational as expected
const func = (e) => {
console.log(e)
}
func.call(null, e)
Hmm ... what's going on here?
I would expect the following code to pass element into func as this.
const func = (e) => {
console.log(this)
console.log(e)
}
func.call(element, e)
But, instead this remains undefined.
If I switch it to a regular function definition, all works as expected.
const func = function (e) {
console.log(this)
console.log(e)
}
func.call(element, e)
Question
Why am I not able to pass a context for this into an arrow function from call()?
this is not bound in arrow functions, so call() and apply() can only pass in parameters. this is ignored
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Invoked_through_call_or_apply
In ES6 this has lexical scope meaning value of this inside arrow function would be same as that outside of arrow function. In pre-ES6 form this is the object that you passed as a first argument to call method.
This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 6 years ago.
Trying to figure out how to do an arrow function while maintaining this.emit(). In gulp and ES6 I have a function like so:
gulp.src([paths.sass])
.pipe(sourcemaps.init())
.pipe(sass().on('error', function (e) {
reportError(e);
this.emit('end');
}))
Notice the usage of this.emit('end'). Works great when I use a non arrow function, but the second I do:
gulp.src([paths.sass])
.pipe(sourcemaps.init())
.pipe(sass().on('error', (e) => {
reportError(e);
this.emit('end');
}))
this.emit('end') is no longer available. How could I write that function using an arrow function and maintain the this.emit()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
in arrow function of ECMAScript2015, this always referencing outside function, no runtime context.
meaing:
function out() {
var name = "out"
return function() {
return function() {
return function() {
console.log(this.name) // out
}
}
}
}
arrow function no Object arguments
arrow function can't using yield
arrow function can't initialized by new
If the on method of the sass() returned object arranges to call the supplied function as a method of another object, and the function needs to pick up the value of the object it is called on, in order to call its emit method, use the function declaration.
Arrow functions avoid using
Function.prototype.bind on the current this value of the defining context, by always using the defining context's this value inside the function. Another aspect of arrow functions is that they can't be used as constructors. Arrow functions do not deprecate function declarations and expressions and should only be considered "preferable" on a case by case basis.