JavaScript Variables and Types: Getting Started

HTML gives a page its structure, CSS controls its appearance, and JavaScript adds behavior. A browser’s JavaScript engine runs the instructions in a script. Unless a decision changes the path, those instructions run from top to bottom.

Put code in the page or in a separate file

An inline script contains JavaScript between opening and closing tags:

<script>
  console.log("Hello from the page");
</script>

An external script keeps the JavaScript in a separate .js file. This HTML loads it:

<script src="js/app.js"></script>

The external file contains console.log("Hello from the page"); with no <script> tags. Separating the files keeps HTML readable, lets several pages share code, and lets the browser cache the script. When src is present, code inside the same element is ignored. Use one approach per element, and always write the closing </script> tag: a self-closing <script ... /> does not close the element in HTML.

Choose when the script runs

A classic script with no loading attribute stops HTML parsing while the browser loads and runs it. In <head>, it runs before the later body content has been built. Placing it just before </body> puts the page content ahead of it.

For an external classic script in <head>, defer is a useful default:

<script src="js/app.js" defer></script>

The browser downloads the script while continuing to parse HTML. It runs the script after parsing finishes. Several deferred scripts run in their HTML order, so a second script can use values set by the first.

Use async for independent code that does not rely on page readiness or another script. Adding defer to an inline classic script has no effect.

Load a module

<script type="module" src="js/main.js"></script>

A module is deferred by default and runs in strict mode. It can share code through import and export. To load modules in Chrome or Firefox, serve the project with a local development server, such as an editor’s live-server feature. Opening the page at a file:// address causes module-loading restrictions.

Check the connection

Suppose index.html sits beside a js folder containing greet.js. Put console.log("Page ready"); in that script and <script src="js/greet.js" defer></script> in the HTML head. Open the page, then its console: the message is "Page ready".

The relative path starts from the HTML file’s folder. With this layout, src="greet.js" points to the wrong place. A missing-file message means there is no script to execute at that address. If you copied the HTML tags into the JavaScript file, the engine instead reports a syntax error at the markup.

The browser console shows messages, errors, and the results of code you type. Open the console for the page you are testing. In Chrome or Edge, use Ctrl+Shift+J on Windows/Linux or Cmd+Option+J on Mac. In Firefox, use Ctrl+Shift+K or Cmd+Option+K. F12 opens the developer tools as a whole in Chrome and Edge.

Statements and expressions

An expression produces a value: 4 + 5 produces 9. A statement gives an instruction, such as storing that value or printing it:

let total = 4 + 5;
console.log("Total:", total);

The first line runs before the second, which prints "Total: 9". A semicolon ends a statement. JavaScript can insert many omitted semicolons, but line breaks do not always work as separators. End statements with semicolons to make the intended structure clear.

Type 2 + 3 into the console and press Enter to see 5. Use Shift+Enter for a new line without running the entry. If you enter let x = 5;, the console may display undefined as the result of that statement. This does not say that x contains undefined: entering x next shows 5. Likewise, a call to console.log() prints its message and itself returns undefined.

Names and comments

JavaScript is case-sensitive. console.log("Hi"); works, but Console.log("Hi"); refers to a different name and raises ReferenceError. console.Log("Hi"); finds console, but fails with TypeError because there is no callable Log method.

Comments are for readers. The engine skips them:

// Keep the starting value for the next calculation.
let total = 4;
/* A comment can also
   continue on another line. */
console.log(total);

Putting // before a statement temporarily switches that line off. A useful comment explains a reason that the code alone does not make clear.

Messages, warnings, and experiments

console.log("Total:", 9); prints its arguments separated by spaces. console.warn() marks a warning; console.error() marks an error message. Printing with console.error() does not itself throw an exception. console.clear() clears the display.

Console entries are experiments, not saved edits. Reloading runs the saved page scripts again. You can inspect top-level variables from classic scripts in the console; a module’s top-level variables stay inside that module.

Simple dialogs and strict mode

alert("Saved!"); shows a message. confirm("Continue?") returns true for OK and false for Cancel. prompt("Quantity?", "1") returns the entered string, or null for Cancel. Typing 12 gives "12", not 12. These dialogs pause interaction while open.

Put "use strict"; at the start of a classic script to make certain mistakes report errors. For example, totl = 5; with no declaration throws ReferenceError in strict mode; in a non-strict classic script it can create an accidental global variable. A module already uses strict mode. Check spelling and declare names before assigning to them.

