Chapter Introduction and Learning Objectives

Learning Objectives

By the end of this chapter, you should be able to:

1. 1Explain what a value is and identify the basic kinds of values JavaScript works with.
2. 2Declare variables using let and const, and explain when to use each.
3. 3Distinguish strings, numbers, and Booleans, and use typeof to check a value's type.
4. 4Write expressions using arithmetic, string concatenation, and assignment operators.
5. 5Explain operator precedence and use parentheses to control the order of evaluation.
6. 6Build strings with template literals and embed expressions inside them using ${}.
7. 7Define a function using the function keyword, a parameter list, and a body.
8. 8Call a function and explain the difference between defining a function and running it.
9. 9Explain parameters, arguments, and return values, and write functions that return a value.
10. 10Apply naming conventions such as camelCase and write readable, well-commented code.
11. 11Trace a small JavaScript program by hand, step by step, and correctly predict its output.

Sections at a Glance

• 20.1Values in JavaScriptLiterals; strings, numbers, and Booleans as values; why values matter in web development
• 20.2Variables with let and constDeclaring and reassigning variables; choosing let versus const; avoiding var
• 20.3Strings, Numbers, and BooleansData types; quotes and escaping; numbers versus numeric strings; the typeof operator
• 20.4Expressions and OperatorsArithmetic operators; string concatenation; assignment shorthand; increment and decrement; operator precedence
• 20.5Template LiteralsBackticks and ${} interpolation; multi-line strings; building HTML fragments from data
• 20.6Defining FunctionsThe function keyword; the function body; defining a function versus running it
• 20.7Calling FunctionsCalling syntax; reusing a function many times; a caution about hoisting
• 20.8Parameters and Return ValuesParameters versus arguments; multiple parameters; the return statement; undefined; early return
• 20.9Naming and ReadabilityNaming variables and functions; camelCase; comments; indentation
• 20.10Tracing Small JavaScript ProgramsReading code step by step; trace tables; five worked tracing examples

Values in JavaScript

"Hello, world"
42
3.14
true
false

console.log(42);
console.log("Hello, world");
console.log(true);

Why Values Matter

Variables with let and const

Declaring a Variable with let

let greeting = "Hello, visitor";
let pageCount = 5;
let siteIsOpen = true;

console.log(greeting);
console.log(pageCount);
console.log(siteIsOpen);

Changing a Variable with let

let score = 0;
console.log(score);

score = 10;
console.log(score);

score = 25;
console.log(score);

Declaring a Constant with const

const siteName = "Learning Hub";
const maxLoginAttempts = 3;

const siteName = "Learning Hub";
siteName = "New Name";  // Error: Assignment to constant variable.

const siteName = "Learning Hub";     // Will not change
const maxItems = 10;                  // Will not change

let currentCount = 0;                 // Will change as items are added
let menuIsOpen = false;               // Will change when user clicks

Strings, Numbers, and Booleans

Strings

let firstName = "Alex";
let lastName = 'Rivera';

let message = "Your score is 42 out of 100.";
let address = "123 Main St., Unit 4B";

let note = "She said, \"Good morning!\"";

let note = 'She said, "Good morning!"';

Numbers

let itemCount = 7;
let price = 12.99;
let temperature = -4;
let percentage = 0.75;

let a = 42;        // This is the number 42
let b = "42";      // This is the string "42" — the text characters 4 and 2

Booleans

let isLoggedIn = false;
let hasCompletedForm = true;
let menuIsVisible = false;

Checking Types with typeof

console.log(typeof "Hello");   // string
console.log(typeof 42);        // number
console.log(typeof true);      // boolean

Expressions and Operators

Arithmetic Operators

let a = 12;
let b = 5;

console.log(a + b);   // 17
console.log(a - b);   // 7
console.log(a * b);   // 60
console.log(a / b);   // 2.4
console.log(a % b);   // 2

String Concatenation

let first = "Web";
let second = "Development";
let combined = first + " " + second;

console.log(combined);   // Web Development

console.log("The total is: " + 42);   // The total is: 42
console.log(10 + "5");                 // 105

Assignment Operators

let count = 0;

count = count + 1;   // Add 1
count += 1;          // Same thing, shorter

count = count * 2;   // Multiply by 2
count *= 2;          // Same thing, shorter

Increment and Decrement

let count = 5;

count++;   // count is now 6
count--;   // count is now 5 again

