Types & Operators

Lesson material made by Jason. Can be found on GitHub.

A beginner lesson companion for data types, casting, NaN, arithmetic operators, assignment operators, and mixed-type surprises.

Today we focus on:
  • Types and casting
  • Number(), String(), and NaN
  • Arithmetic and assignment operators

Number

Numbers can be used for arithmetic like 1 + 1.

String

Strings are text and can be concatenated like "Hello " + "World".

Operator

A symbol that tells JavaScript to perform an operation.

1

Data Types

Every piece of data in JavaScript has a type.

Example

String"1"Number1String"Hello"

Code

console.log(typeof "1")
console.log(typeof 1)

Notes

  • Types tell JavaScript how data can be used.
  • "1" is text.
  • 1 is a number.
2

String Concatenation

Adding strings joins them together.

Example

"1" + "1"

Result: "11"

"Hello " + "World"

Result: "Hello World"

Code

console.log("1" + "1")
console.log("Hello " + "World")

Notes

  • + adds numbers.
  • + concatenates strings.
  • The type changes what the operator does.
3

Demo: Bank Deposit Bug

The bug happens because the balance on the page is text, not a number.

Example

Goal: The balance starts at 1000. After depositing 100, students probably expect 1100.

Balance shown on pageid="balance"
1000
id="deposit"

How the HTML connects to the JavaScript

id="balance" is the balance number JavaScript reads and changes.

id="deposit" is the button JavaScript listens to for a click.

Expected1000 + 100 = 1100
Buggy result"1000" + 100 = "1000100"
Click Buggy Deposit first, then Reset and try Fixed Deposit.

Code

HTML setup
<p id="balance">1000</p>
<button id="deposit">Deposit 100</button>
Buggy JavaScript
var balanceElement = document.getElementById("balance")
var currentBalance = balanceElement.innerHTML

// currentBalance is text: "1000"
balanceElement.innerHTML = currentBalance + 100
Fixed code
var balanceElement = document.getElementById("balance")
var currentBalance = Number(balanceElement.innerHTML)

// currentBalance is now a number: 1000
balanceElement.innerHTML = currentBalance + 100

Notes

  • Step 1: document.getElementById("balance") finds the balance element.
  • Step 2: balanceElement.innerHTML reads what is displayed, but it reads it as text: "1000".
  • Step 3: "1000" + 100 joins text, so the result is "1000100".
  • Fix: use Number(...) before adding, so JavaScript does real maths.
4

Casting

Casting means changing one data type into another type.

Example

Number("1337") becomes 1337.

String(133) becomes "133".

Code

var numberValue = Number("1337")
var stringValue = String(133)

console.log(numberValue + 7)
console.log(stringValue + 7)

Notes

  • Number() converts to a number.
  • String() converts to text.
  • Explicit casting reduces confusing bugs.
5

NaN

NaN means Not a Number.

Example

Number("abc")

Result: NaN

NaN + 1

Result: NaN

Code

console.log(Number("abc"))
console.log(NaN + 1)
console.log(NaN * 100)

Notes

  • If a string does not represent a number, Number() returns NaN.
  • Operations with NaN usually produce NaN.
  • It is JavaScript saying, "this is not a usable number."
6

Arithmetic Operators

Arithmetic operators take numerical values and produce a number.

Example

+ add
- subtract
* multiply
/ divide
% remainder
** power
++ increment
-- decrement

Code

console.log(10 + 2)
console.log(10 - 2)
console.log(10 * 2)
console.log(10 / 2)
console.log(10 % 3)
console.log(2 ** 3)

Notes

  • Operands are the values the operator works on.
  • ++ increases by 1.
  • -- decreases by 1.
7

Assignment Operators

Assignment operators update variables.

Example

var a = 3

a += 2 makes a become 5.

a *= 4 makes a become 20.

Code

var a = 3
a += 2
a *= 4
a -= 5
a /= 5
a %= 2

Notes

  • = assigns a value.
  • +=, -=, *=, /=, %=, and **= update existing values.
  • Strings also support += for concatenation.
8

Mixing Types

Guess the result first, then reveal the answer.

Example

Question 1: What is "1" + 1?

Answer: "11". Because one operand is a string, + performs string concatenation.

Question 2: What is "1" - 1?

Answer: 0. Strings do not have a subtraction operation, so JavaScript casts "1" to the number 1.

Question 3: What is "1" - "1"?

Answer: 0. Both strings are cast to numbers before subtraction.

Code

console.log("1" + 1)
console.log("1" - 1)
console.log("1" - "1")

Notes

  • Pause and guess before revealing each answer.
  • Any + operation with a string operand performs concatenation.
  • Other arithmetic operators try to cast operands to numbers.
  • This is why explicit casting is safer.
9

Mini Playground: Operator Lab

Try values and operators to see the result and type.

Example

"1" + "1" gives "11" (string).

Code

var result = left + right
console.log(result)
console.log(typeof result)

Notes

  • Inputs start as strings.
  • Use Number() when you want numeric arithmetic.
  • Observe how + behaves differently from -.

Slide Coverage Map

Slides 1-10: title, recap, string addition, lesson objectives, and data types are covered in sections 1 and 2.
Slides 11-20: bank deposit bug and fixing it with Number() are covered in sections 3 and 4.
Slides 21-24: NaN and converting numbers to strings are covered in sections 4 and 5.
Slides 25-32: arithmetic, assignment, increment/decrement, and string assignment are covered in sections 6 and 7.
Slides 33-45: mixed types, automatic casting, summary, and explicit casting conclusion are covered in sections 8 and 9.
Slides 46-47: questions and practice are covered by the playground and notes.