You have probably seen questions pop up in dev forums like: \u201cwhy does this variable show as undefined\u201d, \u201cwhy do all my setTimeouts log the same value\u201d, or \u201cwhy does a value leak into the global object\u201d? These are all scope questions.<\/p>\n\n\n\n
Hi all,<\/em> What is variable scope in JavaScript? How do var, let, and const behave differently with function scope, block scope, and module scope?<\/em><\/p>\n\n\n\n In JavaScript, scope determines where a variable is visible and how long it lives. Understanding scope helps you write predictable code, avoid name collisions, and reason about async behavior. Let\u2019s break it down:<\/p>\n\n\n\n Declarations are hoisted, but initialization differs:<\/p>\n\n\n Prefer Closures let inner functions access variables from outer scopes. The classic gotcha happens with loops.<\/p>\n\n\n Modules isolate variables by default, so use exports to share and imports to consume. Unlike scripts, top-level When building front-end or Node services that deliver images and videos, keep configuration and secrets scoped safely. For example, host and optimize visuals while keeping API credentials private and configuration well-contained. See an overview of asset delivery considerations in understanding image hosting for websites<\/a>.<\/p>\n\n\n In the browser, never expose secrets. Use unsigned upload presets and keep them in a local constant that is not globally leaked:<\/p>\n\n\n When generating transformation URLs, build them inside well-scoped helpers and avoid polluting global scope. If you are optimizing delivery, these helpers often encapsulate logic like format switching and size rules for an optimized website<\/a>.<\/p>\n\n\n\n
I\u2019m new to coding, and I keep running into confusing behavior with variables in JavaScript. Sometimes I can access a variable outside where I declared it, sometimes not. I have also seen weird issues with loops and async code capturing the wrong values. <\/em><\/p>\n\n\n\nAnswer:<\/h2>\n\n\n\n
Scope types<\/h3>\n\n\n\n
\n
{ ... }<\/code> are only visible in that block.<\/li>\n\n\n\nvar vs let vs const<\/h3>\n\n\n
\/\/ Block scope vs function scope<\/span>\nif<\/span> (true<\/span>) {\n\u00a0 var<\/span> a = 1<\/span>;\u00a0 \u00a0 \u00a0 \/\/ function-scoped<\/span>\n\u00a0 let<\/span> b = 2<\/span>;\u00a0 \u00a0 \u00a0 \/\/ block-scoped<\/span>\n\u00a0 const<\/span> c = 3<\/span>;\u00a0 \u00a0 \/\/ block-scoped<\/span>\n}\nconsole<\/span>.log(a); \/\/ 1<\/span>\nconsole<\/span>.log(b); \/\/ ReferenceError<\/span>\nconsole<\/span>.log(c); \/\/ ReferenceError<\/span>\n\n\/\/ Mutability<\/span>\nlet<\/span> counter = 0<\/span>;\ncounter += 1<\/span>; \u00a0 \u00a0 \/\/ ok<\/span>\n\nconst<\/span> apiBase = '\/api'<\/span>;\napiBase = '\/v2'<\/span>;\u00a0 \/\/ TypeError - cannot reassign const<\/span>\n\n\/\/ Note: const prevents reassignment, not mutation of objects<\/span>\nconst<\/span> config = { retries<\/span>: 3<\/span> };\nconfig.retries = 5<\/span>; \/\/ ok<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nHoisting and the temporal dead zone<\/h3>\n\n\n\n
console<\/span>.log(x); \/\/ undefined - var is hoisted with default undefined<\/span>\nvar<\/span> x = 10<\/span>;\n\nconsole<\/span>.log(y); \/\/ ReferenceError - y is in temporal dead zone<\/span>\nlet<\/span> y = 10<\/span>;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nlet<\/code> and const<\/code> to catch usage before declaration and avoid subtle bugs.<\/p>\n\n\n\nClosures and capturing variables<\/h3>\n\n\n\n
\/\/ Problem: var is function-scoped, so all callbacks see the final i<\/span>\nfor<\/span> (var<\/span> i = 0<\/span>; i < 3<\/span>; i++) {\n\u00a0 setTimeout(()<\/span> =><\/span> console<\/span>.log('var i:'<\/span>, i), 0<\/span>); \/\/ prints 3,3,3<\/span>\n}\n\n\/\/ Fix 1: use let for block scoping<\/span>\nfor<\/span> (let<\/span> j = 0<\/span>; j < 3<\/span>; j++) {\n\u00a0 setTimeout(()<\/span> =><\/span> console<\/span>.log('let j:'<\/span>, j), 0<\/span>); \/\/ prints 0,1,2<\/span>\n}\n\n\/\/ Fix 2: capture via IIFE<\/span>\nfor<\/span> (var<\/span> k = 0<\/span>; k < 3<\/span>; k++) {\n\u00a0 ((n<\/span>) =><\/span> setTimeout(()<\/span> =><\/span> console<\/span>.log('IIFE k:'<\/span>, n), 0<\/span>))(k);\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nModule scope<\/h3>\n\n\n
\/\/ config.js<\/span>\nexport<\/span> const<\/span> API_BASE = '\/api'<\/span>;\n\n\/\/ users.js<\/span>\nimport<\/span> { API_BASE } from<\/span> '.\/config.js'<\/span>;\nfetch(`${API_BASE}<\/span>\/users`<\/span>);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nthis<\/code> is undefined in modules and strict mode is implied.<\/p>\n\n\n\nCommon pitfalls and best practices<\/h3>\n\n\n\n
\n
Applying scope in real apps with a media workflow example<\/h3>\n\n\n\n
\/\/ Node: keep credentials in module scope with environment variables<\/span>\n\/\/ cloud.js<\/span>\nimport<\/span> { v2 as<\/span> cloud } from<\/span> 'cloudinary'<\/span>;\ncloud.config({\n\u00a0 cloud_name<\/span>: process.env.CLOUDINARY_CLOUD_NAME,\n\u00a0 api_key<\/span>: process.env.CLOUDINARY_API_KEY,\n\u00a0 api_secret<\/span>: process.env.CLOUDINARY_API_SECRET\n});\nexport<\/span> default<\/span> cloud;\n\n\/\/ uploader.js<\/span>\nimport<\/span> cloud from<\/span> '.\/cloud.js'<\/span>;\nexport<\/span> async<\/span> function<\/span> uploadImage<\/span>(path<\/span>) <\/span>{\n\u00a0 return<\/span> cloud.uploader.upload(path, { folder<\/span>: 'scoped-demo'<\/span> });\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nconst<\/span> UPLOAD_PRESET = 'unsigned_preset'<\/span>; \/\/ safe to expose<\/span>\nasync<\/span> function<\/span> upload<\/span>(file<\/span>) <\/span>{\n\u00a0 const<\/span> url = 'https:\/\/api.cloudinary.com\/v1_1\/demo\/image\/upload'<\/span>;\n\u00a0 const<\/span> fd = new<\/span> FormData();\n\u00a0 fd.append('file'<\/span>, file);\n\u00a0 fd.append('upload_preset'<\/span>, UPLOAD_PRESET);\n\u00a0 await<\/span> fetch(url, { method<\/span>: 'POST'<\/span>, body<\/span>: fd });\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nTL;DR<\/h3>\n\n\n\n
\n
Learn More<\/h2>\n\n\n\n