console.log(count);   // 5

Operator Precedence

console.log(2 + 3 * 4);     // 14, not 20 — multiplication first
console.log((2 + 3) * 4);   // 20 — parentheses first

Template Literals

let userName = "Alex";
let score = 95;

let message = `Hello, ${userName}. Your score is ${score}.`;
console.log(message);

let message = "Hello, " + userName + ". Your score is " + score + ".";

Expressions Inside Template Literals

let width = 8;
let height = 5;

console.log(`The area is ${width * height} square units.`);

Multi-Line Strings

let poem = `Roses are red,
Violets are blue,
JavaScript is useful,
And so are you.`;

console.log(poem);

Template Literals and the DOM

let title = "Beginner Guide";
let author = "J. Reyes";

let cardHTML = `<div class="card">
  <h2>${title}</h2>
  <p>By ${author}</p>
</div>`;

Defining Functions

The Basic Function Definition

function greet() {
  console.log("Hello, visitor!");
  console.log("Welcome to the site.");
}

The Function Body

function displayPageTitle() {
  console.log("Page: About Us");
  console.log("Section: Team");
  console.log("Status: Live");
}

Calling Functions

greet();

function greet() {
  console.log("Hello, visitor!");
  console.log("Welcome to the site.");
}

greet();    // Calls the function — runs both console.log statements
greet();    // Calls it again — runs them a second time
greet();    // Calls it a third time

Order of Definition and Calls

// Define first
function showWelcome() {
  console.log("Welcome to the Learning Hub.");
}

// Then call
showWelcome();

Parameters and Return Values

Parameters

function greet(name) {
  console.log(`Hello, ${name}! Welcome to the site.`);
}

greet("Alex");
greet("Jordan");
greet("Sam");

Parameters Versus Arguments

Multiple Parameters

function describePage(title, author, year) {
  console.log(`Title: ${title}`);
  console.log(`Author: ${author}`);
  console.log(`Year: ${year}`);
}

describePage("HTML Fundamentals", "L. Torres", 2024);
describePage("CSS Layout Guide", "M. Park", 2023);

Return Values

function add(a, b) {
  return a + b;
}

let result = add(5, 3);
console.log(result);   // 8

let total = add(10, 20) + add(5, 5);
console.log(total);   // 40

function formatTitle(title, section) {
  return `${section}: ${title}`;
}

let pageTitle = formatTitle("Introduction to HTML", "Chapter 5");
console.log(pageTitle);   // Chapter 5: Introduction to HTML

Functions Without Return

function sayHello() {
  console.log("Hello!");
}

let x = sayHello();
console.log(x);   // undefined

Early Return

function checkLength(text) {
  if (text.length === 0) {
    return "Empty";
  }
  return "Has content";
}

console.log(checkLength(""));        // Empty
console.log(checkLength("Hello"));   // Has content

Naming and Readability

Naming Variables

let x = "Alex";
let n = 42;
let f = true;

let userName = "Alex";
let questionCount = 42;
let formIsValid = true;

Naming Functions

function data(title, year) { ... }
function thing() { ... }

function formatCitation(title, year) { ... }
function displayWelcomeMessage() { ... }

camelCase

let pageTitle = "Home";
let itemCount = 0;
let menuIsVisible = false;

function formatPageTitle(title) { ... }
function countVisibleItems() { ... }
function toggleNavMenu() { ... }

const MAX_RESULTS = 20;
const DEFAULT_COLOR = "#333333";

Comments

// Single-line comment

/*
  Multi-line comment.
  Use for longer explanations.
*/

function calculateDiscount(price, rate) {
  // rate is a decimal, e.g., 0.1 for 10%
  return price * rate;
}

// Not useful:
let x = x + 1;   // adds 1 to x

// Useful:
let retryCount = retryCount + 1;   // Track how many times the user has tried

Indentation

function gradeScore(score) {
  if (score >= 90) {
    return "Excellent";
  } else if (score >= 70) {
    return "Passing";
  } else {
    return "Needs improvement";
  }
}

Tracing Small JavaScript Programs

let count = 0;
count = count + 5;
count = count * 2;
count = count - 3;
console.log(count);

function double(n) {
  return n * 2;
}

let a = double(4);
let b = double(a);
console.log(b);

function formatLabel(item, count) {
  return `${item}: ${count} available`;
}

let label = formatLabel("Pencils", 12);
console.log(label);

