Skip to content

3.4 Array Helpers Part 1

map()

Task 1: Create an array that contains numbers from 0 to 10.

var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

Task 2: Refer to task 1; add 1 to every element in numbers array. Hint: use forEach.

var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
numbers.forEach(function(num, numIndex){
  numbers[numIndex] = num + 1;
});

console.log(numbers);

The result is: (11) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

Task 3: Refer to task 1; replace every number with its square in numbers array. Hint: use forEach and the arrow function.

var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
numbers.forEach((num, numIndex) => numbers[numIndex] = num * num);

console.log(numbers);

The result is: (11) [0, 1, 4, 9, 16, 25, 36, 49, 64, 81, 100]

Task 4: Check the code below, and compare it with the task 2 code.

var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
numbers.map(function(num, numIndex){
  numbers[numIndex] = num + 1;
});

console.log(numbers);

The result is: (11) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

Task 2 code is almost the same as task 4 code. However, task 4 code uses a new array method map().

Task 5: Check the code below, and compare it with the task 3 code.

var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
numbers.map((num, numIndex) => numbers[numIndex] = num * num);

console.log(numbers);

The result is: (11) [0, 1, 4, 9, 16, 25, 36, 49, 64, 81, 100]

It seems both array.map() and array.forEach() produce the same result. Let's investigate more!

Task 6: Create a new array from the array below. Every element of the new array is the same element of the old array plus 4. Hint: use map() and the arrow function.

var numbers = [10, 20, 30, 40, 50];
var newNumbers = numbers.map(num => num + 4);

console.log(newNumbers);

The result is: (5) [14, 24, 34, 44, 54]

Task 7: Refer to task 6; what are the elements of numbers array after using map()?

var numbers = [10, 20, 30, 40, 50];
var newNumbers = numbers.map(num => num + 4);

console.log(numbers);

The result is: (5) [10, 20, 30, 40, 50]

map()

Using array.map(), we can create a new array from an array without changing the original array.

array.map() takes a function as an input, and it returns a new array.

This input function accepts up to three arguments:

  1. currentValue: the current element being processed in the array. It is required.
  2. index: the index of the current element. It is optional.
  3. array: the array itself. It is optional.

Task 8: Create a new array from the array below. Every element of the new array is the same element of the original array multiplied by 10.

var numbers = [55, 7, 81, 4515, 479, 10];
var newNumbers = numbers.map(num => num * 10);

console.log(newNumbers);

The result is: (6) [550, 70, 810, 45150, 4790, 100]

Task 9: Refer to task 8; can we use forEach instead of map() to produce newNumbers array? Prove your answer with written code.

We cannot use forEach instead of map() to produce a new array because forEach returns undefined.

var numbers = [55, 7, 81, 4515, 479, 10];
var newNumbers = numbers.forEach(num => num * 10);

console.log(newNumbers);

The result is: undefined

Task 10: Refer to task 9; can you follow another approach to produce newNumbers array using forEach?

var numbers = [55, 7, 81, 4515, 479, 10];
var newNumbers = [];

numbers.forEach((num, numIndex) => newNumbers[numIndex] = num * 10);

console.log(newNumbers);

The result is: (6) [550, 70, 810, 45150, 4790, 100]

Task 11: Create a new array from the array below, but only include the even numbers in the new array. Hint: use map() and the arrow function.

var numbers = [580, 710, 10, 45, 781, 12];
var newNumbers = numbers.map(num => ((num % 2) === 0 ? num : "not even"));
console.log(newNumbers);

The result is: (6) [580, 710, 10, "not even", "not even", 12]

Task 12: Create a new array from the array below, but only include the odd numbers in the new array. Hint: use map() and the arrow function.

var numbers = [580, 710, 10, 45, 781, 12];
var newNumbers = numbers.map(num => ((num % 2) !== 0 ? num : "not odd"));
console.log(newNumbers);

The result is: (6) ["not odd", "not odd", "not odd", 45, 781, "not odd"]

The modulus operator %

The modulus operator % returns the remainder obtained by dividing two numbers.

filter()

Task 13: Re-do task 11 replacing map with filter. Also, remove the ternary operator. Check the result.

var numbers = [580, 710, 10, 45, 781, 12];
var newNumbers = numbers.filter(num => (num % 2 === 0));

