Simple Guide to the Map Method in JavaScript Arrays

The map() method in JavaScript is a handy way to create a new array by transforming each element in an existing array without changing the original. Think of it like making a new list where you tweak each item in a specific way.

Syntax

Here’s the basic syntax for map():

const newArray = array.map(function(element, index, array) {
  // Return the transformed element
});

element: The current item in the array (required).
index: The position of the item (optional, used in some examples).
array: The original array (rarely used, but available).

The map() method returns a new array with the transformed elements.

Example 1: Add "Tasty" to dish names

const dishes = ['idli', 'dosa'];
const tastyDishes = dishes.map(dish => dish + ' Tasty');
console.log(tastyDishes);

Output: ["idli Tasty", "dosa Tasty"]

Example 2: Uppercase South Indian names

const names = ['Arjun', 'Priya'];
const upperNames = names.map(name => name.toUpperCase());
console.log(upperNames);

Output: ["ARJUN", "PRIYA"]

Example 3: Add prefix to cities

const cities = ['Chennai', 'Bangalore'];
const prefixed = cities.map(city => 'Visit ' + city);
console.log(prefixed);

Output: ["Visit Chennai", "Visit Bangalore"]

Example 4: Get lengths of food names

const foods = ['vada', 'pongal'];
const lengths = foods.map(food => food.length);
console.log(lengths);

Output: [4, 6]

Example 5: Add "!" to greetings

const greetings = ['Hello', 'Vanakkam'];
const excited = greetings.map(g => g + '!');
console.log(excited);

Output: ["Hello!", "Vanakkam!"]

Example 6: Capitalize first letter of states

const states = ['tamilnadu', 'kerala'];
const capitalized = states.map(state => state.charAt(0).toUpperCase() + state.slice(1));
console.log(capitalized);

Output: ["Tamilnadu", "Kerala"]

Example 7: Add position to names

const names = ['Surya', 'Lakshmi'];
const positioned = names.map((name, i) => `${i + 1}. ${name}`);
console.log(positioned);

Output: ["1. Surya", "2. Lakshmi"]

Example 8: Make all numbers negative

const numbers = [1, 2, 3];
const negatives = numbers.map(num => -num);
console.log(negatives);

Output: [-1, -2, -3]

Example 9: Add "South" to languages

const langs = ['Tamil', 'Telugu'];
const southLangs = langs.map(lang => 'South ' + lang);
console.log(southLangs);

Output: ["South Tamil", "South Telugu"]

Example 10: Convert numbers to strings

const nums = [10, 20];
const strings = nums.map(num => num.toString());
console.log(strings);

Output: ["10", "20"]

Example 11: Add " Dish" to foods

const foods = ['sambar', 'rasam'];
const dishes = foods.map(food => food + ' Dish');
console.log(dishes);

Output: ["sambar Dish", "rasam Dish"]

Example 12: Get first letter of cities

const cities = ['Madurai', 'Kochi'];
const firstLetters = cities.map(city => city[0]);
console.log(firstLetters);

Output: ["M", "K"]

Example 13: Add 1 to ages

const ages = [20, 25];
const older = ages.map(age => age + 1);
console.log(older);

Output: [21, 26]

Example 14: Lowercase dish names

const dishes = ['IDLI', 'DOSA'];
const lower = dishes.map(dish => dish.toLowerCase());
console.log(lower);

Output: ["idli", "dosa"]

Example 15: Add "Welcome to" to places

const places = ['Ooty', 'Mysore'];
const welcomes = places.map(place => 'Welcome to ' + place);
console.log(welcomes);

Output: ["Welcome to Ooty", "Welcome to Mysore"]

Example 16: Double numbers

const nums = [5, 10];
const doubled = nums.map(num => num * 2);
console.log(doubled);

Output: [10, 20]

Example 17: Add "is great" to festivals

const festivals = ['Pongal', 'Onam'];
const great = festivals.map(fest => fest + ' is great');
console.log(great);

Output: ["Pongal is great", "Onam is great"]

Example 18: Extract names from objects

const people = [{name: 'Raj', age: 30}, {name: 'Meena', age: 25}];
const namesOnly = people.map(p => p.name);
console.log(namesOnly);

Output: ["Raj", "Meena"]

Example 19: Add "City" to city names

const cities = ['Trichy', 'Salem'];
const cityNames = cities.map(city => city + ' City');
console.log(cityNames);

Output: ["Trichy City", "Salem City"]

Example 20: Check if number is even

const nums = [2, 3, 4];
const evens = nums.map(num => num % 2 === 0);
console.log(evens);

Output: [true, false, true]

Example 21: Add index to dishes

const dishes = ['biryani', 'curd'];
const indexed = dishes.map((dish, i) => `${i}: ${dish}`);
console.log(indexed);

Output: ["0: biryani", "1: curd"]

Example 22: Trim extra spaces from names

const names = [' Arjun ', ' Priya '];
const trimmed = names.map(name => name.trim());
console.log(trimmed);

Output: ["Arjun", "Priya"]

Example 23: Add "!" to exclamations

const words = ['Wow', 'Great'];
const excited = words.map(word => word + '!');
console.log(excited);

Output: ["Wow!", "Great!"]

Example 24: Replace "food" with "dish"

const texts = ['South food', 'Indian food'];
const replaced = texts.map(text => text.replace('food', 'dish'));
console.log(replaced);

Output: ["South dish", "Indian dish"]

Example 25: Add "Hello" to names