function add(a, b) {
  return a + b;
}

function multiply(a, b) {
  return a * b;
}

let x = add(3, 4);
let y = multiply(x, 2);
let z = add(y, 1);

console.log(x);
console.log(y);
console.log(z);

function buildGreeting(hour, name) {
  let period = "morning";
  if (hour >= 12) {
    period = "afternoon";
  }
  return `Good ${period}, ${name}.`;
}

let message = buildGreeting(14, "Jordan");
console.log(message);

Building a Page Summary Function

Planning the Function

Writing the Function

function buildPageSummary(title, author, wordCount) {
  return `"${title}" by ${author} — ${wordCount} words`;
}

Testing the Function

let summary1 = buildPageSummary("Introduction to CSS", "L. Torres", 1240);
let summary2 = buildPageSummary("Flexbox Layout", "M. Park", 980);
let summary3 = buildPageSummary("Responsive Design", "A. Reyes", 1550);

console.log(summary1);
console.log(summary2);
console.log(summary3);

Extending the Function

function buildPageSummary(title, author, wordCount) {
  let lengthNote = "";
  if (wordCount > 1000) {
    lengthNote = " (long read)";
  }
  return `"${title}" by ${author} — ${wordCount} words${lengthNote}`;
}

console.log(buildPageSummary("Introduction to CSS", "L. Torres", 1240));
console.log(buildPageSummary("Quick Start Guide", "J. Kim", 350));

Chapter Summary

• Section 20.1A value is a piece of data — text, a number, true/false, or nothing at all. Values written directly in code are called literals. Values are the foundation everything else in JavaScript builds on.
• Section 20.2A variable is a named container for a value. Use const for values that should not change and let for values that will change. Avoid var in modern JavaScript.
• Section 20.3The three core data types for beginners are strings (text), numbers, and Booleans (true/false). The typeof operator reveals a value's type — useful for debugging.
• Section 20.4Expressions produce values using arithmetic operators, string concatenation, assignment shorthand, and increment/decrement. Operator precedence follows mathematical rules; parentheses make order explicit.
• Section 20.5Template literals, written with backticks, embed expressions using ${} and support multi-line strings. They are the standard way to build readable strings from data.
• Section 20.6A function is a named, reusable block of code defined with the function keyword, a name, parentheses, and a body. Defining a function does not run it.
• Section 20.7A function runs only when it is called by name with parentheses. The same function can be called many times, each time running its body again.
• Section 20.8Parameters are named placeholders that receive arguments when a function is called. The return statement sends a value back to the caller; without it, a function returns undefined.
• Section 20.9Clear, descriptive names — written in camelCase — and thoughtful comments make code readable, maintainable, and easier to debug.
• Section 20.10Tracing means reading code step by step and predicting its output. It is a core skill for understanding programs and diagnosing bugs.

Key Terms

Common Mistakes

These are the errors beginners encounter most often with variables, values, expressions, and functions.

// Wrong intention:
if (score = 100) { ... }    // This assigns 100 to score, always true

// Correct:
if (score === 100) { ... }  // This compares score to 100

let name = Alex;   // Error: JavaScript thinks Alex is a variable name
let name = "Alex"; // Correct

const siteTitle = "Learning Hub";
siteTitle = "New Title";   // Error: Assignment to constant variable

greet();   // Works with function declarations due to hoisting

const greet = function() {   // Function expression — NOT hoisted
  console.log("Hello");
};