console.log(newNumbers);

The result is: (4) [580, 710, 10, 12]

filter()

Using array.filter(), we can create a new array from an array without changing the original array. The new array contains all the elements that satisfy the condition provided by the input function.

array.filter() takes a function as an input, and it returns a new array.

This input function accepts up to three arguments:

  1. currentValue: the current element being processed in the array. It is required.
  2. index: the index of the current element. It is optional.
  3. array: the array itself. It is optional.

Task 14: Re-do task 13 using filter().

var numbers = [580, 710, 10, 45, 781, 12];
var newNumbers = numbers.filter(num => (num % 2 !== 0 ));

console.log(newNumbers);

The result is: (2) [45, 781]

Task 15: Create a new array from the array below. The new array contains only 3 character long strings.

var names = ["Sami", "Sanad", "Ali", "Nawras", "Jad", "Ola", "JoJo", "Ahmed", "Lolo"];
var shortNames = names.filter(function(name){
       return name.length === 3;
});

console.log(shortNames);

The result is: (3) ["Ali", "Jad", "Ola"]

Task 16: Create a new array from the array below. The new array contains only the true values in the original array.

var values = ["value1", undefined, "val9", null, false, true, 87];
var trueValues = values.filter(value => !!value);

console.log(trueValues);

The result is: (4) ["value1", "val9", true, 87]

Task 17: Create a new array from the array below. The new array contains only the false values in the original array.

var values = ["value1", undefined, "val9", null, false, true, 87];
var falseValues = values.filter(value => !value);

console.log(falseValues);

The result is: (3) [undefined, null, false]

Task 18: Filter all numbers except ones out of the array below.

var numbers = [5, 2, 1, 5, 87, 1, 9, 100, 10, 0, 1];
var ones = numbers.filter(num =>  num === 1);

console.log(ones);

The result is: (3) [1, 1, 1]

Task 19: Filter all numbers except zeros out of the array below.

var numbers = [5, 2, 1, 5, 87, 1, 9, 100, 10, 0, 1, 0, 1, 0];
var zeros = numbers.filter(num =>  num === 0);

console.log(zeros);

The result is: (3) [0, 0, 0]

Task 20: Filter the array below to contain numbers greater than 50 only.

var numbers = [5, 2, 1, 5, 87, 1, 9, 100, 10, 0, 1, 0, 1, 0];
var greatThan50 = numbers.filter(num =>  num > 50);

console.log(greatThan50);

The result is: (2) [87, 100]

Task 21: Filter the array below to contain positive numbers only.

var numbers = [5, 2, 1, -5, 87, -1, 9, 100, -10, 0, 1, 0, 1, 0];
var positiveNumbers = numbers.filter(num =>  num >= 0);

console.log(positiveNumbers);

The result is: (11) [5, 2, 1, 87, 9, 100, 0, 1, 0, 1, 0]

Task 22: Filter the array below to contain negative numbers only.

var numbers = [5, 2, 1, -5, 87, -1, 9, 100, -10, 0, 1, 0, 1, 0];
var negativeNumbers = numbers.filter(num =>  num < 0);

console.log(negativeNumbers);

The result is: (3) [-5, -1, -10]

Task 23: Create a new array from the array below. Make sure not to include null values in the new array.

var values = ["null", 0, "Something", "undefined", null, false, true, null, "not to include", undefined, undefined];
var newValues = values.filter(function(value){
  return (value !== null);
});

console.log(newValues);

The result is: (9) ["null", 0, "Something", "undefined", false, true, "not to include", undefined, undefined]

Task 24: Create a new array from the array below. Make sure not to include undefined values in the new array.

var values = ["null", 0, "Something", "undefined", null, false, true, null, "not to include", undefined, undefined];
var newValues = values.filter(function(value){
  return (value !== undefined);
});

console.log(newValues);

The result is: (9) ["null", 0, "Something", "undefined", null, false, true, null, "not to include"]

Task 25: Let's remove all null and undefined values from the task 23 array.

var values = ["null", 0, "Something", "undefined", null, false, true, null, "not to include", undefined, undefined];
var newValues = values.filter(function(value){
  return (value !== null);
}).filter(value => value !== undefined);

console.log(newValues);

The result is: (7) ["null", 0, "Something", "undefined", false, true, "not to include"]   ​