A variable is a name that refers to a value. You can declare the name first and assign its value later, or do both in one statement. The assignment operator = stores the right-hand value in the left-hand name.

Choose let or const

let score;
console.log(score); // undefined
score = 10;
score = score + 2;
console.log(score); // 12

let score; declares the variable. Until an assignment gives it another value, it holds undefined. The next assignment stores 10. In score = score + 2;, JavaScript reads the old score, adds 2, then stores 12. This is an update instruction, so it need not make sense as a math equation. Reassignment uses the existing name without writing let again.

A const declaration must include its initial value:

const BOILING_POINT_C = 100;

The declaration const rate; is a syntax error because it lacks an initializer. Trying to assign a new value to BOILING_POINT_C later raises a TypeError.

Use const by default. Choose let for a running total, a counter, or a result that later statements will assign. A value calculated from other values can still use const if the program never reassigns that name.

Give the name a clear meaning

Names may contain letters, digits, _, and $; they cannot start with a digit. place1 is valid, but 1stPlace is not. Spaces are forbidden, and a hyphen is read as subtraction, so total-price does not name one variable. Reserved words such as if, return, and class cannot be variable names.

Use camelCase for ordinary names: itemCount, firstName, or priceWithTax. Boolean names such as isLoggedIn and hasDiscount describe a yes-or-no value. Include units when they prevent confusion: distanceKm and durationMin. Fixed values known before the program runs often use UPPER_SNAKE_CASE, such as MAX_LOGIN_ATTEMPTS. Case matters: total and Total are separate names.

Work through a running total

const TAX_RATE = 0.2;
let total = 0;
total = total + 12.5;
total = total + 7.5;
const totalWithTax = total * (1 + TAX_RATE);
console.log(totalWithTax); // 24

The total starts at 0, becomes 12.5, then becomes 20. The multiplier 1 + TAX_RATE is 1.2, so the final amount is 24. Only total needs reassignment. The tax rate and the calculated final amount use const.

If you write let total = 7.5; a second time in the same scope, you are trying to declare a second variable, not update the first. Use total = 7.5; to replace the value.

Recognize older declarations

Older code often uses var. It still works, but its variables belong to a function or script instead of an ordinary nested block. It permits repeated declarations and reads before the declaration produce undefined. Modern let and const catch these mistakes. Keep their rules in mind when reading an older tutorial that uses var.

A block is the code between curly braces, such as an if body. A variable’s scope is the region where its name refers to that variable. Both let and const have block scope, including any nested blocks inside the declaring block.

Keep a result where it is needed

const temperatureC = 31;
let label;
if (temperatureC > 30) {
  label = "hot";
} else {
  label = "mild";
}
console.log(label); // hot

label is declared outside the branches, so the final line can read it. Each branch assigns the existing variable. If you instead declare const label = "hot"; inside the first branch, that variable cannot be read after the block. With no other label in scope, the final read raises ReferenceError.

A top-level declaration in a classic script has global scope: later code in that script and the page’s other classic scripts can use it. In a module, top-level variables belong to that module. Keep a variable in the smallest scope that needs it to reduce name clashes.

Distinguish shadowing from reassignment

let x = 1;
{
  let x = 2;
  console.log(x); // 2
}
console.log(x); // 1

The inner declaration creates a separate variable. This is shadowing: within the inner block, x refers to the inner variable. The outer variable remains 1. Removing the inner let would instead assign 2 to the outer variable. Distinct names make this difference easier to read.

Read before initialization

A block-scoped binding covers its whole block, but it cannot be accessed before the declaration initializes it. The region before initialization is the temporal dead zone:

console.log(price);
let price = 5;

This raises ReferenceError: Cannot access 'price' before initialization. The name exists in the scope but is not ready. By comparison, price is not defined means no binding with that name can be found there. An inner declaration also shadows an outer name before the inner declaration line; the outer value cannot bypass the inner variable’s temporal dead zone.

Match each error to a fix

Syntax errors prevent that script from starting. A runtime error stops the current execution when it reaches the failing statement. Chrome allows another let declaration in a separate console entry for convenience; this does not make duplicate declarations valid in a script.

Const fixes the reference

Primitive values such as numbers and strings cannot change in place. An object’s contents can change even when its name uses const:

const settings = { theme: "dark" };
settings.theme = "light"; // allowed

The name still refers to the same object. Assigning settings = {}; tries to replace that reference and raises TypeError.

The values 7, "7", and true have different types. They may appear in similar places on a page, but JavaScript applies different rules to each. A type describes the value currently held, not a permanent restriction on its variable.

