JavaScript Array Methods, Under the Hood (Part )

This article demystifies common JavaScript array methods—.map(), .includes(), .concat(), and .flat()—by recreating their functionality using for loops. While for loops might seem less efficient and harder to read, understanding their underlying mechanisms provides a deeper appreciation for the built-in array methods. Let's dive in!

---

.map()

The .map() method generates a new array by applying a function to each element of an existing array. It processes only non-empty elements and leaves the original array unchanged.

Consider a banking application needing a list of client names from a data structure. While .map() is the most efficient solution, let's see how to achieve this with a for loop:

const bankAccounts = [
  {
    id: 1,
    name: "Susan",
    balance: 100.32,
    deposits: [150, 30, 221],
    withdrawals: [110, 70.68, 120],
  },
  { id: 2, name: "Morgan", balance: 1100.0, deposits: [1100] },
  {
    id: 3,
    name: "Joshua",
    balance: 18456.57,
    deposits: [4000, 5000, 6000, 9200, 256.57],
    withdrawals: [1500, 1400, 1500, 1500],
  },
  { id: 4, name: "Candy", balance: 0.0 },
  { id: 5, name: "Phil", balance: 18, deposits: [100, 18], withdrawals: [100] },
];

// Using a 'for' loop:
function getAllClientNamesLoop(array) {
  const acctNames = [];
  for (const acct of array) {
    acctNames.push(acct.name);
  }
  return acctNames;
}

// Using .map():
function getAllClientNamesMap(array) {
  return array.map(acct => acct.name);
}

console.log(getAllClientNamesLoop(bankAccounts)); // Output: ['Susan', 'Morgan', 'Joshua', 'Candy', 'Phil']
console.log(getAllClientNamesMap(bankAccounts)); // Output: ['Susan', 'Morgan', 'Joshua', 'Candy', 'Phil']

The for loop approach requires creating an empty array and iteratively pushing names. The .map() method is significantly more concise and readable.

.includes()

This method checks if an array contains a specific value, returning true or false.

Let's build a function to demonstrate this using a for loop and .includes():

// Using a 'for' loop:
function doesArrayIncludeLoop(array, value) {
  let isIncluded = false;
  for (const elem of array) {
    if (elem === value) {
      isIncluded = true;
      break; // Optimization: Exit loop once value is found
    }
  }
  return isIncluded;
}

// Using .includes():
function doesArrayIncludeIncludes(array, value) {
  return array.includes(value);
}

console.log(doesArrayIncludeLoop([1, 1, 2, 3, 5], 6)); // Output: false
console.log(doesArrayIncludeIncludes([1, 1, 2, 3, 5], 3)); // Output: true

The for loop version initializes a flag and iterates, while .includes() provides a direct and cleaner solution.

.concat()

This method merges two or more arrays into a single new array.

Here's a comparison using for loops and .concat():

// Using 'for' loops:
function concatArraysLoop(arr1, arr2) {
  const concatenatedArray = [...arr1, ...arr2]; //Spread syntax for conciseness
  return concatenatedArray;
}

// Using .concat():
function concatArraysConcat(arr1, arr2) {
  return arr1.concat(arr2);
}

console.log(concatArraysLoop([0, 1, 2], [5, 6, 7])); // Output: [0, 1, 2, 5, 6, 7]
console.log(concatArraysConcat([0, 1, 2], [5, 6, 7])); // Output: [0, 1, 2, 5, 6, 7]

Again, .concat() offers superior brevity and readability.

.flat()

The .flat() method flattens a nested array into a single-level array. It accepts an optional depth parameter.

Let's flatten an array one level deep using both methods:

// Using 'for' loops:
function flatArraysLoop(array) {
  const flattenedArray = [];
  for (const elem of array) {
    if (Array.isArray(elem)) {
      flattenedArray.push(...elem); //Spread syntax
    } else {
      flattenedArray.push(elem);
    }
  }
  return flattenedArray;
}

// Using .flat():
function flatArraysFlat(array) {
  return array.flat();
}

console.log(flatArraysLoop([1, 2, 3, [4, [5, 6]], 10])); // Output: [1, 2, 3, 4, [5, 6], 10]
console.log(flatArraysFlat([1, 2, 3, [4, [5, 6]], 10])); // Output: [1, 2, 3, 4, [5, 6], 10]

Flattening deeper nested arrays with for loops becomes increasingly complex, highlighting the power and simplicity of .flat(depth).

---

This exploration demonstrates the elegance and efficiency of JavaScript's built-in array methods. Part two will delve into more array methods. Feel free to share your thoughts and questions! (Link to Part Two would go here)

The above is the detailed content of JavaScript Array Methods, Under the Hood (Part ). For more information, please follow other related articles on the PHP Chinese website!