This question already has answers here:
What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?
(14 answers)
Closed 8 years ago.
I've been pursuing the codegolf site lately with a focus on Javascript. I keep seeing something that I don't understand and can't find an answer to. Check out this answer. The first line starts with F=a=>. I assume that this is a shorthand function declaration, but I can't find any reference to it elsewhere on the web. Can someone explain, or point me to a good document about this syntax?
Feel free to tag this question. Hard to tag when I don't know what I'm looking at.
If you look at the ES6 definition document this is the Arrow function symbol
Looking at MDN's documentation this is just shorthand for declaring an anonymous function
An interesting difference is that the arrow function syntax provides a closure so (quoting from MDN)
In ECMAScript 3/5, this issue was fixed by assigning the value in this
to a variable that could be closed over.
function Person() {
var self = this; // Some choose `that` instead of `self`.
// Choose one and be consistent.
self.age = 0;
setInterval(function growUp() {
// The callback refers to the `self` variable of which
// the value is the expected object.
self.age++;
}, 1000);
}
Alternatively, a bound function could be created so that the proper
this value would be passed to the growUp function.
Arrow functions capture the this value of the enclosing context, so
the following code works as expected.
function Person(){
this.age = 0;
setInterval(() => {
this.age++; // |this| properly refers to the person object
}, 1000);
}
var p = new Person();
In those two examples you can see the difference very clearly
function() {
console.writeline('es5');
}
versus
() => {
console.writeline('es6');
}
Yea, that is a shorthand for a function declaration.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
Related
This question already has answers here:
Methods in ES6 objects: using arrow functions
(6 answers)
Closed 5 years ago.
I am little new to ES6, but not with node js, but this looks little weird because when I started using arrow style function instead of function() style, I was in assumption that both are exactly same but the syntax is different. But today came to know about this case.
When I define a function like this.
exports.intent = {
greetings: {
matcher: ["hi", "hello"],
reply: function(){
console.log(this); // it prints {greetings: {..}} expected
return this.matcher[0]; // returns "hi" which is expected.
}
}
}
But when I defined same function in arrow style, it throws error as this here now references the whole object instead of current object.
exports.intent = {
greetings: {
matcher: ["hi", "hello"],
reply: () => {
console.log(this); // it prints whole object {intent: {....}}
return this.matcher[0]; // fail here.
}
}
}
I came to know that there are some changes in this refrencing between these 2 types of declaration. https://stackoverflow.com/a/40498293/2754029
Is there are any way so that I can refrence this to current object only?
No. You will not be able to override this inside an arrow function body. Even if you try to bind it, it doesn't work. This one is an interesting article I came across recently.
This question already has answers here:
In es2015, `const func = foo => bar` makes `func` a named function, how do you bypass this?
(2 answers)
Closed 6 years ago.
I am using Google Chrome version 52 64-bit.
I found out that if I use anonymous function expression ex.
// Anonymous function expression
var expressionFunc = function(){
return true;
};
The variable expressionFunc will hold the assigned anonymous function,
But it is also adding a name property expressionFunc to this function.
So if I do expressionFunc.name in the console,
It will give me expressionFunc.
From what I know this anonymous function expression should stay anonymous,
And the function referenced by the variable should not contain the variable name in the name property of the function.
Why is chrome assigning name property to an anonymous function?
This page:
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Function/name
Says this
Browsers that implement ES6 functions can infer the name of an
anonymous function from its syntactic position. For example:
var f = function() {};
console.log(f.name); // "f"
There's no particular explanation on that page.
This page
http://www.2ality.com/2015/09/function-names-es6.html
Says this
With regard to names, arrow functions are like anonymous function
expressions:
const func = () => {};
console.log(func.name); // func
From now on, whenever you see an anonymous function expression, you
can assume that an arrow function works the same way.
The answer at https://stackoverflow.com/a/37488652/1048572 (referenced by #bergi) is pretty comprehensive, and points to the source in the specification.
This question already has answers here:
When should I use arrow functions in ECMAScript 6?
(9 answers)
Closed 6 years ago.
I've recently begun using ECMAScript 2016's arrow functions instead of the original syntax to define functions. Would it be ok if I just used this syntax every time I wanted to define a function, or are are there any disadvantages like speed, etc.?
(function(){
alert('Is this');
})();
(()=>{
alert('somehow better than this?')
})();
One thing to note is that an arrow function does not have use of the arguments object.
let test = () => {
// expect an error
console.log(arguments);
}
test(1,2,3);
Arrow functions lexically bind this
You cannot use new on an arrow function:
let Person = (name) => {
this.name = name;
}
// expect an error
let person = new Person('Bob');
There are many differences, I would check some of the documentation on arrow functions.
Arrow functions are always anonymous and have lexical this. Differences in performance should be negligible but this might refer to something unexpected (or maybe it refers to exactly what you expect and you won't have to bind).
This question already has answers here:
var functionName = function() {} vs function functionName() {}
(41 answers)
What is the difference between a function expression vs declaration in JavaScript? [duplicate]
(5 answers)
Closed 8 years ago.
I couldnT find an answer easily, so even if this question is a dupe, the answers donT come up using these keywords.
I want to know the difference between the different way of declaring functions in a sample app.js
var foo = function()
{
//..
}
function bar()
{
//..
}
var baz= function()
{
//..
}
function qux()
{
//..
}
// other??
I m also not clear about the scope where I can use each function. Thanks!
There are four ways to create a function in JavaScript.
Function declaration
This will create a variable foo in the current scope and assign a named function to it.
function foo () {
}
Function declarations are hoisted so it doesn't matter where, in the applicable scope, you put them. It is considered good coding practise to define them before you use them though.
Anonymous function expression
This will create a function without a name and use it in an expression. In this example it is assigned to the variable something.
something = function () {
};
Named function expression
This is the same as an anonymous function expression except that it has a name, creates a variable of that name in the scope of itself and is horribly broken in older versions of Internet Explorer.
something = function foo () {
};
Function constructor
Do not use function constructors. They are eval by another name. You can read about them on MDN if you're interested.
This question already has answers here:
What does 'var that = this;' mean in JavaScript?
(6 answers)
Closed 10 years ago.
I have few javascript that has used the keyword "that" extensively.
I see a lot of posts talking about the javascript keyword "this".
I wanted to understand the meaning of this key word in javascript context and it's visibility/scope.
Something like
that.someFunctionaName(someParameter)
What does it mean?
I understand the keyword "this" always points to the owner of the current object.
that is not a keyword in JavaScript. I suspect the code that you have is using something in the class to define an instance of itself. For example:
function myClass()
{
var that = this;
}
By doing this, you can ensure you're referencing the object, and not another element. For example, consider the following sample:
function myClass()
{
var that = this;
$('.myele').click(function() {
// 'this' refers to the element that was clicked.
// 'that' still refers to the myClass() object.
});
}