Skip to contentPlayForge
Act IChapter 1
chapter 1

1. Values and Variables

Store text, numbers and true/false, and print them: your first lines of code.

10m read10m in total

Chapter film (about 7m) is coming.

Checkpoint 1 of 3

Variables, Constants & Type System

In plain English. A variable is a labelled box that holds a value, such as a username, a price, or how many rows a table shows. Your tests are full of them: the test data you type, the text you read back, the count you expect. let makes a box whose contents you can swap later. const makes a box whose label is glued to one value. Use const unless you know the value will change, because a value that can't change is one less thing to go wrong. Every value also has a type, the kind of thing it is: text (a string), a number, or true/false (a boolean). Below, a binding just means the link between a name and its value.

Use let for a binding you intend to reassign and const for one you do not. Note carefully what const guarantees: the binding cannot be reassigned. It does not freeze the value. const user = { name: 'Alice' }; user.name = 'Bob'; is perfectly legal — only user = {} throws a TypeError. Two terms there are new. { name: 'Alice' } is an object, a bundle of named values; you read one with a dot, as in user.name, and the Objects & Destructuring lesson covers them properly. A TypeError is JavaScript stopping that line and reporting that a value was used in a way its type does not allow; the Error Handling & Debugging lesson covers errors. The legacy keyword var exists but should be avoided: it is scoped to the enclosing function rather than the enclosing block, so a var declared inside a loop or an if (both come in the next chapter, in Decisions: if, else and switch and Loops) is still readable after it.

In JavaScript the box has no type; the value inside it does. let x = 5; x = "hello"; is perfectly valid. (That is what "dynamically typed" means, a phrase you will hear in interviews.) Nothing checks types before the line runs, so a type mistake shows up only when that line runs. To check the type of a value at runtime, JavaScript provides the typeof operator.

JavaScript has a small set of primitive types: string, number, boolean, null, undefined, symbol, and bigint. Notice there is no separate type for whole numbers: 5 and 4.99 are both a number. bigint is a separate type for whole numbers too large for number; a test rarely needs it.

null and undefined both represent emptiness, and they are separate values. A variable that has been declared but never assigned is undefined, and so is a missing object property or the return value of a function that returns nothing. null is a value you assign deliberately to mean the intentional absence of any object value.

javascript
let mutableVar = 10; console.log('Initial mutableVar:', mutableVar, 'Type:', typeof mutableVar); mutableVar = "Now I am a string!"; console.log('Reassigned mutableVar:', mutableVar, 'Type:', typeof mutableVar); const constantBinding = 42; // constantBinding = 43; // TypeError: Assignment to constant variable. // const freezes the binding, NOT the value: const settings = { retries: 2 }; settings.retries = 5; // allowed - we mutated the object, not the binding // settings = { retries: 5 }; // TypeError - this reassigns the binding console.log('const object mutated:', settings); var legacyVar = true; // Avoid using var let uninitialized; let explicitlyEmpty = null; console.log('uninitialized:', uninitialized); console.log('explicitlyEmpty:', explicitlyEmpty); const bigIntNum = 9007199254740991n; // the n on the end makes it a BigInt console.log('bigIntNum:', bigIntNum, 'Type:', typeof bigIntNum);
Practise this
  • mcqJavaScript — quiz bank (2 questions)🔒 standard
Finished reading? Tick it off.

Sign in to track your progress

Checkpoint 2 of 3

Strings In-Depth

In plain English. A string is a piece of text: a username, an error message, the heading on a page. Most of what a tester checks on a page is text read back and compared, so you will handle strings constantly. This lesson covers the everyday tools: trimming stray spaces, checking whether text contains a word, splitting a sentence into parts, and slotting a value into a message, which is called interpolation. Strings are immutable, meaning they never change once made; every string method hands you a new string and leaves the original alone. A regular expression, or regex, is a pattern that describes text instead of spelling it out exactly, useful when part of the text changes from run to run.

JavaScript strings can be enclosed in single quotes ('...'), double quotes ("..."), or backticks (`...`). The backtick syntax creates what are called Template Literals. Template literals allow for multi-line strings and string interpolation, embedding expressions directly into strings using ${expression}.

Strings in JavaScript are immutable. Once a string is created, it cannot be changed. String methods always return a new string rather than modifying the original in place.

JavaScript gives every string a rich set of built-in methods. You have includes(), startsWith(), endsWith() for boolean checks. For manipulation, split(), trim(), replace(), slice(), and substring() are frequently used. split() cuts a string into pieces and hands the pieces back as a list, which JavaScript calls an array; the Arrays: The Complete Guide lesson covers them. slice(start, end) takes positions, which count from zero at the first character, and stops just before end. A negative position counts from the end of the string instead, so text.slice(-8, -2) starts eight characters from the end and stops two characters from the end.