const names = ['Vijay', 'Anita'];
const hellos = names.map(name => 'Hello ' + name);
console.log(hellos);

Output: ["Hello Vijay", "Hello Anita"]

Example 26: Convert booleans to strings

const bools = [true, false];
const boolStrings = bools.map(b => b.toString());
console.log(boolStrings);

Output: ["true", "false"]

Example 27: Add "Place" to towns

const towns = ['Kanyakumari', 'Rameswaram'];
const places = towns.map(town => town + ' Place');
console.log(places);

Output: ["Kanyakumari Place", "Rameswaram Place"]

Example 28: Create greeting objects

const names = ['Karthik', 'Sowmya'];
const greetings = names.map((name, i) => ({id: i, greeting: 'Hi ' + name}));
console.log(greetings);

Output: [{id: 0, greeting: "Hi Karthik"}, {id: 1, greeting: "Hi Sowmya"}]

Example 29: Add 10 to scores

const scores = [50, 60];
const increased = scores.map(score => score + 10);
console.log(increased);

Output: [60, 70]

Example 30: Get last letter of dishes

const dishes = ['idli', 'dosa'];
const lastLetters = dishes.map(dish => dish[dish.length - 1]);
console.log(lastLetters);

Output: ["i", "a"]

Example 31: Add "is yummy" to snacks

const snacks = ['murukku', 'vada'];
const yummy = snacks.map(snack => snack + ' is yummy');
console.log(yummy);

Output: ["murukku is yummy", "vada is yummy"]

Example 32: Convert numbers to words

const nums = [1, 2];
const words = nums.map(num => num === 1 ? 'One' : 'Two');
console.log(words);

Output: ["One", "Two"]

Example 33: Add "Visit" to temples

const temples = ['Madurai', 'Tirupati'];
const visits = temples.map(temple => 'Visit ' + temple);
console.log(visits);

Output: ["Visit Madurai", "Visit Tirupati"]

Example 34: Make names plural

const items = ['saree', 'dhoti'];
const plurals = items.map(item => item + 's');
console.log(plurals);

Output: ["sarees", "dhotis"]

Example 35: Add "2025" to years

const years = ['Year', 'Festival'];
const withYear = years.map(y => y + ' 2025');
console.log(withYear);

Output: ["Year 2025", "Festival 2025"]

Example 36: Check if name is long

const names = ['Raj', 'Lakshmi'];
const isLong = names.map(name => name.length > 4);
console.log(isLong);

Output: [false, true]

Example 37: Add "Tamil" to words

const words = ['Nadu', 'Culture'];
const tamilWords = words.map(word => 'Tamil ' + word);
console.log(tamilWords);

Output: ["Tamil Nadu", "Tamil Culture"]

Example 38: Extract ages from objects

const people = [{name: 'Anu', age: 22}, {name: 'Vikram', age: 28}];
const ages = people.map(p => p.age);
console.log(ages);

Output: [22, 28]

Example 39: Add "is fun" to dances

const dances = ['Bharatanatyam', 'Kuchipudi'];
const fun = dances.map(dance => dance + ' is fun');
console.log(fun);

Output: ["Bharatanatyam is fun", "Kuchipudi is fun"]

Example 40: Double lengths of names

const names = ['Ram', 'Sita'];
const doubleLengths = names.map(name => name.length * 2);
console.log(doubleLengths);

Output: [6, 8]

Example 41: Add "Hi" to fruits

const fruits = ['mango', 'banana'];
const hiFruits = fruits.map(fruit => 'Hi ' + fruit);
console.log(hiFruits);

Output: ["Hi mango", "Hi banana"]

Example 42: Check if number is positive

const nums = [5, -2, 0];
const isPositive = nums.map(num => num > 0);
console.log(isPositive);

Output: [true, false, false]

Example 43: Add "Spicy" to curries

const curries = ['sambar', 'rasam'];
const spicy = curries.map(curry => 'Spicy ' + curry);
console.log(spicy);

Output: ["Spicy sambar", "Spicy rasam"]

Example 44: Convert to uppercase first letter

const words = ['temple', 'palace'];
const capped = words.map(word => word.charAt(0).toUpperCase() + word.slice(1));
console.log(capped);

Output: ["Temple", "Palace"]

Example 45: Add "!" to cities

const cities = ['Chennai', 'Coimbatore'];
const excitedCities = cities.map(city => city + '!');
console.log(excitedCities);

Output: ["Chennai!", "Coimbatore!"]

Example 46: Check if string starts with 'S'

const names = ['Surya', 'Arun'];
const startsWithS = names.map(name => name.startsWith('S'));
console.log(startsWithS);

Output: [true, false]

Example 47: Add "Yum" to sweets

const sweets = ['laddu', 'jalebi'];
const yummy = sweets.map(sweet => sweet + ' Yum');
console.log(yummy);

Output: ["laddu Yum", "jalebi Yum"]

Example 48: Convert ages to strings

const ages = [18, 22];
const ageStrings = ages.map(age => 'Age: ' + age);
console.log(ageStrings);

Output: ["Age: 18", "Age: 22"]

Example 49: Add "is cool" to places

const places = ['Kerala', 'Goa'];
const cool = places.map(place => place + ' is cool');
console.log(cool);

Output: ["Kerala is cool", "Goa is cool"]

Example 50: Create numbered list

const items = ['rice', 'dal'];
const numbered = items.map((item, i) => `${i + 1}: ${item}`);
console.log(numbered);

Output: ["1: rice", "2: dal"]