25:["$","title",null,{"children":"JS Variables | Dipesh Thakur | Observable"}] 49:[] 29:{"id":"5bd10b22034aaea4","slug":null,"title":"JS Variables","thumbnail":"76750492de84a9b07bdfa737f48e43a4dd730350eb839475c4d6808b7ccfa8ef","access_level":"public","create_time":"$D2026-06-03T09:11:55.047Z","update_time":"$D2026-08-01T06:02:38.850Z","view_time":null,"first_public_time":"$D2026-06-03T09:11:55.047Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"5eec37574d6ce020","login":"dipesh-thakur","name":"Dipesh Thakur","avatar_url":"https://avatars-next.observableusercontent.com/c8e61e644103bf11d2c2a08085f938fc37a3c9a05cdca7747185133269a26e9f","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":101,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"29c25e63271b50ff","login":"dipesh-thakur","name":"Dipesh Thakur","avatar_url":"https://avatars-next.observableusercontent.com/c8e61e644103bf11d2c2a08085f938fc37a3c9a05cdca7747185133269a26e9f","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"29c25e63271b50ff","login":"dipesh-thakur","name":"Dipesh Thakur","avatar_url":"https://avatars-next.observableusercontent.com/c8e61e644103bf11d2c2a08085f938fc37a3c9a05cdca7747185133269a26e9f","tier":null,"role":"editor"},{"type":"team","id":"5eec37574d6ce020","login":"dipesh-thakur","name":"Dipesh Thakur","avatar_url":"https://avatars-next.observableusercontent.com/c8e61e644103bf11d2c2a08085f938fc37a3c9a05cdca7747185133269a26e9f","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"9045a0d3b5268470","slug":"javascript-tutorial","title":"JavaScript Basics","owner":{"id":"5eec37574d6ce020","login":"dipesh-thakur","name":"Dipesh Thakur"}},"type":"notebook","body":{"titling":"auto","title":"JS Variables","cells":[{"id":0,"value":"# JS Variables","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"JS variables are containers for data. \nJS variables can be declared in 4 ways:\n- Modern JS\n - Using let\n - Using const\n- Older JS\n - Using var (Not recommended)\n - Automatically (Not recommended)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"## Declaring JS Variables\nCreating a variable in JS is called declaring a variable. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"{\n let carName; // declaring a variable\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"After the declaration, the variable has no value (technically it is undefined)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"## Declaring a variable using const\nAlways use const if the value should not be changed.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"{\n const shirtPrice = 5;\n let profitMargin = 10;\n let costPrice = getPrice(shirtPrice, profitMargin);\n\n document.querySelector('.p1').innerHTML = costPrice;\n\n profitMargin = 15; // value has changed here\n\n costPrice = getPrice(shirtPrice, profitMargin); // value has changed here\n\n document.querySelector('.p2').innerHTML = costPrice;\n\n function getPrice(shirtPrice, profitMargin){\n return shirtPrice + shirtPrice * (profitMargin / 100);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"## Declaring a variable Automatically\nUndeclared variables are automatically declared when first used. In non-strict mode, if you just assign to a variable name that was never declared with let, const, or var, JS doesn't throw an error - it silently creates that variable for you, as a property on the global object.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"{\n x = 5;\n y = 6;\n z = x + y;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"It's a good programming practice to declare all variables at the beginning of a script.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"## Rules when declaring variables\n- Always declare variables\n- Always use const if the value should not be changed\n- Always use const if the type should not be changed (Arrays and Objects)\n- Only use let if you cannot use const\n- Never use var if you can use let or const.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"## One Statement, Many Variables\nYou can declare many variables in one statement. \nStart the statement with let or const and separate the variables by comma:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"{\n let person1 = 'Aahan', person2 = 'Gita', person3 = 'Binod';\n let weather = \"Sunny\", // declaration can span multiple lines\n mood = \"happy\",\n life = \"good\";\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"## The Assignment Operator\nIn JS, the equal sign (=) is an assignment operator, not an equal to operator. \nThe equal to operator is writtenn like == in JS.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"## Declaration vs Initialization\nDeclaration - telling the engine a variable exists. \nInitializatin - giving it a value for the first time. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"{\n let x; // declaration only - JS silently initializes x to undefined\n x = 5; // this is assignment of value\n\n let y = 10; // declaration + initialization on one line\n\n const a = 5; // declaration and assignment need to happen at the same time with const or error occurs\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"## Constant Ojbects and Arrays","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"## let - block scoped, var - function scoped\n```js\nfunction testLet() {\n if (true) {\n let x = 10;\n console.log(x); // 10 — accessible inside the block\n }\n console.log(x); // ❌ ReferenceError: x is not defined\n}\n```\n`x` only exists inside the {} of the `if` block. Once that block ends, `x` is gone - completely inaccessible outside it, even though we're still inside the same function. \n```js\nfunction testVar() {\n if (true) {\n var y = 10;\n console.log(y); // 10 — accessible inside the block\n }\n console.log(y); // 10 — ✅ still accessible outside the block!\n}\n```\n`var` doesn't care about `if` block at all. It only cares about the nearest enclosing function - so `y` is treated as if it belongs to `testVar()` as a whole, not jus the `if' block. It \"leaks out\" of the block, but stays trapped inside the function.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 24:null