JavaScript 01 · JavaScript in general

Variables, types and operators

const and let, numbers and text, type conversion, === vs. == and useful string methods.

Before we start: why JavaScript when I'm learning React?

People learning React often find that it isn't React that trips them up, but the JavaScript around it. React itself is just a handful of functions – everything else you write in a component is plain JavaScript.

It's like cooking from recipes. Recipes (React) are quick to learn – as long as you can chop, fry and weigh (JavaScript). If you can't chop, every recipe is a struggle. So the first eight lessons are a kind of knife skills course: general JavaScript, no React. The last two lessons of this part then show how these skills are used in React.

1. Variables: const and let

A variable is a named box for a value. In modern JavaScript you create one with two keywords:

const name = 'Anna'     // const = the box can't be refilled
let count = 0           // let = you can put another value in the box later

count = count + 1       // ✅ let can be reassigned
count += 1              // ✅ the same, shorter
count++                 // ✅ even shorter (+1)

name = 'Peter'          // ❌ TypeError: Assignment to constant variable.

	const	let	var
Can be reassigned?	no	yes	yes
Valid in	the block { … }	the block { … }	the whole function (confusing)
Use it?	yes, the default choice	when the value changes	no, it's outdated

Blocks and where a variable is valid

A variable only exists inside the curly braces { … } it was created in. Outside, nobody knows about it:

const price = 100

if (price > 50) {
  const discount = 10           // only exists inside this block
  console.log(price - discount) // 90 – you can see outer variables inside too
}

console.log(discount)           // ❌ ReferenceError: discount is not defined

How to name variables

camelCase: userName, totalPrice, isLoggedIn.
Booleans start with is, has, can, should: isOpen, hasError.
Arrays in the plural (users), a single item in the singular (user).
Functions start with a verb: getUser, formatPrice, handleClick.

2. Data types

Every value in JavaScript has a type. Primitive types are simple values, everything else is an object:

Type	Examples	typeof returns
string (text)	'hello', "hello", `hello`	`'string'`
number	`42, 3.14, -1, NaN, Infinity`	`'number'`
boolean	`true, false`	`'boolean'`
undefined	"no value has been set yet"	`'undefined'`
null	"intentionally empty"	`'object'` ⚠️ a historical bug
object	`{ name: 'Anna' }, [1, 2], new Date()`	`'object'`
function	`() => {}`	`'function'`

typeof 'hello'       // 'string'
typeof 42            // 'number'
typeof true          // 'boolean'
typeof undefined     // 'undefined'
typeof { a: 1 }      // 'object'
typeof [1, 2]        // 'object'  – an array is an object too!
typeof null          // 'object'  – a bug from 1995 that never went away

Array.isArray([1, 2])   // true  – the right way to recognise an array
value === null          // the right way to recognise null

3. Numbers

JavaScript has a single type, number, for both whole and decimal numbers.

10 + 3      // 13
10 - 3      // 7
10 * 3      // 30
10 / 3      // 3.3333333333333335
10 % 3      // 1   – the remainder after division (modulo)
2 ** 10     // 1024 – power

Math.round(2.5)    // 3   – rounds
Math.floor(2.9)    // 2   – down
Math.ceil(2.1)     // 3   – up
Math.trunc(-2.9)   // -2  – cuts off the decimal part
Math.abs(-5)       // 5
Math.min(4, 1, 9)  // 1
Math.max(4, 1, 9)  // 9
Math.random()      // a random number from 0 (inclusive) to 1 (exclusive)

What modulo (%) is good for

7 % 2 === 1               // an odd number
8 % 2 === 0               // an even number

const seconds = 187
Math.floor(seconds / 60)  // 3  – whole minutes
seconds % 60              // 7  – the remaining seconds → "3:07"

index % 3                 // 0, 1, 2, 0, 1, 2… – taking turns in a cycle (colours, say)

Decimal pitfalls

0.1 + 0.2              // 0.30000000000000004  😱
0.1 + 0.2 === 0.3      // false

(0.1 + 0.2).toFixed(2)          // '0.30'  – CAREFUL, returns TEXT
Math.round((0.1 + 0.2) * 100) / 100   // 0.3   – a number rounded to 2 places

A computer stores numbers in binary and can't write 0.1 in it exactly – just as we can't write 1/3 exactly as a decimal. That's why money is often counted in cents (whole numbers) and converted to dollars or euros only when it's displayed.

NaN: "this is not a number"

Number('hello')      // NaN
0 / 0                // NaN
NaN === NaN          // false – NaN isn't even equal to itself!
Number.isNaN(NaN)    // true  – the only reliable test

10 / 0               // Infinity (not an error)

4. Strings (text)

You can write text in single '…', double "…" or back `…` quotes. Backticks have a superpower: you can put a value inside.

Template strings

const name = 'Anna'
const count = 3

'Hello, ' + name + '! You have ' + count + ' messages.'   // the old way – easy to forget a space
`Hello, ${name}! You have ${count} messages.`            // template – ${…} inserts the value

`Total: ${count * 12} USD`                              // any expression can go inside ${…}
`Status: ${count > 0 ? 'you have some' : 'empty'}`

const html = `
  <ul>
    <li>A template can span several lines</li>
  </ul>
`

The most useful methods

Strings can't be changed – every method returns a new text and leaves the original alone.

const text = '  Hello World  '

text.length                 // 15 – the number of characters (spaces included)
text.trim()                 // 'Hello World' – without spaces at the ends
text.toUpperCase()          // '  HELLO WORLD  '
text.toLowerCase()          // '  hello world  '