Start with the main three types

A number represents whole and decimal numeric values: 42, -7, and 3.75 all have the same type. Scientific notation is also numeric: 1e3 means 1000. A string holds text inside quotes, so "42" is text even though its characters are digits. A boolean is exactly true or false, without quotes. Comparisons produce booleans that a program can use to make decisions.

Use typeof to inspect a value. It returns a string naming the type:

console.log(typeof 7);         // number
console.log(typeof "7");       // string
console.log(typeof true);      // boolean
console.log(typeof undefined); // undefined

The comments show the printed words; the results themselves are strings such as "number".

Recognize missing values

let city;
let middleName = null;
console.log(city);       // undefined
console.log(middleName); // null

undefined commonly means JavaScript has not been given a value, as with an uninitialized let. null is commonly assigned deliberately to mean "empty" or "no value". Test for a deliberately empty value with middleName === null.

Do not use typeof value === "object" as a null test. typeof null gives "object" because of a historical language behavior, even though null is a primitive value.

Know the complete type list

JavaScript has seven primitive types: number, string, boolean, undefined, null, bigint, and symbol. The eighth type is object, used for structured values. Functions are objects that can be called, although typeof reports "function" for them.

A bigint is a whole number written with a final n, such as 9007199254740993n. It supports exact large whole numbers. Do not mix a bigint and a number in arithmetic: 1n + 2 throws TypeError. A symbol is a unique identifier; typeof Symbol("id") gives "symbol". typeof 42n gives "bigint".

NaN is another special result to recognize: despite its name, "not a number," typeof NaN is "number". It is a numeric value that marks an invalid numeric result. Its name alone does not identify a separate type.

Trace a changing variable

let data = 42;
console.log(typeof data); // number
data = "forty-two";
console.log(typeof data); // string

This is dynamic typing. Reassignment can replace a number with a string. That flexibility makes it useful to log both the value and its type when a result is surprising:

const input = "7";
console.log(input, typeof input); // 7 string
console.log(input + 1);           // 71
console.log(7 + 1);               // 8

The first addition joins text; the second adds numbers. Primitive values cannot change in place: an operation creates a new value. Updating a variable changes which value it refers to.

JavaScript uses one ordinary number type for whole and decimal values. Division keeps a fractional part: 10 / 4 gives 2.5. The operator you choose and the order in which it runs both affect the result.

Calculate in the intended order

Powers run before multiplication, division, and remainder; those run before addition and subtraction. Equal-level operators run left to right, except powers associate right to left: 2 ** 3 ** 2 is 2 ** 9, or 512. Parentheses override that order: 2 + 3 * 4 gives 14, but (2 + 3) * 4 gives 20.

For the average of 72, 85, and 90, add the whole group before dividing:

const average = (72 + 85 + 90) / 3;
console.log(average); // 82.33333333333333

Without parentheses, 72 + 85 + 90 / 3 divides only 90 and gives 187.

Separate whole units and remainders

Math.trunc(7 / 2) drops the fraction and gives 3. For a positive length of 245 cm, Math.floor(245 / 100) gives 2 meters, and 245 % 100 gives 45 remaining centimeters. Similarly, 3725 seconds gives 1 hour with Math.floor(3725 / 3600), 2 minutes with Math.floor((3725 % 3600) / 60), and 5 seconds with 3725 % 60. For an integer, n % 2 === 0 tests evenness. A remainder has the sign of the left operand: -7 % 3 gives -1.

Update a number

x += 5 means x = x + 5. The operators -=, *=, /=, %=, and **= follow the same pattern. Starting at 10, the updates += 5, *= 2, -= 4, then /= 2 give 15, 30, 26, then 13.

++ increases by one and -- decreases by one. With let a = 5; let b = a++;, a becomes 6 but b receives 5: postfix returns the old value. With let b = ++a;, starting again at a = 5, both become 6. An update on its own line avoids relying on that expression result.

Round and format deliberately

Math.round(13.456 * 100) / 100 gives the number 13.46. By contrast, (3.14159).toFixed(2) gives the string "3.14", and (19.999).toFixed(2) gives "20.00". Format at the end: adding a number to a formatted string joins text.

Recognize numeric limits

Numbers use 64-bit binary floating point. Most decimal fractions are approximate, so 0.1 + 0.2 is 0.30000000000000004. Round for display, compare with a suitable small tolerance, or calculate in whole units such as cents or millimeters.

