Lambda expressions are present in most of modern programming languages (Python, Ruby, Java...). They are simply expressions that create functions. This is really important for a programming language to support first-class functions which basically means passing functions as arguments to other functions or assigning them to variables.
In ES6 we have arrow functions with a more flexible syntax that has some bonus features and gotchas.
One of the major advantages of arrow functions is that it does not have it's own this value. It's this is lexically bound to the enclosing scope. This mean we can kiss goodbye to this horrible pattern:
However there are some gotchas you should be aware of:
- This should be pretty obvious, but because this is lexically bound you can't change it; call() and apply() will not be able to provide another value for this.
- There is no arguments variable:
- Be careful when returning object literals
Remember this is all ES6 and not supported by all browsers but you can always use Babel.
The Syntax of Arrow Functions
An arrow function is concise and convenient, providing a shorter syntax for anonymous functions. Here's another example of similar functionality:
When you have a single parameter, you can even omit the parentheses:
And if you have no parameters, it would look like this:
This simplified syntax makes your code more readable and elegant. You can even transform code to utilize arrow functions for a more expressive style. For instance, you can transform this:
Arrow functions offer several advantages in terms of code readability, conciseness, and ease of use.
One of the key advantages is that lambda functions help in writing cleaner code and improves code maintainability. Another advantage is the simplified syntax of arrow functions. They allow for more concise and expressive code compared to traditional function expressions. By eliminating the need for the [.code-inline]function[.code-inline] keyword and providing a shorter syntax for declaring functions, arrow functions result in less code verbosity and improved readability.
Arrow functions also have a lexical binding of [.code-inline]this[.code-inline], meaning they capture the value of [.code-inline]this[.code-inline] from the surrounding context.
Consider this example:
In the above code, we can directly access the [.code-inline]this[.code-inline] value of the surrounding [.code-inline]Logger[.code-inline] class using an arrow function, improving readability and reducing error-prone code.
This eliminates the need for workarounds (check the example below) like saving the [.code-inline]this[.code-inline] value in a separate variable to access it inside a callback function, resulting in cleaner and more intuitive code.
Additionally, arrow functions do not have their own [.code-inline]arguments[.code-inline] object. This can be an advantage in certain scenarios as it allows for more predictable behavior and encourages the use of rest parameters or the spread operator to manage function arguments.
While arrow functions offer remarkable benefits, they also come with a few considerations:
1. Arrow functions do not allow the manipulation of the [.code-inline]this[.code-inline] value. Unlike traditional functions, you cannot change the [.code-inline]this[.code-inline] value using methods like [.code-inline]call()[.code-inline] or [.code-inline]apply()[.code-inline]. It's essential to keep this in mind when working with arrow functions to ensure the proper context is maintained.
2. Unlike traditional functions, arrow functions do not have access to the [.code-inline]arguments[.code-inline] variable. If you rely heavily on [.code-inline]arguments[.code-inline] within your functions, you should be aware that arrow functions won't have this feature.
3. Lastly, be careful when returning object literals