Unit 5

Lesson 1 Lists Explore

To do: December 7

• Find your new assigned table
• Take out your AP Exam Reference Packet - go to lists section

​

Why lists?

Today we’re going to start looking at how we can use lists in programs, but before we dive into that, let’s think about why we would want to in the first place.

1. Write two examples of lists of information that you encounter or use regularly.
2. Why is it helpful to keep information in lists?

Go over homework

​

• 2019-20 Unit 3 Code.org Lesson 8 Bubbles 3-9, 10-15
• AP Classroom - Programming Practice part 1 #1-10
• Complete online
• Show work for each problem in your IN
• Submit image/pdf of work to Hub

Functions, Booleans/Conditionals test this Thursday

​

​

• ​

Story time: Too Many Daves

Example of need for lists

var dave1 = "Dave1";�var dave2 = "Dave2";�var dave3 = "Dave3";�var dave4 = "Dave4";

var dave5 = "Dave5";�var dave6 = "Dave6";�var dave7 = "Dave7";

var dave8 = "Dave8";

var dave9 = "Dave9";

var dave10 = "Dave10";

​

Example of need for lists

var dave1 = "Dave1";�var dave2 = "Dave2";�var dave3 = "Dave3";�var dave4 = "Dave4";

var dave5 = "Dave5";�var dave6 = "Dave6";�var dave7 = "Dave7";

var dave8 = "Dave8";

var dave9 = "Dave9";

var dave10 = "Dave10";��var daves = ["Dave1", "Dave2", "Dave3", "Dave4", "Dave5","Dave6","Dave7","Dave8","Dave9","Dave10"];� �

​

​

What is a list?

What is a list?

A list is a container used to keep similar pieces of data organized in one place.

What is a list in JavaScript? an array

In JavaScript, you can use an array to keep a list of elements. An array is a data structure in JavaScript used to represent a list.

Video: Intro to Lists part 1

Creating a list

var myFirstArray = [2,4,6,8,10];

console.log(myFirstArray);

​

>>

Creating a list

var myFirstArray = [2,4,6,8,10];

console.log(myFirstArray);

​

>> [2,4,6,8,10,12]

Video: Intro to Lists part 2

Indexes of Arrays in JavaScript

Arrays in JavaScript are zero-indexed which means the first index is 0.

For example an array of 5 items would have indexes 0-4. As a result the last index is always one less than the length of the array.

0 1 2 3 4

indexes

Accessing Array Items by Index

If you know the index of the item you wish to access you can reference it using square brackets list[index] . The example below prints the value of the 4th element in the array.

var myArray = [2,4,6,8,10];

console.log(myArray[3]);

​

>>

​

0 1 2 3 4

Index numbers

Accessing Array Items by Index

If you know the index of the item you wish to access you can reference it using square brackets list[index] . The example below prints the value of the 4th element in the array.

var myArray = [2,4,6,8,10];

console.log(myArray[3]);

​

>> 8

​

0 1 2 3 4

Index numbers

What is the output?

var myArray = [2,4,6,8,10];

​

console.log(myArray[0]);

>>

console.log(myArray[4]);

>>

0 1 2 3 4

Index numbers

What is the output?

var myArray = [2,4,6,8,10];

​

console.log(myArray[0]);

>> 2

console.log(myArray[4]);

>> 10

0 1 2 3 4

Index numbers

Out of Bounds

Referencing indexes that are out of bounds will almost never do what you intend, and we'll be learning ways to avoid this as we move forward.

Video: Arrays part 3 - Assigning and Updating

Setting Values by Index

Each location in an array can be treated like its own variable.

We've already seen how we can use bracket notation to access values stored at specific locations in an array.

Just like with variables, we can assign the value of a specific location in an array using = (the assignment operator).���

Setting Values by Index - what is the output?

var myArray = [2,4,6,8,10];�myArray[0] = 1;�console.log(myArray);

/* when you print an array, output will include square brackets and commas in-between element of array */

​

>>

​

Setting Values by Index - what is the output?

var myArray = [2,4,6,8,10];�myArray[0] = 1;�console.log(myArray);