Some invalid operations return a value instead of throwing: 5 / 0 is Infinity, -5 / 0 is -Infinity, and 0 / 0 or "abc" * 2 is NaN. Most arithmetic with NaN stays NaN; NaN ** 0 is an exception and gives 1.

Every integer through Number.MAX_SAFE_INTEGER, 9007199254740991, is exact. Beyond it, only some integers can be represented: 9007199254740992 + 1 still gives 9007199254740992. Bigints support larger exact integers.

A string stores text between matching single quotes, double quotes, or backticks. For plain text, all three can represent the same value. Quotes mark where the text begins and ends; they are not part of that value.

Quotes, escapes, and joining

Use the other quote style to include a quote: "It's late". An escape uses a backslash, as in 'It\'s late'. \n represents a line break, \t a tab, and \\ a backslash. The escape \n occupies one string position, even though it takes two typed symbols to write. "It's".length is 4; "Line 1\nLine 2".length is 13.

The + operator concatenates strings. "Hello" + " " + "world" gives "Hello world"; no space is inserted unless one of the pieces contains it. With let msg = "Hi"; msg += " there";, the updated value is "Hi there".

Positions start at zero

const language = "JavaScript";
console.log(language.length); // 10
console.log(language[0]);     // J
console.log(language[4]);     // S
console.log(language[9]);     // t
console.log(language.at(-1)); // t
console.log(language[10]);    // undefined

The final index is length - 1. A negative argument to at() counts from the end. length is a property, not a method: language.length() raises TypeError. More precisely, string positions and length use UTF-16 code units, the units JavaScript uses to store text. These ordinary English letters each occupy one unit; some symbols and emoji occupy more.

Save the new string

Strings are immutable: their contents cannot be edited in place. Assigning word[0] = "b" when word is "cat" does not create "bat"; in strict mode it throws. Methods that transform text return a new string:

let name = "ana";
name.toUpperCase();
console.log(name); // ana
name = name.toUpperCase();
console.log(name); // ANA

Calling the method is not enough to keep its result. Writing name.toUpperCase without parentheses does not call it at all.

Pick the right text operation

toLowerCase() and toUpperCase() change case; trim() removes whitespace at both ends. Chaining applies each method to the preceding result: " Ana@Example.com ".trim().toLowerCase() gives "ana@example.com".

includes(), startsWith(), and endsWith() return booleans. For example, "report.pdf".endsWith(".pdf") gives true. indexOf() gives the first matching position or -1: "JavaScript".indexOf("S") gives 4, but searching for "s" gives -1. Searches are case-sensitive. "JavaScript".includes("script") is false; convert to lowercase before that search to get true.

slice(start, end) returns text from the start index up to, excluding, the end index. "JavaScript".slice(0, 4) gives "Java"; .slice(4) and .slice(-6) give "Script".

"a-b-c".replace("-", "+") gives "a+b-c"; replaceAll() with the same arguments gives "a+b+c". "ab".repeat(3) gives "ababab", and "5".padStart(3, "0") gives "005". For const city = "paris";, city[0].toUpperCase() + city.slice(1) produces "Paris" by joining an uppercase first letter to the unchanged remainder.

A template literal puts text between backticks. Inside it, ${...} marks a placeholder whose expression will be evaluated and inserted into the text. This is useful when a message combines several values with punctuation, spaces, or calculations.

Read a placeholder as an expression

const name = "Ana";
const greeting = `Hello, ${name}!`;
console.log(greeting); // Hello, Ana!

The engine reads name, obtains "Ana", and places it between the greeting and the exclamation point. The backticks and placeholder symbols describe the string; they do not appear in the resulting message.

With concatenation, the same idea is "Hello, " + name + "!". A longer message such as "Hello, " + name + "! You have " + count + " new messages." requires several separately quoted pieces. A template keeps the whole sentence together: `Hello, ${name}! You have ${count} new messages.`. Spaces still have to be typed where you want them.

Calculate, then format inside the gap

const name = "Ana";
const tickets = 3;
const price = 4.5;
const receipt = `${name} bought ${tickets} tickets for ${(tickets * price).toFixed(2)} in total.`;
console.log(receipt);

The output is "Ana bought 3 tickets for 13.50 in total." First, tickets * price produces 13.5. Parentheses make that whole product the receiver of .toFixed(2), which produces "13.50". The placeholder inserts that text into the sentence. The numeric price and tickets variables stay unchanged.

Without formatting, a placeholder shows the number’s ordinary text form. `${0.1 + 0.2}` gives "0.30000000000000004". Formatting inside it, `${(0.1 + 0.2).toFixed(2)}`, gives "0.30".

