FreeCodeCamp and JavaScript: The Global Array Object Part 2

So, last time we looked at the definition of a Global Array, and how to create one.  We also looked at the length property.

Let’s look at another side of the length property.  It’s connected to a number of the array properties – we’ll cover them later; for now, note they are operations that can be performed on arrays that are built-in to JavaScript.  Some of these methods will use the length property, and others can change the length property (when you add, delete, or otherwise modify (mutate) the array).

From MDN, our first example is the push method, where we add (“push” an item into) to the array.

var fruits = [];
fruits.push(‘banana’, ‘apple’, ‘peach’);

console.log(fruits.length); //3

Now, if you have this array of length 3, and you create a new item of key 5 (element[5]) – and note, you don’t need element[4], because it’s just assumed to be empty, remember what we said about arrays not necessarily being dense – you will now have a length of 5, because JavaScript updates it automatically:

fruits[5] = ‘mango’;
console.log(fruits[5]); // ‘mango’
console.log(Object.keys(fruits)); // [‘0’, ‘1’, ‘2’, ‘5’]
console.log(fruits.length); // 6

We can also just use a statement to increase the length, without filling in the array and just keeping the elements we’ve already entered:

fruits.length = 10;
console.log(Object.keys(fruits)); // [‘0’, ‘1’, ‘2’, ‘5’]
console.log(fruits.length); // 10

Be warned, though; if you decrease the length this way you might end up deleting some variables!

fruits.length = 2;
console.log(Object.keys(fruits)); // [‘0’, ‘1’]
console.log(fruits.length); // 2

In addition to the length property, arrays have the Array.prototype property.  This allows you to create arrays and give them properties.  All the arrays you create this way inherit the properties of the array.prototype.  Inheritance is a whole ‘nother subject, and all I’m going to say for now (wildly oversimplifying) is that every array (or “instance” of an array) you create “inherits” the properties of array.prototype, which means they already exist and you don’t have to create them or link them or anything.  You can just go ahead and use them on your array.

There are several methods attached to array.prototype –  note that MDN covers all of these in separate entries, so I’m going to just list them and give a quick description:

  • Array.from() – You can create an array from an “array-like or iterable object”.
  • Array.isArray() – Well, is it or isn’t it? Returns true or false to let you know!
  • ArrayOf() – This is another way to create an array.

So, you’ve got your array, which is an “instance” of the array.prototype, and you want to modify it, which is called “mutating” it.  Here’s some of the “methods” for doing just that:

  • copyWithin() – Copy elements from one part of an array to another, overwriting the elements that were already there.
  • fill() – You can “fill” an array with a value of your choosing at wherever you specify that value to be put.
  • pop() – You use this to get the last item in an array returned to you – and it then deletes that last item from the array.
  • push() –  You use this to add an item to the end of an array.  It’ll return the new length value
  • reverse() – Re-orders the array by, you guessed it, “reversing” the order of the elements
  • shift() – This is similar to pop() but you get the FIRST element back, which is then deleted from the array.
  • sort() – This will sort the array (alphabetically, numerically, but most especially in Unicode order)
  • splice() – You can insert an element or remove an element in an array with this method. I covered this one here.
  • unshift() – You can add an element(s) to the front of the array and it returns the new length to you.

Finally, for today, we’re going to look at so-called “accessor” methods. These methods don’t modify the original array, they just return the result of the method.

  • concat() – I covered this one here.
  • join() –  This will take all the elements and make one big string out of them with a separator of your choice between the elements.
  • slice() – I covered this one here.
  • toString() – This will take all the elements and make one big string out of them.
  • toLocaleString() – Returns elements as a string, using a “locale-specific” separator, based on your geographic location.
  • indexOf() –  I covered this one here.
  • lastIndexOf() – Similar to indexOf(), but finds the LAST occurrence instead of the first.

That’s enough for today.  I encourage you to explore the methods above; you never know when you’re going to end up using one, and it’s easier to use one that exists than writing one from scratch.  Try writing a reverse() method or sort() method yourself – I did it in Java.  This is much easier and convenient!

I’ll have one more post in the future on Global Arrays.  See you later!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s