3.2 refresh table functions

In the previous lesson we looked at reference vs primitive types, an important detail to keep in mind whenever you work with JavaScript. Another piece of language we will use again and again in this course is the family of array functions. Let's revisit the classic example with a small array of numbers.

const numbers = [1, 2, 3];

Suppose we want to transform that array into a new one where every number has been doubled. Instead of writing a manual for loop, we can rely on the built-in map method available on every array. All next-generation JavaScript array methods follow the same pattern: they take a function as input and run it on each element of the array.

Using map with an arrow function

• The callback can be an arrow function — but it could also be a regular function.
• The callback receives the current element on each iteration.
• Whatever the callback returns becomes the value stored at the same index in the new array.

const doubleNumArray = numbers.map((num) => {
  return num * 2;
});

console.log(numbers);         // [1, 2, 3] — unchanged
console.log(doubleNumArray);  // [2, 4, 6]

The important property here is that map does not mutate the original array. It returns a brand-new array that we store in doubleNumArray. If we log both variables, numbers is still [1, 2, 3] while doubleNumArray is [2, 4, 6]. We will explain in detail what each array function does as we use it — for now, just remember that these methods always run the provided callback on every element, and that they are plain JavaScript, not something specific to React.

Summary

This lesson introduces JavaScript array functions, focusing on the map() method—a built-in function that iterates over array elements and transforms them based on a callback function. Using arrow functions, you can easily apply operations like doubling values to every element in an array, creating a new transformed array without modifying the original.

Key points

• map() is a built-in JavaScript array method that executes a function on each element and returns a new array with transformed values
• Arrow functions (=>) provide a concise syntax for defining callback functions used with map() and other array methods
• The original array remains unchanged—map() returns a new array, preserving immutability
• map() works with modern JavaScript (next-generation JS), though regular named functions work equally well as callbacks
• Each element is processed independently; the callback receives one element and must return the transformed value

FAQ

What does the map() method do?

map() iterates over each element in an array, applies a callback function to that element, and returns a new array containing the transformed values. For example, mapping [1,2,3] with a function that doubles each value returns [2,4,6].

Why use arrow functions with map()?

Arrow functions provide concise, readable syntax for callbacks. They eliminate the function keyword boilerplate while maintaining the same functionality. You can write (element) => element * 2 instead of function(element) { return element * 2; }.

Does map() modify the original array?

No. map() creates and returns a new array with transformed values, leaving the original array unchanged. This preserves immutability and is a core principle of functional programming in JavaScript.