DEV Community: Abhinav Deep Rastogi

JavaScript this Keyword: Why Arrow Functions Break It and How Traditional Functions Save the Day

Abhinav Deep Rastogi — Fri, 21 Mar 2025 12:32:12 +0000

Ever encountered a situation where your this keyword in JavaScript doesn’t behave as expected? If you’ve used arrow functions, you might have faced this issue. Unlike traditional functions, arrow functions handle this differently, and it can lead to unexpected bugs in your backend code. In this blog, we’ll explore why this happens, how to fix it, and when to use each type of function. Let’s dive in!

What is the this keyword in JavaScript?
How Arrow Functions Handle this
How Traditional Functions Handle this
Code Demonstration: Arrow vs Traditional Functions
Common Mistakes to Avoid
When to Use Arrow Functions vs Traditional Functions
Conclusion

1. What is the `this` Keyword in JavaScript?

In JavaScript, this refers to the context in which a function is executed. It can change depending on how the function is called. For example:

In a method, this refers to the object that owns the method.
In a global context, this refers to the global object (e.g., window in browsers).

2. How Arrow Functions Handle `this`

Arrow functions do not have their own this binding. Instead, they inherit this from the parent scope (lexical scoping). This can be useful in some cases but problematic in others.

Example:

const obj = {
  name: "Dev",
  greet: () => {
    console.log(`Hello, ${this.name}`); // `this` refers to the global object, not `obj`
  },
};
obj.greet(); // Output: Hello, undefined

Why does this happen?

Arrow functions don’t bind their own this, so this.name looks for name in the global scope, which doesn’t exist.

3. How Traditional Functions Handle `this`

Traditional functions have their own this binding, which depends on how the function is called. You can also explicitly bind this using .bind(), .call(), or .apply().

Example:

const obj = {
  name: "Dev",
  greet: function () {
    console.log(`Hello, ${this.name}`); // `this` refers to `obj`
  },
};
obj.greet(); // Output: Hello, Dev

Why does this work?

Traditional functions bind this to the object calling the method, so this.name correctly refers to obj.name.

4. Code Demonstration: Arrow vs Traditional Functions

Let’s see a practical example of how this behaves differently in arrow and traditional functions.

Code:

class User {
  constructor(name) {
    this.name = name;
  }

  // Traditional Function
  greetTraditional() {
    console.log(`Traditional: Hello, ${this.name}`);
  }

  // Arrow Function
  greetArrow = () => {
    console.log(`Arrow: Hello, ${this.name}`);
  };
}

const user = new User("Alice");

// Works as expected
user.greetTraditional(); // Output: Traditional: Hello, Alice

// Also works, but for a different reason (lexical `this`)
user.greetArrow(); // Output: Arrow: Hello, Alice

// Now let's break it
const traditionalGreet = user.greetTraditional;
const arrowGreet = user.greetArrow;

traditionalGreet(); // Output: Traditional: Hello, undefined (lost `this` binding)
arrowGreet(); // Output: Arrow: Hello, Alice (still works due to lexical `this`)

Explanation:

Traditional functions lose this when called without the object context.
Arrow functions retain this because they inherit it from the parent scope.

5. Common Mistakes to Avoid

Using arrow functions for object methods where this is needed.
Assuming arrow functions and traditional functions behave the same way.
Forgetting to bind this in traditional functions when passing them as callbacks.

6. When to Use Arrow Functions vs Traditional Functions

Use Arrow Functions When:
- You need lexical this (e.g., in callbacks or closures).
- You want a shorter syntax for simple functions.
Use Traditional Functions When:
- You need dynamic this binding (e.g., object methods).
- You want to use .bind(), .call(), or .apply().

7. Conclusion

Understanding how this works in JavaScript is crucial for writing bug-free code. Arrow functions are great for certain use cases, but they can break your code if you rely on this binding. Traditional functions, on the other hand, give you more control over this.

Pro Tip: Always think about the context in which your function will run before choosing between arrow and traditional functions.

Call-to-Action

What’s your experience with this in JavaScript? Have you ever been bitten by this issue? Share your thoughts in the comments below! If you found this guide helpful, don’t forget to share it with your fellow developers. 🚀

Additional Resources

Your Feedback Matters! 💬

