Start learning →

Functions and data

Breaking programs into functions, and choosing the right shape for your data: arrays, objects, Maps and Sets. Array methods and modern syntax make this code short and clear.

About 14 hours of study

Learning objectives

Lessons

  1. 1

    Functions and the call stack

    Writing functions with parameters and return values, default parameters, arrow functions, the call stack that keeps track of calls, and recursion.

  2. 2

    Arrays

    Lists of values: indexes, length, adding and removing with push, pop, shift and unshift, slice and splice, and why two variables can share one array.

  3. 3

    Objects

    Grouping values with names: object literals, reading and changing properties with dot and bracket notation, methods and this, looping over keys, destructuring, and JSON.

  4. 4

    Array methods: forEach, map, filter and reduce

    Passing a function to another function: callbacks, forEach, map, filter, find, some, every, reduce and sort, and chaining them to answer questions about data.

  5. 5

    Destructuring, spread and safe access

    The modern shorthand you will meet in almost every JavaScript file: unpacking arrays and objects, the spread and rest dots, optional chaining and the nullish operator.

  6. 6

    Maps and Sets

    Two collections built for looking things up: Map for pairs of keys and values, and Set for groups without repeats, and how to choose between them and plain objects.

Module practice

Module quiz

1. Why is a function that returns a value usually better than one that prints it?
2. What goes wrong if a recursive function never reaches its base case?
3. function f(list) { list.push(1); } const a = []; f(a); what is a.length?
4. Which method should you use to find the single first item that matches a test?
5. A list of orders needs one total. Which method fits best?
6. What is { a: 1, ...{ a: 2, b: 3 } }?
7. A page must remember which of a million item IDs it has already shown. What should it use?
8. Which expression keeps a score of 0 instead of replacing it with 10?

‹ First programsHow JavaScript really works ›