Javascript Array Methods: Unshift(), Shift(), Push(), And Pop()

push() and pop() methods - work at the end of the array, where the index is largest.
unshift() and shift() - work on the beginning of the array, where the index is smallest.

Note: Unshift() and shift() are basically the same as push() and pop(), only, at the other end of the array.

Javascript Array: Push() Method
The push() method can append one or more elements to the end of an array. This alters the array on which the method was called.
// Build an array of test data.
var data = [ "X" ];

// Push data onto the array.
data.push( "A" );

/* Note that it can take more than one argument, each of which is individually appended to the array.
 In the output, notice that when push() takes multiple arguments  they are appended in a left-to-right order (mimicking their
appearance in the arguments list). */
data.push( "B", "C" );

// Output resultant array.
console.log( data );
When we run the above code, we get the following console output:
["X", "A", "B", "C"]
Javascript Array: Pop() Method
The pop() method pulls the last element off of the given array and returns it. This alters the array on which the method was called. If you call pop() on an empty array, it returns an undefined value.
// Build an array of test data.
var data = [ "A", "B", "C" ];

// Pop the element off of the end of the array.
console.log( data.pop() );
console.log( data );
When we run the above code, we get the following console output:
C
["A", "B"]
Javascript Array: Unshift() Method
The unshift() method is like the push() method, only it works at the beginning of the array. The unshift() method can prepend one or more elements to the beginning of an array. This alters the array on which the method was called.
// Build an array of test data.
var data = [ "X" ];

// Unshift data onto the array. 
data.unshift( "A" );

/* Note that it can take more than one argument. In the output, notice that when unshift() takes multiple arguments, they are prepended in a right-to-left order (mimicking their appearance in the arguments list). */
data.unshift( "B", "C" );

// Output resultant array.
console.log( data );
When we run the above code, we get the following console output:
["B", "C", "A", "X"]
Javascript Array: Shift() Method
The shift() method is like the pop() method, only it works at the beginning of the array. The shift() method pulls the first element off of the given array and returns it. This alters the array on which the method was called. If you call shift() on an empty array, it returns an undefined value.
// Build an array of test data.
var data = [ "A", "B", "C" ];

// Shift the element off of the beginning of the array.
console.log( data.shift() );
console.log( data );
When we run the above code, we get the following console output:
A
["B", "C"]

It used to be difficult for me to always keep it straight in my head which end of the array push() and pop() operated on (especially when reading unfamiliar code). But, now that I realize that unshift() and shift() are the same as push() and pop() only at the opposite end of the array, it certainly helps keep a certain mental order. I hope that this helps others at it has helped me.

Source: http://www.bennadel.com/blog/1796-javascript-array-methods-unshift-shift-push-and-pop.htm

Comments

Popular Posts