Use `push` to append an item to an array and change its length. For end-of-array changes, prefer it over `unshift` when front insertion is unnecessary: `push` is significantly faster. section 9.1.2
Listing 9.2. Adding and removing array items
const ninjas = []; #A
assert(ninjas.length === 0, "An array starts empty"); #A
ninjas.push("Kuma"); #B
assert(ninjas[0] === "Kuma", #B
"Kuma is the first item in the array"); #B
assert(ninjas.length === 1, "We have one item in the array"); #B
ninjas.push("Hattori"); #C
assert(ninjas[0] === "Kuma", #C
"Kuma is still first"); #C
assert(ninjas[1] === "Hattori", #C
"Hattori is added to the end of the array"); #C
assert(ninjas.length === 2, #C
"We have two items in the array!"); #C
ninjas.unshift("Yagyu"); #D
assert(ninjas[0] === "Yagyu", #D
"Now Yagyu is the first item"); #D
assert(ninjas[1] === "Kuma", #D
"Kuma moved to the second place"); #D
assert(ninjas[2] === "Hattori", #D
"And Hattori to the third place"); #D
assert(ninjas.length === 3, #D
"We have three items in the array!"); #D
const lastNinja = ninjas.pop(); #E
assert(lastNinja === "Hattori", #E
"We've removed Hattori from the end of the array"); #E
assert(ninjas[0] === "Yagyu", #E
"Now Yagyu is still the first item"); #E
assert(ninjas[1] === "Kuma, #E
"Kuma is still in second place"); #E
assert(ninjas.length === 2, #E
"Now there are two items in the array"); #E
const firstNinja = ninjas.shift(); #F
assert(firstNinja === "Yagyu", #F
"We've removed Yagyu from the beginning of the array"); #F
assert(ninjas[0] === "Kuma", #F
"Kuma has shifted to the first place"); #F
assert(ninjas.length === 1, #F
"There's only one ninja in the array"); #F
See `push` add items to the end of an array and update its length. section 9.1.2
You can also borrow `Array.prototype.push` for an array-like object: give it a `length` property, then call the method with that object as its context. section 9.1.5
Listing 9.13. Simulating array-like methods
<body>
<input id="first"/>
<input id="second"/>
<script>
const elems = {
length: 0, #A
add: function(elem){ #B
Array.prototype.push.call(this, elem); #B
}, #B
gather: function(id){ #C
this.add(document.getElementById(id)); #C
}, #C
find: function(callback){ #D
return Array.prototype.find.call(this, callback); #D
} #D
};
elems.gather("first");
assert(elems.length === 1 && elems[0].nodeType,
"Verify that we have an element in our stash");
elems.gather("second");
assert(elems.length === 2 && elems[1].nodeType,
"Verify the other insertion");
elems.find(elem => elem.id === "second");
assert(found && found.id === "second",
"We've found our element");
</script>
</body>
The example uses `push.call` to add browser elements to a custom object with a `length` property. section 9.1.5
