What actually is this?<\/em><\/h2>\n\n\n\nSimply put, this <\/em>is a pointer, a way to reference which object called a function or method in JavaScript code. In layman\u2019s terms, this <\/em>is what\u2019s to the left of the dot.
<\/p>\n\n\n\n![\"\"\/](\"https:\/\/lh4.googleusercontent.com\/JjwTQxuP6L_wmnDmCG8KVxY0rcjZVSpOloMuMF8quXCZ2iG4sSq_AzXI5sBi0Av4xuGKlQC9tsawIgadlXznOZZQb5LJ4vzz7yj_FaUJbG2xN6u83AZzVQ6f3BGc3pvDq0GK3-41\")
<\/figure>\n\n\n\n<\/p>\n\n\n\n
This has two main uses. Let\u2019s explore them with some examples.<\/p>\n\n\n\n
Constructing objects with this<\/em><\/h3>\n\n\n\nfunction Book(title, author, genre) {\n this.title = title;\n this.author = author;\n this.genre = genre;\n}\nconst book1 = new Book("Lord Of The Rings", "J.R.R. Tolkien", "Fantasy");\nconst book2 = new Book("Tools Of Titans", "Tim Ferriss", "Self-help");\n \nconsole.log(book1);\nconsole.log(book2);<\/pre><\/div>\n\n\n\nThe above code produces the following output:
<\/p>\n\n\n\n![\"\"\/](\"https:\/\/lh4.googleusercontent.com\/HdZ8KT6WIQorNxAykqXF37AjSU5n5GBPIeyft87_KFpUfmNGCwi0WEKYvtCB1d9usWt9gnoC8ww9nBMzQ6zPc8Qsc9-UdyDo6rPPxIzVUFG0lvSRFu3sgQv-EtvT1m5VwzFZkdHb\")
<\/figure>\n\n\n\nHere, we defined a constructor function from which we make book objects which take a title, an author, and a genre as parameters.
<\/p>\n\n\n\n
A constructor function is an object \u201cblueprint\u201d function from which we can create objects of the given name (Book in our case).
<\/p>\n\n\n\n
We created an object called myBook, and passed the required parameters (called arguments when we call or invoke a function, as opposed to parameters when we define it).
<\/p>\n\n\n\n
At the end we logged myBook, and got back the object with its corresponding properties. This way, each new book object that we create gets the passed values assigned to it.<\/p>\n\n\n\n
Accessing properties with this<\/em>:<\/h3>\n\n\n\nconst girl = {\n name: "Sarah",\n age: 26,\n introduce() {\n console.log(\n "Hi! " + "I'm " + this.name + " and I'm " + this.age + " years old."\n );\n },\n};<\/pre><\/div>\n\n\n\n<\/p>\n\n\n\n![\"\"\/](\"https:\/\/lh4.googleusercontent.com\/o125HABjebQCK3nPhbNzUnler0bcpANJ7OaCvMzhTuCzNJ2gPQ2EqmsRJLO1TlzfqEEb8jCLoxh0Sc_VKhRez31dmx_ezA8iCEtbwenZpKqGGgYzbL0FH4DHG0cAuM_n7sQrJBrd\")
<\/figure>\n\n\n\nHere we defined a variable called girl which holds an object with name and age properties, and an introduce function.
<\/p>\n\n\n\n
The function logs an introductory sentence using the object\u2019s properties, accessing them with this<\/em>.wanted_property.<\/p>\n\n\n\nThis<\/em> and scope in JavaScript<\/h3>\n\n\n\nBy default, when used in the global scope, meaning not inside a defined function or object, this <\/em>will refer to the global object. In the browser, window is the global object.
<\/p>\n\n\n\nWhen you declare some primitive data (strings, numbers, booleans…), an object, or a function in JavaScript, they all get attached to the global (window) object.
<\/p>\n\n\n\n
Anything that you write \u201cin the open\u201d, you can read as if there\u2019s a window. written before it. Let\u2019s take a look at this code snippet:<\/p>\n\n\n\n
function returnThis() {\n return this;\n}<\/pre><\/div>\n\n\n\nFirst we define a function called returnThis in the global scope that returns the value of this<\/em>. Then we call it by writing returnThis()<\/code>.
<\/p>\n\n\n\nSince it\u2019s globally scoped, we can look at it as window.returnThis()<\/code>, which returns to us what\u2019s to the left of the dot.
<\/p>\n\n\n\n![\"\"\/](\"https:\/\/lh3.googleusercontent.com\/WzxQs1F-mhsmPGRiqznE7ozZ3mc7YadBtBxOpg_HAb9Zct63750Htg_mOpLfexOmr0MsF6J1kYh5qW08j8yOGxvA7lcGQV2szpq8dikff6gUHYM3qB5aRufrcNtgqSrFCZ3o8L_r\")
<\/figure>\n\n\n\n<\/p>\n\n\n\n
Object functions a.k.a. methods<\/h3>\n\n\n\n
If we now define a new object that has the same function inside of it (called an object method) and we call it once again, we will get that object (denoted by the curly braces) returned to us.
<\/p>\n\n\n\n
const object = {\n returnThis() {\n return this;\n },\n};\nobject.returnThis();<\/pre><\/div>\n\n\n\n![\"\"\/](\"https:\/\/lh6.googleusercontent.com\/dY9zooKnmmI8Vc37PBbHjBp5zxhuyC71xVOq_Figk93sVGvHleGzrvzfh9OmSpb0GetDPZ2atUf-o8fRM-t3eQ_GCt5BqQC37UAj_jrIA4LEecmtMLaPoA05Dyq6_Cn2hq2q12x-\")
<\/figure>\n\n\n\nThe gotcha of this<\/em> and it\u2019s three solutions<\/h2>\n\n\n\nIf a function is not directly tied to an object, the this<\/em> inside of the function will refer to the global object.
<\/p>\n\n\n\nconst weirdBehaviorObject = {\n directlyTiedFunction() {\n return this;\n },\n directlyTiedOuterFunction() {\n return function indirectNestedFunction() {\n return this;\n };\n },\n };<\/pre><\/div>\n\n\n\nLet\u2019s run this in the browser and see what we get:
<\/p>\n\n\n\n![\"\"\/](\"https:\/\/lh4.googleusercontent.com\/CtomF3s8FMLS1oewOnL_IOJq-Z4iLFzF-EFxZb_GPsC2Wdnq2VHyA1p_UMuqIxl8S2lFKX725__OX-0ThuNdTfSxN90zVaalIVwkSQRAO92yrlYZHeS5zCyvEaBT-CCOI6xfErF5\")
<\/figure>\n\n\n\nWe defined an object with one function returning this<\/em> again, and another one which returns an inner function, which then returns this<\/em>.
<\/p>\n\n\n\nWhen we want to call the indirectNestedFunction, we first write ()<\/code> once to call the outer function which returns the inner.
<\/p>\n\n\n\nThen we call the inner with another ()<\/code> which returns the window.
<\/p>\n\n\n\nThis is one of JavaScript\u2019s mysterious behaviors, and it gives way to some unexpected and unwanted surprises.
<\/p>\n\n\n\n
Luckily, there are ways to solve this issue. The first one is by making a closure<\/a>, which is how it was done pre-ES6. The second way is by using arrow functions<\/a>, and third is by using the bind method, which is closely related to the call and apply methods.<\/p>\n\n\n\n#1 Solving this<\/em> with closures<\/h4>\n\n\n\nA closure is a persistent memory store, which means the variable doesn\u2019t disappear when the function finishes executing. It is created by the JavaScript engine when a nested function is referencing a variable that\u2019s defined in an outer function so it has access to it even when the outer function finishes running. Here\u2019s what it looks like with our this<\/em> example:
<\/p>\n\n\n\nconst objectWithClosure = {\n closureFunction() {\n const self = this;\n return function enclosedFunction() {\n return self;\n };\n },\n };<\/pre><\/div>\n\n\n\n![\"\"\/](\"https:\/\/lh6.googleusercontent.com\/O4GbqSXJ_POMJIcI_CENugweH2RZznl9MpRUuz_FfUplXjsm_UWrgXqHMH-7mJCrFUFmInJoidY4VWOqH42bGUeHbqfCHVAc-s06jt20eOixDxOrgD33vq-JBaUbP16IwkUZ00Uo\")
<\/figure>\n\n\n\nWe defined an object with a closureFunction, in which we defined a variable called self to store our this<\/em> value. Since the closureFunction is directly tied to the containing object, the value of this<\/em> refers to it. Now, in our enclosedFunction, this<\/em> would usually refer to the window object. Since we used a closure to access this<\/em> from the containing function, we are able to preserve the calling object as it\u2019s value.<\/p>\n\n\n\n#2 Solving this<\/em> with arrow functions<\/h4>\n\n\n\nThe second solution is using arguably one of the best features that came with ES6, which are arrow functions.
<\/p>\n\n\n\n
Arrow functions represent a more concise syntax for writing functions. In addition to that, they will look one level up in scope to look for this,<\/em> meaning in the function it\u2019s contained in.
<\/p>\n\n\n\nSo if we define our object like so:
<\/p>\n\n\n\n
const arrowFunctionObject = {\n outerFunc() {\n return () => this;\n },\n };<\/pre><\/div>\n\n\n\n![\"\"\/](\"https:\/\/lh5.googleusercontent.com\/hDePVLDCYAqgeyzRmbDmbQoYch_7cYBmXAOVBEX7huERywOjzrgwk_yaYeBaTbrx8U9dW-gGgn1_C2inl92pAlwlfrXzoL68tdTrC8yzZCeTl8qEjNiH8w-cS-xkwwF1w-y-8TR_\")
<\/figure>\n\n\n\nWe can see that the arrow function returns the actual object, and not the window. <\/p>\n\n\n\n
That\u2019s because it looked up to the outerFunction that called it, where this<\/em> refers to the arrowFunctionObject. So, arrow functions have a kind of built-in closure.<\/p>\n\n\n\nNested arrow functions<\/h5>\n\n\n\n
Of course, this is JavaScript, so here\u2019s another gotcha. It\u2019s something you\u2019ll probably never encounter outside of a technical interview, but that\u2019s enough reason to know it.
<\/p>\n\n\n\n
What happens if we nest an arrow function inside a regular function, and again inside another function? It looks like this:
<\/p>\n\n\n\n
const arrowNestedInRegularFunctionObject = {\n outerFunction() {\n return function regularFunction() {\n return () => this;\n };\n },\n };<\/pre><\/div>\n\n\n\n![\"\"\/](\"https:\/\/lh6.googleusercontent.com\/K-3o0FbhIsz9kparusxhgcIyjT98cdj9x3cmIK4z6s3ufFSOpJU9GRi8MFolSpEUjWymOYkXjLTv575y5BpQP2G_zxurB_4X_dxM0VxuTL71xvhLpnDOwOKyALsQ5EmuWhZTyVKI\")
<\/figure>\n\n\n\nOur object has an outerFunction which, when called, returns the inner, regularFunction.<\/p>\n\n\n\n
We then call regularFunction and it returns the innermost arrow function.<\/p>\n\n\n\n
Now, when calling it, it returns the window object.
<\/p>\n\n\n\n
An arrow function will look up only<\/strong> 1 level<\/strong> up in scope. Since the regularFunction that contains it is not directly tied to our object, the window is returned instead.
<\/p>\n\n\n\nIf we, however, nest an arrow function inside an arrow function, inside a regular function, we will get the expected result, which is the actual containing object.
<\/p>\n\n\n\n
const nestedArrowFunctionObject = {\n outerFunction() {\n return () => {\n return () => this;\n };\n },\n };<\/pre><\/div>\n\n\n\n![\"\"\/](\"https:\/\/lh5.googleusercontent.com\/GEmZMbwXOUTjun_VLAnqHPB4lNvQtSmz-jh_qOUZTXemGivcl0fh2Q7Zi-w-gAcYKVdZoJ5kOP78zQcyBIxv2X66rBmRD0ZyGoxDZbKCFA915KmiNfP4HZS8TjBUh10ztL0mUZg0\")
<\/figure>\n\n\n\nIn this case the inner arrow function looks up to the outer one. The outer is also an arrow function so it looks up one more level. The regular outerFunction is directly tied to the calling <\/p>\n\n\n\n
object, and as a result, the object is what gets returned as this<\/em>.<\/em>
<\/p>\n\n\n\n#3 Solving this<\/em> with the bind method<\/h4>\n\n\n\nLastly, the third solution is using the bind method. The bind method is used to explicitly declare what this<\/em> should refer to. It gets the object passed as an argument, and binds it to the function\u2019s this <\/em>keyword.
<\/p>\n\n\n\nconst arrowNestedInRegularFunctionObject = {\n outerFunction() {\n return function regularFunction() {\n return () => this;\n }.bind(arrowNestedInRegularFunctionObject);\n },\n };<\/pre><\/div>\n\n\n\n![\"\"\/](\"https:\/\/lh4.googleusercontent.com\/oOwVv6pM0_9P-TJE8s3RnElxcOrpJBU4iz8a9IePz-CQA7pj4yW1tqVBYW6x6YSYlv5ukV7tweKh8gO7bNGjrl_PVuMSLI5rFbxJ_fjBT66zjXTpieemYxTMs781Bmz4go79j13t\")
<\/figure>\n\n\n\nIn this example, we chained bind to the function that would normally return the window object as this<\/em>. <\/em>We pass it the object that we want referenced as this<\/em> as an argument, and our problem is solved.<\/p>\n\n\n\nThis<\/em> is not that hard when you understand JavaScript<\/h2>\n\n\n\nPhew! That was quite a dive. Now, you might ask, why all the hassle and confusion with this<\/em>?<\/p>\n\n\n\nThe reason is that, unlike everything else in JavaScript, this<\/em> is dynamically scoped. That means that the JavaScript engine defines what this<\/em> represents at runtime when the code is executed, by looking at where from, and who is calling it.
<\/p>\n\n\n\nIn contrast, everything else in JavaScript is lexically scoped, meaning that its value is defined where the variable is defined, when the code is written.<\/p>\n\n\n\n
Thanks to this<\/em>, we can create an object \u201cblueprint\u201d once, and dynamically create objects with different property values like we saw in our book example.
<\/p>\n\n\n\nWe can also make methods that expose and manipulate an object\u2019s properties with this<\/em>.wanted_property.
<\/p>\n\n\n\nWe can work around JavaScript\u2019s quirks, and command it\u2019s behavior confidently, and produce expected results.
<\/p>\n\n\n\n
Now that you understand this <\/em>in JavaScript, as well as a few other fundamental concepts, you can go and experiment, practice, and more confidently take steps towards JavaScript mastery.
<\/p>\n\n\n\nYou got this<\/em>!<\/p>\n","protected":false},"excerpt":{"rendered":"Understanding JavaScript this keyword If you want to become a programmer, no matter which specific field you choose, you will almost certainly need to tackle JavaScript. It has evolved from humble beginnings into a true powerhouse. It now covers front end, backend, mobile, games, desktop apps, and even machine learning! Now, before you become a…","protected":false},"author":85,"featured_media":20207,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11933],"tags":[],"class_list":{"0":"post-20206","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"JavaScript","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"\nthis JavaScript: Understand This Once And For All | Career Karma<\/title>\n<meta name=\"description\" content=\"\u201cThis is what is left of the dot\u201d would be the shortest explanation. However, we\u2019re going in depth, explaining all about this, it\u2019s uses, and it\u2019s weirdness.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/this-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"this JavaScript: Understand This Once And For All\" \/>\n<meta property=\"og:description\" content=\"\u201cThis is what is left of the dot\u201d would be the shortest explanation. However, we\u2019re going in depth, explaining all about this, it\u2019s uses, and it\u2019s weirdness.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/this-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-25T07:20:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-02-03T00:38:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/sydney-rae-geM5lzDj4Iw-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"680\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Stefan Dili\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Stefan Dili\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/this-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/this-javascript\/\"},\"author\":{\"name\":\"Stefan Dili\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/38a169875c6272296a3430eecc389f8b\"},\"headline\":\"this JavaScript: Understand This Once And For All\",\"datePublished\":\"2020-07-25T07:20:13+00:00\",\"dateModified\":\"2021-02-03T00:38:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/this-javascript\/\"},\"wordCount\":1343,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/this-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/sydney-rae-geM5lzDj4Iw-unsplash.jpg\",\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/this-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/this-javascript\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/this-javascript\/\",\"name\":\"this JavaScript: Understand This Once And For All | Career Karma\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/this-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/this-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/sydney-rae-geM5lzDj4Iw-unsplash.jpg\",\"datePublished\":\"2020-07-25T07:20:13+00:00\",\"dateModified\":\"2021-02-03T00:38:43+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/38a169875c6272296a3430eecc389f8b\"},\"description\":\"\u201cThis is what is left of the dot\u201d would be the shortest explanation. However, we\u2019re going in depth, explaining all about this, it\u2019s uses, and it\u2019s weirdness.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/this-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/this-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/this-javascript\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/sydney-rae-geM5lzDj4Iw-unsplash.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/sydney-rae-geM5lzDj4Iw-unsplash.jpg\",\"width\":1020,\"height\":680},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/this-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/careerkarma.com\/blog\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"this JavaScript: Understand This Once And For All\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\",\"url\":\"https:\/\/careerkarma.com\/blog\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News & Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/careerkarma.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/38a169875c6272296a3430eecc389f8b\",\"name\":\"Stefan Dili\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/profilna-1-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/profilna-1-150x150.jpg\",\"caption\":\"Stefan Dili\"},\"url\":\"https:\/\/careerkarma.com\/blog\/author\/stefan-dili\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"this JavaScript: Understand This Once And For All | Career Karma","description":"\u201cThis is what is left of the dot\u201d would be the shortest explanation. However, we\u2019re going in depth, explaining all about this, it\u2019s uses, and it\u2019s weirdness.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/this-javascript\/","og_locale":"en_US","og_type":"article","og_title":"this JavaScript: Understand This Once And For All","og_description":"\u201cThis is what is left of the dot\u201d would be the shortest explanation. However, we\u2019re going in depth, explaining all about this, it\u2019s uses, and it\u2019s weirdness.","og_url":"https:\/\/careerkarma.com\/blog\/this-javascript\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-07-25T07:20:13+00:00","article_modified_time":"2021-02-03T00:38:43+00:00","og_image":[{"width":1020,"height":680,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/sydney-rae-geM5lzDj4Iw-unsplash.jpg","type":"image\/jpeg"}],"author":"Stefan Dili","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Stefan Dili","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/this-javascript\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/this-javascript\/"},"author":{"name":"Stefan Dili","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/38a169875c6272296a3430eecc389f8b"},"headline":"this JavaScript: Understand This Once And For All","datePublished":"2020-07-25T07:20:13+00:00","dateModified":"2021-02-03T00:38:43+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/this-javascript\/"},"wordCount":1343,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/this-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/sydney-rae-geM5lzDj4Iw-unsplash.jpg","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/this-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/this-javascript\/","url":"https:\/\/careerkarma.com\/blog\/this-javascript\/","name":"this JavaScript: Understand This Once And For All | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/this-javascript\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/this-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/sydney-rae-geM5lzDj4Iw-unsplash.jpg","datePublished":"2020-07-25T07:20:13+00:00","dateModified":"2021-02-03T00:38:43+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/38a169875c6272296a3430eecc389f8b"},"description":"\u201cThis is what is left of the dot\u201d would be the shortest explanation. However, we\u2019re going in depth, explaining all about this, it\u2019s uses, and it\u2019s weirdness.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/this-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/this-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/this-javascript\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/sydney-rae-geM5lzDj4Iw-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/sydney-rae-geM5lzDj4Iw-unsplash.jpg","width":1020,"height":680},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/this-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/careerkarma.com\/blog\/javascript\/"},{"@type":"ListItem","position":3,"name":"this JavaScript: Understand This Once And For All"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News & Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/38a169875c6272296a3430eecc389f8b","name":"Stefan Dili","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/profilna-1-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/profilna-1-150x150.jpg","caption":"Stefan Dili"},"url":"https:\/\/careerkarma.com\/blog\/author\/stefan-dili\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/20206","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=20206"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/20206\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/20207"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=20206"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=20206"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=20206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/p>\n\n\n\n
<\/figure>\n\n\n\n<\/p>\n\n\n\n
This has two main uses. Let\u2019s explore them with some examples.<\/p>\n\n\n\n
Constructing objects with this<\/em><\/h3>\n\n\n\nfunction Book(title, author, genre) {\n this.title = title;\n this.author = author;\n this.genre = genre;\n}\nconst book1 = new Book("Lord Of The Rings", "J.R.R. Tolkien", "Fantasy");\nconst book2 = new Book("Tools Of Titans", "Tim Ferriss", "Self-help");\n \nconsole.log(book1);\nconsole.log(book2);<\/pre><\/div>\n\n\n\nThe above code produces the following output:
<\/p>\n\n\n\n<\/figure>\n\n\n\nHere, we defined a constructor function from which we make book objects which take a title, an author, and a genre as parameters.
<\/p>\n\n\n\n
A constructor function is an object \u201cblueprint\u201d function from which we can create objects of the given name (Book in our case).
<\/p>\n\n\n\n
We created an object called myBook, and passed the required parameters (called arguments when we call or invoke a function, as opposed to parameters when we define it).
<\/p>\n\n\n\n
At the end we logged myBook, and got back the object with its corresponding properties. This way, each new book object that we create gets the passed values assigned to it.<\/p>\n\n\n\n
Accessing properties with this<\/em>:<\/h3>\n\n\n\nconst girl = {\n name: "Sarah",\n age: 26,\n introduce() {\n console.log(\n "Hi! " + "I'm " + this.name + " and I'm " + this.age + " years old."\n );\n },\n};<\/pre><\/div>\n\n\n\n<\/p>\n\n\n\n<\/figure>\n\n\n\nHere we defined a variable called girl which holds an object with name and age properties, and an introduce function.
<\/p>\n\n\n\n
The function logs an introductory sentence using the object\u2019s properties, accessing them with this<\/em>.wanted_property.<\/p>\n\n\n\nThis<\/em> and scope in JavaScript<\/h3>\n\n\n\nBy default, when used in the global scope, meaning not inside a defined function or object, this <\/em>will refer to the global object. In the browser, window is the global object.
<\/p>\n\n\n\nWhen you declare some primitive data (strings, numbers, booleans…), an object, or a function in JavaScript, they all get attached to the global (window) object.
<\/p>\n\n\n\n
Anything that you write \u201cin the open\u201d, you can read as if there\u2019s a window. written before it. Let\u2019s take a look at this code snippet:<\/p>\n\n\n\n
function returnThis() {\n return this;\n}<\/pre><\/div>\n\n\n\nFirst we define a function called returnThis in the global scope that returns the value of this<\/em>. Then we call it by writing returnThis()<\/code>.
<\/p>\n\n\n\nSince it\u2019s globally scoped, we can look at it as window.returnThis()<\/code>, which returns to us what\u2019s to the left of the dot.
<\/p>\n\n\n\n<\/figure>\n\n\n\n<\/p>\n\n\n\n
Object functions a.k.a. methods<\/h3>\n\n\n\n
If we now define a new object that has the same function inside of it (called an object method) and we call it once again, we will get that object (denoted by the curly braces) returned to us.
<\/p>\n\n\n\n
const object = {\n returnThis() {\n return this;\n },\n};\nobject.returnThis();<\/pre><\/div>\n\n\n\n<\/figure>\n\n\n\nThe gotcha of this<\/em> and it\u2019s three solutions<\/h2>\n\n\n\nIf a function is not directly tied to an object, the this<\/em> inside of the function will refer to the global object.
<\/p>\n\n\n\nconst weirdBehaviorObject = {\n directlyTiedFunction() {\n return this;\n },\n directlyTiedOuterFunction() {\n return function indirectNestedFunction() {\n return this;\n };\n },\n };<\/pre><\/div>\n\n\n\nLet\u2019s run this in the browser and see what we get:
<\/p>\n\n\n\n<\/figure>\n\n\n\nWe defined an object with one function returning this<\/em> again, and another one which returns an inner function, which then returns this<\/em>.
<\/p>\n\n\n\nWhen we want to call the indirectNestedFunction, we first write ()<\/code> once to call the outer function which returns the inner.
<\/p>\n\n\n\nThen we call the inner with another ()<\/code> which returns the window.
<\/p>\n\n\n\nThis is one of JavaScript\u2019s mysterious behaviors, and it gives way to some unexpected and unwanted surprises.
<\/p>\n\n\n\n
Luckily, there are ways to solve this issue. The first one is by making a closure<\/a>, which is how it was done pre-ES6. The second way is by using arrow functions<\/a>, and third is by using the bind method, which is closely related to the call and apply methods.<\/p>\n\n\n\n#1 Solving this<\/em> with closures<\/h4>\n\n\n\nA closure is a persistent memory store, which means the variable doesn\u2019t disappear when the function finishes executing. It is created by the JavaScript engine when a nested function is referencing a variable that\u2019s defined in an outer function so it has access to it even when the outer function finishes running. Here\u2019s what it looks like with our this<\/em> example:
<\/p>\n\n\n\nconst objectWithClosure = {\n closureFunction() {\n const self = this;\n return function enclosedFunction() {\n return self;\n };\n },\n };<\/pre><\/div>\n\n\n\n<\/figure>\n\n\n\nWe defined an object with a closureFunction, in which we defined a variable called self to store our this<\/em> value. Since the closureFunction is directly tied to the containing object, the value of this<\/em> refers to it. Now, in our enclosedFunction, this<\/em> would usually refer to the window object. Since we used a closure to access this<\/em> from the containing function, we are able to preserve the calling object as it\u2019s value.<\/p>\n\n\n\n#2 Solving this<\/em> with arrow functions<\/h4>\n\n\n\nThe second solution is using arguably one of the best features that came with ES6, which are arrow functions.
<\/p>\n\n\n\n
Arrow functions represent a more concise syntax for writing functions. In addition to that, they will look one level up in scope to look for this,<\/em> meaning in the function it\u2019s contained in.
<\/p>\n\n\n\nSo if we define our object like so:
<\/p>\n\n\n\n
const arrowFunctionObject = {\n outerFunc() {\n return () => this;\n },\n };<\/pre><\/div>\n\n\n\n<\/figure>\n\n\n\nWe can see that the arrow function returns the actual object, and not the window. <\/p>\n\n\n\n
That\u2019s because it looked up to the outerFunction that called it, where this<\/em> refers to the arrowFunctionObject. So, arrow functions have a kind of built-in closure.<\/p>\n\n\n\nNested arrow functions<\/h5>\n\n\n\n
Of course, this is JavaScript, so here\u2019s another gotcha. It\u2019s something you\u2019ll probably never encounter outside of a technical interview, but that\u2019s enough reason to know it.
<\/p>\n\n\n\n
What happens if we nest an arrow function inside a regular function, and again inside another function? It looks like this:
<\/p>\n\n\n\n
const arrowNestedInRegularFunctionObject = {\n outerFunction() {\n return function regularFunction() {\n return () => this;\n };\n },\n };<\/pre><\/div>\n\n\n\n<\/figure>\n\n\n\nOur object has an outerFunction which, when called, returns the inner, regularFunction.<\/p>\n\n\n\n
We then call regularFunction and it returns the innermost arrow function.<\/p>\n\n\n\n
Now, when calling it, it returns the window object.
<\/p>\n\n\n\n
An arrow function will look up only<\/strong> 1 level<\/strong> up in scope. Since the regularFunction that contains it is not directly tied to our object, the window is returned instead.
<\/p>\n\n\n\nIf we, however, nest an arrow function inside an arrow function, inside a regular function, we will get the expected result, which is the actual containing object.
<\/p>\n\n\n\n
const nestedArrowFunctionObject = {\n outerFunction() {\n return () => {\n return () => this;\n };\n },\n };<\/pre><\/div>\n\n\n\n<\/figure>\n\n\n\nIn this case the inner arrow function looks up to the outer one. The outer is also an arrow function so it looks up one more level. The regular outerFunction is directly tied to the calling <\/p>\n\n\n\n
object, and as a result, the object is what gets returned as this<\/em>.<\/em>
<\/p>\n\n\n\n#3 Solving this<\/em> with the bind method<\/h4>\n\n\n\nLastly, the third solution is using the bind method. The bind method is used to explicitly declare what this<\/em> should refer to. It gets the object passed as an argument, and binds it to the function\u2019s this <\/em>keyword.
<\/p>\n\n\n\nconst arrowNestedInRegularFunctionObject = {\n outerFunction() {\n return function regularFunction() {\n return () => this;\n }.bind(arrowNestedInRegularFunctionObject);\n },\n };<\/pre><\/div>\n\n\n\n<\/figure>\n\n\n\nIn this example, we chained bind to the function that would normally return the window object as this<\/em>. <\/em>We pass it the object that we want referenced as this<\/em> as an argument, and our problem is solved.<\/p>\n\n\n\nThis<\/em> is not that hard when you understand JavaScript<\/h2>\n\n\n\nPhew! That was quite a dive. Now, you might ask, why all the hassle and confusion with this<\/em>?<\/p>\n\n\n\nThe reason is that, unlike everything else in JavaScript, this<\/em> is dynamically scoped. That means that the JavaScript engine defines what this<\/em> represents at runtime when the code is executed, by looking at where from, and who is calling it.
<\/p>\n\n\n\nIn contrast, everything else in JavaScript is lexically scoped, meaning that its value is defined where the variable is defined, when the code is written.<\/p>\n\n\n\n
Thanks to this<\/em>, we can create an object \u201cblueprint\u201d once, and dynamically create objects with different property values like we saw in our book example.
<\/p>\n\n\n\nWe can also make methods that expose and manipulate an object\u2019s properties with this<\/em>.wanted_property.
<\/p>\n\n\n\nWe can work around JavaScript\u2019s quirks, and command it\u2019s behavior confidently, and produce expected results.
<\/p>\n\n\n\n
Now that you understand this <\/em>in JavaScript, as well as a few other fundamental concepts, you can go and experiment, practice, and more confidently take steps towards JavaScript mastery.
<\/p>\n\n\n\nYou got this<\/em>!<\/p>\n","protected":false},"excerpt":{"rendered":"Understanding JavaScript this keyword If you want to become a programmer, no matter which specific field you choose, you will almost certainly need to tackle JavaScript. It has evolved from humble beginnings into a true powerhouse. It now covers front end, backend, mobile, games, desktop apps, and even machine learning! Now, before you become a…","protected":false},"author":85,"featured_media":20207,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11933],"tags":[],"class_list":{"0":"post-20206","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"JavaScript","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"\nthis JavaScript: Understand This Once And For All | Career Karma<\/title>\n<meta name=\"description\" content=\"\u201cThis is what is left of the dot\u201d would be the shortest explanation. However, we\u2019re going in depth, explaining all about this, it\u2019s uses, and it\u2019s weirdness.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/this-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"this JavaScript: Understand This Once And For All\" \/>\n<meta property=\"og:description\" content=\"\u201cThis is what is left of the dot\u201d would be the shortest explanation. However, we\u2019re going in depth, explaining all about this, it\u2019s uses, and it\u2019s weirdness.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/this-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-25T07:20:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-02-03T00:38:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/sydney-rae-geM5lzDj4Iw-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"680\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Stefan Dili\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Stefan Dili\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/this-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/this-javascript\/\"},\"author\":{\"name\":\"Stefan Dili\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/38a169875c6272296a3430eecc389f8b\"},\"headline\":\"this JavaScript: Understand This Once And For All\",\"datePublished\":\"2020-07-25T07:20:13+00:00\",\"dateModified\":\"2021-02-03T00:38:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/this-javascript\/\"},\"wordCount\":1343,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/this-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/sydney-rae-geM5lzDj4Iw-unsplash.jpg\",\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/this-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/this-javascript\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/this-javascript\/\",\"name\":\"this JavaScript: Understand This Once And For All | Career Karma\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/this-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/this-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/sydney-rae-geM5lzDj4Iw-unsplash.jpg\",\"datePublished\":\"2020-07-25T07:20:13+00:00\",\"dateModified\":\"2021-02-03T00:38:43+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/38a169875c6272296a3430eecc389f8b\"},\"description\":\"\u201cThis is what is left of the dot\u201d would be the shortest explanation. However, we\u2019re going in depth, explaining all about this, it\u2019s uses, and it\u2019s weirdness.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/this-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/this-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/this-javascript\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/sydney-rae-geM5lzDj4Iw-unsplash.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/sydney-rae-geM5lzDj4Iw-unsplash.jpg\",\"width\":1020,\"height\":680},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/this-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/careerkarma.com\/blog\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"this JavaScript: Understand This Once And For All\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\",\"url\":\"https:\/\/careerkarma.com\/blog\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News & Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/careerkarma.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/38a169875c6272296a3430eecc389f8b\",\"name\":\"Stefan Dili\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/profilna-1-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/profilna-1-150x150.jpg\",\"caption\":\"Stefan Dili\"},\"url\":\"https:\/\/careerkarma.com\/blog\/author\/stefan-dili\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"this JavaScript: Understand This Once And For All | Career Karma","description":"\u201cThis is what is left of the dot\u201d would be the shortest explanation. However, we\u2019re going in depth, explaining all about this, it\u2019s uses, and it\u2019s weirdness.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/this-javascript\/","og_locale":"en_US","og_type":"article","og_title":"this JavaScript: Understand This Once And For All","og_description":"\u201cThis is what is left of the dot\u201d would be the shortest explanation. However, we\u2019re going in depth, explaining all about this, it\u2019s uses, and it\u2019s weirdness.","og_url":"https:\/\/careerkarma.com\/blog\/this-javascript\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-07-25T07:20:13+00:00","article_modified_time":"2021-02-03T00:38:43+00:00","og_image":[{"width":1020,"height":680,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/sydney-rae-geM5lzDj4Iw-unsplash.jpg","type":"image\/jpeg"}],"author":"Stefan Dili","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Stefan Dili","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/this-javascript\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/this-javascript\/"},"author":{"name":"Stefan Dili","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/38a169875c6272296a3430eecc389f8b"},"headline":"this JavaScript: Understand This Once And For All","datePublished":"2020-07-25T07:20:13+00:00","dateModified":"2021-02-03T00:38:43+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/this-javascript\/"},"wordCount":1343,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/this-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/sydney-rae-geM5lzDj4Iw-unsplash.jpg","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/this-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/this-javascript\/","url":"https:\/\/careerkarma.com\/blog\/this-javascript\/","name":"this JavaScript: Understand This Once And For All | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/this-javascript\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/this-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/sydney-rae-geM5lzDj4Iw-unsplash.jpg","datePublished":"2020-07-25T07:20:13+00:00","dateModified":"2021-02-03T00:38:43+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/38a169875c6272296a3430eecc389f8b"},"description":"\u201cThis is what is left of the dot\u201d would be the shortest explanation. However, we\u2019re going in depth, explaining all about this, it\u2019s uses, and it\u2019s weirdness.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/this-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/this-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/this-javascript\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/sydney-rae-geM5lzDj4Iw-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/sydney-rae-geM5lzDj4Iw-unsplash.jpg","width":1020,"height":680},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/this-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/careerkarma.com\/blog\/javascript\/"},{"@type":"ListItem","position":3,"name":"this JavaScript: Understand This Once And For All"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News & Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/38a169875c6272296a3430eecc389f8b","name":"Stefan Dili","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/profilna-1-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/profilna-1-150x150.jpg","caption":"Stefan Dili"},"url":"https:\/\/careerkarma.com\/blog\/author\/stefan-dili\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/20206","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=20206"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/20206\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/20207"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=20206"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=20206"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=20206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
function Book(title, author, genre) {\n this.title = title;\n this.author = author;\n this.genre = genre;\n}\nconst book1 = new Book("Lord Of The Rings", "J.R.R. Tolkien", "Fantasy");\nconst book2 = new Book("Tools Of Titans", "Tim Ferriss", "Self-help");\n \nconsole.log(book1);\nconsole.log(book2);<\/pre><\/div>\n\n\n\nThe above code produces the following output:
<\/p>\n\n\n\n<\/figure>\n\n\n\nHere, we defined a constructor function from which we make book objects which take a title, an author, and a genre as parameters.
<\/p>\n\n\n\n
A constructor function is an object \u201cblueprint\u201d function from which we can create objects of the given name (Book in our case).
<\/p>\n\n\n\n
We created an object called myBook, and passed the required parameters (called arguments when we call or invoke a function, as opposed to parameters when we define it).
<\/p>\n\n\n\n
At the end we logged myBook, and got back the object with its corresponding properties. This way, each new book object that we create gets the passed values assigned to it.<\/p>\n\n\n\n
Accessing properties with this<\/em>:<\/h3>\n\n\n\nconst girl = {\n name: "Sarah",\n age: 26,\n introduce() {\n console.log(\n "Hi! " + "I'm " + this.name + " and I'm " + this.age + " years old."\n );\n },\n};<\/pre><\/div>\n\n\n\n<\/p>\n\n\n\n<\/figure>\n\n\n\nHere we defined a variable called girl which holds an object with name and age properties, and an introduce function.
<\/p>\n\n\n\n
The function logs an introductory sentence using the object\u2019s properties, accessing them with this<\/em>.wanted_property.<\/p>\n\n\n\nThis<\/em> and scope in JavaScript<\/h3>\n\n\n\nBy default, when used in the global scope, meaning not inside a defined function or object, this <\/em>will refer to the global object. In the browser, window is the global object.
<\/p>\n\n\n\nWhen you declare some primitive data (strings, numbers, booleans…), an object, or a function in JavaScript, they all get attached to the global (window) object.
<\/p>\n\n\n\n
Anything that you write \u201cin the open\u201d, you can read as if there\u2019s a window. written before it. Let\u2019s take a look at this code snippet:<\/p>\n\n\n\n
function returnThis() {\n return this;\n}<\/pre><\/div>\n\n\n\nFirst we define a function called returnThis in the global scope that returns the value of this<\/em>. Then we call it by writing returnThis()<\/code>.
<\/p>\n\n\n\nSince it\u2019s globally scoped, we can look at it as window.returnThis()<\/code>, which returns to us what\u2019s to the left of the dot.
<\/p>\n\n\n\n<\/figure>\n\n\n\n<\/p>\n\n\n\n
Object functions a.k.a. methods<\/h3>\n\n\n\n
If we now define a new object that has the same function inside of it (called an object method) and we call it once again, we will get that object (denoted by the curly braces) returned to us.
<\/p>\n\n\n\n
const object = {\n returnThis() {\n return this;\n },\n};\nobject.returnThis();<\/pre><\/div>\n\n\n\n<\/figure>\n\n\n\nThe gotcha of this<\/em> and it\u2019s three solutions<\/h2>\n\n\n\nIf a function is not directly tied to an object, the this<\/em> inside of the function will refer to the global object.
<\/p>\n\n\n\nconst weirdBehaviorObject = {\n directlyTiedFunction() {\n return this;\n },\n directlyTiedOuterFunction() {\n return function indirectNestedFunction() {\n return this;\n };\n },\n };<\/pre><\/div>\n\n\n\nLet\u2019s run this in the browser and see what we get:
<\/p>\n\n\n\n<\/figure>\n\n\n\nWe defined an object with one function returning this<\/em> again, and another one which returns an inner function, which then returns this<\/em>.
<\/p>\n\n\n\nWhen we want to call the indirectNestedFunction, we first write ()<\/code> once to call the outer function which returns the inner.
<\/p>\n\n\n\nThen we call the inner with another ()<\/code> which returns the window.
<\/p>\n\n\n\nThis is one of JavaScript\u2019s mysterious behaviors, and it gives way to some unexpected and unwanted surprises.
<\/p>\n\n\n\n
Luckily, there are ways to solve this issue. The first one is by making a closure<\/a>, which is how it was done pre-ES6. The second way is by using arrow functions<\/a>, and third is by using the bind method, which is closely related to the call and apply methods.<\/p>\n\n\n\n#1 Solving this<\/em> with closures<\/h4>\n\n\n\nA closure is a persistent memory store, which means the variable doesn\u2019t disappear when the function finishes executing. It is created by the JavaScript engine when a nested function is referencing a variable that\u2019s defined in an outer function so it has access to it even when the outer function finishes running. Here\u2019s what it looks like with our this<\/em> example:
<\/p>\n\n\n\nconst objectWithClosure = {\n closureFunction() {\n const self = this;\n return function enclosedFunction() {\n return self;\n };\n },\n };<\/pre><\/div>\n\n\n\n<\/figure>\n\n\n\nWe defined an object with a closureFunction, in which we defined a variable called self to store our this<\/em> value. Since the closureFunction is directly tied to the containing object, the value of this<\/em> refers to it. Now, in our enclosedFunction, this<\/em> would usually refer to the window object. Since we used a closure to access this<\/em> from the containing function, we are able to preserve the calling object as it\u2019s value.<\/p>\n\n\n\n#2 Solving this<\/em> with arrow functions<\/h4>\n\n\n\nThe second solution is using arguably one of the best features that came with ES6, which are arrow functions.
<\/p>\n\n\n\n
Arrow functions represent a more concise syntax for writing functions. In addition to that, they will look one level up in scope to look for this,<\/em> meaning in the function it\u2019s contained in.
<\/p>\n\n\n\nSo if we define our object like so:
<\/p>\n\n\n\n
const arrowFunctionObject = {\n outerFunc() {\n return () => this;\n },\n };<\/pre><\/div>\n\n\n\n<\/figure>\n\n\n\nWe can see that the arrow function returns the actual object, and not the window. <\/p>\n\n\n\n
That\u2019s because it looked up to the outerFunction that called it, where this<\/em> refers to the arrowFunctionObject. So, arrow functions have a kind of built-in closure.<\/p>\n\n\n\nNested arrow functions<\/h5>\n\n\n\n
Of course, this is JavaScript, so here\u2019s another gotcha. It\u2019s something you\u2019ll probably never encounter outside of a technical interview, but that\u2019s enough reason to know it.
<\/p>\n\n\n\n
What happens if we nest an arrow function inside a regular function, and again inside another function? It looks like this:
<\/p>\n\n\n\n
const arrowNestedInRegularFunctionObject = {\n outerFunction() {\n return function regularFunction() {\n return () => this;\n };\n },\n };<\/pre><\/div>\n\n\n\n<\/figure>\n\n\n\nOur object has an outerFunction which, when called, returns the inner, regularFunction.<\/p>\n\n\n\n
We then call regularFunction and it returns the innermost arrow function.<\/p>\n\n\n\n
Now, when calling it, it returns the window object.
<\/p>\n\n\n\n
An arrow function will look up only<\/strong> 1 level<\/strong> up in scope. Since the regularFunction that contains it is not directly tied to our object, the window is returned instead.
<\/p>\n\n\n\nIf we, however, nest an arrow function inside an arrow function, inside a regular function, we will get the expected result, which is the actual containing object.
<\/p>\n\n\n\n
const nestedArrowFunctionObject = {\n outerFunction() {\n return () => {\n return () => this;\n };\n },\n };<\/pre><\/div>\n\n\n\n<\/figure>\n\n\n\nIn this case the inner arrow function looks up to the outer one. The outer is also an arrow function so it looks up one more level. The regular outerFunction is directly tied to the calling <\/p>\n\n\n\n
object, and as a result, the object is what gets returned as this<\/em>.<\/em>
<\/p>\n\n\n\n#3 Solving this<\/em> with the bind method<\/h4>\n\n\n\nLastly, the third solution is using the bind method. The bind method is used to explicitly declare what this<\/em> should refer to. It gets the object passed as an argument, and binds it to the function\u2019s this <\/em>keyword.
<\/p>\n\n\n\nconst arrowNestedInRegularFunctionObject = {\n outerFunction() {\n return function regularFunction() {\n return () => this;\n }.bind(arrowNestedInRegularFunctionObject);\n },\n };<\/pre><\/div>\n\n\n\n<\/figure>\n\n\n\nIn this example, we chained bind to the function that would normally return the window object as this<\/em>. <\/em>We pass it the object that we want referenced as this<\/em> as an argument, and our problem is solved.<\/p>\n\n\n\nThis<\/em> is not that hard when you understand JavaScript<\/h2>\n\n\n\nPhew! That was quite a dive. Now, you might ask, why all the hassle and confusion with this<\/em>?<\/p>\n\n\n\nThe reason is that, unlike everything else in JavaScript, this<\/em> is dynamically scoped. That means that the JavaScript engine defines what this<\/em> represents at runtime when the code is executed, by looking at where from, and who is calling it.
<\/p>\n\n\n\nIn contrast, everything else in JavaScript is lexically scoped, meaning that its value is defined where the variable is defined, when the code is written.<\/p>\n\n\n\n
Thanks to this<\/em>, we can create an object \u201cblueprint\u201d once, and dynamically create objects with different property values like we saw in our book example.
<\/p>\n\n\n\nWe can also make methods that expose and manipulate an object\u2019s properties with this<\/em>.wanted_property.
<\/p>\n\n\n\nWe can work around JavaScript\u2019s quirks, and command it\u2019s behavior confidently, and produce expected results.
<\/p>\n\n\n\n
Now that you understand this <\/em>in JavaScript, as well as a few other fundamental concepts, you can go and experiment, practice, and more confidently take steps towards JavaScript mastery.
<\/p>\n\n\n\nYou got this<\/em>!<\/p>\n","protected":false},"excerpt":{"rendered":"Understanding JavaScript this keyword If you want to become a programmer, no matter which specific field you choose, you will almost certainly need to tackle JavaScript. It has evolved from humble beginnings into a true powerhouse. It now covers front end, backend, mobile, games, desktop apps, and even machine learning! Now, before you become a…","protected":false},"author":85,"featured_media":20207,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11933],"tags":[],"class_list":{"0":"post-20206","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"JavaScript","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"\nthis JavaScript: Understand This Once And For All | Career Karma<\/title>\n<meta name=\"description\" content=\"\u201cThis is what is left of the dot\u201d would be the shortest explanation. However, we\u2019re going in depth, explaining all about this, it\u2019s uses, and it\u2019s weirdness.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/this-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"this JavaScript: Understand This Once And For All\" \/>\n<meta property=\"og:description\" content=\"\u201cThis is what is left of the dot\u201d would be the shortest explanation. However, we\u2019re going in depth, explaining all about this, it\u2019s uses, and it\u2019s weirdness.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/this-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-25T07:20:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-02-03T00:38:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/sydney-rae-geM5lzDj4Iw-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"680\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Stefan Dili\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Stefan Dili\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/this-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/this-javascript\/\"},\"author\":{\"name\":\"Stefan Dili\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/38a169875c6272296a3430eecc389f8b\"},\"headline\":\"this JavaScript: Understand This Once And For All\",\"datePublished\":\"2020-07-25T07:20:13+00:00\",\"dateModified\":\"2021-02-03T00:38:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/this-javascript\/\"},\"wordCount\":1343,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/this-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/sydney-rae-geM5lzDj4Iw-unsplash.jpg\",\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/this-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/this-javascript\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/this-javascript\/\",\"name\":\"this JavaScript: Understand This Once And For All | Career Karma\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/this-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/this-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/sydney-rae-geM5lzDj4Iw-unsplash.jpg\",\"datePublished\":\"2020-07-25T07:20:13+00:00\",\"dateModified\":\"2021-02-03T00:38:43+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/38a169875c6272296a3430eecc389f8b\"},\"description\":\"\u201cThis is what is left of the dot\u201d would be the shortest explanation. However, we\u2019re going in depth, explaining all about this, it\u2019s uses, and it\u2019s weirdness.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/this-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/this-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/this-javascript\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/sydney-rae-geM5lzDj4Iw-unsplash.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/sydney-rae-geM5lzDj4Iw-unsplash.jpg\",\"width\":1020,\"height\":680},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/this-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/careerkarma.com\/blog\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"this JavaScript: Understand This Once And For All\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\",\"url\":\"https:\/\/careerkarma.com\/blog\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News & Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/careerkarma.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/38a169875c6272296a3430eecc389f8b\",\"name\":\"Stefan Dili\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/profilna-1-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/profilna-1-150x150.jpg\",\"caption\":\"Stefan Dili\"},\"url\":\"https:\/\/careerkarma.com\/blog\/author\/stefan-dili\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"this JavaScript: Understand This Once And For All | Career Karma","description":"\u201cThis is what is left of the dot\u201d would be the shortest explanation. However, we\u2019re going in depth, explaining all about this, it\u2019s uses, and it\u2019s weirdness.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/this-javascript\/","og_locale":"en_US","og_type":"article","og_title":"this JavaScript: Understand This Once And For All","og_description":"\u201cThis is what is left of the dot\u201d would be the shortest explanation. However, we\u2019re going in depth, explaining all about this, it\u2019s uses, and it\u2019s weirdness.","og_url":"https:\/\/careerkarma.com\/blog\/this-javascript\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-07-25T07:20:13+00:00","article_modified_time":"2021-02-03T00:38:43+00:00","og_image":[{"width":1020,"height":680,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/sydney-rae-geM5lzDj4Iw-unsplash.jpg","type":"image\/jpeg"}],"author":"Stefan Dili","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Stefan Dili","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/this-javascript\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/this-javascript\/"},"author":{"name":"Stefan Dili","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/38a169875c6272296a3430eecc389f8b"},"headline":"this JavaScript: Understand This Once And For All","datePublished":"2020-07-25T07:20:13+00:00","dateModified":"2021-02-03T00:38:43+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/this-javascript\/"},"wordCount":1343,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/this-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/sydney-rae-geM5lzDj4Iw-unsplash.jpg","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/this-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/this-javascript\/","url":"https:\/\/careerkarma.com\/blog\/this-javascript\/","name":"this JavaScript: Understand This Once And For All | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/this-javascript\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/this-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/sydney-rae-geM5lzDj4Iw-unsplash.jpg","datePublished":"2020-07-25T07:20:13+00:00","dateModified":"2021-02-03T00:38:43+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/38a169875c6272296a3430eecc389f8b"},"description":"\u201cThis is what is left of the dot\u201d would be the shortest explanation. However, we\u2019re going in depth, explaining all about this, it\u2019s uses, and it\u2019s weirdness.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/this-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/this-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/this-javascript\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/sydney-rae-geM5lzDj4Iw-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/sydney-rae-geM5lzDj4Iw-unsplash.jpg","width":1020,"height":680},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/this-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/careerkarma.com\/blog\/javascript\/"},{"@type":"ListItem","position":3,"name":"this JavaScript: Understand This Once And For All"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News & Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/38a169875c6272296a3430eecc389f8b","name":"Stefan Dili","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/profilna-1-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/profilna-1-150x150.jpg","caption":"Stefan Dili"},"url":"https:\/\/careerkarma.com\/blog\/author\/stefan-dili\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/20206","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=20206"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/20206\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/20207"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=20206"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=20206"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=20206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}