Mathematical Expressions in JavaScript

1. Reference Guide

Key Vocabulary

Term	Definition	Example
Expression	Values, variables, and operators that JavaScript evaluates to a value	`2 + 3` evaluates to `5`
Operator	A symbol or keyword that performs an operation	`*` multiplies
Operand	A value an operator acts on	In `4 * 3`, `4` and `3` are operands
Variable	A named place to store a value used in an expression	`const price = 12`
Precedence	The order JavaScript uses when evaluating operators	`2 + 3 * 4` is `14`
Remainder	What remains after division; returned by `%`	`7 % 3` is `1`
Comparison	An operation that evaluates to `true` or `false`	`5 >= 2` is `true`

Key Mathematical Operators

Operation	JavaScript symbol	Example	Result	Example use case
Addition	`+`	`2 + 3`	`5`	`console.log(2 + 3);`
Subtraction	`-`	`5 - 2`	`3`	`console.log(5 - 2);`
Multiplication	`*`	`4 * 3`	`12`	`console.log(4 * 3);`
Division	`/`	`10 / 2`	`5`	`console.log(10 / 2);`
Remainder (modulo)	`%`	`7 % 3`	`1`	`console.log(7 % 3);`
Exponentiation	`**`	`2 ** 3`	`8`	`console.log(2 ** 3);`
Grouping	`( )`	`(2 + 3) * 4`	`20`	`console.log((2 + 3) * 4);`

In JavaScript, / can produce a decimal: 7 / 2 is 3.5. % returns a remainder; it does not round or perform integer division. Use Math.floor(7 / 2) when you specifically need the whole-number quotient rounded down.

Variables in Expressions

Use const when a name should keep the same binding, and let when you will assign it a new value. Both can be operands in expressions.

const width = 4;
let height = 3;
const area = width * height;
console.log(area); // 12
height = height + 1;
console.log(width * height); // 16

Comparisons

Meaning	Operator	Example	Result
Greater than	`>`	`7 > 3`	`true`
Less than	`<`	`2 < 5`	`true`
Equal value and type	`===`	`3 === 3`	`true`
Not equal value or type	`!==`	`3 !== 4`	`true`
Less than or equal	`<=`	`4 <= 4`	`true`
Greater than or equal	`>=`	`5 >= 2`	`true`

Comparisons produce booleans. Prefer === and !== for equality checks. A single = assigns a value; it does not compare two values. JavaScript also has == and !=, which allow type conversion, so this lesson uses strict comparisons.

Order of Operations

JavaScript evaluates parentheses first, then exponentiation, then multiplication/division/remainder, then addition/subtraction. Operators at the same level are generally evaluated left to right (exponentiation has its own right-to-left rule).

Expression	Evaluation	Result
`2 + 3 * 4`	`2 + 12`	`14`
`(2 + 3) * 4`	`5 * 4`	`20`
`18 / 3 * 2`	`6 * 2`	`12`
`2 3 2`	`2 ** 9`	`512`

Use parentheses when they make your intended grouping easier to see, even when precedence would already give the same result.

Common Patterns

Even or odd: number % 2 === 0 is true when number is even.
Scale a recipe: ingredientAmount * servings / originalServings.
Area of a rectangle: width * height.
Square a value: value ** 2.
Check a range: score >= 0 && score <= 100.

Quick Check

Predict the result before running the practice examples: What are 9 % 4, 3 + 2 * 5, and (3 + 2) * 5?

2. LxD Cycle Process

Empathize: Learners often recognize familiar arithmetic symbols but may confuse a mathematical expression with a JavaScript expression. For example, multiplication is written *, exponentiation is **, and % gives a remainder. A missing pair of parentheses can also change the result.

Define: The learning need is to translate arithmetic into valid JavaScript, predict its value using precedence, and use comparisons to make a true/false decision.

Ideate: Use a compact operator reference, visible step-by-step evaluations, editable CodeRunner examples, and short challenges that change one expression at a time. Sass-backed OCS grids keep the reference cards responsive and consistent with the site theme.

Prototype: Learners edit and run examples for arithmetic, precedence, variables, and comparisons. They record a prediction before running each example.

Test and refine: Compare the prediction with the runner output. If the result differs, identify the operator or grouping that caused it, revise the expression, and run it again.

3. Lesson Plan

Learning Objective: Write and evaluate JavaScript mathematical expressions using arithmetic operators, variables, parentheses, and comparison operators.

Success Criteria: You can:

Match +, -, *, /, %, and ** to their operations.
Predict an expression’s value using operator precedence and parentheses.
Use let or const values in an expression and explain the result.
Write a comparison that evaluates to true or false, using === when checking equality.

Materials: This notebook, a browser with the OCS CodeRunner enabled, and scratch space for predictions.

Sequence (about 35 minutes):

Time	Activity	Evidence of learning
5 min	Read the reference guide and predict the Quick Check	Written predictions
8 min	Run the simple operator examples	Correct outputs and operator explanations
8 min	Trace precedence and edit grouped expressions	Before/after predictions
7 min	Work through variables and comparison examples	Runner output and verbal explanation
7 min	Complete the Popcorn Hacks and MCQ check	Challenge results and score

Teaching move: Ask learners to state a prediction before pressing Run. When an answer is unexpected, trace one operation at a time and use parentheses to make the intended grouping explicit.

4. Code Examples

These examples use the repository’s JavaScript CodeRunner. Predict the output, press Run, then explain why each result appears. Edit the starter code when a challenge asks you to change it.

A. Simple: Arithmetic Operators

The runner displays each calculated value in its output panel. Notice that JavaScript uses * for multiplication and ** for exponentiation.

Code Runner Challenge

