Push and Pop are two popular methods for handling arrays in JavaScript; this short post explores both array methods.
Push
Push is used to add elements to the end of an array and returns the array’s new length. Pushing a new element into an empty array will return a value of 1 (the new length of the array).
Invoking push with no values has no effect on the original array.
let array = [1, 2]; array.push(4); // output: 3 (new length of the array) array (3) [1, 2, 4]
Push can be used to add multiple values; it has variadic arity.
array.push('a', 'b', 'c');
// output: 6 (new length of the array)
array;
(6) [1,2,4,'a','b','c']
Applying Push to non-Array objects
Push is generic and can be applied to mutable Array-like objects (i.e. not strings or the arguments object).
Push relies on a length property to determine where to add new entries. If length cannot be cast to a number, push will create a new length property starting from 0.
New length property creation
var obj = {};
[].push.call(obj, 1);
console.log(obj);
// {0: 1, length: 1}
In the code above, push created the length property and incremented it.
Casting length to a number
var obj = { length: '1' }; // '1' is a string
[].push.call(obj, 1);
console.log(obj);
// {0: 1, length: 2}
Overwrite of the length property
var obj = { length: 'a' }; // 'a' is not coercible
[].push.call(obj, 1);
console.log(obj);
// {0: 1, length: 1}
Pop
Pop is the inverse of Push; it removes values from the end of an array. However unlike push, pop returns the value that was popped off and not the length of the array. Pop is a nullary function: its arity is zero.
Pop invocations on empty arrays will return undefined.
Surprising asymmetry in the JavaScript language design
let popArray = [1, 2, 4]; popArray.pop(); // output: 4 (the rightmost element in the array) array (2) [1, 2]
Applying Pop to non-Array objects
Pop is generic (like push) and can be similarly applied to array-like objects.
New length property creation
var obj = {};
[].pop.call(obj);
console.log(obj);
// {length: 0}
In the code above, push created the length property.
Casting length to a number
var obj = { length: '1' }; // '1' is a string
[].pop.call(obj);
// pop
console.log(obj);
// { length: 0 }
Overwrite of the length property
var obj = { length: 'a', 0:'pop' };
[].pop.call(obj);
// undefined
console.log(obj);
// {0: 'pop', length: 0}
