List Operations

List Operations

• Previously we talked about the basics of lists as well as how to access elements within them via iteration
• Javascript lists have numerous different methods that can be used to perform different operations on a particular list
• Methods are object properties that contain a function definition
• Array.length is a basic object property, it sets or returns the number of elements in the array
• Array.concat(x) is a method that takes in another array x and concatenates it with the original array

List Operations

Here are the list operations we’ll be going over today:

• Appending
• Inserting
• Removing

Appending

• To append an element to the end of a list, use Array.push()
• This method increases the length of the array by one and adds the input given as a new element
• The following code will add “milk” as an element to index 3, and the length of the list will be 4 (remember that indexing starts at 0)

Inserting

• To insert an element to a specified index of a list, use Array.splice()
• The parameters of .splice() are as follows:
• Array.splice(index, howMany, item1, ....., itemX)
• howMany is a number indicating how many new elements you will be adding
• each parameter after howMany corresponds to the elements in the order you want to add them to the list

Inserting

• Consider the following code:

​

​

​

• What are the elements of groceries after line 5?
• What are the elements of groceries after line 6?

Inserting

The results:

Inserting

Why did elements get overwritten instead of pushed further down the list to make room for the new elements?

• Using a value of 0 for the howMany parameter will allow you insert elements into the list without overwriting the original list
• Using a value of 1 (default) or greater will overwrite the specified number of elements starting with the index given as the first parameter

​

Inserting

• Looking back at this code, line 7 will overwrite two elements starting with index 1
• The elements at index 1 and 2, which were “banana” and “orange” after line 5, will get replaced with “eggs” and “bread” respectively

Inserting

Now for the correct code:

​

Removing

There are two types of removal we’ll talk about:

• removing the last element of the list
• removing an element from a specific index and shifting the remaining elements to fill in the space

Removing

• To remove an element from the end of a list is simple: use Array.pop()
• .pop() also returns the element that is removed, so for example it can be assigned to a variable to use later

​

Removing

• To remove an element from a specified index, we can use the .splice() method we used earlier to add an element to an index
• Use only the first two parameters of .splice(), index and howMany to achieve this

Practice Activity

• To practice performing these list operations, your task will be to complete the following EarSketch script
• You must add to and edit code in order to satisfy the conditions listed in the comments
• In Part 1 you will perform list operations
• In Part 2 you will access elements in the list to finish the song