Pocket needs to remember things: the app’s name, how much you have spent today, whether you are over budget. A program remembers by keeping values and giving them names. Before you can do anything interesting, you need to know what kinds of values exist and how to name them.
\nA value is a single piece of data. Every value has a type, which decides what you can do with it. These five cover almost everything you will touch in your first weeks:
\n| Type | \nExamples | \nUsed for | \n
|---|---|---|
| number | \n42, 4.5, -3 | \namounts, counts, measurements | \n
| string | \n"Coffee", 'food' | \nany text | \n
| boolean | \ntrue, false | \nyes/no answers | \n
| undefined | \nundefined | \n“no value has been given yet” | \n
| null | \nnull | \n“deliberately empty” | \n
The typeof operator tells you the type of any value. Run this and compare each line with the table:
console.log(typeof 42);\nconsole.log(typeof \"Coffee\");\nconsole.log(typeof true);\nconsole.log(typeof undefined);\nconsole.log(typeof null);Four answers match the table. The last one says "object", which is a bug from 1995 that can never be fixed because millions of websites depend on it. When you need to know whether something is null, compare it directly: value === null.
There are two more basic types, bigint (for huge whole numbers) and symbol (for unique labels), which you will rarely need as a beginner. Everything else, such as lists and records, is an object, and section 3 is all about those.
\nA variable is a name that points at a value. You create one with a declaration:
\nconst appName = \"Pocket\";\nlet spentToday = 0;\n\nspentToday = spentToday + 4.5;\nspentToday = spentToday + 12;\n\nconsole.log(appName, \"spent today:\", spentToday);Read line 4 the way the engine does: first it evaluates the right side, spentToday + 4.5, which is 0 + 4.5, so 4.5. Then it points the name spentToday at that new value. The = sign means “point this name at”, not “is equal to”. That is why x = x + 1 makes sense in code even though it is nonsense in maths.
const creates a name that can never be pointed anywhere else. let creates one that can. Use this rule: declare with const by default, and change it to let only when you find you need to reassign. Most names in real programs never change, and a const tells the next reader that they can stop worrying about it.
You will also see a third keyword, var, in older tutorials and Stack Overflow answers. It is the original way to declare variables and has scoping rules that cause bugs (you will see why in the scope lesson). Modern code does not use it.
In JavaScript a variable does not have a type of its own. It points at a value, and the value has a type. So a let can point at a number now and a string later:
let note = 12;\nconsole.log(typeof note);\nnote = \"twelve dollars\";\nconsole.log(typeof note);This flexibility is called dynamic typing. It is convenient, and it is also how many beginner bugs start: a number quietly becomes a string and your sum turns into "1212". The next two lessons show exactly when that happens.
The rules: a name can contain letters, digits, _ and $, cannot start with a digit, and cannot be a reserved word such as const or if. Names are case-sensitive, so total and Total are two different variables.
The habits, which every JavaScript codebase follows: write names in camelCase (spentToday, monthlyBudget), and make them say what the value means, not what type it is. spentToday beats num1; isOverBudget beats flag. Booleans usually start with is, has or can.
Two errors you will meet while practising:
\nReferenceError: spent is not defined means you used a name that was never declared, often a typo.ReferenceError: Cannot access 'spent' before initialization means you used a let or const on a line above its declaration. Declare first, use after.Next lesson you start doing arithmetic with your numbers, and you will find out why 0.1 + 0.2 is not quite 0.3.
typeof tells you which one you have.","A variable is a name that points at a value; the value has a type, the variable does not.","Declare with const by default and switch to let only when the name must point at a different value later.","Reassigning a const throws a TypeError, and using a name before declaring it throws a ReferenceError."],"further":[{"title":"JavaScript data types and data structures (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Data_structures"},{"title":"let (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let"},{"title":"const (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const"}],"quiz":[{"q":"What does this code print?
\nlet total = 10;\ntotal = total + 5;\nconsole.log(typeof total, total);number 10","why":"The second line computes 10 + 5 and points total at the result, so the old value 10 is gone."},{"text":"string 15","why":"Both values are numbers and no quotes are involved, so the result is a number, not text."},{"text":"number 15","why":"Correct. The right side is evaluated first (10 + 5), then total is pointed at 15, which is a number."}],"answer":2},{"q":"You store the name of the app, "Pocket", which never changes, and the number of expenses entered so far, which grows. Which declarations fit best?
let for both, so you never hit an error.","why":"That works, but it throws away a useful signal. const tells the reader, and the engine, that the name never moves."},{"text":"const for the app name and let for the count.","why":"Correct. The name is fixed, so const; the count is reassigned as it grows, so let."},{"text":"const for both, and change the count with count + 1.","why":"Writing count + 1 alone computes a new number but stores it nowhere. Storing it back needs reassignment, which const forbids."},{"text":"var for both, because it works in every browser.","why":"let and const have worked in every browser for years. var has confusing scope rules and is avoided in modern code."}],"answer":1},{"q":"What does typeof null return?
"null"","why":"That would be logical, but it is not what JavaScript does. The real answer is a historical bug kept for compatibility."},{"text":""undefined"","why":"undefined and null are two different values with different typeof results."},{"text":""object"","why":"Correct. It is a bug from the first version of JavaScript that can never be fixed without breaking old websites. To test for null, write value === null."}],"answer":2},{"q":"Which line throws TypeError: Assignment to constant variable.?
const rate = 5; rate = 6;","why":"Correct. const creates a name that can never be pointed at another value, so the second statement fails."},{"text":"let rate = 5; rate = 6;","why":"let exists exactly so you can reassign. This runs fine and rate ends up as 6."},{"text":"const rate = 5; const next = rate + 1;","why":"This reads rate without changing it and stores the result in a new name. Nothing is reassigned."}],"answer":0}],"exercise":{"kind":"web","mode":"js","starter":{"js":"const appName = \"Pocket\";\nconst monthlyBudget = 2000;\n\n// 1. Declare spent, starting at 0\n// 2. Add an expense of 45 to spent, then one of 120\n// 3. Declare remaining: the budget minus what was spent\n// 4. Log the type of remaining\n"},"solution":{"js":"const appName = \"Pocket\";\nconst monthlyBudget = 2000;\n\nlet spent = 0;\nspent = spent + 45;\nspent = spent + 120;\n\nconst remaining = monthlyBudget - spent;\nconsole.log(typeof remaining);\n"},"checks":[{"id":"spent-total","test":"return typeof spent === 'number' && spent === 165;"},{"id":"remaining-value","test":"return remaining === 1835;"},{"id":"logs-type","test":"return logs.some((l) => l.trim() === 'number');"},{"id":"budget-const","test":"try { monthlyBudget = 1; return false; } catch (e) { return e instanceof TypeError; }\n"}],"title":"Track what you have spent","prompt":"Pocket has a monthlyBudget of 2000. Declare a variable spent that starts at 0, then reassign it twice to add an expense of 45 and one of 120. Declare remaining as monthlyBudget minus spent, and log the type of remaining. Keep monthlyBudget a const.
spent has to change, so it cannot be a const.","To add to a variable, compute the new value from the old one: spent = spent + 45;.","typeof goes in front of the value: console.log(typeof remaining);."],"explanation":"spent is declared with let because it is pointed at a new number twice: 0, then 45, then 165. Each time, the right side is evaluated using the current value before the name moves. remaining never changes after it is computed, so const is the right choice, and typeof remaining is "number" because subtracting two numbers gives a number. Trying to reassign monthlyBudget throws a TypeError, which is exactly the protection const is for.
spent ends at 165","remaining-value":"remaining is 1835","logs-type":"Logs the type of remaining (number)","budget-const":"monthlyBudget is still a const that cannot be reassigned"}},"words":705,"readMinutes":3}