Polyfill: concat()

Easy Important

Prompt

Imagine the JavaScript array method .concat() does not exist. Your task is to implement a polyfill for .concat(), ensuring your solution handles all edge cases. Code your solution in JavaScript and include a brief discussion of your approach.

Playground

Hint 1

First, understand what the native concat function does. It merges two or more arrays and returns a new array without modifying the original arrays. How can you replicate this behavior?

Hint 2

Remember that concat can accept multiple arguments, and each argument could be an array or a single value. Consider how you'll handle each type of argument.

Hint 3

The concat method creates a new array rather than modifying the original. Make sure your implementation creates and returns a new array with all the concatenated values.

Solution

Explanation

The concat method is one of the fundamental array manipulation tools in JavaScript. It allows us to combine multiple arrays and values into a single new array.

Unlike some of the other array methods we've seen like map and filter which transform data, concat is all about combining data. Let's break down how our polyfill works:

First, we define a new method on the Array.prototype called myConcat. This function accepts any number of arguments using the rest parameter syntax (...args). This is important because concat can take any number of arguments:

array.concat(value1, value2, /* …, */ valueN)

Inside our implementation, the first thing we do is create a new array that contains all the elements from the original array. This is crucial because concat doesn't modify the original array - it returns a brand new one:

const newArray = [...this];

Next, we iterate through each argument that was passed to our method:

for (const arg of args) {
  // Process each argument
}

Here's where it gets interesting: concat has special behavior for handling arrays versus single values. If you pass an array to concat, it doesn't add that array as a nested item - it spreads out the array's elements and adds them individually. But if you pass a non-array value, it adds that value as a single element.

Our polyfill checks if each argument is an array:

if (Array.isArray(arg)) {
  // If the argument is an array, add its elements individually
  for (const item of arg) {
    newArray.push(item);
  }
} else {
  // If the argument is not an array, add it as a single element
  newArray.push(arg);
}

Finally, we return the newly created array with all the concatenated values:

return newArray;

One important thing to note: concat only flattens arrays by one level. If you pass a nested array like [1, [2, 3]], the nested array remains intact in the result. You can see this in our Test 3.

When should you use concat? It's perfect for situations where you need to combine multiple arrays or add elements to an array without modifying the original. Since it returns a new array, it's ideal for functional programming patterns where immutability is valued.

Common Pitfalls

Modifying the Original Array: The concat method should never change the original array. A common mistake is accidentally mutating the array you're calling concat on.
Misunderstanding Array Spreading: Remember that concat only spreads arrays by one level. It won't deeply flatten nested arrays. If you need deeper flattening, you might want to look at flat() or flatMap().
Forgetting to Handle Non-Array Arguments: Make sure your implementation can handle both array and non-array arguments correctly, as both are valid inputs for concat.

00:00