Published on 2020-05-12
5 min read
Inherit from the Array.prototype Gets length property elements can be of various types
Creating a new array in literal form uses a simple syntax:
const empty = ;
Further, you can add values on declaration:
`const names = ['Will', 'Ashley', 'Uncle Phil'];
"The first value will get the property name '0', the second will get the property name '1', and so on.
empty; // undefined; names; // Will names.length // 3
These declarations can be declared anywhere expressions are allowed.
What in the world does this mean for JS devs? It means that you can set items to the array past its current length index and JS will increase the array's length property to contain the new element - no out of bounds error.
"The length property is the largest integer property name in the array plus 1."
The interesting part here is that the length can be changed, but the array's size in memory doesn't. This is vastly different than other languages but does make sense when you think of the array as an object. It does mean that every element that hasn't been set will be undefined though.
"The  postfix subscript operator converts its expression to a string using the expressions
toString method if it has one. That string will be used as the property name. If the string looks like a positive integer that is greater than or equal to the array's current length and is less than 4,294,965, then the length of the array is set to the new subscript plus one.
const array = [0, 1]; array.length; // 2; array = 150; array.length = 151; array; // undefined
You can manually update the length property, when making it smaller, it will delete the items above the number set.
const array = [0, 1, 2, 3, 4]; array.length; // 5 array.length = 2; console.log(array); // [0, 1];
Technically you can delete positions in the array using the delete operator;
const array = [0, 1, 2]; // don't do this delete array;
But this leaves a nasty hole in the array, which we don't want.
Other alternatives are much better!
Arrays come with the
splice method, which mutates the array and updates the positions of items within it.
This can present in problem in your web applications - why? Because as we have learned, arrays and objects are reference types. Using mutable array methods causes data to change in various places throughout the app to the same reference, which can confuse when trying to track the flow of data changing.
Secondly, many frameworks use
=== equality checks to determine whether data has changed. When we use the splice method, frameworks see the same object reference even though the data has changed.
This is why immutable manipulation is preferred over splice.
const array = [0, 1, 2]; // deletes first index array.splice(0, 1); console.log(array); // [1, 2];
Immutable means that we are not changing the initial array when deleting or adding elements, instead we are creating a new array with the updated data.
let array = [0, 1, 2]; // returns a copy of the array from index 1 const newArray = array.slice(1); console.log(newArray); // [1, 2]; // deletes index 1 const anotherNewArray = [...array.slice(0, 1), ...array.slice(2)]; console.log(anotherNewArray); // [0, 2] // array stayed the same console.log(array); // [0, 1, 2]
The book states two options to iterate through arrays,
for loops. He doesn't recommend
for...in because it doesn't guarantee order and the prototype issues we talked about in chapter 3.
There are many other ways to do so with some being added since the book was written:
while and even label with break statements.
You can read about them on MDN and see the examples.
The methods are flexible with regards to what you're trying to do. Looping through each without changing,
forEach are great. Mapping items in an array to a new structure?
Map is the way to go!
If you have any questions on specific situations please leave a comment!
He talks through adding methods to the prototype chain of Array to help with functionality in your applications. It is advised to not do this throughout the web dev community.
There are lots of great built-in methods, many being added after this book that you can read up on. Check them out here!
The last section of this chapter talks through the lack of initializing an array to a specific size of values.
fill method with amp can make this simple. Check out my article on using it correctly and you will be covered :D.
Thank you for reading!