JavaScript: Arrays

Examples

Instantiate Populated Array

1var colors = ["red", "green", "blue"]
2
3console.log(colors) // Prints: ["red", "green", "blue"]

Access Elements

1var colors = ["red", "green", "blue"]
2
3console.log(colors[0]) // Prints: "red"
4
5console.log(colors[1]) // Prints: "green"
6
7console.log(colors[2]) // Prints: "blue"

Access First/Last Elements

1var colors = ["red", "green", "blue"]
2
3var indexOfFirstElement = 0 // Stores: 0
4
5console.log(colors[indexOfFirstElement]) // Prints: "red"
6
7// ---
8
9console.log(colors.length) // Prints: 3
10
11var indexOfLastElement = (colors.length - 1) // Stores: 2
12
13console.log(colors[indexOfLastElement]) // Prints: "blue"

Add Elements

1var names = []
2
3names.push("John")  // names: ["John"]
4names.push("Jane")  // names: ["John", "Jane"]
5names.push("Chad")  // names: ["John", "Jane", "Chad"]
6names.push("Karen") // names: ["John", "Jane", "Chad", "Karen"]
7
8console.log(names)  // Prints: ["John", "Jane", "Chad", "Karen"]

Remove Elements

1var colors = ["red", "green", "blue"]
2
3colors.splice(0, 1) // colors: ["green", "blue"]
4
5console.log(colors) // Prints: ["green", "blue"]
6
7// ---
8
9var colors = ["red", "green", "blue"]
10
11colors.splice(1, 1) // colors: ["red", "blue"]
12
13console.log(colors) // Prints: ["red", "blue"]
14
15// ---
16
17var colors = ["red", "green", "blue"]
18
19colors.splice(2, 1) // colors: ["red", "green"]
20
21console.log(colors) // Prints: ["red", "green"]

Array Contains Value?

1var colors = ["red", "green", "blue"]
2
3console.log(colors.includes("green"))  // Prints: true
4
5console.log(colors.includes("red"))    // Prints: true
6
7console.log(colors.includes("orange")) // Prints: false

Find Index of Value

1var colors = ["red", "green", "blue"]
2
3console.log(colors.indexOf("red"))     // Prints: 0
4
5console.log(colors.includes("green"))  // Prints: 1
6
7console.log(colors.includes("orange")) // Prints: -1

Array of Objects

1var people = [
2  { "firstName": "John", "lastName": "Doe" },  // Index: 0
3  { "firstName": "Jane", "lastName": "Doe" },  // Index: 1
4  { "firstName": "Chad", "lastName": "Smith" } // Index: 2
5]
6
7console.log(people)
8
9// Prints: [{ "firstName": "John", "lastName": "Doe" }, { "firstName": "Jane", "lastName": "Doe" }, { "firstName": "Chad", "lastName": "Smith" }]

Array of Objects: Access Elements

1var people = [
2  { "firstName": "John", "lastName": "Doe" },  // Index: 0
3  { "firstName": "Jane", "lastName": "Doe" },  // Index: 1
4  { "firstName": "Chad", "lastName": "Smith" } // Index: 2
5]
6
7console.log(people[0]["firstName"])     // Prints: 0
8
9console.log(people[0]["lastName"])     // Prints: 0
10
11console.log(people[1]["firstName"])     // Prints: 0
12
13console.log(people[1]["lastName"])     // Prints: 0

Array of Objects: Access Elements w/ Variables

1var people = [
2  { "firstName": "John", "lastName": "Doe" },  // Index: 0
3  { "firstName": "Jane", "lastName": "Doe" },  // Index: 1
4  { "firstName": "Chad", "lastName": "Smith" } // Index: 2
5]
6
7var person0 = people[0]
8
9console.log(person0)
10
11console.log(person0["firstName"])
12
13console.log(person0["lastName"])

We frequently need to group values together into a collection, where we can then access them by a numerical (Integer) index

Arrays pair very complementary with loops, which enable us to perform a process on every element in the array