Expressions fit; statements do not

A placeholder can contain a value, a calculation, a method call, or an expression that chooses a value. With birthYear = 1990, `You turn ${2026 - birthYear} this year.` gives "You turn 36 this year."

The conditional operator can select singular or plural text:

const count = 1;
console.log(`You have ${count} ${count === 1 ? "item" : "items"}`);
// You have 1 item

The comparison chooses one string to insert. An if statement cannot replace that expression inside ${...} because a placeholder needs an expression that produces a value.

Keep the exact punctuation

Only backticks activate placeholders. With const n = 5;, "n + 1 = ${n + 1}" is ordinary text and leaves ${n + 1} unchanged. The template `n + 1 = ${n + 1}` gives "n + 1 = 6". A backtick is a different character from a single quote.

Line breaks typed inside backticks become line breaks in the resulting string. Indentation spaces also become part of it. Missing values are inserted as text: `${undefined}` gives "undefined", while `${null}` gives "null". If a message unexpectedly contains "undefined," inspect the inserted variable and where it was assigned.

Explicit conversion means you write the conversion yourself, using a tool such as Number(), String(), or Boolean(). It makes the intended type visible at the point where a value enters the calculation.

Choose a numeric conversion

Number() reads the whole text as a number, ignoring surrounding whitespace. Number("1.5") gives 1.5, and Number(" 12 ") gives 12. Number("12px") gives NaN because the whole string is not numeric. Code uses a decimal point: Number("1,5") also gives NaN.

parseInt() and parseFloat() read a numeric beginning and stop when the text no longer fits. parseInt("12px", 10) gives 12; parseFloat("3.75 kg") gives 3.75. The integer parser stops at the decimal point, so parseInt("0.5", 10) gives 0. parseInt("abc", 10) gives NaN because there is no numeric beginning. Pass a base to parseInt(): parseInt("08", 10) gives 8, while parseInt("ff", 16) reads hexadecimal and gives 255.

Unary plus also converts ordinary numeric text: +"42" gives 42.

Keep missing input separate from zero

A prompt returns a string or null. Cancel returns null, and accepting an empty box returns "". Both become zero under Number(), as does whitespace-only text. Check for absence before converting:

const input = prompt("Enter a quantity:");
if (input === null || input.trim() === "") {
  console.log("No quantity entered.");
} else {
  const quantity = Number(input);
  if (Number.isNaN(quantity)) {
    console.log("Please type a number.");
  } else {
    console.log(quantity + 1);
  }
}

The || skips the trim() call when input is null. Typing "12" reaches the numeric calculation and prints 13. Typing "12px" reaches the invalid-number message. Typing "0" is a valid answer and prints 1.

Use Number.isNaN(value) to test for an actual NaN value. value === NaN never succeeds. The older global isNaN() first converts its argument: isNaN("hello") is true, but Number.isNaN("hello") is false because that value is still a string.

Convert to text or a boolean

String(42) gives "42", String(true) gives "true", and String(null) gives "null". (42).toString() also produces "42", but calling .toString() on null or undefined raises TypeError. String() handles both.

Boolean() returns false for false, 0, -0, 0n, "", null, undefined, and NaN; these are falsy. Browsers also have the legacy falsy object document.all. Other values are truthy. In particular, "0", "false", and a single-space string are all truthy. !!value gives the same boolean conversion.

For two prompt answers "12" and "30", a + b produces "1230". Convert both inputs first: Number(a) + Number(b) gives 42.

Coercion is automatic type conversion inside an operation. Its rules depend on the operator. A calculation that appears to work can still contain a text value that causes a later step to fail.

Follow the addition rule

For ordinary number, string, boolean, null, and undefined operands, + joins text if either operand is a string. Otherwise it performs numeric conversion and addition. "5" + 2 gives "52", and 2 + "5" gives "25".

Evaluate a chain from left to right:

console.log(1 + 2 + "3"); // 33
console.log("3" + 1 + 2); // 312

In the first expression, two numbers add to 3; adding "3" then joins the two text forms into "33". In the second, the first operation already produces "31", so the final operation appends another digit. Parentheses can change which operation happens first: "3" + (1 + 2) gives "33".

Other arithmetic expects numbers

Subtraction, multiplication, division, remainder, and powers convert numeric strings to numbers. "5" - 2 gives 3, "5" * "2" gives 10, and "10" / "4" gives 2.5. A string such as "abc" cannot become a valid number, so "abc" * 2 gives NaN. Bigints have separate arithmetic rules; mixing one with a number raises TypeError.