function greet(name {        // Missing closing parenthesis — syntax error
  console.log("Hello");
}

let a = "5";
let b = "3";
console.log(a + b);   // "53" — string concatenation, not addition

function add(a, b) {
  a + b;   // Calculates but does not return the result
}

let result = add(5, 3);
console.log(result);   // undefined

Evaluate each expression. Write what value it produces.

1. 5 + 3
2. 10 - 4 * 2
3. (10 - 4) * 2
4. "Hello" + " " + "World"
5. 12 % 5
6. typeof "banana"
7. typeof 99
8. typeof true

For each of the following, identify whether the result is a string, number, or Boolean:

9. "42"
10. 42
11. false
12. "false"
13. 3.14
14. "3.14"

Trace each program and write its complete output.

function square(n) {
  return n * n;
}

let a = square(3);
let b = square(5);
let c = square(a);

console.log(a);
console.log(b);
console.log(c);

function makeFull(first, last) {
  return first + " " + last;
}

let name1 = makeFull("Alex", "Rivera");
let name2 = makeFull("Jordan", "Kim");

console.log(name1);
console.log(`Hello, ${name2}!`);

let x = 10;
x += 5;
x *= 2;
x -= 7;

console.log(x);

function describe(animal, sound) {
  return `The ${animal} says ${sound}.`;
}

console.log(describe("dog", "woof"));
console.log(describe("cat", "meow"));
console.log(describe("duck", "quack"));

For each block of code, write what you think will appear in the console. Then open your browser console and test it.

let a = 4;
let b = a + 3;
let c = b * 2;
console.log(c);

function greet(name) {
  return `Hello, ${name}!`;
}

let msg = greet("Sam");
console.log(msg);
console.log(msg.length);

function isLong(text) {
  return text.length > 10;
}

console.log(isLong("hi"));
console.log(isLong("JavaScript is interesting"));

let count = 0;
count++;
count++;
count++;
count--;
console.log(count);

Each block of code contains one or more errors. Identify the error and write the corrected version.

let userName = Alex;
console.log(userName);

const score = 80;
score = 95;
console.log(score);

function add(a, b) {
  a + b;
}

let result = add(3, 4);
console.log(result);

function greet(name {
  console.log("Hello, " + name);
}
greet("Alex");

let price = "20";
let tax = "5";
let total = price + tax;
console.log(total);

Write each function in your text editor, link your script file, and test in the console.

1. Write a function called greetUser that takes a name parameter and returns the string "Welcome, [name]!".
2. Write a function called calculateArea that takes width and height as parameters and returns their product.
3. Write a function called formatPrice that takes a price (number) and returns it as a formatted string like "Price: $12.99". Use a template literal.
4. Write a function called fullName that takes firstName and lastName and returns the full name as a single string with a space between them.
5. Write a function called isShort that takes a string and returns true if its length is 5 or fewer characters, and false otherwise.
6. Write a variable itemCount starting at 0. Write a function called addItem that takes a number and returns the sum of itemCount and that number. Call addItem(5) three times and log each result.
7. Use a template literal to build a string that displays this format: "[Title] — [Author] ([Year])". Use three variables and a function.

Setup

Step 1: Page Information Variables

const siteName = "Student Learning Site";
const currentPage = "Resources";
const resourceCount = 12;

Step 2: A Greeting Function

function timeGreeting(hour) {
  if (hour < 12) {
    return "Good morning";
  } else if (hour < 18) {
    return "Good afternoon";
  } else {
    return "Good evening";
  }
}

Step 3: A Page Summary Function

function pageSummary(page, count) {
  return `${page} — ${count} items available`;
}

Step 4: Log Results to the Console

let currentHour = 14;
let greeting = timeGreeting(currentHour);

console.log(`${greeting}. Welcome to ${siteName}.`);
console.log(pageSummary(currentPage, resourceCount));

Step 5: Open the Page in Your Browser

Extension

function timeGreeting(hour, name) {
  let period = "morning";
  if (hour >= 12 && hour < 18) {
    period = "afternoon";
  } else if (hour >= 18) {
    period = "evening";
  }
  return `Good ${period}, ${name}`;
}

console.log(timeGreeting(14, "Alex"));

Accessibility Note

1. What is the difference between a value and a variable?
2. When should you use const instead of let? Give an example of each.
3. What are the three main data types introduced in this chapter?
4. What is the difference between the string "42" and the number 42? Why does it matter?
5. What is concatenation? Write an example using the + operator.
6. What is a template literal? Rewrite this expression using a template literal: "Hello, " + name + ". You have " + count + " messages."
7. What is the difference between defining a function and calling a function?
8. What is a parameter? What is an argument? How are they related?
9. What does the return statement do? What happens if a function has no return statement?
10. Trace this program and write its output:

    function triple(n) {
      return n * 3;
    }
    
    let a = 4;
    let b = triple(a);
    let c = triple(b) - 5;
    console.log(a);
    console.log(b);
    console.log(c);

11. What is wrong with this code?

    const maxItems = 10;
    maxItems = 20;

12. What is the output of this expression, and why?

    console.log("3" + 4);

13. Why is naming variables clearly important? Rewrite these with better names:

    let x = "A. Rivera";
    let y = 42;
    let z = true;

14. What does typeof do? Write three examples using different data types.
15. What does it mean to trace a program? Why is tracing a useful skill?