Arrow functions are a more concise alternative to the traditional function expression but they aren't appropriate everywhere.
Let's check out some examples of times you would not want to use arrow functions.
Scenario 1. Callback functions that require dynamic context.
Callback functions that require dynamic context, such as the element clicked, are not good candidates for arrow functions because you are unable to change the pre-defined context of this.
const button = document.querySelectorAll( '.cta-button' );
button.addEventListener( 'click', () => {
this.classList.toggle( 'selected' ); // `this`refers to the Window. 😔
} );
Using a regular function allows the value of this to change based on the context of the target element.
const button = document.querySelectorAll( '.cta-button' );
button.addEventListener( 'click', function() {
this.classList.toggle( 'selected' ); // `this`refers to the button! 🎉🎉🎉
} );
Scenario 2. Functions that use the arguments object.
Arrow functions do not bind the global arguments object.
const logUser = () => {
console.log(arguments[0]); // Uncaught ReferenceError: arguments is not defined 😕
}
logUser( 'Kevin' );
But with a regular function, you have access to the global arguments object.
function logUser() {
console.log(arguments[0]); // Kevin
console.log(arguments[1]); // Langley
}
logUser( 'Kevin', 'Langley' );
Scenario 3. Prototype Methods
function User(firstName, lastName) {
this.name = `${firstName} ${lastName}`;
}
User.prototype.sayHello = () => {
return `Hello, ${this.name}`;
}
const me = new User( 'Kevin', 'Langley' );
me.sayHello(); // Hello,
The this value in the sayHello method references the global object and not the User object that it is trying to access.
Instead, write your prototype methods the old fashioned way.
function User(firstName, lastName) {
this.name = `${firstName} ${lastName}`;
}
User.prototype.sayHello = function() {
return `Hello, ${this.name}`;
}
const me = new User( 'Kevin', 'Langley' );
me.sayHello(); // Hello, Kevin Langley
Scenario 4. Object methods
const user = {
name: 'Kevin Langley',
sayHello: () => `Hello, ${this.name}`;
}
user.sayHello(); // Hello,
The this value in the sayHello method references the global object and not the User object that it is trying to access.
Instead, write your prototype methods the old fashioned way.
const user = {
name: 'Kevin Langley',
sayHello() {
return `Hello, ${this.name}`;
}
}
user.sayHello(); // Hello, Kevin Langley
Top comments (0)