Skip to content

Latest commit

 

History

History
127 lines (93 loc) · 3.5 KB

Map Method.md

File metadata and controls

127 lines (93 loc) · 3.5 KB

The .map() Method in JavaScript with ES6+

Table of Contents

  1. Introduction to the .map() Method
  2. Syntax
  3. Parameters
  4. Return Value
  5. Examples
  6. Use Cases

Introduction to the .map() Method

The .map() method is a powerful array method in JavaScript that creates a new array with the results of calling a provided function on every element in the calling array. It is a non-mutating method, meaning it does not alter the original array.

Syntax

array.map(callback(currentValue[, index[, array]])[, thisArg])

Parameters

Parameter Description
callback A function that produces an element of the new array, taking three arguments:
currentValue The current element being processed in the array.
index (optional) The index of the current element being processed in the array.
array (optional) The array map was called upon.
thisArg (optional) Value to use as this when executing callback.

Return Value

The .map() method returns a new array with each element being the result of the callback function.

Examples

Basic Example

const array.map(callback(currentValue[, index[, array]])[, thisArg])

Using Index

const numbers = [1, 2, 3, 4];
const indexed = numbers.map((num, index) => `Element ${index}: ${num}`);
console.log(indexed); // ['Element 0: 1', 'Element 1: 2', 'Element 2: 3', 'Element 3: 4']

Using thisArg

const multiplier = {
  factor: 2,
  multiply(num) {
    return num * this.factor;
  }
};

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(multiplier.multiply, multiplier);
console.log(doubled); // [2, 4, 6, 8]

Mapping Objects

const users = [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 35 }
];

const names = users.map(user => user.name);
console.log(names); // ['Alice', 'Bob', 'Charlie']

Use Cases

Transforming Data

The .map() method is ideal for transforming data from one format to another.

const temperatures = [32, 68, 86, 104];
const celsius = temperatures.map(temp => (temp - 32) * 5 / 9);
console.log(celsius); // [0, 20, 30, 40]

Generating HTML Elements

The .map() method can be used to generate HTML elements dynamically.

const items = ['Apple', 'Banana', 'Cherry'];
const listItems = items.map(item => `<li>${item}</li>`).join('');
console.log(`<ul>${listItems}</ul>`); // <ul><li>Apple</li><li>Banana</li><li>Cherry</li></ul>

Combining with Other Methods

The .map() method can be combined with other array methods for more complex operations.

const numbers = [1, 2, 3, 4];
const result = numbers.map(num => num * 2).filter(num => num > 5);
console.log(result); // [6, 8]

Tip

Use .map() for transforming arrays without modifying the original array. Combine .map() with other array methods like .filter() and .reduce() for more complex operations. Always consider the performance implications of .map() when dealing with large arrays.

[EOF]