JavaScript ‘this’ in Regular, Arrow functions and Methods — a Short Circuit Example

Felipe Bohorquez
Jan 8, 2020 · 2 min read

For those new to JavaScript the concept of this can take a while to settle in.

A great way to understand how it behaves, is through a simple example of this in the context of regular functions, ES6 arrow functions and methods within objects.

We all struggle with `this`
We all struggle with `this`
We all struggle with `this`

To start, it is worth noting how outside of any function this points to what is referred as the global object. Consider this example:

this.robot = "Hal 9000";

Try console.log(this.robot) what you get? Hall 9000 of course.

MDN Documentation explains how this can be determined by where and how a function is called. There are nuances in strict mode but we will omit them for brevity of this article. With that in mind, lets consider this function:

function robotName(){  console.log(this.robot)}

Calling robotName() will give you an error? Well not really, it will give you Hall 9000 again. Why? Because in a regular function context, this defaults to the global object (unless we specify otherwise). Let’s do that:

function robotName() {  this.robot = "Astro Boy";  console.log(this.robot)}
// => Astro Boy

So when we call robotName(), what do we get? Astro Boy!

Cool.

Let’s get make things a bit more complex. Consider this:

this.robot = "Hal 9000"; const thisRobots = {  robot: "Johnny 5",  anotherRobotName: function(robot = "R2D2") {    return this.robot;  },  details: {    robot: "Astro Boy",    robotName: function() {       return this.robot;    },  arrowrobotName: () => this.robot }};

If we call thisRobots.details.robotName()what do we get Hal 9000, Astro Boy or Johnny 5?

You guessed it right Astro Boy again! robotName()is in the context of the details object. Now, what if we called thisRobots.details.arrowrobotName()?

Surprised? Well this is a main distinction of arrow functions vs regular functions is that in arrow functions this will retain the value of its enclosing context. Since it will be determined by its surrounding scope, in our case, is the global context, so again this will be the territory of Hall 9000. this in arrow functions is always inherited from their surrounded scope, it doesn’t have scope of its own like regular functions.

We still have one more function to try.

If we call thisRobots.anotherRobotName() without arguments what do you expect we get? Take a minute to look at the function definition above and make your best guess.

(Unfortunately won’t be Bender. Sad indeed)

Johnny 5!

Why?? Well anotherRobotName() method is defined inside thisRobotswhich is an object.

When we call a method in an object, this is bound to its surrounding object, in this case thisRobots object.

Hope this made your understanding of this a bit better! Some useful resources below to continue your journey.

The Startup

Get smarter at building your thing. Join The Startup’s +792K followers.

Sign up for Top 10 Stories

By The Startup

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Felipe Bohorquez

Written by

Social Entrepreneur and Software Engineer

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +792K followers.

Felipe Bohorquez

Written by

Social Entrepreneur and Software Engineer

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +792K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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