1. Defining Arrays
2. Accessing Elements
3. False Elements
4. Array Length
5. Modifying Arrays
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.
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
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); //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.
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 = 100; console.log(x); //Prints undefined
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; y = 5; console.log(y.length); //Prints 4, but there's only two elements!
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.
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]
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
pop() method removes the last element of an array.
var x = [1,2,3]; x.pop(); //x is now [1,2]
shift() method removes the first element of an array.
var x = [1,2,3]; x.shift(); //x is now [2,3]
Removing Multiple Elements
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]
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]