const s = 'Hello World'
s[0]                        // 'H' – the character at position 0 (counting starts at zero!)
s.at(-1)                    // 'd' – the last character
s.includes('World')         // true
s.startsWith('Hello')       // true
s.endsWith('!')             // false
s.indexOf('W')              // 6  – where it starts; -1 when not found
s.slice(0, 5)               // 'Hello' – from position 0 to 5 (5 not included)
s.slice(-5)                 // 'World' – the last 5 characters
s.replace('World', 'Anna')  // 'Hello Anna' – replaces the FIRST occurrence
'a-b-c'.replaceAll('-', '/') // 'a/b/c' – replaces all of them

'Anna Smith'.split(' ')     // ['Anna', 'Smith'] – splits into an array
['a', 'b', 'c'].join(', ')  // 'a, b, c' – the opposite: joins an array into text

'7'.padStart(2, '0')        // '07' – pads on the left to length 2
'ha'.repeat(3)              // 'hahaha'

Comparing text and accented letters

'a' < 'b'                         // true – compares by character codes
'Z' < 'a'                         // true 😕 capital letters have smaller codes
'é' > 'f'                         // true 😕 accented letters come after the English alphabet

'é'.localeCompare('f', 'fr')      // -1 – "é comes before f" according to French ✅
'Anna'.toLowerCase() === 'anna'   // comparison that ignores letter case

5. Type conversion

Everything a user types into a form arrives as text. Even when they type "42". If you want to calculate with it, you have to convert it:

Number('42')        // 42
Number('3.14')      // 3.14
Number('3,14')      // NaN – a comma isn't a decimal point!
Number('')          // 0   – careful, empty text is zero
Number('  7 ')      // 7   – spaces at the ends don't matter
Number('12px')      // NaN

parseInt('12px')    // 12  – reads digits from the left as long as it can
parseFloat('3.5kg') // 3.5
parseInt('3.9')     // 3   – only the whole part

String(42)          // '42'
(42).toString()     // '42'
42 + ''             // '42' – works, but String() is easier to read

Boolean('hello')    // true
Boolean('')         // false
!!'hello'           // true – a double negation is a shortcut for Boolean()

Automatic conversion (and why not to trust it)

When JavaScript gets an unexpected type, it tries to convert it on its own. The results can be surprising:

'5' + 3     // '53'  – plus with text JOINS texts
'5' - 3     // 2     – minus only works with numbers, so it converts the text
'5' * '2'   // 10
true + 1    // 2
[] + []     // ''
'10' > '9'  // false 😱 compares texts character by character: '1' < '9'
10 > 9      // true

Demo

Conversion lab

What you see: A text field and, below it, what different conversions make of its contents. This is exactly how values arrive from forms – always as text.

Try it:

Click '42'. text + 1 gives '421' (joined texts), but text * 1 gives the number 42 – multiplication converts the text to a number.
Click '3,14'. Number returns NaN, parseFloat just 3. Only replacing the comma with a dot helps.
Try '12px': Number gives up, parseInt reads 12.
Try (empty): Number('') is 0, but Boolean('') is false. And '' == 0 is even true.

The takeaway: Always convert form text yourself and check it with Number.isNaN. Relying on automatic conversion is a road to bugs.

Loading the interactive part…

6. Comparison: === vs. ==

Two equals signs (==) convert types before comparing, following complicated rules. Three equals signs (===) compare both the type and the value – no surprises.

Expression	== (loose)	=== (strict)
`5 vs '5'`	true	false
`0 vs ''`	true	false
`0 vs false`	true	false
`null vs undefined`	true	false
`NaN vs NaN`	false	false

5 === 5       // true
5 === '5'     // false – a different type
5 !== '5'     // true  – "not equal" in the strict version

age >= 18     // greater than or equal
age < 65 && age >= 18   // and at the same time (more in the lesson on conditions)

Check yourself

Quiz What does '5' + 3 return?

8'53'NaNAn error

Quiz A user types '3,5' into a field. What does Number(value) give?

3.53NaN'3,5'

Quiz How do you round 2.456 to two decimal places so that the result is a number?

(2.456).toFixed(2)Math.round(2.456 * 100) / 100Math.floor(2.456, 2)parseInt(2.456)

Quiz What does this print: let name = ' anna '; name.trim(); console.log(name)?

'anna'' anna ''ANNA'undefined

Warm-up

Challenge

Greeting

Warm-up

Two really short functions to warm up: a greeting with a name and double a number. What exactly they should return is in the comments in the code.

Task is in the comments in the code below – at the top of the file and at the places marked TODO.

Loading the interactive part…

I'm done

Challenge

Text helpers

Easy

Six small functions for working with numbers and text – exactly the kind you need when processing forms. Functions come in the next lesson, so they are prepared for you: you only change the places with TODO and the comment next to them says what value the line should produce. Under the editor you'll see which functions already work.

Task is in the comments in the code below – at the top of the file and at the places marked TODO.

Loading the interactive part…

I'm done

Summary

const everywhere, let only when you reassign the value, var never. A variable is valid in its block { … }.
Types: string, number, boolean, undefined, null, object (arrays too) and function. Recognise an array with Array.isArray.
Decimals aren't exact (0.1 + 0.2). Round with Math.round(x * 100) / 100, toFixed returns text.
Template strings `…${x}…` instead of joining with plus. String methods return a new text.
Forms give you text. Convert it yourself with Number() and watch out for NaN.
Always ===, never ==.

Loading lesson…

💬 Found a mistake, something unclear, or have an idea? Let me know.