Lesson 0.2 · JavaScript in general

Functions and closures

Arrow functions, parameters, callbacks, functions returning functions, closures and pure functions.

Before we start: a function is a kitchen appliance

A function is like a kitchen appliance: you put something in (parameters), it does something with it and gives you something back (the return value). A blender gets strawberries and milk and returns a milkshake. You don't need to know how the motor works inside – it's enough to know what goes in and what comes out.

In JavaScript, functions have one more property that is essential for React: a function is a value, just like a number or a piece of text. It can be stored in a variable, passed to another function and even returned from a function. Almost everything you write in React is built on that.

1. Three ways to write it

// 1) Function declaration
function add(a, b) {
  return a + b
}

// 2) Function expression – a function stored in a variable
const add = function (a, b) {
  return a + b
}

// 3) Arrow function – the most common in modern code
const add = (a, b) => {
  return a + b
}

// 3b) Arrow function with a single expression – no return needed
const add = (a, b) => a + b

add(2, 3)   // 5 – you call them all the same way

Shortening arrow functions

const double = (n) => { return n * 2 }   // the full form
const double = (n) => n * 2              // one expression → no { } and no return
const double = n => n * 2                // one parameter → the parentheses can go
                                         // (most code keeps them anyway, for clarity)

const greet = () => 'Hello'              // no parameters → empty parentheses are required
const log = (a, b) => console.log(a, b)  // several parameters → parentheses required

	function	arrow function
Where you see it	components, named helper functions	callbacks, short functions, event handlers
Can it be called before it appears in the code?	yes (hoisting)	no
`this`	its own (depends on who calls it)	taken from the surroundings – in modern code you rarely deal with it

2. Parameters

Missing and extra arguments

JavaScript doesn't check how many arguments you pass to a function:

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

greet('Anna', 'Hello')          // 'Hello, Anna!'
greet('Anna')                   // 'undefined, Anna!' – a missing parameter is undefined
greet('Anna', 'Hello', 'extra') // 'Hello, Anna!' – an extra one is quietly thrown away

Default values

function greet(name, greeting = 'Hello') {
  return `${greeting}, ${name}!`
}

greet('Anna')            // 'Hello, Anna!'
greet('Anna', 'Hi')      // 'Hi, Anna!'
greet('Anna', undefined) // 'Hello, Anna!' – the default is used for undefined too
greet('Anna', null)      // 'null, Anna!' – but not for null!

Rest parameter: any number of arguments

Three dots before the last parameter collect all the remaining arguments into an array:

function sum(...numbers) {
  let total = 0
  for (const n of numbers) {   // for…of goes through the array item by item
    total += n
  }
  return total
}

sum(1, 2)          // 3   – numbers is [1, 2]
sum(1, 2, 3, 4)    // 10  – numbers is [1, 2, 3, 4]
sum()              // 0   – numbers is []

function log(level, ...messages) {   // the first argument separately, the rest into an array
  console.log(`[${level}]`, messages.join(' '))
}
log('INFO', 'The', 'user', 'signed', 'in')   // [INFO] The user signed in

An object instead of a long row of parameters

When a function has many parameters, it's easy to mix up their order. The fix: pass a single object and unpack (destructure) it right in the parameter. This is exactly how props work in React.

// ❌ What do true and false mean? You have to look at the definition.
createUser('Anna', 31, true, false)

// ✅ Named "parameters" – the order doesn't matter
function createUser({ name, age, isAdmin = false, newsletter = true }) {
  return { name, age, isAdmin, newsletter }
}
createUser({ name: 'Anna', age: 31, isAdmin: true })

3. The return value

function add(a, b) {
  return a + b        // return ends the function and hands back a value
  console.log('never runs')
}

function logIt(x) {
  console.log(x)      // without return…
}
const result = logIt(5)   // …the function returns undefined

Early return: deal with the exceptions first

// ❌ Deep nesting
function getDiscount(user) {
  if (user) {
    if (user.isMember) {
      if (user.years > 5) {
        return 20
      } else {
        return 10
      }
    }
  }
  return 0
}

// ✅ Early return – handle the exceptions first, then the main case
function getDiscount(user) {
  if (!user) return 0
  if (!user.isMember) return 0
  if (user.years > 5) return 20
  return 10
}

Several values at once

function minMax(numbers) {
  return { min: Math.min(...numbers), max: Math.max(...numbers) }   // an object…
}
const { min, max } = minMax([3, 9, 1])   // …and unpack it

function useToggle() {
  return [value, toggle]                 // or an array – this is how useState returns values
}
const [isOpen, toggleOpen] = useToggle()

4. Functions as values

A function is a value like any other. Tell apart the function itself (greet) and the result of calling it (greet()):

function greet() {
  return 'Hello'
}

greet        // ƒ greet() – the function itself (the recipe)
greet()      // 'Hello'   – the result of the call (the finished dish)

const hello = greet    // a second name for THE SAME function, nothing is called
hello()                // 'Hello'

Callback: a function passed to another function

When you pass a function as an argument, it's called a callback ("call me back"). The other function calls it when it's needed – in a second, say, or for every item of an array.

function sayHi() {
  console.log('Hi!')
}

setTimeout(sayHi, 1000)      // ✅ you pass the function – setTimeout calls it in 1 s
setTimeout(sayHi(), 1000)    // ❌ you call it RIGHT NOW and pass setTimeout its result (undefined)

