An array is a data structure that stores an assortment of data, usually in the form of a list, with each element being identified by the array index and separated by commas. Defining an array is pretty simple and is done in a similar fashion to that of a variable, the only difference being the use of square brackets.

let numberList = [1, 2, 3];

// OR 

let numberList = [ ];

// the values can be added to the array later

You can also you the JavaScript keyword new to create a new array

let numberList = new Array( );

It should be noted that using the array constructor might give some unexpected results. (like holes in your array when an element is removed)

NB: An array is actually a unique object that uses numbers to access its elements as opposed to a regular object that uses text or names to access its elements. (I'll talk more about objects in the next blog post.)

We can access data from this structure by using the array index which starts at zero in JavaScript.

The expression is written like this:

let numberList = [1, 2, 3];

numberList[1];

// returns the number 2

Properties

The properties of this data structure can be accessed in one of two ways :

• Dot Notation

When using this type of expression, whatever comes after the dot must be a valid variable name that directly refers to a property.

let numberList = [1, 2, 3];
numberList.length 

// returns 3

The length property determines the number of the elements in the array.

• Square Brackets

With square brackets, the expression between the brackets is analyzed in order to return the property. This method is usually used with the number data type but will still run with text.

let numberList = [1, 2, 3];
numberList["length"];

// returns 3

Methods

Arrays have a number of properties that contain function values, these properties are called methods. Let's end this blog post with a couple of the most common methods you'll come across:

• Push

The Push method modifies an existing array by pushing an element into an array (at the end). It returns the new length of the array.

let numberList = [1, 2, 3];
numberList.push(4);

// returns 4

console.log(numberList)

// returns [1, 2, 3, 4]

• Pop

The Pop method modifies an existing array by removing or "popping out" an element from the end of the array. It will return the element that was removed.

let numberList = [1, 2, 3, 4];
numberList.pop( );

//   returns 4

console.log(numberList);

//  returns [1, 2, 3]

• Shift

The Shift method modifies an existing array by removing an element from the beginning of the array and 'shifting' the remaining elements into lower indexes. It returns the element removed.

let numberList = [1, 2, 3, 4];
numberList.shift( );

// returns 1

console.log(numberList);

// returns [2, 3, 4]

• Unshift

The Unshift method modifies an existing array by adding an element to the beginning of the array and moves the older elements to higher indexes. It returns the new length of the array.

let numberList = [2, 3, 4];
numberList.unshift(1);

// returns 4

console.log(numberList);

// returns [1, 2, 3, 4]

• Slice

Slice is used to copy different sections of an array. This property takes two arguments; the index that represents the beginning of the cut and the one that represents the end.

NB: the element stored in the 'end index' will not be included in the copy

let numberList = [1, 2, 3, 4];
let numShort = numberList.slice(0, 3);

console.log(numShort);

// returns [1, 2, 3]

• Join

Join can be used to stick an array of elements together, turning them into a single string. This method allows you to choose your separator.

let sentence = ["I", "like", "cake"];
console.log(sentence.join(" "));

// returns "I like cake"

That’s it for my introduction to arrays, next I’ll be talking about objects and all the fun things we can do with them.

Thanks for reading! 😁