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