A. Arithmetic: change one operand in each line and predict how the output changes. Keep the six different operators represented.

Lines: 1 Characters: 0

Output

Click "Run" in code control panel to see output ...

B. Intermediate: Parentheses and Precedence

Multiplication, division, and remainder are evaluated before addition and subtraction. Parentheses make a different grouping explicit.

Try it: predict the first two outputs, then change the parentheses in the third line and explain the difference.

Code Runner Challenge

B. Precedence: change the grouped expression so it evaluates to 25. Do not hard-code the answer.

Lines: 1 Characters: 0

Output

Click "Run" in code control panel to see output ...

C. Complex: Variables and Comparisons

A variable can store an input value or a calculated result. A comparison then evaluates to true or false, which can be used in an if statement.

Try it: change score to 72, then to 101. Predict which conditions are true before running.

Code Runner Challenge

C. Variables and comparisons: change score and passingScore; add one comparison that checks whether score is at most 100.

Lines: 1 Characters: 0

Output

Click "Run" in code control panel to see output ...

D. Mini Application: Rectangle and Even/Odd Checker

A short program can combine input values, arithmetic expressions, remainder, and comparisons. Here the dimensions are fixed starter values; edit them to explore the expressions.

Try it: make the rectangle’s area 48, then make numberToCheck odd.

Code Runner Challenge

D. Mini application: change the dimensions and number. Add an output line that reports whether the perimeter is at least 20.

Lines: 1 Characters: 0

Output

Click "Run" in code control panel to see output ...

5. Hacks & Practice Tasks

Submit Details

Save your completed notebook in your course’s assigned notebook or homework area.
Keep the prediction and explanation for each challenge in a markdown cell.
Run the final code examples and capture the outputs requested by your teacher.
Submit the notebook link using your class’s normal submission process.

Popcorn Hack 1 (In-Class): Operator Match

Task: In Runner A, calculate 9 + 6, 9 - 6, 9 * 6, 9 / 6, 9 % 6, and 9 ** 2. Before running it, write down the six expected values. Explain why division and remainder do not give the same kind of result.

Popcorn Hack 2 (In-Class): Make the Grouping Work

Task: In Runner B, write an expression using the numbers 8, 2, and 3 that evaluates to 30. Use each number once and parentheses. Then write a different expression using those same numbers that evaluates to 14.

Goal: demonstrate that grouping can change the order of operations without changing the numbers.

MCQ Check

Answer each question, then check your responses. The check gives a score and brief explanations.

Mathematical Expressions Check

1. What is 11 % 4? 2. What is 3 + 2 * 5? 3. Which operator checks equal value and type? 4. What does 2 ** 4 evaluate to?

Homework Hack: Expression Calculator

Task: Complete the starter code so it calculates a subtotal, applies a discount, and checks whether the final price is within a budget. Use variables and expressions rather than hard-coding the answers.

Requirements:

subtotal is itemPrice * quantity.
discount is subtotal * discountRate.
total is subtotal - discount.
withinBudget compares total with budget.
Print all four values with descriptive labels.

Start with itemPrice = 12, quantity = 3, discountRate = 0.25, and budget = 30. Then change one input and verify that the outputs update.

Code Runner Challenge

Homework Hack: fill in each expression, run it, and then change quantity to 4. The program should calculate the new values without hard-coded outputs.

Lines: 1 Characters: 0

Output

Click "Run" in code control panel to see output ...

Grading Plan (1 Point Total)

Part	Points	What earns the points
Operator practice	0.15	Correctly evaluates the six arithmetic operators and explains `%`
Precedence hack	0.15	Uses parentheses and predicts both expression results
Variables and comparisons	0.15	Produces correct boolean comparisons and uses strict equality appropriately
MCQ check	0.15	Records answers and reaches at least 3/4 correct, with corrections noted
Homework calculator	0.30	Calculates subtotal, discount, total, and budget comparison from variables
Explanation and evidence	0.10	Includes predictions and a short explanation of one changed output
Total	1.00

Completion checklist:

I can explain what each of +, -, *, /, %, and ** does.
I can predict an expression using precedence and parentheses.
My variables feed into calculations rather than replacing calculations with fixed answers.
I understand that = assigns and === compares.
My homework runner shows the expected calculated values.

6. Lesson Revisions

Revision made in this draft: The lesson keeps the requested mathematical-expression focus and uses the grid lesson’s sequence as a model: reference first, guided examples, increasingly complex practice, a check for understanding, and a final application. It adds JavaScript-specific clarifications for decimal division, remainder, exponentiation, strict equality, and assignment.

Next revision: After classroom use, adjust the pacing, vocabulary, and challenge difficulty based on learner questions and completion evidence.

7. Feedback Evidence

Feedback received: No classroom feedback has been collected for this lesson yet.

Evidence to collect: Ask learners which operator or precedence step was hardest, review prediction-versus-output explanations, and note where learners confuse =, ==, and ===. Use those observations to revise the reference table and practice sequence.

8. References

Open Coding Society. OCS Grid Grammar lesson. Used as a structural and Sass-backed layout example; the lesson content here is newly written for mathematical expressions.
Open Coding Society. Pages repository. Notebook structure, frontmatter conventions, Sass grid classes, and JavaScript CodeRunner include pattern.
Open Coding Society. _includes/runners/code.html and _includes/runners/ui.html in the Pages repository. Runner integration conventions.
Open Coding Society. Screenshot provided with the request, “Key Mathematical Operators” and “Variables in Expressions.” Content reference for the operator set and variables topic.
College Board. AP Computer Science Principles course and exam description. Course context for programming and algorithmic reasoning.
MDN Web Docs. Expressions and operators. JavaScript operator behavior and precedence reference.

Need to update a submission later? Open the submissions dashboard.