This difference can hide a bug:

const price = "20";
console.log(price * 3); // 60
console.log(price + 5); // 205

Multiplication converts the price, but it does not change the variable. The later addition still sees a string. Convert once where input arrives, then keep working with the numeric result.

Trace small automatic conversions

In numeric arithmetic, true becomes 1, false becomes 0, and null becomes 0. Thus true + true gives 2, while null + 1 gives 1. undefined becomes NaN, so undefined + 1 is NaN. Unary plus and minus convert numeric strings: +"42" gives 42, -"5" gives -5, and +"" gives 0.

++ always requests a numeric update, but += follows the addition rule:

let count = "5";
count++;
console.log(count, typeof count); // 6 number
let label = "5";
label += 1;
console.log(label, typeof label); // 51 string

Conditions apply a different conversion

An if condition judges a value as truthy or falsy. "0" is a nonempty string and passes; numeric 0 is falsy and skips the block. If zero is a valid quantity, a truthiness check alone cannot tell zero from a missing answer. For a value represented by a number or null, quantity !== null tests for absence explicitly.

Equality also offers two behaviors: "7" == 7 is true after coercion, but "7" === 7 is false because strict equality preserves the type distinction. Use strict equality for ordinary comparisons.

When a result is joined text or NaN, log each input beside typeof input. Find the first incorrect type and correct the conversion there. Turning "205" into a number at the end would give 205, not the intended sum 25.

A comparison produces a boolean. 7 > 3 is true, 5 >= 5 includes equality and is true, and 4 < 2 is false. Store a result such as const isAdult = age >= 18;, or use it directly in a condition.

Prefer strict equality

=== compares without converting types. Two ordinary primitive values must have the same type and matching values: 7 === 7 is true, while "7" === 7 is false. !== reverses strict equality, so "7" !== 7 is true.

Loose equality, ==, can convert operands. "7" == 7, 0 == "", and "0" == false are all true. Its special missing-value rule makes null == undefined true but null == 0 false. != reverses loose equality. Prefer === and !==; a deliberate value == null can test for either null or undefined.

Tell text ordering from numeric ordering

Two strings compare from left to right using their UTF-16 code values. For ordinary English words in the same case, "apple" < "banana" is true. A shorter matching prefix comes first: "apple" < "apples" is true. Among the unaccented English letters, uppercase letters come before lowercase letters, so "Zebra" < "apple" is true. Converting both strings with toLowerCase() removes that case difference in simple English-letter comparisons.

Digit strings also follow text order:

console.log("10" < "9"); // true
console.log("10" < 9);   // false

In the first comparison, the character "1" comes before "9". In the second, one operand is numeric, so the text becomes the number 10. Convert numeric input deliberately before comparing its size. "abc" < 5 and "abc" > 5 both give false because the numeric conversion produces NaN.

Handle missing and invalid numbers first

NaN does not equal itself: both NaN === NaN and NaN == NaN are false. Use Number.isNaN() to recognize it.

Relational comparisons convert null to zero, so null >= 0 is true but null > 0 is false. Equality has a different rule, so null == 0 remains false. undefined becomes NaN in relational comparisons, so undefined > 0 and undefined < 0 are false; undefined == 0 is false too. Check for a missing value before treating it as a measurement.

Compare decimals and ranges

Binary rounding means 0.1 + 0.2 === 0.3 is false. For these small values, a tolerance test works:

const closeEnough = Math.abs((0.1 + 0.2) - 0.3) < 0.000001;
console.log(closeEnough); // true

Math.abs() removes the sign of the difference. Choose a tolerance suited to the size and precision of the values, or calculate in whole units such as millimeters.

Do not chain range tests as in math. With x = 50, 0 < x < 10 first produces true, then compares that boolean as 1 < 10, yielding true. Likewise, 3 > 2 > 1 becomes true > 1, or 1 > 1, which is false. Write both comparisons in full: x > 0 && x < 10.

Logical operators let a condition express several requirements. With boolean operands, && means AND, || means OR, and ! means NOT. Their evaluation order also lets you guard an operation that would fail on a missing value.

Express every requirement

const temperatureC = 25;
const inRange = temperatureC >= 18 && temperatureC <= 30;
const outside = temperatureC < 18 || temperatureC > 30;

inRange is true because both limits hold. outside is false because neither outside test holds. OR includes the case where both sides are true; it is not "one but never both."

