Frontend development

Stage 2 · Lesson 3 of 10

Arrays, objects, destructuring and array methods

JavaScript and the browser

Most frontend code takes data from an and turns it into something on screen, and that is array and object work. Learn the main . map transforms each item, filter keeps some, find gets one, some and every test them, and reduce builds a single result such as a total.

None of them change the original array, and map and filter give you a new one. pulls values out of an object: const { name, price } = product. Spread copies and merges: { ...user, name: "Ana" }.

Objects and arrays are . So two variables can point at the same array, and a change made through one shows up in the other. Frameworks rely on you making new copies instead of changing (mutating) the original, so the habit matters now.

Common trapusing sort, which changes the array in place, on data you meant to keep.

A question to check yourself, an AI practice session and 2 cheat sheet entries come with the full roadmap. Unlock

Resources for this stage

Start with· follow one of these

  • CoursePaid
    Grokking JavaScript Fundamentals

    Design Gurus · Beginner · $50

    Guided beginner course on the language core, with quizzes after every chapter

  • GuideFree
    JavaScript.info

    Ilya Kantor

    Free and thorough: Part 1 for the language, Part 2 for the DOM and events, Part 3 for fetch

Practise

  • Thirty small browser projects with no framework to hide behind

  • Free JavaScript curriculum exercises for daily reps on the language core

Keep handy

  • JavaScript and Web API reference, including fetch, the DOM and events

Also worth your time

Mark this stage as not done?