--- title: Understanding the ‘this’ Keyword in JavaScript | daily.dev description: A practical guide to understanding how JavaScript's `this` keyword works across different contexts. Covers how `this` is determined by the call site rather... canonical: https://daily.dev/posts/understanding-the-this-keyword-in-javascript-crptizoz8 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Understanding the ‘this’ Keyword in JavaScript | daily.dev og:description: A practical guide to understanding how JavaScript's `this` keyword works across different contexts. Covers how `this` is determined by the call site rather... og:url: https://daily.dev/posts/understanding-the-this-keyword-in-javascript-crptizoz8 og:image: https://api.daily.dev/og/posts/cRPTIzOZ8.png og:image:alt: Understanding the ‘this’ Keyword in JavaScript og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Understanding the ‘this’ Keyword in JavaScript **[Medium](https://daily.dev/sources/medium_js)** · 6 min read · 1 upvotes · 0 comments ## Summary A practical guide to understanding how JavaScript's `this` keyword works across different contexts. Covers how `this` is determined by the call site rather than where a function is defined, with examples for regular functions, arrow functions, object methods, class instance vs. static methods, and event handlers. Includes a hands-on EventEmitter implementation that demonstrates why arrow functions are needed to preserve `this` inside returned objects. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### Why does 'this' inside a setTimeout callback not refer to the object that called the outer function? Because the callback passed to setTimeout is invoked later as a plain function call, its call site is setTimeout itself, not the original object. In non-strict mode this falls back to the global object, so a property like input read via this.input uses the global variable's value rather than the object's property, producing a different result than expected inside the outer method. _Debugging unexpected this values in callbacks is easier with clear JavaScript references on daily.dev._ ### Why does an arrow function used as an object method return undefined for this.name? Arrow functions do not have their own this binding; they inherit this from the lexical scope where they were defined, which for a top-level object literal is typically the global scope. Since the global object has no name property, calling an arrow function method like getName returns undefined instead of the object's name value. _Understanding lexical this versus dynamic this on daily.dev helps avoid subtle object method bugs._ ### Why should the unsubscribe function inside a custom EventEmitter be written as an arrow function instead of a regular function? A regular function called as unsubscribe() would have its this bound to the returned object rather than the EventEmitter instance, breaking access to the internal events Map. Writing unsubscribe as an arrow function preserves the surrounding this from the subscribe method, so it correctly references the EventEmitter instance's events map when filtering out a callback. _Designing correct callback APIs around this binding is a common topic developers track on daily.dev._ ## Similar posts on daily.dev - [JavaScript this Keyword Explained: Objects, Classes, Arrow Functions, and Interview Questions](https://daily.dev/posts/javascript-this-keyword-explained-objects-classes-arrow-functions-and-interview-questions-qhe5plx8x) · Medium · 1 upvotes · 0 comments - [The Same Function Gives a Different ‘this’ Depending on How You Call It. Here’s Why.](https://daily.dev/posts/the-same-function-gives-a-different-this-depending-on-how-you-call-it-here-s-why--wiq8dc7lp) · Medium · 0 upvotes · 0 comments --- Tags: [#javascript](https://daily.dev/tags/javascript) [View this post on daily.dev](https://daily.dev/posts/understanding-the-this-keyword-in-javascript-crptizoz8) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Understanding the ‘this’ Keyword in JavaScript","url":"https://daily.dev/posts/understanding-the-this-keyword-in-javascript-crptizoz8","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/understanding-the-this-keyword-in-javascript-crptizoz8"},"datePublished":"2026-07-18T04:18:38.256Z","dateModified":"2026-09-14T09:27:32.830Z","description":"A practical guide to understanding how JavaScript's `this` keyword works across different contexts. Covers how `this` is determined by the call site rather...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/73f994d16719182c9a825ce211901d8d?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/73f994d16719182c9a825ce211901d8d?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Medium","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Medium","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/medium","url":"https://daily.dev/sources/medium_js"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/understanding-the-this-keyword-in-javascript-crptizoz8","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"javascript","timeRequired":"PT6M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Medium","item":"https://daily.dev/sources/medium_js"},{"@type":"ListItem","position":3,"name":"Understanding the ‘this’ Keyword in JavaScript"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/understanding-the-this-keyword-in-javascript-crptizoz8#faq","mainEntity":[{"@type":"Question","name":"Why does 'this' inside a setTimeout callback not refer to the object that called the outer function?","acceptedAnswer":{"@type":"Answer","text":"Because the callback passed to setTimeout is invoked later as a plain function call, its call site is setTimeout itself, not the original object. In non-strict mode this falls back to the global object, so a property like input read via this.input uses the global variable's value rather than the object's property, producing a different result than expected inside the outer method. Debugging unexpected this values in callbacks is easier with clear JavaScript references on daily.dev."}},{"@type":"Question","name":"Why does an arrow function used as an object method return undefined for this.name?","acceptedAnswer":{"@type":"Answer","text":"Arrow functions do not have their own this binding; they inherit this from the lexical scope where they were defined, which for a top-level object literal is typically the global scope. Since the global object has no name property, calling an arrow function method like getName returns undefined instead of the object's name value. Understanding lexical this versus dynamic this on daily.dev helps avoid subtle object method bugs."}},{"@type":"Question","name":"Why should the unsubscribe function inside a custom EventEmitter be written as an arrow function instead of a regular function?","acceptedAnswer":{"@type":"Answer","text":"A regular function called as unsubscribe() would have its this bound to the returned object rather than the EventEmitter instance, breaking access to the internal events Map. Writing unsubscribe as an arrow function preserves the surrounding this from the subscribe method, so it correctly references the EventEmitter instance's events map when filtering out a callback. Designing correct callback APIs around this binding is a common topic developers track on daily.dev."}}]} ```