Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

To get a job as a front end developer, we need to nail the coding interview.

In this article, we’ll look at some JavaScript array questions.

Implement the Array.prototype.map method by hand.

The Array.prototype.map method maps each array entry to new entry by calling a callback function to do the mapping.

It returns a new array with the mapped values.

We can implement it as follows:

const map = (arr, callback) => {
  if (!Array.isArray(arr)) {
    return [];
  }
  const newArr = [];
  for (let i = 0, len = arr.length; i < len; i++) {
    newArr.push(callback(arr[i], i, arr));
  }
  return newArr;
}

First, we check if arr is an array, we return an empty array if it’s not.

In the code above, we have the map method that loops through each array entry and calls a callback with the array entry, index, and the original array passed in. Each entry is pushed to newArr array.

Then it returns the newArr array, which has the mapped entries.

Implement the Array.prototype.filter method by hand.

The Array.prototype.filter method returns a new array that takes the elements from the original array that meets the predicate in a callback, push those entries into a new array, then returns it.

We can implement that as follows:

const filter = (arr, callback) => {
  if (!Array.isArray(arr)) {
    return [];
  }
  const newArr = [];
  for (let i = 0, len = arr.length; i < len; i++) {
    if (callback(arr[i], i, arr)) {
      newArr.push(arr[i]);
    }
  }
  return newArr;
}

In the code above, we first check if arr is an array. We return an empty array if it’s not.

Then we loop through arr and then use an if block to check if the callback call returns true , then we push those entries to newArr and returns it.

Implement the Array.prototype.reduce method by hand.

The Array.prototype.reduce method combines an array’s entry into one by calling a callback repeatedly to combine the array entries into one value.

For example, we can write the following:

const reduce = (arr, reduceCallback, initialValue) => {
  if (!Array.isArray(arr)) {
    return;
  }
  let val = initialValue || 0;
  for (let i = 0, len = arr.length; i < len; i++) {
     val = reduceCallback(val, arr[i]);
  }
  return val;
}

We first check if arr is an array, then we return if it’s not an array.

Then we set val to initialValue if it exists or 0.

Next, we loop through the array and then use the reduceCallback to combine val and arr[i] and returns the new value and assign it to val .

Once the loop is done, we return val .

What’s the arguments object?

The arguments object is an array-like object that returns the arguments that are passed into a traditional function.

It doesn’t work with arrow functions.

It’s an array-like object because its entries can be accessed by indexes and it has a length property. arguments has no array methods.

Also, it can be looped through by the for...of loop and be converted to an array with the spread operator.

For example, if we write:

function logArgs() {
  console.log(arguments)
}

logArgs(1, 2, 3, 4, 5);

Then we see something like:

Arguments(5) [1, 2, 3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]

from the console.log .

We can see the entries and the Symbol.iterator method, so we know it’s an iterable object.

We can convert it to an array using the spread operator as follows:

function logArgs() {
  console.log([...arguments])
}

logArgs(1, 2, 3, 4, 5);

Then the console.log gives [1, 2, 3, 4, 5] , which is a regular array.

For arrow functions, we use the rest operator to get all the arguments as follows:

const logArgs = (...args) => {
  console.log(args)
}

logArgs(1, 2, 3, 4, 5);

We see [1, 2, 3, 4, 5] logged.

How do you add an element at the beginning of an array?

We can use the Array.prototype.unshift method to add an element to the beginning of an array.

For example, we can write:

const arr = [2, 3, 4];
arr.unshift(1);

Then arr is [1, 2, 3, 4] .

The spread operator also works for this:

let arr = [2, 3, 4];
arr = [1, ...arr];

Note that we changed const to let since we assigned to a new value.

How do you add an element at the end of an array?

We can use the push method to do add an entry to the end of an array.

For example, we can write:

const arr = [2, 3, 4];
arr.push(1);

Then arr is [2, 3, 4, 1] .

The spread operator also works for this:

let arr = [2, 3, 4];
arr = [...arr, 1];

Note that we changed const to let since we assigned to a new value.

Conclusion

We learn more about JavaScript arrays by implementing the array methods from scratch and practice doing common operations with them.