Bo dinglesTM - -   Bright Lightbulb Graphic Ideas   - -

The Web Developer Bootcamp 2024

Colt Steele

Back to JavaScript Index Page


JavaScript Arrays

JavaScript Arrays PDF

An array is a special variable, an object, which can hold more than one value such as a list of cars, or a list different colors. Arrays are an ordered collection of data. The order starts from the left and arrays are indexed from left to right, starting at index[0].

The Array object, as with arrays in other programming languages, enables storing a collection of multiple items under a single variable name, and has members for performing common array operations.

In JavaScript, arrays aren't primitives but are instead Array objects with the following core characteristics:

  • - JavaScript arrays are resizable and can contain a mix of different data types.
  • - JavaScript arrays are not associative arrays and so, array elements cannot be accessed using arbitrary strings as indexes, but must be accessed using nonnegative integers (or their respective string form) as indexes.
  • - JavaScript arrays are zero-indexed: the first element of an array is at index 0, the second is at index 1, and so on — and the last element is at the value of the array's length property minus 1.


Creating Arrays

Arrays are created using the Squeare Brackets [].

  • let students = []; // an empty array
  • let colors = ['red', 'orange', 'yellow']; // an array of strings
  • let nums = [19, 22, 56, 12, 21]; // an array of numbers
  • let stuff = [true, 'cat', 68, null]; // a mixed array


Accessing Array Items

Arrays are indexed in the same way that strings are. The indexing starts at 0 (zero) and end at the last array item (array.length -1). You can access any array datapoint by using the square brackets [] and referencing the data index within the array.

Doc Dopey Bashful Grumpy
0 1 2 3

So array.length = 4 and the complete array = Doc, Dopey, Bashful, & Grumpy. You can access individual elements of the array using the square brackets [].
example:

  • array[0] = Doc
  • array[3] = Grumpy
  • array[4] = undefined // no item exists at array[8]

You can edit items in the array by referencing their index number. You can change both the data, AND the data type.
example:

  • array[2] = 27;
So the array.length is still 4 but now consists of:
Doc Dopey 27 Grumpy
0 1 2 3


Adding Array Items

You can ADD new items to the array by referencing a NEW index number. Right now our indexes are 0, 1, 2, & 3.
example:

  • array[4] = 'Sneezy';
So now our array.length = 5 and is:
Doc Dopey Bashful Grumpy Sneezy
0 1 2 3 4

Interestingly enough, when you add a new item, it does not have to be at the end of the array. You could add say,

  • array[7] = 'Rudolph';
So now our array.length = 8 and is:
Doc Dopey Bashful Grumpy Sneezy empty empty Rudolph
0 1 2 3 4 5 6 7

When you add items that are not on the end of the existing array items, those empty indexes become undefined items.

If you don't know how many items are in the array you could use array[array.length] = 'newItem';. Since array indexes start at 0(zero), and the length of the array starts counting at 1(one), the length of the array will also reference the next new item index.

But, a better way to insert new items is to use:

  • Unshift('newItem'): Add a new item to the start
  • Push('newItem'): Add new item at the end
  • Shift(): Remove the item from the start
  • Pop(): Remove the item at the end

pop() and shift() do NOT require arguments.


Other Common Array Methods

Here are a few other commonly used Array Methods:

  • concat(): merges arrays into a new array - does not change the original arrays
  • includes(): look for a value within an array - only returns true or false - is Case Sensitive
  • indexOf(): works just like string.indexOf() - returns the position value within an array (starts counting from 0(zero) and left to right) - is Case Sensitive - returns -1 if no match
  • join(): creates a string from an array
  • reverse(): reverses the order in an array - changes the original array
  • slice(): copies a portion of an array
  • splice(): use to insert / delete / replace elements - changes the original array
  • sort(): sorts an array


Back to Top