Write each comparison in full. color === "red" || "green" does not test for either color. With color = "blue", the first comparison is false, but the nonempty string "green" is truthy. The intended test is color === "red" || color === "green".

Group the condition you mean

NOT binds before AND, and AND before OR. Thus true || false && false is true, but (true || false) && false is false.

Suppose access requires a login and either the admin or owner role. Write loggedIn && (isAdmin || isOwner). Without parentheses, loggedIn && isAdmin || isOwner lets isOwner make the whole expression true even with loggedIn = false. Parentheses keep the login requirement attached to both roles.

Reversing a compound condition also changes the connector. !(a && b) has the same truth value as !a || !b; !(a || b) matches !a && !b. For a temperature outside the inclusive interval, reversing the two inside tests changes >= to <, <= to >, and AND to OR.

Stop when the result is known

AND stops at the first falsy operand; OR stops at the first truthy operand. This is short-circuit evaluation. The skipped operand is not evaluated:

const input = null;
const hasText = input !== null && input.trim() !== "";
console.log(hasText); // false

The first test is false, so trim() is never called on null. Reversing those two tests would try the unsafe operation first.

These operators return an operand, not necessarily a boolean. "" || "Guest" returns "Guest"; "Sam" || "Guest" returns "Sam". "Ana" && "ok" returns "ok", and null && "x" returns null. A surrounding if then tests the returned value’s truthiness.

Preserve meaningful falsy values

With quantity = 0, quantity || 1 gives 1, but quantity ?? 1 preserves 0. With nickname = "", nickname || "Anonymous" gives the fallback, while nickname ?? "Anonymous" preserves the empty string. Use ?? when those values are meaningful.

Parenthesize when mixing ?? with AND or OR: a || b ?? c is a syntax error, while (a || b) ?? c has an explicit grouping. NOT first converts to a boolean, then reverses it: !0 is true and !"0" is false. Double NOT, !!value, gives a plain boolean.

An if statement runs a block when its condition is truthy. An else runs when that condition is falsy. Use braces to show exactly which statements belong to each branch.

Order a chain of decisions

An else if chain checks from top to bottom. The first passing condition wins, and all later branches are skipped:

const score = 85;
let grade;
if (score >= 90) {
  grade = "A";
} else if (score >= 80) {
  grade = "B";
} else if (score >= 70) {
  grade = "C";
} else {
  grade = "F";
}

The first comparison fails; the second passes, so grade becomes "B". Testing score >= 70 first would catch even a score of 95 and assign "C". For overlapping minimum thresholds, put the highest first. The shared grade variable is declared outside the branches so later code can read it.

A compound condition can keep a short decision readable. Shipping is free for an order total of at least 50 or for a member; otherwise it costs 4.95:

const orderTotal = 45;
const isMember = false;
let shipping;
if (orderTotal >= 50 || isMember) {
  shipping = 0;
} else {
  shipping = 4.95;
}
console.log(`To pay: ${orderTotal + shipping}`);
// To pay: 49.95

Two nested conditions without else branches can often be joined with AND: if (isLoggedIn) { if (isAdmin) { ... } } runs its innermost code under the same boolean conditions as if (isLoggedIn && isAdmin) { ... }.

Avoid punctuation that changes the path

Without braces, only the next statement belongs to an if; indentation cannot add another statement to it. A semicolon immediately after the condition creates an empty statement: if (x > 5); { ... } leaves the following block running regardless of the condition.

if (x = 5) assigns 5 and then tests its truthiness. It changes x and passes because 5 is truthy. To compare, use if (x === 5).

Choose a value with a conditional expression

The conditional, or ternary, operator returns one of two values:

const age = 17;
const status = age >= 18 ? "adult" : "minor";
console.log(status); // minor

The form is condition ? valueIfTrue : valueIfFalse. Use it for a short choice inside an assignment or template literal. Use if/else for branches of statements. Deeply nested conditional expressions make the choices hard to follow.

Match fixed choices with switch

const day = "Sat";
let kind;
switch (day) {
  case "Sat":
  case "Sun":
    kind = "weekend";
    break;
  default:
    kind = "weekday";
}

switch compares the value strictly with its case labels. Both weekend labels reach the same assignment. break exits the switch; default handles a value with no matching case. switch ("2") does not match case 2: because the types differ.

After a match, execution continues through later cases until a break or the end. This fall-through can be deliberate, as in stacked labels, or accidental. If case 2 adds a word and lacks a break before case 3 adds another, both additions run. A case label is an entry point, not a fresh condition tested after every statement.

