3 Examples of When Not to Use JavaScript Arrow Functions

ES6 Arrow Functions

Object Methods

const skater = {
trickCount: 0,
kickflip: () => {
this.trickCount++;
}
}
const skater = {
trickCount: 0,
kickflip: function() {
this.trickCount++;
}
}

Object Prototype

class Pokemon {
constructor(name, ability) {
this.name = name;
this.ability = ability;
};
};

Pokemon.prototype.attack = () => {
console.log(this === window);
return this.ability;
};

const pikachu = new Pokemon("Pikachu", "Lightning-rod");

pikachu.attack();
true
undefined
Pokemon.prototype.attack = function() {
console.log(this === pikachu); // true
return this.ability;
};

Dynamic Context

const button = document.querySelector(#darkMode);
button.addEventListener('click', () => {
this.classList.toggle('expand');
});
const button = document.querySelector(#darkMode);
button.addEventListener('click', (e) => {
e.currentTarget.classList.toggle('expand');
});

Wrapping up

Software Engineer @ DELL | Teacher/Mentor @ Devslopes "learn to code" | Writer | Tech Enthusiast

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store