/* when you print an array, output will include square brackets and commas in-between element of array */

​

>> [1,4,6,8,10]

​

Setting Values by Index- what is the output?

​

var myArray = [1,2,3,4,5,6];�myArray[3] = myArray[3] + 10;�console.log(myArray);

>>

Setting Values by Index

var myArray = [1,2,3,4,5,6];�myArray[3] = myArray[3] + 10;�console.log(myArray);

>> [1,2,3,14,5,6]

What is the output?

00 var myStuff = ["bag", "hat", "notebook"];

01 myStuff[1] = "cap";

02 myStuff[2] = myStuff[1];

03 myStuff[0] = myStuff[2] + myStuff[1];

04 console.log(myStuff);

​

What is the output?

00 var myStuff = ["bag", "hat", "notebook"];

01 myStuff[1] = "cap";

02 myStuff[2] = myStuff[1];

03 myStuff[0] = myStuff[2] + myStuff[1];

04 console.log(myStuff);

​

["capcap", "cap", "cap"]

Changing your list with list functions

List functions DEMO

var studentList = {__, __, __ };

appendItem(studentList, __);

removeItem(studentList, 2);

insertItem(studentList, 1, ___);

appendItem(list,item)

Adds an element to the end of the list.

var numbers = [1];

​

appendItem(numbers, 5);

​

appendItem(numbers, 10);

​

0

0 1

0 1 2

numbers

numbers

numbers

removeItem(list, index)

Removes the element in the given list at the given index.

var numbers = [10, 20, 25];

​

removeItem(numbers, 1);

​

removeItem(numbers, 0);

​

0 1 2

0 1

0

numbers

numbers

numbers

index of element to remove

insertItem(list, index, item)

​

Inserts an element into a list at the index given

var numbers = [9, 5];

​

insertItem(numbers, 1, 8);

​

insertItem(numbers, 2, 10);

​

0 1

0 1 2

0 1 2 3

numbers

numbers

numbers

index item that will be inserted at index

What are the contents of �aList after each line is�executed?

00 var aList = [20, 10, 30];

01 appendItem(aList, 50);

02 appendItem(aList, 10);

03 removeItem(aList, 1);

04 insertItem(aList, 2, 70);

05 console.log(aList);

​

Command Reference

removeItem(list, index)

appendItem(list, item)

insertItem(list, index, item)

What is the output?

00 var aList = [20, 10, 30];

01 appendItem(aList, 50); [20, 10, 30, 50]

02 appendItem(aList, 10); [20, 10, 30, 50, 10]

03 removeItem(aList, 1); [20, 30, 50, 10]

04 insertItem(aList, 2, 70); [20, 30, 70, 50, 10]

05 console.log(aList);

​

Command Reference

removeItem(list, index)

appendItem(list, item)

insertItem(list, index, item)

List Length

You can always check the current length of your array using the command list.length where "list" is the name of your array. It returns a number that indicates how many items are in your array.

var myFirstArray = [2,4,6,8,10];�console.log(myFirstArray.length);

>>

List Length

You can always check the current length of your array using the command list.length where "list" is the name of your array. It returns a number that indicates how many items are in your array.

var myFirstArray = [2,4,6,8,10];�console.log(myFirstArray.length);

>> 5

Unit 5 Lesson 1 - Wrap Up

Key Takeaways

​

• A List is an ordered collection of elements

​

• An Element is an individual value in a list that is assigned a unique index

​

• An index a common method for referencing the elements in a list or string using numbers

​

• The length of a list is how many elements it contains. Lists can grow or shrink as elements are added or removed.�
• Lists are an example of data abstraction. They allow us to name and program with large collections of information while ignoring the low level details of how the data is stored, organized, etc. These programs are easier to develop and maintain.

var favNums = [74, 53, 22];

Homework

• Complete U5L01 goFormative
• 2019-20 Unit 3 Code.org Lesson 7 Bubble 10
• Rewrite program to include a function definition with parameter(s) and at least 2 calls to the function

​

​

​

​

​