A program can fail before it starts, stop during execution, or finish with the wrong result. Identify which happened before changing code. The console gives evidence about errors, while labeled logs reveal values in code that runs.

Separate three kinds of problem

A syntax error in one script does not undo a different script that already ran. An unhandled runtime exception stops the current execution at the failing statement.

Read the complete message

A console entry such as Uncaught ReferenceError: totl is not defined gives the error type and the failing name. "Uncaught" means the exception was not handled. A location such as app.js:2 points to the file and line; clicking it opens that code.

let total = 0;
total = totl + 5;
console.log(total);

Line 1 runs. On line 2, JavaScript cannot read totl, so it never completes that assignment or reaches the final log. Correcting the misspelling to total makes the script print 5.

Common syntax messages mention a missing ), an unexpected token, or an invalid token. In console.log("hi";, the closing parenthesis is absent. In if (x > 3 {, the condition lacks its closing parenthesis. The reported line is where the engine noticed the problem; inspect just above it too for an unclosed quote or delimiter.

Use the type to narrow the cause

A ReferenceError points to a name that cannot be accessed: a typo, a scope problem, or a read before initialization. A TypeError means the operation does not fit the value, such as "abc".length(), null.trim(), or a reassignment to a const. A RangeError can come from an unsupported argument, such as (1.5).toFixed(101).

Error wording can differ by browser. The type and the value involved are more useful than memorizing the whole sentence. Fix the first relevant error and run again, because later messages may follow from the same cause.

Trace a logic error

For a wrong average, log the sum and result separately:

const sum = 72 + 85 + 90;
const average = 72 + 85 + 90 / 3;
console.log("sum:", sum);         // 247
console.log("average:", average); // 187

The correct sum narrows the fault to the division step. Change the calculation to sum / 3, which gives 82.33333333333333. When addition unexpectedly joins digits, also log types: console.log("price:", price, typeof price);. Find the first value that differs from your expectation.

Use console.warn() or console.error() to make your own diagnostic messages stand out. Check the console level filters if a log seems absent. A 404 means a resource was not found, so check the script path; other loading failures need their full message. A missing startup log can also reflect a filter or a syntax error.

Reproduce the problem, read the first error, test one likely cause with a small change or log, then rerun and check the expected result. Remove temporary logs when the bug is fixed.

A debugger lets you pause a running script and inspect the values at that exact moment. Use the Sources panel in Chrome or Edge, or the Debugger panel in Firefox. This is especially helpful when a wrong result depends on several earlier operations.

Pause before the line runs

Open the script in Sources and click a line number to set a breakpoint. Execution pauses before that line runs. If the code runs during page loading, reload the page after setting the breakpoint. Merely setting one does not rerun code that already finished.

You can also write debugger; in the script. With an active debugger it pauses execution; without one it has no effect. Remove this statement before publishing the code.

Choose the next action

Some built-in calls have no JavaScript source you can step into. Step over is useful when you want the call’s result without following its internal work.

While paused, hover over a name to inspect it, read local values in Scope, or add an expression to Watch. Watch entries such as typeof price and total > 100 are reevaluated as you step. The console can also evaluate expressions using the paused scope.

Inspect a misleading total

Free shipping should start at 50, but this code grants it for a subtotal of 45 plus 4 shipping:

const subtotal = "45";
const shipping = 4;
const total = subtotal + shipping;
if (total >= 50) {
  console.log("Free shipping");
}

Set a breakpoint on the if line and reload. The assignment has already run. Scope shows subtotal as the string "45" and total as "454". A Watch entry typeof total reports "string". The comparison converts "454" to a number, so total >= 50 passes.

The fault is in the addition, before the comparison. Change the saved calculation to const total = Number(subtotal) + shipping;. Reload again. The total is now the number 49, and the condition is false. If you pause on the assignment instead, it has not run yet: step over it before inspecting the initialized total.

Pause only where useful

A conditional breakpoint pauses only when its expression is true, such as total > 100. Right-click the line number to add one. A logpoint prints a message each time its line runs without pausing or editing the script. Exception breakpoints pause where an exception is thrown, so you can inspect values at the failure.

Stepping through an else if chain reveals which branch is reached and which earlier condition prevents later checks. Use logs for a few known values and the debugger when order or several live values matter. Make the final correction in the saved project code: an experimental change in the browser is not a lasting edit to your project. Rerun the original failing case and check the corrected result.