Scribd
Upload
3 views

03 - JavaScript Arrays

Uploaded by

mir593469
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

03 - JavaScript Arrays

Uploaded by

mir593469
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

JavaScript Arrays

Learning Outcomes
1. What is an array?
2. Properties of arrays
3. Declaring an array
4. Array operations
What is an Array?
An array is a data structure that stores an ordered collection of values.

Arrays are typically used to store lists of data, for example:

● List of shopping list items


● List of student names
● List of prices
● List of unread emails
What is an Array?
An array is a data structure that stores an ordered collection of values.

Arrays are typically used to store lists of data, for example:

● List of shopping list items


● List of student names
● List of prices
● List of unread emails

Common array operations include:

● Adding, removing, and updating items


● Retrieving an item at a specific position in the list
● Sorting a list
Properties of Arrays
Arrays are an ordered collection of values:

● Each value in the array can be accessed by its index (position) number.
● Index positions always being with 0
● Last item in the array has index n-1, where n is the total number of items in the array

Arrays have a length, ie: the total number of values stored in the array.

Last item is at
index 9
(10-1 = 9)
Declaring an Array
Declaring an array of number values:

const x = [3, 5, 1.555, -99, 100.14]

Declaring an array of string values:

const x = ["apple", "banana", "carrot"]

Declaring an array of boolean values:

const x = [false, false, true, false, true]

Declaring an array of mixed data types:

const x = [false, "banana", 45, -99, "carrot", true]


Total Number of Items In an Array
The total number of items in an array can be accessed using the .length property

const fruits = ["apple", "banana","carrot", "donut"]


console.log(fruits.length) // outputs 4
Accessing Values in an Array
Use the square brackets [ ] to access an item by index

● The first position in an array has index = 0

const fruits = ["apple", "banana","carrot", "donut"]


console.log(fruits[0]) // outputs "apple"
console.log(fruits[1]) // outputs "banana"
console.log(fruits[2]) // outputs "carrot"
console.log(fruits[3]) // outputs "donut"

Accessing a position that does not exist will produce undefined

console.log(fruits[99]) // outputs "undefined"


Accessing Last Item in Array
The last item in an array is always located at position (n -1), where n = total number of items
in the array.

const fruits = ["apple", "banana","carrot", "donut"]


● Last item is at position 3 (4 total items - 1 = 5)

const names = ["Peter", "Mary", "Sarah", "Elliot", "Frenchie", "Hannah"]


● Last item is at position 5 (6 total items - 1 = 5)

If you do not know the position of the last item, you can compute it programmatically:

// assume names = an array with lots of values


const names = [....]
console.log(names[names.length-1]) // outputs last item
Declaring an Array - Let vs. Const
When an array is declared with the let keyword:

● You can add, remove, and update items in the array


● You can reassign the array to a different array

// this is okay
let x = ["apple", "banana", "carrot", "donut"]
x = [53, 22, 11]

When the array is declared with the const keyword:

● You can add, remove, and update items in the array


● You cannot reassign the array

// not okay
const x = ["apple", "banana", "carrot", "donut"]
x = [53, 22, 11] // error!
Updating a value in an array
Update a value by accessing it using its index:

const fruits = ["apple", "banana", "carrot"]


fruits[0] = "aardvark"
fruits[1] = "bobcat"
fruits[2] = "cheetah"
console.log(fruits) // outputs: ["aardvark", "bobcat", "cheetah"]
Adding Items from Array
Add items using the .push() function:

const fruits = ["apple", "banana", "carrot"]


fruits.push("donut")
console.log(fruits) // outputs: ["apple", "banana", "carrot", "donut"]
Removing Items from Array
Remove items using the .splice() function

const fruits = ["apple", "banana", "carrot"]


fruits.splice(2,1)
console.log(fruits) // outputs: ["apple", "banana"]

How the .splice() function works

● Specify the position of the item to remove


● Specify the number of items, starting that that position, that should be removed

fruits.splice(2,1)

position to start removing items Number of items to remove


Removing Items from Array
The .shift() and .pop() functions are shortcuts to remove the first and last items in an array

● .shift(): Removes and returns the first item in array (same as .splice(0,1))
● .pop() : Removes and returns last item in array (same as .splice(n,1), where n = position
of last item)

const fruits = ["apple", "banana", "carrot", "donut"]


fruits.shift() // removes apple
console.log(fruits) // outputs: ["banana", "carrot", "donut"]
fruits.pop() // removes donut
console.log(fruits) // outputs: ["banana", "carrot"]
Iterating Through an Array
Use a loop to iterate through every item in the array.

const fruits = ["apple", "banana", "carrot", "donut"]


for (let i = 0; i < fruits.length; i++) {
console.log(`The current fruit is: ${fruits[i]}`)
}

You might also like