Search⌘ K
AI Features
Home
Courses
The JavaScript Interview Handbook: 100+ Interview Questions

Solution Review: Arrow Functions

Explore how arrow functions in JavaScript inherit the this value from their parent scope instead of binding to the calling context. Understand why this behavior can cause errors like type errors in event handling, and learn the difference compared to regular functions. This lesson helps you confidently handle this in arrow functions during interviews.

We'll cover the following...

Quiz: Solution review #

In the previous lesson, you were given the following codes:

HTML
<style>
button {font-size: 50px; }
.on {background: #ff0000;}
</style>
<button id="pushy">Click me</button>
Javascript (babel-node)
const button = document.querySelector('#pushy');
button.addEventListener('click', () => {
    this.classList.toggle('on');
});

For the codes above, you were asked the following question:

Explanation

In JavaScript, arrow functions do not bind their own this, meaning they inherit the one from the parent scope; this is also known as lexical scoping. ...