Ever seen your JavaScript log undefined for a variable that you clearly declared, or a ReferenceError pop up before a line that seems perfectly fine? Threads across dev communities often boil down to the same core concept: hoisting.<\/p>\n\n\n\n
What is hoisting in JavaScript? I keep running into behavior I do not expect: sometimes variables are undefined instead of throwing, function declarations seem callable before I define them, and let or const variables produce temporal dead zone errors. <\/em><\/p>\n\n\n\n How does hoisting actually work for var vs let\/const, function declarations vs function expressions, and classes? Also, how should I structure my code to avoid surprises in modules and real projects?<\/em><\/p>\n\n\n\n Hoisting is JavaScript\u2019s compile-time behavior where declarations are processed before your code executes. In practice, identifiers are known to the engine at the start of their scope, but only some get initialized right away. Understanding which parts are hoisted and how they are initialized prevents subtle bugs. Here\u2019s a breakdown:<\/p>\n\n\n\n var gets hoisted and initialized to undefined<\/strong>.<\/p>\n\n\n let and const are hoisted but not initialized<\/strong>.<\/p>\n\n\n Function declarations are hoisted with their body<\/strong>.<\/p>\n\n\n Function expressions follow variable rules<\/strong>.<\/p>\n\n\n Classes are in the temporal dead zone<\/strong>.<\/p>\n\n\n Suppose you build image URLs dynamically for delivery. Hoisting rules still apply to your helpers and config.<\/p>\n\n\n When rendering, make sure your DOM usage is correct and accessible. If you are optimizing how images are embedded, this primer on the HTML image tag<\/a> is a handy refresher. For bigger-picture delivery strategy and caching behavior, see Understanding image hosting for websites<\/a>.<\/p>\n\n\n\nAnswer:<\/h2>\n\n\n\n
Key Rules of Hoisting<\/h3>\n\n\n\n
\n
var<\/code> declarations are hoisted and initialized to undefined. Accessing them before their assignment gives undefined<\/code>, not a ReferenceError<\/code>.<\/li>\n\n\n\nlet<\/code> and const<\/code> are hoisted but not initialized. Accessing them before their declaration throws a ReferenceError<\/code> due to the temporal dead zone.<\/li>\n\n\n\nvar<\/code> or let\/const<\/code> rules depending on how you declare them.<\/li>\n\n\n\nExamples<\/h3>\n\n\n\n
console<\/span>.log(a); \/\/ undefined<\/span>\nvar<\/span> a = 42<\/span>;\nconsole<\/span>.log(a); \/\/ 42<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nconsole<\/span>.log(b); \/\/ ReferenceError: Cannot access 'b' before initialization<\/span>\nlet<\/span> b = 1<\/span>;\n\nconsole<\/span>.log(c); \/\/ ReferenceError<\/span>\nconst<\/span> c = 2<\/span>;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\ngreet(); \/\/ \"hi\"<\/span>\nfunction<\/span> greet<\/span>(<\/span>) <\/span>{\n\u00a0 console<\/span>.log(\"hi\"<\/span>);\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nsay(); \/\/ TypeError: say is not a function<\/span>\nvar<\/span> say = function<\/span> (<\/span>) <\/span>{ console<\/span>.log(\"hello\"<\/span>); };\n\n\/\/ With let:<\/span>\n\/\/ say(); \/\/ ReferenceError<\/span>\n\/\/ let say = () => console.log(\"hello\");<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nnew<\/span> Person(); \/\/ ReferenceError<\/span>\nclass<\/span> Person<\/span> <\/span>{\n\u00a0 constructor<\/span>() { this<\/span>.name = \"Ada\"<\/span>; }\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nModules and Hoisting<\/h3>\n\n\n\n
\n
var<\/code> hoisting is even more error-prone. Use let<\/code> and const<\/code> instead.<\/li>\n<\/ul>\n\n\n\nStructure Your Code to Avoid Hoisting Pitfalls<\/h3>\n\n\n\n
\n
const<\/code> by default, let<\/code> when reassignment is needed, and avoid using var<\/code>.<\/li>\n\n\n\nno-use-before-define<\/code>.<\/li>\n<\/ul>\n\n\n\nDebugging Tips<\/h3>\n\n\n\n
\n
var<\/code> being read before assignment.<\/li>\n\n\n\nReferenceError<\/code>, verify you are not touching let<\/code>, const<\/code>, or class<\/code> before their declaration.<\/li>\n\n\n\nUsing Cloudinary in JS Without Hoisting Surprises<\/h3>\n\n\n\n
\/\/ Bad: use before initialization causes ReferenceError with let\/const<\/span>\nconst<\/span> imgUrl = buildUrl(\"sample\"<\/span>); \/\/ ReferenceError if buildUrl is a const below<\/span>\nconst<\/span> buildUrl = (id<\/span>) =><\/span> `https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_400,c_fill\/${id}<\/span>.jpg`<\/span>;\n\n\/\/ Good: either use a function declaration or call after definition<\/span>\n\n\/\/ Option A: function declaration<\/span>\nfunction<\/span> buildUrl<\/span>(id<\/span>) <\/span>{\n\u00a0 return<\/span> `https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_400,c_fill\/${id}<\/span>.jpg`<\/span>;\n}\nconst<\/span> imgUrlA = buildUrl(\"sample\"<\/span>);\n\n\/\/ Option B: function expression, but call later<\/span>\nconst<\/span> buildUrlB = (id<\/span>) =><\/span> `https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_400,c_fill\/${id}<\/span>.jpg`<\/span>;\nconst<\/span> imgUrlB = buildUrlB(\"sample\"<\/span>);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nCommon Gotchas Checklist<\/h3>\n\n\n\n
\n
var<\/code> before its assignment returns undefined<\/code>, not a ReferenceError<\/code>.<\/li>\n\n\n\nlet<\/code>, const<\/code>, or class<\/code> before declaration throws due to the temporal dead zone.<\/li>\n\n\n\nTL;DR<\/h3>\n\n\n\n
\n
var<\/code> gets initialized to undefined<\/code>.<\/li>\n\n\n\nconst<\/code> and let<\/code>, declare functions before use, and avoid relying on hoisting for control flow.<\/li>\n\n\n\nLearn More<\/h2>\n\n\n\n