JavaScript, Theory

JavaScript. Methods that modify the array. Part 2

Methods that modify the array. Part 2. Methods pop(), push(), reduce(), reduceRight(), shift(), unshift(), fill()

Contents

Search on other Web-resources:

1. Method pop(). Remove the last element from the array

The pop() method performs the following operations:

  • returns the last element of the array;
  • removes this last element.

Using the pop() method in the program looks like this

number = array.pop()

where

  • number – the last element in the array array. If the array is empty [], then number = undefined;
  • array – the initial array from which the last element is extracted. The type of array elements can be arbitrary.

Example.

// Method pop().
// Pull the last element from the array

// Processing the array of integers.
// 1. Declare the array of numbers and output it
var A1 = new Array( 1, 2, 3, 4, 5 )
console.log("A1:")
console.log(A1)

// 2. Call the pop() method
var number = A1.pop() // number = 5

// 3. Output the modified array.
console.log("A1:")
console.log(A1) // A1 = [ 1, 2, 3, 4 ]

// 4. Output the resulting number
console.log("number = " + number)

console.log("Ok");

Result

A1:
[ 1, 2, 3, 4, 5 ]
A1:
[ 1, 2, 3, 4 ]
number = 5
Ok

  ⇑

2. Method push(). Add one or more elements to the end of array

The push() method is used to add a new element to the end of array. The array size increases. The method returns the new length of the array.

Using a method in a program can be, for example, like this

length = array.push(item1, item2, ..., itemN)

where

  • item1, item2, itemN – elements attached to the array array;
  • array – array to be formed;
  • length – array length (integer).

Example.

// Method push().
// Add a new element to the end of array

// 1. Form the array of elements of different types
// 1.1. Declare the empty array of numbers
var A1 = new Array()

// 1.2. Append to array of different types elements
A1.push(25)
A1.push("abcd")
A1.push(2.237)
A1.push('+')
var length = A1.push(true) // length = 5

// 1.3. Display array A1
console.log("A1:")
console.log(A1)

// 1.4. Print the new length of the array
console.log("A1.length = " + length)

// 2. Form an array based on two other arrays
// 2.1. Declare an empty result array and two arrays filled with data
var B1 = [] // resulting array
var B2 = ['1', '2', '3']
var B3 = [10, 28, 33, 49]

// 2.2. Call the push() method, get the new length of the array
length = B1.push(B2, B3) // B1 = [ [ '1', '2', '3' ], [ 10, 28, 33, 49 ] ]

// 2.3. Display the resulting array
console.log("B1:")
console.log(B1)

// 2.4. Display the new length of array
console.log("B1.length = " + length)

console.log("Ok");

Result

A1:
[ 25, 'abcd', 2.237, '+', true ]
A1.length = 5
B1:
[ [ '1', '2', '3' ], [ 10, 28, 33, 49 ] ]
B1.length = 2
Ok

  ⇑

3. Methods reduce() and reduceRight(). Merge two array values into one

The reduce() and reduceRight() methods sequentially scan the array and execute the given inverse function on the pair of current and previous elements. The reduce() method examines the array from left to right. The reduceRight() method examines array from right to left.

The use of methods in the program is as follows

result = array.reduce(Func)
result = array.reduceRight(Func)

where

  • array – the source array;
  • result – the result obtained by combining adjacent array elements;
  • Func – callback function, which defines the formula for combining or using adjacent array elements.

In the program, the inverse function Func() is declared as follows:

function Func(previousValue, currentValue, currentIndex, array) {
  // Actions that define a formula for reducing an array to a single value
  // ...
}

where

  • previousValue – the previous value in the array. For the reduce() method, the previous value with the lower index. For the reduceRight() method, the value with the larger index is prepended;
  • currentValue – current value in the array. This value is array[currentIndex];
  • currentIndex – index (position) of currentValue;
  • array – the name of array to be processed.

Example.

The example shows how to calculate the sum of array elements using the reduce() and reduceRight() functions.

// Methods reduce() and reduceShift()
// Merge two array values into one

// 1. Declare the array of numbers
var A1 = new Array(1, 2, 3, 4, 5, 6, 7)

// A function that determines the sum of the previous and next values,
// thus calculating the sum of the elements of the array
function Func(previousValue, currentValue, currentIndex, array) {
  return previousValue + currentValue
}

// Calculate the sum
var sum = A1.reduce(Func)

console.log("A1 => " + A1)
console.log("reduce(A1) = " + sum)

sum = A1.reduceRight(Func)
console.log("reduceRight(A1) = " + sum)

console.log("Ok");

Result

