Traditional versus Arrow functions in JavaScript Classes

Traditional versus Arrow functions in JavaScript Classes

What’s up? Oh nothing, just doing `this` and `that`. Traditional versus Arrow functions in JavaScript Classes

This is a spiritual sequel to this article.

Create a class with a method using Traditional function like so. Let’s call this Approach A.

// APPROACH A

class SomeClass {
    constructor() {
        this.someProp = 'someValue';
    }
    someMethod() { // Traditional function
        console.log(this.someProp);
    }
}

Create an instance of that class. When invoking the method on the instance, this refers to the instance. So far, it’s behaving as expected.

let instance = new SomeClass();

instance.someMethod(); // logs 'someValue'

But, as soon as we assign the method to a variable and call that function variable, the method loses its context, and you get Uncaught TypeError: Cannot read property ‘someProp’ of undefined.

let instance = new SomeClass();

let funcVariable = instance.someMethod;
funcVariable(); // logs error

javascript coding web-development react

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

How To Write Better Code As A Web Developer - React

Look at three different React code examples from a beginner, intermediate, and advanced web developer. How senior developers think. How to use React state properly. How to use React useEffect properly. What to think about when programming. The differences between senior and junior developers

Hire Dedicated React Native Developer

Have you ever thought of having your own app that runs smoothly over multiple platforms? React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. **[Hire...

Hire Dedicated React Native Developer in India | React Native Development

Hire dedicated React Native developers for your next project. As the top react native development company we offer you the best service as per your business needs.

Architecting a Progressive Web App using React Native: Step by Step Guidance!

![This is image title](https://miro.medium.com/max/875/1*GUJAmsfuQbokFMBL3aUm7Q.jpeg "This is image title") A Progressive Web Application (PWA) is a disruptive innovation that integrates the functionality of a native mobile app and the usability...