Command Palette

Search for a command to run...

Hectal
Phase 3Beginner4 of 16 in JavaScript

Functions

Write and call functions, the three ways to define them, default and rest parameters, scope, hoisting, closures, callbacks, recursion and pure functions.

A function is a named, reusable block of code: you write the steps once and run them whenever you need them, with different inputs each time. Almost everything in JavaScript is built from functions: click handlers, array methods like map, timers, whole apps. This phase teaches them from the very first function greet() to the ideas interviewers love to ask about.

You'll learn how to declare and call functions, the three ways to write them (declarations, expressions and arrow functions), and how to accept inputs flexibly with default, rest and destructured parameters. Then come the rules that decide which variables a function can see (scope), why some code works before the line it's written on (hoisting and the temporal dead zone), and the most famous idea in JavaScript: closures, functions that remember where they were born.

Finally you'll pass functions to other functions (callbacks and higher-order functions), make a function call itself (recursion), and learn why pure functions with no side effects make code easier to test. This phase builds on Phase 1 (variables and types) and Phase 2 (operators, conditions and loops). Recursion and higher-order functions lead straight into Hectal's /dsa course.

0/9 · 0%
9 topics ~4 h 28 code blocks & diagrams
Start with the first topic
1
3.1

Declaring and Calling Functions

A function is a named block of code you define once and run (call) as often as you like; it receives inputs through parameters, and sends a result back with return, or undefined when there is no return.

25 min 3 code practice

2
3.2

Declarations, Expressions and Arrow Functions

JavaScript has three main ways to write a function: a declaration (function add() {}), a function expression stored in a variable, and a short arrow function ((a, b) => a + b); they differ in hoisting, this, arguments and whether they can be used with new.

26 min 3 code practice

3
3.3

Default, Rest Parameters and Spread

Default parameters fill in missing arguments, rest parameters (...items) collect any number of arguments into an array, spread (...array) does the opposite at the call, and destructured parameters pull named options straight out of an object; the old arguments object still exists in regular functions.

26 min 3 code practice

4
3.4

Scope

Scope is the region of code where a variable can be seen: global scope is visible everywhere, function scope inside one function, and block scope (for let and const) inside one pair of braces; lookups go from the inside outwards, and an inner variable with the same name shadows the outer one.

25 min 3 code practice

5
3.5

Hoisting and the Temporal Dead Zone

Before running a scope, JavaScript first registers every declaration in it: function declarations arrive complete, var variables start as undefined, and let, const and class exist but can't be touched until their line runs; that forbidden stretch is the temporal dead zone.

24 min 3 code practice

6
3.6

Closures

A closure is a function together with the variables of the place where it was created; the function keeps using those variables even after the outer function has finished, which gives you counters, private state and function factories, and explains the classic var loop bug.

26 min 3 code practice

7
3.7

Callbacks and Higher-Order Functions

In JavaScript, functions are values: you can store them, pass them to other functions (callbacks) and return them; a higher-order function is one that takes or returns a function, like map, filter, addEventListener and setTimeout.

25 min 3 code practice

8
3.8

Recursion

A recursive function solves a problem by calling itself on a smaller piece of it, until it reaches a base case simple enough to answer directly; every pending call waits on the call stack, and without a base case the stack overflows.

26 min 3 code practice

9
3.9

Pure Functions and Side Effects

A pure function always returns the same output for the same inputs and changes nothing outside itself; everything else a function does to the outside world is a side effect, and the IIFE is an older pattern that wrapped code in a function just to keep its variables private.

26 min 4 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Your first function

Write a function called greet that takes a name and returns (not prints) the text Hello, <name>!. For example, greet("Asha") returns "Hello, Asha!".

Beginner
2

Temperature converters as arrows

Write two arrow functions with concise bodies (no braces, no return keyword):

Beginner
3

Any number of numbers

Write three functions using rest parameters and spread:

Beginner
4

A counter with private state

Write makeCounter(start = 0) that returns an object with four methods: increment(), decrement(), reset() (back to the start value) and value() (returns the current count).

Intermediate
5

Recursion through nested arrays

Write two recursive functions that work on arrays nested to any depth, like [1, [2, [3, [4]]], 5]:

Intermediate
6

Build a bill splitter

Build a small app that splits a restaurant bill, with a pure core and an impure shell.

Intermediate