Work with JavaScript Values and Variables

JavaScript source for this tutorial belongs in a plain-text .js file. Keep index.html and app.js together in the same local folder.

The <script> element in index.html connects the page to app.js. Because this external classic script has defer, the browser can parse the HTML while it downloads the script, then runs the script after HTML parsing finishes.

console.log(...) sends a message to the browser’s Console. It does not add visible text to the page.

Create a folder for this tutorial. Inside it, create two plain-text files named exactly index.html and app.js. Replace the complete contents of each file with the matching code below. Save both files.

Then open index.html in your browser, or refresh it if it is already open. Open the browser developer tools and select the Console panel to inspect the logged message.

Complete runnable replacement — index.html. Replace the entire contents of index.html with this file.

Complete runnable replacement — app.js. Replace the entire contents of app.js with this file, then save it.

An expression is code that produces a value. A literal is a simple expression written directly in code: "Notebook" produces a string value, and 12 produces a number value.

A statement is an instruction in the script. In console.log("Notebook");, the complete line is a logging statement, while "Notebook" is the expression inside it. In this tutorial, end each statement with a semicolon.

Complete runnable replacement — app.js

A variable gives a value a readable name so the script can use that value later. A declaration introduces the name; initialization supplies its first value.

In const unitPrice = 12;, unitPrice is the name and 12 is the initial value. Use descriptive lowerCamelCase names such as unitPrice and productName. Names are case-sensitive, so productName and productname are different names.

Example — app.js fragment

Choose the declaration keyword from whether the variable will need reassignment:

• Use const when the binding will keep the same assigned value. It must be initialized on its declaration, and it prevents later reassignment of that binding.
• Use let when the variable needs a new assigned value later.

For this order, the product name, unit price, and shipping fee stay the same. The quantity changes from 2 to 3, so quantity uses let. Prefer const whenever reassignment is unnecessary.

app.js — complete runnable replacement

Statements run in source order. The first console.log reads the initialized value, 2. After quantity = 3;, the second console.log reads the new value, 3.

Replace the contents of your local app.js with the code above, save it, refresh index.html, and inspect the Console.

A primitive value is a basic value used directly in JavaScript. In this notebook-order example, you will work with five everyday kinds:

• numbers, such as 12
• strings, such as "Notebook"
• booleans, true or false
• null for an intentionally absent value
• undefined when a declared variable has no supplied value

Quotes matter: 12 is a number, while "12" is text—a string.

null and undefined both describe an absent value, but they communicate different situations.

Use null when absence is intentional: discountCode currently has no code. Use a let declaration with no initializer when a variable exists but no value was supplied: deliveryNote is therefore undefined.

That differs from a name that was never declared at all: in that case, there is no variable with that name.

Example

typeof is an operator: it evaluates an operand and produces a string that describes that operand’s current value type.

Use it inside a logging statement:

console.log(typeof variableName);

console.log displays the string returned by typeof in the Console. It does not add content to the web page.

Replace the contents of app.js, save the file, refresh index.html, and inspect the Console.

Arithmetic expressions combine numeric values with operators and produce a number. JavaScript uses + for addition, - for subtraction, * for multiplication, / for division, and % for the remainder after division.

Multiplication, division, and remainder happen before addition and subtraction. Operators at the same precedence level run from left to right: 20 / 5 * 2 becomes 4 * 2, so it produces 8. Parentheses make an intended group explicit.

For a notebook order, multiply the unit price by the quantity, then add shipping. The parentheses are not required by JavaScript for this particular formula, but they clearly show that the item subtotal is calculated before shipping is added.

A calculated value is stored when its declaration executes. If you later reassign an input, JavaScript does not go back and update an earlier calculated value automatically. Calculate again when you need a new total.

Replace the contents of app.js with this complete file. Save it, refresh index.html, and inspect the Console.

The + operator can add numbers or join text. When both operands are numbers, it performs numeric addition. When you combine a string with a number, the result is text—a concatenated string.

For a readable message, include every space and punctuation mark deliberately. JavaScript does not add a space between pieces for you.

Example

A template literal is often clearer for a message with several values. It uses backticks instead of ordinary double quotes.

Inside a template literal, ${...} inserts the value produced by an expression. Text outside a placeholder stays exactly as written, including spaces, commas, dollar signs, and periods.

Replace the contents of app.js with this complete runnable file. Save it, refresh index.html, and inspect the Console.

Use the two local files you created earlier. Keep index.html connected to app.js with the deferred classic script. Then replace the entire contents of app.js with the runnable script below.

This first run uses quantity 2. The total is calculated when the total statement runs, and console.log sends two different results to the Console: a readable order summary and a type description.

Now verify both quantities in your own local file.

1. Run the baseline version again and confirm that quantity 2 produces total $29.
2. Insert the reassignment below immediately before the const total calculation.
3. Save app.js, refresh index.html, and inspect the Console again.

Placement matters: a calculated value does not automatically change when an input changes later. With the reassignment before calculation, the new summary total is $41. The type inspection still reports number.

Example