This Example<\/title>\n <\/head>\n\n \n \n\n \n \n\n\n\n<\/code><\/pre>\n<p>To see the difference in this scope, copy the above to an html file and load it in the browser. Open the console and change the year value. In the code, try changing _this.printYear() to this.printYear(), reload the html file, change the year value and see what happens.<br \/>\nChanging to this.printYear(), calls a function called printYear belonging to the input dom element, which doesn’t exist, so an error is thrown.<br \/>\nWhen in doubt, create a variable pointing to the outer scope you need to access and use that inside the containing scope instead of using this when its’ scope is uncertain.<\/p>\n<p>(#sponsored)<\/br><br \/>\n<a href=\"https:\/\/amzn.to\/39aSKtV\" rel=\"noopener noreferrer\" target=\"_blank\">More JavaScript<\/a><\/br><\/br><\/p>\n<p><iframe frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\" scrolling=\"no\" src=\"\/\/ws-na.amazon-adsystem.com\/widgets\/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=US&source=ss&ref=as_ss_li_til&ad_type=product_link&tracking_id=zofxare-20&language=en_US&marketplace=amazon&region=US&placement=144934013X&asins=144934013X&linkId=1c564951ff9e32885fd78e6d3e51cd88&show_border=true&link_opens_in_new_window=true\" style=\"height: 240px; width: 120px;\"><\/iframe><iframe frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\" scrolling=\"no\" src=\"\/\/ws-na.amazon-adsystem.com\/widgets\/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=US&source=ss&ref=as_ss_li_til&ad_type=product_link&tracking_id=zofxare-20&language=en_US&marketplace=amazon&region=US&placement=1119366445&asins=1119366445&linkId=dd23c2d87c50139ea87f57684a12c407&show_border=true&link_opens_in_new_window=true\" style=\"height: 240px; width: 120px;\"><\/iframe><iframe frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\" scrolling=\"no\" src=\"\/\/ws-na.amazon-adsystem.com\/widgets\/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=US&source=ss&ref=as_ss_li_til&ad_type=product_link&tracking_id=zofxare-20&language=en_US&marketplace=amazon&region=US&placement=0596517742&asins=0596517742&linkId=6d3fc10c6f7129dfd9a699a17a1caa01&show_border=true&link_opens_in_new_window=true\" style=\"height: 240px; width: 120px;\"><\/iframe><iframe frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\" scrolling=\"no\" src=\"\/\/ws-na.amazon-adsystem.com\/widgets\/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=US&source=ss&ref=as_ss_li_til&ad_type=product_link&tracking_id=zofxare-20&language=en_US&marketplace=amazon&region=US&placement=1497408180&asins=1497408180&linkId=13300f4284c721f7e5b0da78795da9eb&show_border=true&link_opens_in_new_window=true\" style=\"height: 240px; width: 120px;\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Understanding the this concept is essential to learning JavaScript. this is a reserved word which refers to the current scope. Scope changes based on the current context in the code. For example, inside a class, this is used to access methods and variables defined in the class. class Year { constructor(key) { this.year = 2020; […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","om_disable_all_campaigns":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[340,339,341],"tags":[],"class_list":["post-197","post","type-post","status-publish","format-standard","hentry","category-javascript","category-javascript-tutorials","category-tutorials"],"yoast_head":"\n<title>JavaScript Tutorial Series - this - Zofxare Blog Home<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/zofxare.com\/zofxare\/blog\/2020\/09\/18\/javascript-tutorial-series-this\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Tutorial Series - this - Zofxare Blog Home\" \/>\n<meta property=\"og:description\" content=\"Understanding the this concept is essential to learning JavaScript. this is a reserved word which refers to the current scope. Scope changes based on the current context in the code. For example, inside a class, this is used to access methods and variables defined in the class. class Year { constructor(key) { this.year = 2020; […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/zofxare.com\/zofxare\/blog\/2020\/09\/18\/javascript-tutorial-series-this\/\" \/>\n<meta property=\"og:site_name\" content=\"Zofxare Blog Home\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-18T21:58:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-13T15:04:51+00:00\" \/>\n<meta name=\"author\" content=\"adminuser\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"adminuser\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/2020\\\/09\\\/18\\\/javascript-tutorial-series-this\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/2020\\\/09\\\/18\\\/javascript-tutorial-series-this\\\/\"},\"author\":{\"name\":\"adminuser\",\"@id\":\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/#\\\/schema\\\/person\\\/488c98b837076eb349075c14ea0e87d8\"},\"headline\":\"JavaScript Tutorial Series – this\",\"datePublished\":\"2020-09-18T21:58:00+00:00\",\"dateModified\":\"2024-09-13T15:04:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/2020\\\/09\\\/18\\\/javascript-tutorial-series-this\\\/\"},\"wordCount\":265,\"commentCount\":0,\"articleSection\":[\"javascript\",\"javascript tutorials\",\"tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/2020\\\/09\\\/18\\\/javascript-tutorial-series-this\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/2020\\\/09\\\/18\\\/javascript-tutorial-series-this\\\/\",\"url\":\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/2020\\\/09\\\/18\\\/javascript-tutorial-series-this\\\/\",\"name\":\"JavaScript Tutorial Series - this - Zofxare Blog Home\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/#website\"},\"datePublished\":\"2020-09-18T21:58:00+00:00\",\"dateModified\":\"2024-09-13T15:04:51+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/#\\\/schema\\\/person\\\/488c98b837076eb349075c14ea0e87d8\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/2020\\\/09\\\/18\\\/javascript-tutorial-series-this\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/2020\\\/09\\\/18\\\/javascript-tutorial-series-this\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/2020\\\/09\\\/18\\\/javascript-tutorial-series-this\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Tutorial Series – this\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/\",\"name\":\"Zofxare Blog Home\",\"description\":\"The Zofxare blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/#\\\/schema\\\/person\\\/488c98b837076eb349075c14ea0e87d8\",\"name\":\"adminuser\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5fe9cf8bb25011247f8063d1c50de6fbdd21be02889559dd151d722f050f037?s=96&d=retro&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5fe9cf8bb25011247f8063d1c50de6fbdd21be02889559dd151d722f050f037?s=96&d=retro&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5fe9cf8bb25011247f8063d1c50de6fbdd21be02889559dd151d722f050f037?s=96&d=retro&r=g\",\"caption\":\"adminuser\"},\"sameAs\":[\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\"],\"url\":\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/author\\\/adminuser\\\/\"}]}<\/script>\n","yoast_head_json":{"title":"JavaScript Tutorial Series - this - Zofxare Blog Home","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:\/\/zofxare.com\/zofxare\/blog\/2020\/09\/18\/javascript-tutorial-series-this\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Tutorial Series - this - Zofxare Blog Home","og_description":"Understanding the this concept is essential to learning JavaScript. this is a reserved word which refers to the current scope. Scope changes based on the current context in the code. For example, inside a class, this is used to access methods and variables defined in the class. class Year { constructor(key) { this.year = 2020; […]","og_url":"https:\/\/zofxare.com\/zofxare\/blog\/2020\/09\/18\/javascript-tutorial-series-this\/","og_site_name":"Zofxare Blog Home","article_published_time":"2020-09-18T21:58:00+00:00","article_modified_time":"2024-09-13T15:04:51+00:00","author":"adminuser","twitter_card":"summary_large_image","twitter_misc":{"Written by":"adminuser","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/zofxare.com\/zofxare\/blog\/2020\/09\/18\/javascript-tutorial-series-this\/#article","isPartOf":{"@id":"https:\/\/zofxare.com\/zofxare\/blog\/2020\/09\/18\/javascript-tutorial-series-this\/"},"author":{"name":"adminuser","@id":"https:\/\/zofxare.com\/zofxare\/blog\/#\/schema\/person\/488c98b837076eb349075c14ea0e87d8"},"headline":"JavaScript Tutorial Series – this","datePublished":"2020-09-18T21:58:00+00:00","dateModified":"2024-09-13T15:04:51+00:00","mainEntityOfPage":{"@id":"https:\/\/zofxare.com\/zofxare\/blog\/2020\/09\/18\/javascript-tutorial-series-this\/"},"wordCount":265,"commentCount":0,"articleSection":["javascript","javascript tutorials","tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/zofxare.com\/zofxare\/blog\/2020\/09\/18\/javascript-tutorial-series-this\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/zofxare.com\/zofxare\/blog\/2020\/09\/18\/javascript-tutorial-series-this\/","url":"https:\/\/zofxare.com\/zofxare\/blog\/2020\/09\/18\/javascript-tutorial-series-this\/","name":"JavaScript Tutorial Series - this - Zofxare Blog Home","isPartOf":{"@id":"https:\/\/zofxare.com\/zofxare\/blog\/#website"},"datePublished":"2020-09-18T21:58:00+00:00","dateModified":"2024-09-13T15:04:51+00:00","author":{"@id":"https:\/\/zofxare.com\/zofxare\/blog\/#\/schema\/person\/488c98b837076eb349075c14ea0e87d8"},"breadcrumb":{"@id":"https:\/\/zofxare.com\/zofxare\/blog\/2020\/09\/18\/javascript-tutorial-series-this\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/zofxare.com\/zofxare\/blog\/2020\/09\/18\/javascript-tutorial-series-this\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/zofxare.com\/zofxare\/blog\/2020\/09\/18\/javascript-tutorial-series-this\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/zofxare.com\/zofxare\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript Tutorial Series – this"}]},{"@type":"WebSite","@id":"https:\/\/zofxare.com\/zofxare\/blog\/#website","url":"https:\/\/zofxare.com\/zofxare\/blog\/","name":"Zofxare Blog Home","description":"The Zofxare blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/zofxare.com\/zofxare\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/zofxare.com\/zofxare\/blog\/#\/schema\/person\/488c98b837076eb349075c14ea0e87d8","name":"adminuser","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c5fe9cf8bb25011247f8063d1c50de6fbdd21be02889559dd151d722f050f037?s=96&d=retro&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5fe9cf8bb25011247f8063d1c50de6fbdd21be02889559dd151d722f050f037?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5fe9cf8bb25011247f8063d1c50de6fbdd21be02889559dd151d722f050f037?s=96&d=retro&r=g","caption":"adminuser"},"sameAs":["https:\/\/zofxare.com\/zofxare\/blog"],"url":"https:\/\/zofxare.com\/zofxare\/blog\/author\/adminuser\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/zofxare.com\/zofxare\/blog\/wp-json\/wp\/v2\/posts\/197","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zofxare.com\/zofxare\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zofxare.com\/zofxare\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zofxare.com\/zofxare\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zofxare.com\/zofxare\/blog\/wp-json\/wp\/v2\/comments?post=197"}],"version-history":[{"count":1,"href":"https:\/\/zofxare.com\/zofxare\/blog\/wp-json\/wp\/v2\/posts\/197\/revisions"}],"predecessor-version":[{"id":230,"href":"https:\/\/zofxare.com\/zofxare\/blog\/wp-json\/wp\/v2\/posts\/197\/revisions\/230"}],"wp:attachment":[{"href":"https:\/\/zofxare.com\/zofxare\/blog\/wp-json\/wp\/v2\/media?parent=197"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zofxare.com\/zofxare\/blog\/wp-json\/wp\/v2\/categories?post=197"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zofxare.com\/zofxare\/blog\/wp-json\/wp\/v2\/tags?post=197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":197,"date":"2020-09-18T21:58:00","date_gmt":"2020-09-18T21:58:00","guid":{"rendered":""},"modified":"2024-09-13T15:04:51","modified_gmt":"2024-09-13T15:04:51","slug":"javascript-tutorial-series-this","status":"publish","type":"post","link":"https:\/\/zofxare.com\/zofxare\/blog\/2020\/09\/18\/javascript-tutorial-series-this\/","title":{"rendered":"JavaScript Tutorial Series – this"},"content":{"rendered":"

Understanding the this concept is essential to learning JavaScript. this is a reserved word which refers to the current scope.
\nScope changes based on the current context in the code. For example, inside a class, this is used to access methods and variables defined in the class.<\/p>\n

\n\nclass Year {\n\tconstructor(key) {\n        this.year = 2020;\n    }\n    \n    printYear(y=this.year) {\n    \tconsole.log('The year is: ' + y);\n    }\n    \n    \n    nextYear() {    \t\n        this.printYear(this.year + 1);\n    }\n}\n\n\nconst theYear = new Year();\ntheYear.printYear();\ntheYear.nextYear();\n\n<\/code><\/pre>\nScope gets tricky when using things like event handlers inside a class. The scope inside a method is the containing class. The scope inside an event handler inside a method is the element receiving the event.
\nThe problem occurs when you want to access something from the class the method is in, inside the event handler. In order to use a method or variable from the class inside the event handler, a variable outside the event handler that points at this, will need to be created. That variable can then be used inside the event handler to access a class method or variable.
\nFor example:<\/p>\n
\n\n\n\n  \n    This Example<\/title>\n  <\/head>\n\n  \n    \n\n    \n  \n\n\n\n<\/code><\/pre>\n<p>To see the difference in this scope, copy the above to an html file and load it in the browser. Open the console and change the year value. In the code, try changing _this.printYear() to this.printYear(), reload the html file, change the year value and see what happens.<br \/>\nChanging to this.printYear(), calls a function called printYear belonging to the input dom element, which doesn’t exist, so an error is thrown.<br \/>\nWhen in doubt, create a variable pointing to the outer scope you need to access and use that inside the containing scope instead of using this when its’ scope is uncertain.<\/p>\n<p>(#sponsored)<\/br><br \/>\n<a href=\"https:\/\/amzn.to\/39aSKtV\" rel=\"noopener noreferrer\" target=\"_blank\">More JavaScript<\/a><\/br><\/br><\/p>\n<p><iframe frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\" scrolling=\"no\" src=\"\/\/ws-na.amazon-adsystem.com\/widgets\/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=US&source=ss&ref=as_ss_li_til&ad_type=product_link&tracking_id=zofxare-20&language=en_US&marketplace=amazon&region=US&placement=144934013X&asins=144934013X&linkId=1c564951ff9e32885fd78e6d3e51cd88&show_border=true&link_opens_in_new_window=true\" style=\"height: 240px; width: 120px;\"><\/iframe><iframe frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\" scrolling=\"no\" src=\"\/\/ws-na.amazon-adsystem.com\/widgets\/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=US&source=ss&ref=as_ss_li_til&ad_type=product_link&tracking_id=zofxare-20&language=en_US&marketplace=amazon&region=US&placement=1119366445&asins=1119366445&linkId=dd23c2d87c50139ea87f57684a12c407&show_border=true&link_opens_in_new_window=true\" style=\"height: 240px; width: 120px;\"><\/iframe><iframe frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\" scrolling=\"no\" src=\"\/\/ws-na.amazon-adsystem.com\/widgets\/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=US&source=ss&ref=as_ss_li_til&ad_type=product_link&tracking_id=zofxare-20&language=en_US&marketplace=amazon&region=US&placement=0596517742&asins=0596517742&linkId=6d3fc10c6f7129dfd9a699a17a1caa01&show_border=true&link_opens_in_new_window=true\" style=\"height: 240px; width: 120px;\"><\/iframe><iframe frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\" scrolling=\"no\" src=\"\/\/ws-na.amazon-adsystem.com\/widgets\/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=US&source=ss&ref=as_ss_li_til&ad_type=product_link&tracking_id=zofxare-20&language=en_US&marketplace=amazon&region=US&placement=1497408180&asins=1497408180&linkId=13300f4284c721f7e5b0da78795da9eb&show_border=true&link_opens_in_new_window=true\" style=\"height: 240px; width: 120px;\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Understanding the this concept is essential to learning JavaScript. this is a reserved word which refers to the current scope. Scope changes based on the current context in the code. For example, inside a class, this is used to access methods and variables defined in the class. class Year { constructor(key) { this.year = 2020; […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","om_disable_all_campaigns":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[340,339,341],"tags":[],"class_list":["post-197","post","type-post","status-publish","format-standard","hentry","category-javascript","category-javascript-tutorials","category-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>JavaScript Tutorial Series - this - Zofxare Blog Home<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/zofxare.com\/zofxare\/blog\/2020\/09\/18\/javascript-tutorial-series-this\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Tutorial Series - this - Zofxare Blog Home\" \/>\n<meta property=\"og:description\" content=\"Understanding the this concept is essential to learning JavaScript. this is a reserved word which refers to the current scope. Scope changes based on the current context in the code. For example, inside a class, this is used to access methods and variables defined in the class. class Year { constructor(key) { this.year = 2020; […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/zofxare.com\/zofxare\/blog\/2020\/09\/18\/javascript-tutorial-series-this\/\" \/>\n<meta property=\"og:site_name\" content=\"Zofxare Blog Home\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-18T21:58:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-13T15:04:51+00:00\" \/>\n<meta name=\"author\" content=\"adminuser\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"adminuser\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/2020\\\/09\\\/18\\\/javascript-tutorial-series-this\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/2020\\\/09\\\/18\\\/javascript-tutorial-series-this\\\/\"},\"author\":{\"name\":\"adminuser\",\"@id\":\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/#\\\/schema\\\/person\\\/488c98b837076eb349075c14ea0e87d8\"},\"headline\":\"JavaScript Tutorial Series – this\",\"datePublished\":\"2020-09-18T21:58:00+00:00\",\"dateModified\":\"2024-09-13T15:04:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/2020\\\/09\\\/18\\\/javascript-tutorial-series-this\\\/\"},\"wordCount\":265,\"commentCount\":0,\"articleSection\":[\"javascript\",\"javascript tutorials\",\"tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/2020\\\/09\\\/18\\\/javascript-tutorial-series-this\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/2020\\\/09\\\/18\\\/javascript-tutorial-series-this\\\/\",\"url\":\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/2020\\\/09\\\/18\\\/javascript-tutorial-series-this\\\/\",\"name\":\"JavaScript Tutorial Series - this - Zofxare Blog Home\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/#website\"},\"datePublished\":\"2020-09-18T21:58:00+00:00\",\"dateModified\":\"2024-09-13T15:04:51+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/#\\\/schema\\\/person\\\/488c98b837076eb349075c14ea0e87d8\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/2020\\\/09\\\/18\\\/javascript-tutorial-series-this\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/2020\\\/09\\\/18\\\/javascript-tutorial-series-this\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/2020\\\/09\\\/18\\\/javascript-tutorial-series-this\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Tutorial Series – this\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/\",\"name\":\"Zofxare Blog Home\",\"description\":\"The Zofxare blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/#\\\/schema\\\/person\\\/488c98b837076eb349075c14ea0e87d8\",\"name\":\"adminuser\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5fe9cf8bb25011247f8063d1c50de6fbdd21be02889559dd151d722f050f037?s=96&d=retro&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5fe9cf8bb25011247f8063d1c50de6fbdd21be02889559dd151d722f050f037?s=96&d=retro&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5fe9cf8bb25011247f8063d1c50de6fbdd21be02889559dd151d722f050f037?s=96&d=retro&r=g\",\"caption\":\"adminuser\"},\"sameAs\":[\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\"],\"url\":\"https:\\\/\\\/zofxare.com\\\/zofxare\\\/blog\\\/author\\\/adminuser\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Tutorial Series - this - Zofxare Blog Home","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:\/\/zofxare.com\/zofxare\/blog\/2020\/09\/18\/javascript-tutorial-series-this\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Tutorial Series - this - Zofxare Blog Home","og_description":"Understanding the this concept is essential to learning JavaScript. this is a reserved word which refers to the current scope. Scope changes based on the current context in the code. For example, inside a class, this is used to access methods and variables defined in the class. class Year { constructor(key) { this.year = 2020; […]","og_url":"https:\/\/zofxare.com\/zofxare\/blog\/2020\/09\/18\/javascript-tutorial-series-this\/","og_site_name":"Zofxare Blog Home","article_published_time":"2020-09-18T21:58:00+00:00","article_modified_time":"2024-09-13T15:04:51+00:00","author":"adminuser","twitter_card":"summary_large_image","twitter_misc":{"Written by":"adminuser","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/zofxare.com\/zofxare\/blog\/2020\/09\/18\/javascript-tutorial-series-this\/#article","isPartOf":{"@id":"https:\/\/zofxare.com\/zofxare\/blog\/2020\/09\/18\/javascript-tutorial-series-this\/"},"author":{"name":"adminuser","@id":"https:\/\/zofxare.com\/zofxare\/blog\/#\/schema\/person\/488c98b837076eb349075c14ea0e87d8"},"headline":"JavaScript Tutorial Series – this","datePublished":"2020-09-18T21:58:00+00:00","dateModified":"2024-09-13T15:04:51+00:00","mainEntityOfPage":{"@id":"https:\/\/zofxare.com\/zofxare\/blog\/2020\/09\/18\/javascript-tutorial-series-this\/"},"wordCount":265,"commentCount":0,"articleSection":["javascript","javascript tutorials","tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/zofxare.com\/zofxare\/blog\/2020\/09\/18\/javascript-tutorial-series-this\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/zofxare.com\/zofxare\/blog\/2020\/09\/18\/javascript-tutorial-series-this\/","url":"https:\/\/zofxare.com\/zofxare\/blog\/2020\/09\/18\/javascript-tutorial-series-this\/","name":"JavaScript Tutorial Series - this - Zofxare Blog Home","isPartOf":{"@id":"https:\/\/zofxare.com\/zofxare\/blog\/#website"},"datePublished":"2020-09-18T21:58:00+00:00","dateModified":"2024-09-13T15:04:51+00:00","author":{"@id":"https:\/\/zofxare.com\/zofxare\/blog\/#\/schema\/person\/488c98b837076eb349075c14ea0e87d8"},"breadcrumb":{"@id":"https:\/\/zofxare.com\/zofxare\/blog\/2020\/09\/18\/javascript-tutorial-series-this\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/zofxare.com\/zofxare\/blog\/2020\/09\/18\/javascript-tutorial-series-this\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/zofxare.com\/zofxare\/blog\/2020\/09\/18\/javascript-tutorial-series-this\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/zofxare.com\/zofxare\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript Tutorial Series – this"}]},{"@type":"WebSite","@id":"https:\/\/zofxare.com\/zofxare\/blog\/#website","url":"https:\/\/zofxare.com\/zofxare\/blog\/","name":"Zofxare Blog Home","description":"The Zofxare blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/zofxare.com\/zofxare\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/zofxare.com\/zofxare\/blog\/#\/schema\/person\/488c98b837076eb349075c14ea0e87d8","name":"adminuser","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c5fe9cf8bb25011247f8063d1c50de6fbdd21be02889559dd151d722f050f037?s=96&d=retro&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5fe9cf8bb25011247f8063d1c50de6fbdd21be02889559dd151d722f050f037?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5fe9cf8bb25011247f8063d1c50de6fbdd21be02889559dd151d722f050f037?s=96&d=retro&r=g","caption":"adminuser"},"sameAs":["https:\/\/zofxare.com\/zofxare\/blog"],"url":"https:\/\/zofxare.com\/zofxare\/blog\/author\/adminuser\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/zofxare.com\/zofxare\/blog\/wp-json\/wp\/v2\/posts\/197","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zofxare.com\/zofxare\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zofxare.com\/zofxare\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zofxare.com\/zofxare\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zofxare.com\/zofxare\/blog\/wp-json\/wp\/v2\/comments?post=197"}],"version-history":[{"count":1,"href":"https:\/\/zofxare.com\/zofxare\/blog\/wp-json\/wp\/v2\/posts\/197\/revisions"}],"predecessor-version":[{"id":230,"href":"https:\/\/zofxare.com\/zofxare\/blog\/wp-json\/wp\/v2\/posts\/197\/revisions\/230"}],"wp:attachment":[{"href":"https:\/\/zofxare.com\/zofxare\/blog\/wp-json\/wp\/v2\/media?parent=197"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zofxare.com\/zofxare\/blog\/wp-json\/wp\/v2\/categories?post=197"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zofxare.com\/zofxare\/blog\/wp-json\/wp\/v2\/tags?post=197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}