Javascript Arrays
Our First Data Structure
Objectives
- Understand arrays conceptually
- Write code using JS arrays
Suppose I wanted to model a group of friends:
var friend1 = "Charlie";
var friend2 = "Liz";
var friend3 = "David";
var friend4 = "Mattias";
var friends = ["Charlie", "Liz", "David", "Mattias"];
This is a lot of code, and it doesn't let us group the friends together
This is a perfect use case for an ARRAY
Arrays
Arrays let us group data together in lists
Charlie
Mattias
Liz
David
var friends = ["Charlie", "Liz", "David", "Mattias"];
0
1
2
3
Array are indexed starting at 0. Every slot has a corresponding number
Arrays
We can use those indices to retrieve data
Charlie
Mattias
Liz
David
var friends = ["Charlie", "Liz", "David", "Mattias"];
console.log(friends[0]) //"Charlie"
friends[1] + " <3 " + friends[2] //"Liz <3 David"
0
1
2
3
Arrays
We can also update arrays
Charlie
Mattias
Liz
David
var friends = ["Charlie", "Liz", "David", "Mattias"];
friends[0] = "Chuck";
friends[1] = "Lizzie";
0
1
2
3
Chuck
Mattias
Lizzie
David
0
1
2
3
Arrays
We can also add new data
Charlie
Mattias
Liz
David
var friends = ["Charlie", "Liz", "David", "Mattias"];
friends[4] = "Amelie";
0
1
2
3
Charlie
Mattias
Liz
David
0
1
2
3
Amelie
4
Arrays
//We can initialize an empty array two ways:
var friends = []; //no friends :(
var friends = new Array() //uncommon
//Arrays can hold any type of data
var random_collection = [49, true, "Hermione", null];
//Arrays have a length property
var nums = [45,37,89,24];
nums.length //4
Last few things
Arrays
var numbers = [22, 67, 33, 96, 88];
//What does the following line print?
console.log(numbers[numbers.length])
Exercise 1
Arrays
var friendGroups = [
["Harry", "Ron", "Hermione"],
["Malfoy", "Crabbe", "Goyle"],
["Mooney", "Wormtail", "Prongs"]
];
//What is the result of this line:
console.log(friendGroups[2][0]);
Exercise 2
Strings
//Single or Double quotes OK
"hello world"
'hello world'
//Concatenation
"charlie" + "brown" //"charliebrown"
//Escape Characters start with "\"
"Singin \"Do wah diddy, diddy, dum diddy do\" "
"This is a backslash: \\"
//Strings have a length property
"hello world".length //11
//Access individual characters using [] and an index
"hello"[0] //"h"
"hello"[4] //"o"
Variables
//Variables are simply containers that store values
//They follow this pattern:
var yourVariableName = yourValue;
//They can store all of the values we've seen
var name = "Rusty";
var secretNumber = 73;
var isAdorable = true;
//Recall the stored value by calling the variable name
var name = "Rusty";
"hello there " + name //"hello there Rusty"
var num = 37;
num + 3 + 10 //50
//We can also update existing variables
var name = "Bruce";
name = "Caitlyn";
Null and Undefined
//The two other primitives are null and undefined
//Variables that are declared but not
//initialized are undefined
//The following variables are undefined:
var name;
var age;
//null is "explicitly nothing"
var currentPlay = "charlie";
currentPlayer = null; //game over
Printer Friendly - JS Arrays
By Colt Steele
Printer Friendly - JS Arrays
- 2,309