A1 => 1,2,3,4,5,6,7
reduce(A1) = 28
reduceRight(A1) = 28
Ok

  ⇑

4. Method shift(). Pull the first element from the array

The shift() method removes the first element from the array. Using the method in the program is as follows

item = array.shift()

here

  • array – array from which the first element is extracted;
  • item is the element that was retrieved.

The shift() method returns the element extracted from the array.

Example.

// Method shift(). Pull the first element from array
// 1. Declare array of numbers
var A = new Array(1, 2, 3, 4, 5, 6, 7)

// 2. Pull out the element
var number = A.shift()

// 3. Print the array A and the number
console.log("A => " + A)
console.log("number = " + number)

// 4. Declare array of strings
var S = ["abc", "ac", "abcd", "jklmn"]

// 5. Pull first 2 elements from array S
S.shift()
S.shift()

// 6. Display array S
console.log("S => " + S)

Result

A => 2,3,4,5,6,7
number = 1
S => abcd,jklmn

  ⇑

5. Method unshift(). Inserting elements at the beginning of another array

The unshift() method inserts one or more elements before the beginning of the source array. Using the method has several implementations:

array.unshift(item1, item2, itemN)
array.unshift(item)
array.unshift(arrayItems)

where

  • array – the original array;
  • item, item1, item2, itemN – separate elements that are inserted at the beginning of the array;
  • arrayItems – the array of elements to be inserted at the beginning of the array.

Example.

// Method unShift().Insert one or more elements at the beginning of the array.

// 1. The original array of numbers
var A = new Array( 0, 1, 2, 3, 4, 5, 6, 7 )

// 2. The array of strings to be inserted at the beginning of array A
var B = ["abc", "ab", "cde"]

// 3. Call the unShift() method
A.unshift(B) // insert the array
A.unshift(233) // insert one number
A.unshift(true, '+') // insert 2 elements

// 4. Display the result
console.log("A = " + A)
console.log("B = " + B)

Result

A = true,+,233,abc,ab,cde,0,1,2,3,4,5,6,7
B = abc,ab,cde

  ⇑

6. Method fill(). Fill array fragment with value

Using the fill() method, you can fill an array or its fragment with a specific value. We consider 3 cases of using the fill() method.

Way 1. Calling a method with 1 parameter. In this case, the value fills the entire original array

array1.fill(value)
array2 = array1.fill(value)

where

  • array1 – source array. This array is being modified;
  • array2 – resulting array;
  • value – a value that fills the entire array array1.

Way 2. Calling a method with 2 parameters

array1.fill(value, start)
array2 = array1.fill(value, start)

where

  • array1 – output array. This array also changes;
  • array2 – resulting array;
  • value – value that fills the array1 array from the start position to the end of the array;
  • start – position (starts from 0), from which the filling of the array with the value starts.

Way 3. Calling a method with 3 parameters

array1.fill(value, start, end)
array2 = array1.fill(value, start, end)

where

  • array1 – the source array. This array also changes;
  • array2 – resulting array;
  • value – the value that fills the array array1;
  • start, end – respectively, the starting and ending positions (indices) of array1, indicating the range to be filled. The range is filled [start; end-1].

Example.

// Method fill(). Fill the array with a value.

// 1. Calling a method with one parameter
// 1.1. The source array of numbers
var A1 = new Array( 10, 11, 12, 33, 41, 55, 60, 87 )

// 1.2. Fill entire array with value 3
var A2 = A1.fill(3)

// 1.3. Display the result
console.log("A1 = " + A1)
console.log("A2 = " + A2)

// 2. Calling a method with 2 parameters
// 2.1. Declare the array of objects of different types
var B1 = [2, "abc", true, 2.18, -1.7, [2, 3]]

// 2.2. Fill array with '+' values starting from position 2
var B2 = B1.fill('+', 2)

// 2.1. Display the result
console.log("B1 = " + B1)
console.log("B2 = " + B2)

// 3. Calling method with 3 parameters
// 3.1. Declare the array of strings
var C1 = ["a", "b", "c", "d", "ef", "gh"]

// 3.2. Fill the array with the number 7.77 starting from position 1, ending with position 3 inclusive
var C2 = C1.fill(7.77, 1, 4)

// 3.3. Display the result
console.log("C1 = " + C1)
console.log("C2 = " + C2)

Result

A1 = 3,3,3,3,3,3,3,3
A2 = 3,3,3,3,3,3,3,3
B1 = 2,abc,+,+,+,+
B2 = 2,abc,+,+,+,+
C1 = a,7.77,7.77,7.77,ef,gh
C2 = a,7.77,7.77,7.77,ef,gh

  ⇑

Related topics

  ⇑