{"id":7263,"date":"2022-05-26T12:35:19","date_gmt":"2022-05-26T07:05:19","guid":{"rendered":"https:\/\/www.innovationm.com\/blog\/?p=7263"},"modified":"2022-05-26T12:35:19","modified_gmt":"2022-05-26T07:05:19","slug":"hoisting-in-javascript","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/hoisting-in-javascript\/","title":{"rendered":"Hoisting in javaScript"},"content":{"rendered":"

Hoisting is a phenomenon in javaScript by which you can access variables and functions even before you have initialized them or you have put some value on them. you can access it without any error.<\/p>\n

Hoisting allows functions to be safely used in code before they are declared.<\/p>\n

for Example:<\/strong><\/p>\n

var x=7;\r\n\r\nfunction getName(){\r\n\r\nconsole.log(\"hoisting in javaScript\");\r\n\r\n}\r\n\r\ngetName();\r\n\r\nconsole.log(x);\u00a0\u00a0 expected output: hoisting in javaScript\u00a0\u00a0 , 7<\/pre>\n
even trying to access x before initialization and call a function before initialization most of the programing language will result out be an error, you can not access the variable before initialization.<\/p>\n
for Example:<\/strong><\/p>\n
getName();\r\n\r\nconsole.log(x);\u00a0\u00a0\r\n\r\nvar x=7;\r\n\r\nfunction getName(){\r\n\r\nconsole.log(\"hoisting in javaScript\");\r\n\r\n}<\/pre>\n
output: hoisting in javaScript, undefine<\/strong><\/p>\n
Function hoisting<\/strong><\/p>\n
for Example:<\/strong><\/p>\n
getName();\r\n\r\nconsole.log(x);\r\n\r\nconsole.log(getName);\r\n\r\nvar x=7;\r\n\r\nfunction getName(){\r\n\r\nconsole.log(\"Hoisting in javaScript\");\r\n\r\n}<\/pre>\n
outPut: <\/strong>Hoisting in javascript, undefine,<\/p>\n
function getName(){\r\n\r\nconsole.log(\"Hoisting in javaScript\");\r\n\r\n}<\/pre>\n
In case of x getting undefine and in case of getName printing, that function whenever we run javaScript program is executed context is created. It is created in two phases the first phase is the memory creation phase and the second is the Execution Phase.<\/p>\n
Even before the whole code\u00a0 execution in javaScript, the memory is allocated to\u00a0 each and every variable and function\u00a0 and stores the particular keyword for the variable “undefine.”<\/p>\n
Even before the code execution javaScript reserved memory for x and placed the special place holder “undefine” to it and similarly, what happens in the case of function the whole code is putting<\/p>\n
Arrow Function:<\/strong><\/p>\n
getName();\r\n\r\nconsole.log(x);\r\n\r\nconsole.log(getName);\r\n\r\nvar x=7;\r\n\r\nvar getName=()=>{\r\n\r\nconsole.log(\"hoisting in javaScript\")\r\n\r\n}\r\n\r\noutput: TypeError \/ getName is not a function<\/pre>\n
now getName is not behaved as a function it behaves just like a variable even before executing the whole code so know when in the memory allocation phase of the execution context getName allocates undefine<\/span><\/p>\n
Summary: –<\/strong><\/p>\n
    \n
  • Now you have learned how to work Hoisting in JavaScript.<\/li>\n
  • It helps to access variables and functions before the declaration<\/li>\n
  • If you are working on a framework\/library like React Js <\/strong>you will be using variable and function<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Hoisting is a phenomenon in javaScript by which you can access variables and functions even before you have initialized them or you have put some value on them. you can access it without any error. Hoisting allows functions to be safely used in code before they are declared. for Example: var x=7; function getName(){ console.log(“hoisting […]<\/p>\n","protected":false},"author":1,"featured_media":7264,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71],"tags":[722,723,779,346],"class_list":["post-7263","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile","tag-blog","tag-blogging","tag-hoisting","tag-javascript"],"yoast_head":"\nHoisting in javaScript - InnovationM - Blog<\/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:\/\/www.innovationm.com\/blog\/hoisting-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hoisting in javaScript - InnovationM - Blog\" \/>\n<meta property=\"og:description\" content=\"Hoisting is a phenomenon in javaScript by which you can access variables and functions even before you have initialized them or you have put some value on them. you can access it without any error. Hoisting allows functions to be safely used in code before they are declared. for Example: var x=7; function getName(){ console.log("hoisting […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/hoisting-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-26T07:05:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/05\/hoisting-in-javascript.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1689\" \/>\n\t<meta property=\"og:image:height\" content=\"950\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InnovationM Admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnovationM Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/hoisting-in-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/hoisting-in-javascript\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"Hoisting in javaScript\",\"datePublished\":\"2022-05-26T07:05:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/hoisting-in-javascript\\\/\"},\"wordCount\":284,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/hoisting-in-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/hoisting-in-javascript.png\",\"keywords\":[\"blog\",\"blogging\",\"hoisting\",\"JavaScript\"],\"articleSection\":[\"Mobile\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/hoisting-in-javascript\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/hoisting-in-javascript\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/hoisting-in-javascript\\\/\",\"name\":\"Hoisting in javaScript - InnovationM - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/hoisting-in-javascript\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/hoisting-in-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/hoisting-in-javascript.png\",\"datePublished\":\"2022-05-26T07:05:19+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/hoisting-in-javascript\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/hoisting-in-javascript\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/hoisting-in-javascript\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/hoisting-in-javascript.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/hoisting-in-javascript.png\",\"width\":1689,\"height\":950},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/hoisting-in-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Hoisting in javaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\",\"name\":\"InnovationM - Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\",\"name\":\"InnovationM Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"caption\":\"InnovationM Admin\"},\"sameAs\":[\"http:\\\/\\\/www.innovationm.com\\\/\"],\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/author\\\/innovationmadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Hoisting in javaScript - InnovationM - Blog","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:\/\/www.innovationm.com\/blog\/hoisting-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Hoisting in javaScript - InnovationM - Blog","og_description":"Hoisting is a phenomenon in javaScript by which you can access variables and functions even before you have initialized them or you have put some value on them. you can access it without any error. Hoisting allows functions to be safely used in code before they are declared. for Example: var x=7; function getName(){ console.log(\"hoisting […]","og_url":"https:\/\/www.innovationm.com\/blog\/hoisting-in-javascript\/","og_site_name":"InnovationM - Blog","article_published_time":"2022-05-26T07:05:19+00:00","og_image":[{"width":1689,"height":950,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/05\/hoisting-in-javascript.png","type":"image\/png"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/hoisting-in-javascript\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/hoisting-in-javascript\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"Hoisting in javaScript","datePublished":"2022-05-26T07:05:19+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/hoisting-in-javascript\/"},"wordCount":284,"commentCount":0,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/hoisting-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/05\/hoisting-in-javascript.png","keywords":["blog","blogging","hoisting","JavaScript"],"articleSection":["Mobile"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/hoisting-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/hoisting-in-javascript\/","url":"https:\/\/www.innovationm.com\/blog\/hoisting-in-javascript\/","name":"Hoisting in javaScript - InnovationM - Blog","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/hoisting-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/hoisting-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/05\/hoisting-in-javascript.png","datePublished":"2022-05-26T07:05:19+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/hoisting-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/hoisting-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/hoisting-in-javascript\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/05\/hoisting-in-javascript.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/05\/hoisting-in-javascript.png","width":1689,"height":950},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/hoisting-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Hoisting in javaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.innovationm.com\/blog\/#website","url":"https:\/\/www.innovationm.com\/blog\/","name":"InnovationM - Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.innovationm.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed","name":"InnovationM Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","caption":"InnovationM Admin"},"sameAs":["http:\/\/www.innovationm.com\/"],"url":"https:\/\/www.innovationm.com\/blog\/author\/innovationmadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/7263","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/comments?post=7263"}],"version-history":[{"count":0,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/7263\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/7264"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=7263"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=7263"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=7263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}