Below content is an excerpt from my book – “JavaScript for C# developers“.
Starting from ES6, there is a new way to declare a function in javascript – Arrow functions. This is similar to the function expression in ES5 but has a concise syntax. Despite the fact that both constructs – functions in ES5 and arrow functions from ES6 – perform a task and return a value – there are some distinct difference between them in terms of evaluation of value of ‘this’, arguments etc…
Conceptually, Lambdas in C# can be considered equivalent to the arrow functions in javascript
In the above C# code snippet, we have declared a lambda function which takes couple of integer parameters and returns sum which is also an integer. In the next line, we’re calling that lambda function.
Now, let’s see how to write an arrow function – We can take a simple function expression and convert it to an arrow function.
In the above JS code snippet, from line 1 to line 3, we’ve declared a simple function expression which takes couple of parameters and returns its sum.
At line 5, we’ve declared an arrow function which does the same functionality – summation of two numbers. The symbol ‘=>’ – equal sign and greater than sign together – looks like arrow and hence this function is normally referred as arrow function. Left hand side of that symbol are the parameters for the function whereas the right hand side of the arrow is the body of the function.
Parameters and parentheses of arrow function:
If you have only one parameter – you don’t need to have parentheses around the parameter. In the below example, ‘sqArrowFn’ needs just one parameter and hence you don’t need to have parentheses around that.
If you’ve either zero or more than one parameter – you need to have parentheses around the parameters. In the above ‘piArrowFn’, we’re not taking any parameter and hence it should have parentheses.
Body of the function:
If the body of the function is a single line, as shown in previous examples – you don’t need to have curly braces or return statement. An expression would suffice, as we’ve done. But if you’ve more than 1 statements in your body of the function, you need to have curly braces and return statement.
We’ve re-written the same add arrow function which we wrote earlier – in couple of statements. Instead of returning the summation of the two parameters directly, we’re storing the summation in a new variable and returning the value of that variable in the next line. Since the body of this function is more than a line, we need to have pair of curly braces to represent the body and a return statement to return its sum from that function.
Arrow functions are similar to existing ES5 functions and you can use it wherever you were using normal function expressions. In the below code snippet, we’ve used arrow function inside map method resulting in cleaner and concise syntax.
Differences between function expression and arrow function:
There are few characteristics which are different in arrow function when compared to the function expressions.
1. Arrow function does not have its own ‘this’ value. Any reference to ‘this’ would refer to the enclosing context
2. Arrow functions do not have arguments object
Arrow function does not have its own ‘this’ value. Any reference to ‘this’ would refer to the enclosing context:
In the below code snippet, from line 1 to line 8, we’ve declared an object in which we’ve a function expression using ‘this’ keyword. When we call the function ‘isEligibleToVote’ at line 8, the ‘this’ value being referred is ‘obj1’ as we’ve called through ‘obj1’. The console.log statement would print true as the value of the age property in ‘obj1’ is 33, which is greater than 18.
Object ‘obj2’ is almost similar to the object ‘obj1’ except with one difference. ‘isEligibleToVote’ is re-written in arrow function format instead of normal function expression. When we call that function using ‘obj2’, we’re getting false at line 15. The reason is that arrow functions do not have its own ‘this’ value and the value of ‘this’ referred in the arrow function would refer to the ‘this’ value in enclosing context. In the above example, the enclosing context is global context. As there is no variable by name ‘isEligibleToVote’ in global context, we’re getting false.
Let us add a variable by name ‘age’ in global context, as shown in the below code snippet. As the arrow function ‘isEligibleToVote’ is referring to the enclosing context for evaluation of ‘this’ value, which is global context in this case, – now, it would print true, as we’ve variable ‘age’ in the global context.
Arrow functions do not have arguments object:
Arguments is an array like object which is accessible for normal function declaration/function expression. Even in an arrow function, you can access the arguments object but they do not have its own argument object and if you access the arguments object inside an arrow function, it would be the arguments object from the enclosing scope. If the enclosing scope doesn’t have the arguments object, it would throw reference error.
Below code is a normal function expression in which we’re accessing the arguments object. As it is an array like object, we can loop through its values. The below function expression calculates the sum of the arguments passed as parameters. You can pass any number of parameter and this method would calculate its sum.
Now, if we try to rewrite the same in arrow function syntax, you would get reference error saying arguments not defined. The reason for this error is that an arrow function does not have its own arguments object. If you try to access arguments object inside an arrow function, its value would be the arguments object from enclosing scope but even in enclosing scope, we don’t have any identifier by name ‘arguments’. So, reference error is getting thrown.
Now, consider the below code snippet where we access the arguments object inside an arrow function. But this arguments object(inside the arrow function) refers to the arguments object of the enclosing scope – function expression ‘addNumbersFn’, in this case.
This is how arrow functions work in javascript. Please let me know your thoughts in comments.