setTimeout(() => console.log('Hi!'), 1000)   // ✅ a callback written right on the spot

[1, 2, 3].map((n) => n * 2)  // map calls the callback for every item → [2, 4, 6]

button.addEventListener('click', () => alert('Click!'))   // called on every click

Your own function that takes a callback

function repeat(times, action) {
  for (let i = 0; i < times; i++) {
    action(i)          // calls the function it was given
  }
}

repeat(3, (i) => console.log('Round', i))   // Round 0, Round 1, Round 2

function measure(fn) {
  const start = performance.now()
  fn()
  console.log(`Took ${performance.now() - start} ms`)
}
measure(() => heavyCalculation())

A function that returns a function

A function can also make a function and return it. Such a "factory" is called a higher-order function:

function makeGreeter(greeting) {
  return (name) => `${greeting}, ${name}!`
}

const english = makeGreeter('Hello')   // english is now a FUNCTION
const spanish = makeGreeter('Hola')

english('Anna')     // 'Hello, Anna!'
spanish('Ana')      // 'Hola, Ana!'
makeGreeter('Hi')('Peter')   // 'Hi, Peter!' – make it and call it straight away

// the same, shorter
const makeGreeter = (greeting) => (name) => `${greeting}, ${name}!`

5. Closures: functions with a backpack

Notice that the english function above knows greeting, even though makeGreeter finished long ago. How is that possible?

When a function is created, it packs a backpack with the variables from the place where it was created. When you later call it anywhere else, it reaches into the backpack. That backpack is called a closure.

function makeCounter() {
  let count = 0                 // this variable goes into the backpack
  return {
    increment: () => { count++ },
    get: () => count,
  }
}

const a = makeCounter()
const b = makeCounter()         // a new call = a new backpack with its own count

a.increment()
a.increment()
b.increment()

a.get()   // 2
b.get()   // 1  – the counters don't affect each other
count     // ❌ ReferenceError – you can't reach count from outside, it's "private"

Demo

Counter factory

What you see: A button that calls a plain JS function, makeCounter(). Every call makes a new counter with its own count variable in a closure.

Try it:

Create three counters.
Click A.increment() – only A grows. B and C have their own count.
Click C.increment() and then A again. Every counter carries on where it stopped – the backpack keeps the value.

The takeaway: Every call of a function creates new variables. The functions created during that call carry them along – long after the outer function has finished.

Loading the interactive part…

The backpack holds the variable, not a copy of the value

let message = 'Hello'
const show = () => console.log(message)

message = 'Hi there'
show()     // 'Hi there' – the function reads the variable at the moment it's called

In React this has an interesting consequence: every render of a component is a new call of a function with new variables. A function created in one render "sees" the values from exactly that render. This is called a snapshot, and lesson 0.10 and the lesson on state go into it in detail.

6. Pure functions and side effects

A pure function is like a calculator: for the same inputs it always returns the same result and does nothing else. It doesn't change anything outside and doesn't read the clock or chance.

// ✅ Pure
const add = (a, b) => a + b
const fullName = (user) => `${user.first} ${user.last}`
const withVat = (price) => Math.round(price * 1.21)

// ❌ Impure – the result depends on something other than the input
const now = () => new Date()             // a different time every time
const roll = () => Math.random()         // a different number every time
const total = (price) => price + tax     // reads an outer variable that can change

// ❌ Impure – they have a side effect (they change the world around them)
let count = 0
const increment = () => { count++ }      // changes an outer variable
const addItem = (list, x) => { list.push(x) }   // changes the array it was given
const save = (data) => localStorage.setItem('data', data)
const log = (x) => console.log(x)

Check yourself

Quiz What does const f = (x) => { x + 1 }; f(1) return?

2undefined1An error

Quiz How do you correctly call greet('Anna') after 2 seconds?

setTimeout(greet('Anna'), 2000)setTimeout(() => greet('Anna'), 2000)setTimeout(greet, 'Anna', 2000)

Quiz const add5 = makeAdder(5). What is add5?

The number 5A functionundefinedAn object

Quiz Which function is pure?

(list, x) => { list.push(x); return list }(price) => price * 1.21() => Date.now()(x) => { console.log(x); return x }

Warm-up

Challenge

Two arrow functions

Warm-up

Fill in the bodies of two arrow functions. Each one fits on a single line.

Task (the same text is in the comment at the top of the file)

CHALLENGE: Two arrow functions

1. square(3) should return 9 (the number times itself).
2. isEven(4) should return true, isEven(5) false. An even number leaves a remainder of 0 when divided by two: n % 2 === 0

Loading the interactive part…

I'm done

Challenge

Function factories

Medium Bonus challenge

Six small functions that make other functions or receive them as arguments. You'll practise parameters, callbacks and closures.

🔒 Bonus challenge

Medium and hard challenges are a bonus for signed-in readers. Signing up is free – just an e-mail, no password.

Summary

An arrow function with a single expression returns on its own; with curly braces it needs return. Return an object in ({ … }).
Parameters: missing ones are undefined, default values with =, any number with ...rest. Lots of parameters → a single object.
Early return deals with the exceptions at the start and gets rid of nesting.
fn is the function, fn() is its result. Pass a callback without parentheses, or wrap it in () => fn(arg).
Closure: a function remembers the variables from the place where it was created. Every call of the outer function = new variables.
A pure function = same input, same output, changes nothing around it. React components must render purely.

Loading lesson…

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