Java Script
Arrays & Objects
Variables in JavaScript
• Five primitive types: number, string, boolean,
null, undefined
• Sometimes we may want to have a collection of
ordered values
• Sometimes we may want to have a collection
of associated values with semantically
meaningful
names/keys
SD4x-2 Property of Penn Engineering, Chris Murphy
Arrays
• Arrays are used to store a list of values in a
single variable
• Values can be of any type, and are split with
commas and wrapped in square brackets
var myArray = [‘cars’, 12, false];
SD4x-2 Property of Penn Engineering, Chris Murphy
Arrays
• Arrays are used to store a list of values in a
single variable
• Values can be of any type, and are split with
commas and wrapped in square brackets
• Values can be accessed with arrayVar[index]
var myArray = [‘cars’, 12,
false];
var age = myArray[1];
console.log(age); // 12
SD4x-2 Property of Penn Engineering, Chris Murphy
Arrays
• Arrays are used to store a list of values in a
single variable
• Values can be of any type, and are split with
commas and wrapped in square brackets
• Values can be accessed with arrayVar[index]
var myArray = [‘cars’, 12,
false];
var age = myArray[1];
console.log(age); // 12
myArray[2] = true;
console.log(myArray[2]); // true
SD4x-2 Property of Penn Engineering, Chris Murphy
Arrays
• Arrays are used to store a list of values in a
single variable
• Values can be of any type, and are split with
commas and wrapped in square brackets
• Values can be accessed with arrayVar[index]
• The length of an array can be found with .length
var myArray = [‘cars’, 12,
false];
var age = myArray[1];
console.log(age); // 12
myArray[2] = true;
console.log(myArray[2]); // true
console.log(myArray.length); //3
SD4x-2 Property of Penn Engineering, Chris Murphy
Array Indices
• When reading an array value by its index,
arrayVar[index] will return undefined if
the index is out of bounds
var a = [‘cat’, ‘dog’,
‘banana’]; console.log(a[4]);
// undefined
console.log(a[-9]); //
undefined
SD4x-2 Property of Penn Engineering, Chris Murphy
Array Indices
• When reading an array value by its index,
arrayVar[index] will return undefined if
the index is out of bounds
var a = [‘cat’, ‘dog’,
‘banana’]; console.log(a[4]);
// undefined
console.log(a[-9]); //
undefined
SD4x-2 Property of Penn Engineering, Chris Murphy
Array Indices
• When reading an array value by its index,
arrayVar[index] will return undefined if
the index is out of bounds
var a = [‘cat’, ‘dog’,
‘banana’]; console.log(a[4]);
// undefined
console.log(a[-9]); //
undefined
SD4x-2 Property of Penn Engineering, Chris Murphy
Array Indices
• When reading an array value by its index,
arrayVar[index] will return undefined if
the index is out of bounds
var a = [‘cat’, ‘dog’,
‘banana’]; console.log(a[4]);
// undefined
console.log(a[-9]); //
undefined
SD4x-2 Property of Penn Engineering, Chris Murphy
Array Indices
• When writing an array value by its index,
arrayVar[index] will
• add an element at that index if
index >= arrayVar.length
• create a mapping from the index to the element
if
index < 0
var a== ‘panda’;
a[4] [‘cat’, ‘dog’, ‘banana’];
console.log(a[4]); // “panda”
console.log(a[3]); // undefined
a[-5] = ‘elephant’;
console.log(a[-5]); // “elephant”
console.log(a);
// (5) ["cat", "dog", "banana", undefined × 1, "panda", -5: "elephant"]
SD4x-2 Property of Penn Engineering, Chris Murphy
Array Indices
• When writing an array value by its index,
arrayVar[index] will
• add an element at that index if
index >= arrayVar.length
• create a mapping from the index to the element
if
index < 0
var a== ‘panda’;
a[4] [‘cat’, ‘dog’, ‘banana’];
console.log(a[4]); // “panda”
console.log(a[3]); // undefined
a[-5] = ‘elephant’;
console.log(a[-5]); // “elephant”
console.log(a);
// (5) ["cat", "dog", "banana", undefined × 1, "panda", -5: "elephant"]
SD4x-2 Property of Penn Engineering, Chris Murphy
Array Indices
• When writing an array value by its index,
arrayVar[index] will
• add an element at that index if
index >= arrayVar.length
• create a mapping from the index to the element
if
index < 0
var a== ‘panda’;
a[4] [‘cat’, ‘dog’, ‘banana’];
console.log(a[4]); // “panda”
console.log(a[3]); // undefined
a[-5] = ‘elephant’;
console.log(a[-5]); // “elephant”
console.log(a);
// (5) ["cat", "dog", "banana", undefined × 1, "panda", -5: "elephant"]
SD4x-2 Property of Penn Engineering, Chris Murphy
Array Indices
• When writing an array value by its index,
arrayVar[index] will
• add an element at that index if
index >= arrayVar.length
• create a mapping from the index to the element
if
index < 0
var a== ‘panda’;
a[4] [‘cat’, ‘dog’, ‘banana’];
console.log(a[4]); // “panda”
console.log(a[3]); // undefined
a[-5] = ‘elephant’;
console.log(a[-5]); // “elephant”
console.log(a);
// (5) ["cat", "dog", "banana", undefined × 1, "panda", -5: "elephant"]
SD4x-2 Property of Penn Engineering, Chris Murphy
Array Indices
• When writing an array value by its index,
arrayVar[index] will
• add an element at that index if
index >= arrayVar.length
• create a mapping from the index to the element
if
index < 0
var a== ‘panda’;
a[4] [‘cat’, ‘dog’, ‘banana’];
console.log(a[4]); // “panda”
console.log(a[3]); // undefined
a[-5] = ‘elephant’;
console.log(a[-5]); // “elephant”
console.log(a);
// (5) ["cat", "dog", "banana", undefined × 1, "panda", -5: "elephant"]
SD4x-2 Property of Penn Engineering, Chris Murphy
Array Indices
• When writing an array value by its index,
arrayVar[index] will
• add an element at that index if
index >= arrayVar.length
• create a mapping from the index to the element
if
index < 0
var a== ‘panda’;
a[4] [‘cat’, ‘dog’, ‘banana’];
console.log(a[4]); // “panda”
console.log(a[3]); // undefined
a[-5] = ‘elephant’;
console.log(a[-5]); // “elephant”
console.log(a);
// (5) ["cat", "dog", "banana", undefined × 1, "panda", -5: "elephant"]
SD4x-2 Property of Penn Engineering, Chris Murphy
Array Indices
• When writing an array value by its index,
arrayVar[index] will
• add an element at that index if
index >= arrayVar.length
• create a mapping from the index to the element
if
index < 0
var a== ‘panda’;
a[4] [‘cat’, ‘dog’, ‘banana’];
console.log(a[4]); // “panda”
console.log(a[3]); // undefined
a[-5] = ‘elephant’;
console.log(a[-5]); // “elephant”
console.log(a);
// (5) ["cat", "dog", "banana", undefined × 1, "panda", -5: "elephant"]
SD4x-2 Property of Penn Engineering, Chris Murphy
Array Indices
• When writing an array value by its index,
arrayVar[index] will
• add an element at that index if
index >= arrayVar.length
• create a mapping from the index to the element
if
index < 0
var a== ‘panda’;
a[4] [‘cat’, ‘dog’, ‘banana’];
console.log(a[4]); // “panda”
console.log(a[3]); // undefined
a[-5] = ‘elephant’;
console.log(a[-5]); // “elephant”
console.log(a);
// (5) ["cat", "dog", "banana",
undefined × 1, "panda", -5:
"elephant"]
SD4x-2 Property of Penn Engineering, Chris Murphy
Adding to an Array
• Elements can be added to arrays using push() and
unshift()
• push() will add elements to the end of the array
• unshift() will add elements to the beginning of the array
var myArray = [‘car’, ‘bike’];
myArray.push(‘scooter’);
console.log(myArray); // car,bike,scooter
myArray.unshift(‘train’);
console.log(myArray); // train,car,bike,scooter
SD4x-2 Property of Penn Engineering, Chris Murphy
Adding to an Array
• Elements can be added to arrays using push() and
unshift()
• push() will add elements to the end of the array
• unshift() will add elements to the beginning of the array
var myArray = [‘car’, ‘bike’];
myArray.push(‘scooter’);
console.log(myArray); // car,bike,scooter
myArray.unshift(‘train’);
console.log(myArray); // train,car,bike,scooter
SD4x-2 Property of Penn Engineering, Chris Murphy
Adding to an Array
• Elements can be added to arrays using push() and
unshift()
• push() will add elements to the end of the array
• unshift() will add elements to the beginning of the array
var myArray = [‘car’, ‘bike’];
myArray.push(‘scooter’);
console.log(myArray); // car,bike,scooter
myArray.unshift(‘train’);
console.log(myArray); // train,car,bike,scooter
SD4x-2 Property of Penn Engineering, Chris Murphy
Adding to an Array
• Elements can be added to arrays using push() and
unshift()
• push() will add elements to the end of the array
• unshift() will add elements to the beginning of the array
var myArray = [‘car’, ‘bike’];
myArray.push(‘scooter’);
console.log(myArray); // car,bike,scooter
myArray.unshift(‘train’);
console.log(myArray); // train,car,bike,scooter
SD4x-2 Property of Penn Engineering, Chris Murphy
Removing from an Array
• Elements can be removed from arrays using pop()
and
shift()
• pop() will remove and return an element from the end of
the array
• shift() will remove and return an element from the
beginning
var
var myArray
vehicle =
= [‘train’, ‘car’, ‘bike’, ‘scooter’];
myArray.pop(); // scooter
console.log(vehicle); // train,car,bike
console.log(myArray);
vehicle = myArray.shift();
console.log(vehicle); // train
console.log(myArray); // car,bike
SD4x-2 Property of Penn Engineering, Chris Murphy
Removing from an Array
• Elements can be removed from arrays using pop()
and
shift()
• pop() will remove and return an element from the end of
the array
• shift() will remove and return an element from the
beginning
var
var myArray
vehicle =
= [‘train’, ‘car’, ‘bike’, ‘scooter’];
myArray.pop(); // scooter
console.log(vehicle); // train,car,bike
console.log(myArray);
vehicle = myArray.shift();
console.log(vehicle); // train
console.log(myArray); // car,bike
SD4x-2 Property of Penn Engineering, Chris Murphy
Removing from an Array
• Elements can be removed from arrays using pop()
and
shift()
• pop() will remove and return an element from the end of
the array
• shift() will remove and return an element from the
beginning
var
var myArray
vehicle =
= [‘train’, ‘car’, ‘bike’, ‘scooter’];
myArray.pop(); // scooter
console.log(vehicle); // train,car,bike
console.log(myArray);
vehicle = myArray.shift();
console.log(vehicle); // train
console.log(myArray); // car,bike
SD4x-2 Property of Penn Engineering, Chris Murphy
Removing from an Array
• Elements can be removed from arrays using pop()
and
shift()
• pop() will remove and return an element from the end of
the array
• shift() will remove and return an element from the
beginning
var
var myArray
vehicle =
= [‘train’, ‘car’, ‘bike’, ‘scooter’];
myArray.pop(); // scooter
console.log(vehicle); // train,car,bike
console.log(myArray);
vehicle = myArray.shift();
console.log(vehicle); // train
console.log(myArray); // car,bike
SD4x-2 Property of Penn Engineering, Chris Murphy
Removing from an Array
• Elements can be removed from arrays using pop()
and
shift()
• pop() will remove and return an element from the end of
the array
• shift() will remove and return an element from the
beginning
var
var myArray
vehicle =
= [‘train’, ‘car’, ‘bike’, ‘scooter’];
myArray.pop(); // scooter
console.log(vehicle); // train,car,bike
console.log(myArray);
vehicle = myArray.shift();
console.log(vehicle); // train
console.log(myArray); // car,bike
SD4x-2 Property of Penn Engineering, Chris Murphy
Removing from an Array
• Elements can be removed from arrays using pop()
and
shift()
• pop() will remove and return an element from the end of
the array
• shift() will remove and return an element from the
beginning
var
var myArray
vehicle =
= [‘train’, ‘car’, ‘bike’, ‘scooter’];
myArray.pop(); // scooter
console.log(vehicle); // train,car,bike
console.log(myArray);
vehicle = myArray.shift();
console.log(vehicle); // train
console.log(myArray); // car,bike
SD4x-2 Property of Penn Engineering, Chris Murphy
Removing from an Array
• Elements can be removed from arrays using pop()
and
shift()
• pop() will remove and return an element from the end of
the array
• shift() will remove and return an element from the
beginning
var
var myArray
vehicle =
= [‘train’, ‘car’, ‘bike’, ‘scooter’];
myArray.pop(); // scooter
console.log(vehicle); // train,car,bike
console.log(myArray);
vehicle = myArray.shift();
console.log(vehicle); // train
console.log(myArray); // car,bike
SD4x-2 Property of Penn Engineering, Chris Murphy
Removing from an Array
• Elements can be removed from arrays using pop()
and
shift()
• pop() will remove and return an element from the end of
the array
• shift() will remove and return an element from the
beginning
var
var myArray
vehicle =
= [‘train’, ‘car’, ‘bike’, ‘scooter’];
myArray.pop(); // scooter
console.log(vehicle); // train,car,bike
console.log(myArray);
vehicle = myArray.shift();
console.log(vehicle); // train
console.log(myArray); // car,bike
SD4x-2 Property of Penn Engineering, Chris Murphy
Objects
• JavaScript objects are used to store key-value pairs
• Values can be of any type, including arrays and
objects!
• Values can be accessed by myObject.property
or
myObject[‘property’]
var person = {
name: ‘John
Doe’, age: 25,
isMale: true,
personality: [‘patient’, ‘loyal’,
‘happy’], company: { name: ‘edX’, id:
2984 }
}
console.log(person.age); // 25
console.log(person[‘company’].id) // 2984
SD4x-2 Property of Penn Engineering, Chris Murphy
Objects
• JavaScript objects are used to store key-value pairs
• Values can be of any type, including arrays and
objects!
• Values can be accessed by myObject.property
or
myObject[‘property’]
var person = {
name: ‘John
Doe’, age: 25,
isMale: true,
personality: [‘patient’, ‘loyal’,
‘happy’], company: { name: ‘edX’, id:
2984 }
}
console.log(person.age); // 25
console.log(person[‘company’].id) // 2984
Property of Penn Engineering, Chris SD4x-2 93
Objects
• JavaScript objects are used to store key-value pairs
• Values can be of any type, including arrays and
objects!
• Values can be accessed by myObject.property
or
myObject[‘property’]
var person = {
name: ‘John Doe’,
age: 25,
isMale:
true,
personality: [‘patient’, ‘loyal’,
‘happy’], company: { name: ‘edX’, id:
2984 }
}
console.log(person.age); // 25
console.log(person[‘company’].id) // 2984
Property of Penn Engineering, Chris SD4x-2 94
Objects
• JavaScript objects are used to store key-value pairs
• Values can be of any type, including arrays and
objects!
• Values can be accessed by myObject.property
or
myObject[‘property’]
var person = {
name: ‘John Doe’,
age: 25,
isMale: true,
personality: [‘patient’, ‘loyal’,
‘happy’], company: { name: ‘edX’, id:
2984 }
}
console.log(person.age); // 25
console.log(person[‘company’].id) // 2984
Property of Penn Engineering, Chris SD4x-2 95
Objects
• JavaScript objects are used to store key-value pairs
• Values can be of any type, including arrays and
objects!
• Values can be accessed by myObject.property
or
myObject[‘property’]
var person = {
name: ‘John
Doe’, age: 25,
isMale: true,
personality: [‘patient’, ‘loyal’,
‘happy’], company: { name: ‘edX’, id:
2984 }
}
console.log(person.age); // 25
console.log(person[‘company’].id) // 2984
Property of Penn Engineering, Chris SD4x-2 96
Objects
• JavaScript objects are used to store key-value pairs
• Values can be of any type, including arrays and
objects!
• Values can be accessed by myObject.property
or
myObject[‘property’]
var person = {
name: ‘John
Doe’, age: 25,
isMale: true,
personality:
[‘patient’,
‘loyal’,
‘happy’],
company: { name:
console.log(person.age); // 25
‘edX’, id:
console.log(person[‘company’].id) // 2984
2984 }
} Property of Penn Engineering, Chris SD4x-2 97
Objects
• JavaScript objects are used to store key-value pairs
• Values can be of any type, including arrays and
objects!
• Values can be accessed by myObject.property
or
myObject[‘property’]
var person = {
name: ‘John
Doe’, age: 25,
isMale: true,
personality:
[‘patient’,
‘loyal’,
‘happy’],
company: { name:
console.log(person.age); // 25
‘edX’, id:
console.log(person[‘company’].id) // 2984
2984 }
} Property of Penn Engineering, Chris SD4x-2 98
Objects
• JavaScript objects are used to store key-value pairs
• Values can be of any type, including arrays and
objects!
• Values can be accessed by myObject.property
or
myObject[‘property’]
var person = {
name: ‘John
Doe’, age: 25,
isMale: true,
personality: [‘patient’, ‘loyal’,
‘happy’], company: { name: ‘edX’, id:
2984 }
}
console.log(person.age); // 25
console.log(person[‘company’].id) // 2984
Property of Penn Engineering, Chris SD4x-2 99
Objects
• JavaScript objects are used to store key-value pairs
• Values can be of any type, including arrays and
objects!
• Values can be accessed by myObject.property
or
myObject[‘property’]
var person = {
name: ‘John
Doe’, age: 25,
isMale: true,
personality: [‘patient’, ‘loyal’,
‘happy’], company: { name: ‘edX’, id:
2984 }
}
console.log(person.age); // 25
console.log(person[‘company’].id) // 2984
SD4x-2 Property of Penn Engineering, Chris Murphy
Modifying Objects
• Key-value pairs can be added to objects, even after
their initial declaration
var pet = {
name: ‘Cooper’,
type: ‘dog’
}
console.log(pet.age); // undefined
pet.age = 11;
console.log(pet.age); // 11
pet[‘status’] = ‘good boy’;
console.log(pet.status); // “good
boy”
SD4x-2 Property of Penn Engineering, Chris Murphy
Modifying Objects
• Key-value pairs can be added to objects, even after
their initial declaration
var pet = {
name: ‘Cooper’,
type: ‘dog’
}
console.log(pet.age); // undefined
pet.age = 11;
console.log(pet.age); // 11
pet[‘status’] = ‘good boy’;
console.log(pet.status); // “good
boy”
SD4x-2 Property of Penn Engineering, Chris Murphy
Modifying Objects
• Key-value pairs can be added to objects, even after
their initial declaration
var pet = {
name: ‘Cooper’,
type: ‘dog’
}
console.log(pet.age); // undefined
pet.age = 11;
console.log(pet.age); // 11
pet[‘status’] = ‘good boy’;
console.log(pet.status); // “good
boy”
SD4x-2 Property of Penn Engineering, Chris Murphy
Modifying Objects
• Key-value pairs can be added to objects, even after
their initial declaration
var pet = {
name: ‘Cooper’,
type: ‘dog’
}
console.log(pet.age); // undefined
pet.age = 11;
console.log(pet.age); // 11
pet[‘status’] = ‘good boy’;
console.log(pet.status); // “good
boy”
SD4x-2 Property of Penn Engineering, Chris Murphy
Modifying Objects
• Key-value pairs can be added to objects, even after
their initial declaration
var pet = {
name: ‘Cooper’,
type: ‘dog’
}
console.log(pet.age); // undefined
pet.age = 11;
console.log(pet.age); // 11
pet[‘status’] = ‘good boy’;
console.log(pet.status); // “good
boy”
SD4x-2 Property of Penn Engineering, Chris Murphy
Modifying Objects
• Key-value pairs can be added to objects, even after
their initial declaration
var pet = {
name: ‘Cooper’,
type: ‘dog’
}
console.log(pet.age); // undefined
pet.age = 11;
console.log(pet.age); // 11
pet[‘status’] = ‘good boy’;
console.log(pet.status); // “good boy”
SD4x-2 Property of Penn Engineering, Chris Murphy
Modifying Objects
• Key-value pairs can be added to objects, even after
their initial declaration
var pet = {
name: ‘Cooper’,
type: ‘dog’
}
console.log(pet.age); // undefined
pet.age = 11;
console.log(pet.age); // 11
pet[‘status’] = ‘good boy’;
console.log(pet.status); // “good boy”
SD4x-2 Property of Penn Engineering, Chris Murphy
Summary
• JavaScript arrays let us create ordered collections
of values with numeric indices
• JavaScript objects are collections of associated
values with semantically meaningful names/keys
SD4x-2 Property of Penn Engineering, Chris Murphy
