Surya JS Journey

Learn JavaScript through concepts, code, and guided practice.

A focused workspace for concept study, interactive examples, visual explanations, and challenge solving.

Data HandlingBeginner

Arrays and Methods

Arrays hold ordered collections of values, and their built-in methods make transformation and iteration much easier.

JavaScript arrays come with powerful methods such as `map`, `filter`, `find`, and `reduce`. These methods are callback-driven and help you write cleaner, more declarative code compared with manual loops for many common tasks.

Explanation

JavaScript arrays come with powerful methods such as `map`, `filter`, `find`, and `reduce`. These methods are callback-driven and help you write cleaner, more declarative code compared with manual loops for many common tasks.

Key Points

  • `map` transforms every item and returns a new array.
  • `filter` keeps only the items that pass a condition.
  • Most array methods return new arrays, but some methods mutate the original array.

Common Mistakes

  • Using `map` when you only need side effects and should use `forEach`.
  • Forgetting that some methods like `sort` mutate the original array.
  • Assuming every array method returns a new array.

Practice Workspace

arrays-and-methods.js

Edit the code, run it in the browser, and inspect the console output below. Reset restores the original snippet for this page.

Editor

6 lines

Output

0 entries

Mode

practice

Workspace Notes

Changes stay local until you run the code. Reset restores the original snippet immediately for another pass.

Live editing

Safe to change before every run.

Fast reset

Return to the original starter instantly.

arrays-and-methods.js
6 linesMonaco Editor
Loading...

Editor Actions

Use the editor to explore the example, then run it to inspect the console.

Console0 entries

Run the code to see output here.

Expected Output

2,4,6
2,3

Continue in Playground

Open this concept example in the shared playground to keep experimenting without leaving the broader workspace flow.

Open in Playground

Related Concepts

Data Types

JavaScript has primitive and reference data types, and knowing the difference affects comparison, copying, and mutation.

Callbacks

A callback is a function passed into another function so it can run later or customize behavior.

Objects

Objects store related data and behavior as key-value pairs and are one of JavaScript’s core building blocks.

Practice Challenges

Complete an arrow callback

7 min

Use an arrow function to transform a list of numbers into doubled values.

Merge values with spread syntax

8 min

Use spread syntax to combine values into a new array without mutating the original one.

Filter active lessons

7 min

Use `filter` to keep only the values that match a condition.