Regular expressions are deeply integrated into JavaScript. You can create a regex literal simply by enclosing the pattern in forward slashes, e.g., /pattern/g. You can use the test() method on a regex object to check for a match, or the match(), replace(), and search() methods directly on a string object. One trap to know before you meet it in a test script: a regex literal carrying the g flag is stateful. test() and exec() on a global regex start from its lastIndex property (a position counter the regex keeps between calls) and advance it, so calling the same global regex object twice in a row alternates true, false, true, false. Use a non-global regex for boolean checks, or build a fresh one each time.

javascript
const name = 'Alice'; const greeting = `Hello, ${name}! Welcome to JavaScript.`; // Multi-line and interpolation console.log(greeting); const text = " JavaScript is awesome! "; console.log('Trimmed:', text.trim()); console.log('Includes "Script":', text.includes('Script')); console.log('StartsWith "Java":', text.trim().startsWith('Java')); const parts = text.trim().split(' '); console.log('Split into words:', parts); const sliced = text.slice(-8, -2); console.log('Sliced with negative indices:', sliced); // Regex // No `g` flag here: test() on a global regex advances lastIndex and // would return true, false, true, ... on repeated calls. const regex = /is/; console.log('Regex test:', regex.test(text)); // true console.log('Regex test again:', regex.test(text)); // true (still true - not global) console.log('String match:', text.match(/a/g)); // Find all 'a's console.log('Replace:', text.replace(/awesome/, 'fantastic'));
Finished reading? Tick it off.

Sign in to track your progress

Checkpoint 3 of 3

Numbers & Type Coercion

In plain English. Numbers turn up in testing more than you might expect: a cart total, a count of search results, a price you read off the page as text and need to do sums with. This lesson shows how JavaScript does arithmetic, how to turn text such as "10.5" into a real number, and the odd values you get when a calculation fails. Coercion means JavaScript quietly converting a value from one type to another, such as text to a number. It sometimes helps and often causes bugs, so you will learn to spot it. Comparing values, and what counts as true or false, are the first lesson of the next chapter: Comparisons and Truthiness.

JavaScript has a single numeric type for ordinary arithmetic: Number, a double-precision 64-bit IEEE 754 float. There are no separate integer and floating-point types, so you don't have to worry about integer division truncation (e.g., 5 / 2 is 2.5, not 2), but you do have to be careful with floating-point precision issues: 0.1 + 0.2 evaluates to 0.30000000000000004, so 0.1 + 0.2 === 0.3 is false (=== asks "is this exactly equal to that?"; Comparisons and Truthiness covers it). Compare floats against a small tolerance instead of with ===.

To convert strings to numbers, JavaScript provides parseInt() and parseFloat(). It also has special numeric values: NaN (Not-a-Number) and Infinity. NaN is returned when a mathematical operation fails (like dividing a string by a number). A quirky characteristic of NaN is that it doesn't equal itself (NaN === NaN is false); you must use Number.isNaN() to check for it safely.

For mathematical operations beyond the arithmetic operators, JavaScript provides the Math object. It contains static properties like Math.PI and static methods like Math.round(), Math.floor(), Math.ceil(), and Math.random().

Coercion in arithmetic. When you mix text and numbers, JavaScript converts one of them without asking. The + sign is the trap, because it means both "add" and "join text". '5' + 2 gives the text '52', but '5' * 2 gives the number 10, because * only ever multiplies. A price read off a page is always text, so convert it first with Number('5'), parseInt() or parseFloat(), and only then do sums with it. Number('abc') gives NaN, the same failed-calculation value as above.

javascript
const a = 5; const b = 2; console.log('Division:', a / b); // 2.5, no integer truncation const parsedInt = parseInt("10.5", 10); // 10 = read it as a base-10 number const parsedFloat = parseFloat("10.5"); console.log('parseInt:', parsedInt, 'parseFloat:', parsedFloat); const notANumber = "hello" / 2; console.log('Is NaN?', Number.isNaN(notANumber)); console.log('Infinity:', 1 / 0); console.log('Math.round(4.7):', Math.round(4.7)); console.log('Math.random():', Math.random()); // Coercion: + joins text, * does arithmetic console.log("'5' + 2 =", '5' + 2); // '52' (text) console.log("'5' * 2 =", '5' * 2); // 10 console.log("Number('5') + 2 =", Number('5') + 2); // 7 console.log("Number('abc') =", Number('abc')); // NaN
Practise this
  • mcqJavaScript — quiz bank (2 questions)🔒 standard
Finished reading? Tick it off.

Sign in to track your progress

Practice

4 exercises attached to this chapter.

  • mcqJavaScript — quiz bank (4 questions)🔒 standard