Thank you for taking the time to read this blog! I hope you found it insightful and helpful in understanding the nuances of the this keyword in JavaScript. If you have any questions, thoughts, or additional tips to share, I’d love to hear from you in the comments below. Your feedback not only helps me improve but also enriches the discussion for fellow developers.

If you enjoyed this post, please consider:

Liking this article ❤️ to let me know it was valuable to you.
Sharing it with your network on Twitter, LinkedIn, or any platform where developers hang out. Spreading knowledge is what makes our community stronger! 🌟
Following my blog for more tutorials, tips, and deep dives into programming concepts. Your support motivates me to keep creating content that matters to you.

Let’s keep the conversation going—drop a comment, share your experiences, or suggest topics you’d like me to cover next. Together, we can learn and grow as developers! 🚀

Happy coding! 😊

Abhinav Rastogi
@devgrammer

Wondering Why you need to use Next Js? Read This!

Abhinav Deep Rastogi — Sun, 28 Aug 2022 09:17:49 +0000

Hey! Hope I'm talking to a passionate and smart React Dev because everything we cook in this blog's recipe has the same ingredients like hooks, states etc.

Since we both share the same development history in web development it's probably boring to work with libraries and addons packages in a fresh boilerplate like some extra seasoning, butter, or maybe a pinch of salt... No, wait it's time to switch to the fully blown framework which came with a complete ecosystem.

Yes f...framework! not a library.

No doubt we all are so attached to React and its rich features which help us to create magic on the browser. It's absolutely fantastic. But still, we are humans and always have a place to improve and go one level forward to optimize cons and produce more pros.

So Yeah finally we have a framework to combat the drawbacks and develop systems more efficiently.

Framework v/s Library

A Framework is a foundation upon which developers build applications while libraries provide predefined functions and classes to make their work easier.

Need of Next JS over React

Speed & Easiness of Coding

Like as per react methodology when the new page is created it needs to be added to the router exclusively but next js brings the traditional and easier file-based routing.

Where you put your file in the folder and automatically the routes are assigned according to it. it really helps to speed up the development and also simplifies the routing flow.

Performance
As per comparison the static pages or web-app developed using Next js are damn fast due to server-side rendering and by default next has image optimization-like key features to provide a super fast experience, on the other side react only supports client-side rendering and provides a slow experience.

Features

This is a buffet of many incredible features to serve you the best recipe.Here some key features are

Image Optimization
Better SEO
Internationalization
Hybrid: SSG & SSR
File-system based routing
Fast Refresh

Acceptance & Adoptability

Next js is widely loved by web developers around the globe and also adopted by several tech giants like Netflix Jobs, TikTok, Twitch, Hulu, Notion, Nike, etc to provide a fast and immersive experience to their users and better business.

Conclusion

So this blog is all about a general discussion of why we use Next over React and what are the fundamental differences between them. As you went through the blog we must agree that due to a lot of capabilities and extra powerful features Next JS wins over react in the race of performance and speed. So this blog is not an end it is just a single recipe for the whole menu. I would love to hear your feedback, comments, and suggestions to improve and provide more informative content in a simpler way please do comment below and let me know if you love to read next of Next Js. Have a great day!

Setting up your first React Project!

Abhinav Deep Rastogi — Sun, 05 Apr 2020 14:25:12 +0000

Hang on, wait I will tell you how to set up your first react project as magic.

Basically a React Project has a lot of dependencies as its very owned requirement. So, It is necessary to integrate all the required dependencies in the project folder which can be done mostly in two ways:

Manually (CDN or Linking files)
Package Managers

Okay Let's see the whole process in both ways

Manually (CDN or Linking files)

Basically a normal React project required three main files in the project folder in its initial state. Those three files are mentioned below:

React.js (react.js)
ReactDOM.js (react-dom.js)
Babel.js (babel.js)

After linking above the files the React-project is ready to work, all the JSX or React Component’s code is written under the <div id=” root ”> </div> tag in the body of index.html.

Note: This is the way of doing projects but it is not the best and hassle-free way to set up a React project because using this way results in lack of proper directory structure as well as every component and small task you have to write a long code.

Package Manager

With the help of Package manager you can set up any React project in just minutes and the process is also hassle-free.There are several package managers and bundler are available on the web. I mention some most popular and widely used package manager below:

NPM (Node Package Manager)

It is used to take advantages of a vast ecosystem of third-party packages and easily install or update them.

