(click anywhere to close)

[JavaScript] Arrays I

category: Website | course: JavaScript | difficulty:

Even though arrays have their own notation, possibilities and methods, they are not a data type in itself.

Arrays are ordered lists of values

Instead of assigning one value to a variable, we can assign a list of values to a single variable. It’s also allowed to put values of different data types in the same list, but I discourage that. Arrays are typically used to group a collection of values that belong together, like scores from a test or all the different products in a shop’s assortment. Using all sorts of data types alongside each other creates a mess and makes your code highly error prone.

Just like strings, arrays start at index 0, and count upwards. Unlike some other languages, the length of the array is not fixed, which means you can add and remove items from the list any time you want.

Defining Arrays

For arrays, brackets ( [ ] ) are your main special characters. Defining an array literal is done this way:

var someArray = [value1, …, valuen]

You can supply it as many values as you want (arrays can get very large), and if you leave it empty it just creates an empty array. That’s somewhat similar to an empty string ( “” ) or 0.

var x = [1,1,2,3,5,8]; //x holds six numbers

Accessing Elements

Every value of an array is called an element, or sometimes (list) item. We can only get or set a single value of the list in one statement, which is done with


var x = [1,2,3,4,5];
console.log(x[3]); //Prints 4

If you access an element that’s not in the array, which means it has no assigned value, it will return undefined. This can easily cause your program to break, so always use the right indices.

False Elements

Because in JavaScript arrays have a dynamic size, it’s possible to assign values to an element of the array that didn’t exist yet. This creates problems, because arrays are ordered lists, and we now have a lot of items with a value of undefined within the array. I call these false elements, and I recommend you stay away from them. Always build your array from the bottom to the top, without skipping any positions.

var x = [1,1,1,1];
x[5] = 100;
console.log(x[4]); //Prints undefined

Array Length

Just as with strings, the length property returns the length of the array. But, it takes shortcuts, and simply takes the last position that has a value, plus 1.

If you don’t have false elements, that’s okay. Your first element will have index 0, and your last element index (length – 1), so the array indeed holds length amount of values.

If you do have false elements, this goes wrong. The actual amount of elements is lower than the length this gives you. Another reason to prevent this from happening!

var x = [1,1,1,1];
console.log(x.length); //Prints 4

var y = [];
y[0] = 0;
y[3] = 5; 
console.log(y.length); //Prints 4, but there's only two elements!

Modifying Arrays

To prevent creating false elements, or accessing undefined values, we need to use standard methods that add or remove items in a clean way. It’s very important to understand that, unlike strings, these methods modify the array they are applied to.

Adding Elements

The push(element1, …, elementn) method adds elements to the end of the array.

var x = [1,2];
x.push(3); //x is now [1,2,3]

The unshift(element1, …, elementn) method adds elements to the start of the array. This means it doesn’t replace elements; it simply pushes all existing elements a few positions further.

var x = [1,2];
x.unshift(3); //x is now [3,1,2]

Both methods increase the length, and return the new length.

var x = [1,2];
console.log(x.push(6)); //Prints 3
Removing Last and First Element

The pop() method removes the last element of an array.

var x = [1,2,3];
x.pop(); //x is now [1,2]

The shift() method removes the first element of an array.

var x = [1,2,3];
x.shift(); //x is now [2,3]
Removing Multiple Elements

The splice(start, length, element1, …, elementn) method removes elements from an array. It starts from position index, and removes length amount of values after that. If you supply a negative index, it starts counting from the end of the array. After the length argument, you can supply elements to be added to the end of the array, but that is not required.

var x = [1,2,3,4,5];
x.splice(0,2); //x is now [1,2]

The slice(start, end) method works the other way around, and selects only certain elements from an array. It starts from position start, and selects everything up to, but not including, end. This is the only method that doesn’t alter the original array!

var x = [1,2,3,4,5];
var y = x.slice(0,3); //x is still the same, but y is [1,2,3]
Do you like my tutorials?
To keep this site running, donate some motivational food!
Chocolate Milk