• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Justin Joyce

Practical tips and tutorials about software development.

  • Standing Invitation
  • Featured Posts
  • Latest
  • About

Javascript map function

Posted Mar 27, 2023 — Updated Jan 10, 2024

The javascript map() function1 takes in a callback function, applies that callback function to each element of an array, and returns a new array containing the results. Many languages have a map function, and they all behave roughly this way2.

Javascript map basics

map() accepts a single callback function, and passes each element of the calling array into that function:

const myArray = [1,2,3];

const timesTen = myArray.map(item => item * 10);
console.log(timesTen);
// [10, 20, 30]

Important note: don’t forget to return something, otherwise you’ll end up with a new array containing all undefined values:

const myArray = [1, 2, 3];

const timesTen = myArray.map((item) => {
    console.log(item * 10);
});
// 10
// 20
// 30

// We never returned anything
console.log(timesTen);
// [undefined, undefined, undefined]

Or maybe you have a more complicated function you want to use in your map. You can define it elsewhere and just pass it in like this, assuming it accepts a single parameter:

import { fancyFunction } from "~/utils";

const myArray = [1, 2, 3];

// Like any array method, you can pass your callback this way
const fancyArray = myArray.map(fancyFunction);

Map’s additional arguments

Typically when using map(), the callback function only takes in a single argument—the current array element. However, map actually makes three arguments available to the callback: the current array element, its index in the array, and the full calling array (which is the same every time).

Let’s look:

const myArray = ["a", "b", "c"];

myArray.map((element, idx, arr) => console.log(element, idx, arr));
// a 0 ["a", "b", "c"]
// b 1 ["a", "b", "c"]
// c 2 ["a", "b", "c"]

That’s about it. I hope this was helpful.


Helpful Links

  • Array.prototype.map – Moz docs
  • Javascript’s map object – Moz docs

Notes

  1. Not to be confused with javascript’s Map object ↩︎
  2. Python’s map leaves something to be desired, but you can just use list comprehensions instead ↩︎

Filed Under: Arrays, Javascript

Primary Sidebar

Recent Posts

  • Every Built-In Vim Color Scheme (with screenshots)
  • Reverse a string in Python
  • Meeting Cost Calculator
  • Vim find and replace
  • What makes an effective development team

Categories

  • Arrays (5)
  • Command Line (9)
  • Dates (3)
  • Featured (7)
  • Git (7)
  • Golang (5)
  • Javascript (8)
  • Productivity (8)
  • Projects (4)
  • Python (15)
  • Regex (2)
  • Ruby (3)
  • Shell (2)
  • Thoughts (2)
  • Tips (11)
  • Tools (3)
  • Tutorials (1)
  • Vim (4)

Archives

  • July 2024 (1)
  • February 2024 (1)
  • January 2024 (1)
  • December 2023 (1)
  • November 2023 (1)
  • October 2023 (4)
  • September 2023 (1)
  • August 2023 (2)
  • July 2023 (5)
  • June 2023 (3)
  • May 2023 (6)
  • April 2023 (5)
  • March 2023 (5)
  • February 2023 (10)
  • January 2023 (6)
  • December 2022 (7)

Copyright © 2025 · Contact me at justin [at] {this domain}

  • Privacy Policy