NPM

Webpack

Webpack is a static module bundler for modern Javascript applications. Webpack processes the application. It internally builds a dependency graph which maps every module your project needs and generates one or more bundles.

Webpack

Yarn

Yarn is a package manager for your code. It allows you to use and share (e.g. JavaScript) code with other developers from around the world. Yarn does this quickly, securely, and reliably so you don’t ever have to worry.

Yarn

I selected npm as my versatile package manager which helps me to set up the react project and also help me to start a separate node server on a local machine so it is so easy to create the web app smoothly and also provide features like build-run, start the server and terminate the server.

For installing npm and node.js on your respected machine you can take reference of blog link mentioned below:

Guide to install npm and node.js on machine.

About NPM

npm is the world’s largest software registry. Open-source developers from every continent use npm to share and borrow packages and many organizations use npm to manage private development as well.

After installation as windows, users use there Powershell and mac/Linux user can access npm via terminal as npm CLI.

Some basic command you can use with npm are:

For checking version

Command: npm -v

For upgrading npm globally

Command: npm install npm@lastest -g

For installing any Module/Packages via npm

Command: npm install <packageName>

After installing package through npm results to the generation of two files:

package.json

It contains all the necessary file or module information required for the project.

package.lock.json

It consists of a version (a specific version of dependencies).

For starting the packages

Command: npm start

As I started documenting my journey of React JS which always encourages me to provide the best and easiest learning resource to the beginner so they can do stuff in a smooth and efficient way. as I write my very first dev.to post of the Series "An adventurous journey of React JS" and I observed quite good response and I'm really thankful for all the readers who find my post helpful and also welcome suggestion to improve if any?. I hope you like this second chapter of the Series. Please provide your great suggestion in the comment section and share in your circle if you find it helpful.

What is ReactJS?

Abhinav Deep Rastogi — Wed, 04 Mar 2020 03:26:53 +0000

What is React JS?
ReactJS is a Javascript library for building frontend web application or UI.
ReactJS allows us to create reusable UI components. It is developed by Facebook.

Features of React

Reusable Components
Open Source
Efficient and fast
Work in Browser
Large Community

Basic part of React library
a. Components
b. Props.

Components
Components are the building blocks of any React app. Basically any class or function in React is considered as component.

Props
“Props” is a special keyword in React, which stands for properties and is being used for passing data from one component to another.

How React Works?

React make the changes and it is done by creating a Virtual DOM by comparing the virtual DOMs with existing loaded DOMs.
React find the changes and render the exact code which is changed instead of rendering the whole page or whole code.

Pros & Cons of React
Pros:

Virtual DOM makes the User experience better and the developer’s work faster.
Permission to reuse React components significantly saves time.
One-direction data flow in ReactJS provides a stable code.
An Opensource Facebook library: constantly developing & open to the community.
Redux: convenient state container.
Wide React and Redux toolset

Cons:

The high pace of development.
Poor documentation.
‘HTML in my JavaScript!’ – JSX as a barrier.
Additional SEO hassle.

As a ReactJs learner and developer, I quite observed a problem is lack of good documentation which leads to some big problems for beginners. So I decided to share my journey on React with my community so I can provide a better explanation of react stuff in a quite simple and easy way and yeah also not bulky in words and paragraphs or I say in minimum words. This is my first post on Dev.to I hope you like it. If you like my post please show your support and give your opinion on comments and tell me if you want more ahead on ReactJs.

DEV Community: Abhinav Deep Rastogi

JavaScript this Keyword: Why Arrow Functions Break It and How Traditional Functions Save the Day

Table of Contents

1. What is the this Keyword in JavaScript?

2. How Arrow Functions Handle this

Example:

3. How Traditional Functions Handle this

Example:

4. Code Demonstration: Arrow vs Traditional Functions

Code:

5. Common Mistakes to Avoid

6. When to Use Arrow Functions vs Traditional Functions

7. Conclusion

Call-to-Action

Additional Resources

Your Feedback Matters! 💬

Wondering Why you need to use Next Js? Read This!

Framework v/s Library

Need of Next JS over React

Setting up your first React Project!

Manually (CDN or Linking files)

Package Manager

What is ReactJS?

1. What is the `this` Keyword in JavaScript?

2. How Arrow Functions Handle `this`

3. How Traditional Functions Handle `this`