Skip to main content

JavaScript Core II - 2

Contents​


Learning Objectives​

By the end of this lesson trainees should be able to:

  • Describe the TDD cycle
  • Write and call methods inside JavaScript objects
  • Use Objects when contained inside an array
  • Write code that uses objects built-in methods
  • Write code that can iterate through an object
  • In a pair, complete a kata using array and object methods

TDD and Methods​

We've used string methods. We've used array methods. We've used object methods. This week we will bring all these things together and start understanding how to use methods on arrays of objects. Then, to help you embed this learning we will practice some kata together. But first, let's spend a short time talking about Test Driven Development, so you can start using it to help you in your kata practice.

Red, Green, Refactor​

Test Driven Development (TDD) is a method of writing code. Instead of writing code and then writing tests, you write the test first.

Red​

Begin by writing the simplest test you can, to satisfy the smallest requirement you can see. Of course, this test will fail, as there is no code! This is the "red" stage.

Green​

Next, write just enough code to pass the test. TDD is all about finding the smallest, simplest step to take. Once your test is passing, you have reached the "green" stage.

Refactor​

The final stage is "refactor". To refactor your code, you will improve the form without changing the function. With TDD, you can do this safely, because if the refactor changes the underlying function, the test will fail.

Kata​

  • First, mentors will demonstrate pairing on a kata using Test Driven Development.
  • Then we will work through exercises to understand the methods the mentors used in the kata.
  • Last, everyone will pair on a kata from CYF Array and Object Methods.
TDD Kata 20 minutes

Two mentors (or a mentor and trainee) will pair on this kata from CYF Array and Object Methods in a TDD style.

Remember the Steps: Red, Green, Refactor

  • Red: Write a failing test
  • Green: Write the minimum code to make your test pass
  • Refactor

Arrays of objects​

In the past weeks, you've learned about using arrays of numbers, arrays of string etc... In the following, we will learn how to use arrays of objects.

let kitten1 = {
name: "Fluffy",
weeksOld: 2,
};

let kitten2 = {
name: "Megatron",
weeksOld: 1,
};

let kitten3 = {
name: "Billy",
weeksOld: 5,
};

let kittens = [kitten1, kitten2, kitten3];

You can also use all the functions for arrays that you learned before: find, some, every, filter, map, forEach... As an example, we want to filter all the kittens who are less than 3 weeks old:

function isYoungerThan3Weeks(kitten) {
return kitten.weeksOld <= 3;
}

kittens.filter(isYoungerThan3Weeks); // returns [kitten1, kitten2];

What if we want to get an array of all the kitties names?

function getName(kitten) {
return kitten.name;
}

kittens.map(getName); // returns ["Fluffy", "Megatron", "Billy"]

Exercise (1)​

Exercise
  1. Define an array containing the 3 persons defined below.
  2. Return an array of the person names (hint: use map).
  3. Filter the persons to return an array with the person younger than 28 years old (hint: use filter).

let person1 = {
name: "Alice",
age: 25,
};

let person2 = {
name: "Bob",
age: 30,
};

let person3 = {
name: "John",
age: 20,
};

/*
DO NOT EDIT ANYTHING ABOVE THIS LINE
WRITE YOUR CODE BELOW
*/

let persons = // Complete here

let personNames = // Complete here

let personsYoungerThan28YearsOld = // Complete here

/*
DO NOT EDIT ANYTHING BELOW THIS LINE
*/

console.log(
"Question 1: array defined with 3 persons -> ",
persons[0] === person1 && persons[1] === person2 && persons[2] === person3
? "Passed :)"
: "Not yet :("
);

console.log(
"Question 2: array containing the person names -> ",
personNames[0] === "Alice" &&
personNames[1] === "Bob" &&
personNames[2] === "John"
? "Passed :)"
: "Not yet :("
);

console.log(
"Question 3: array containing the persons younger than 28 years old -> ",
personsYoungerThan28YearsOld[0] === person1 &&
personsYoungerThan28YearsOld[1] === person3
? "Passed :)"
: "Not yet :("
);

Exercise (2)​

Exercise

An array of travel destinations is defined below. Each destination has a name, a distance from Glasgow, and a list of transportations available to go there.

  1. Filter the travelDestinations array to return all destination names reachable within 500 kms.
  2. Find a destination name reachable by ferry.
  3. Print in the console all the destination names more than 300 kms far away and reachable by train.

let destination1 = {
destinationName: "Edinburgh",
distanceKms: 80,
transportations: ["car", "bus", "train"],
};

let destination2 = {
destinationName: "London",
distanceKms: 650,
transportations: ["car", "bus", "train"],
};

let destination3 = {
destinationName: "Paris",
distanceKms: 900,
transportations: ["train", "plane"],
};

let destination4 = {
destinationName: "Dublin",
distanceKms: 350,
transportations: ["plane", "ferry"],
};

let travelDestinations = [
destination1,
destination2,
destination3,
destination4,
];

/*
DO NOT EDIT ANYTHING ABOVE THIS LINE
WRITE YOUR CODE BELOW
*/

let destinationNamesWithin500Kms = // Complete here

let destinationNameReachableByFerry = // Complete here

let destinationNamesMoreThan300KmsAwayByTrain = // Complete here (PRINT THE RESULT IN THE CONSOLE USING FOREACH)

/*
DO NOT EDIT ANYTHING BELOW THIS LINE
*/

console.log(
`Question 1) Expected result: Edinburgh,Dublin, actual result: ${destinationNamesWithin500Kms}`
);
console.log(
`Question 2) Expected result: Dublin, actual result: ${destinationNameReachableByFerry}`
);
console.log(
`Question 3) Expected result: London,Paris, actual result: ${destinationNamesMoreThan300KmsAwayByTrain}`
);

Exercise (3)​

Exercise

Below are some restaurants in Glasgow. Each restaurant has a name, the number of total seats, the number of customers in the restaurant at the moment and the menu with prices.

We want to build an object to simulate a Restaurant Finder application (see below restaurantFinderApplication).

  1. Define a method findAvailableRestaurants which takes a number of people in parameter and returns all the restaurant names which have the required number of seats available at the moment.

  2. Define a method findRestaurantServingDish which takes a dish name in parameter and returns all the restaurant names serving this dish.

  3. Define a method countNumberOfRestaurantsInArea which takes an area of Glasgow in parameter (center, west), and returns the number of restaurants in this area.

let restaurant1 = {
name: "Paesano",
totalSeats: 10,
numberOfCustomers: 8,
address: {
city: "Glasgow",
area: "center",
},
menu: ["pizza", "calzone", "salad"],
};

let restaurant2 = {
name: "Ubiquitous Chip",
totalSeats: 20,
numberOfCustomers: 10,
address: {
city: "Glasgow",
area: "west",
},
menu: ["salad", "chocolate cake", "roast lamb"],
};

let restaurant3 = {
name: "Monkeyz",
totalSeats: 15,
numberOfCustomers: 8,
address: {
city: "Glasgow",
area: "center",
},
menu: ["stew", "chocolate cake", "panini"],
};

let restaurants = [restaurant1, restaurant2, restaurant3];

/*
DO NOT EDIT ANYTHING ABOVE THIS LINE
WRITE YOUR CODE BELOW
*/

let restaurantFinderApplication = {
applicationName: "Restaurant Finder",
applicationVersion: "1.0",
restaurants: restaurants,
findAvailableRestaurants: function (numberOfPeople) {
// Complete here
},
findRestaurantServingDish: function (dishName) {
// Complete here
},
countNumberOfRestaurantsInArea: function (area) {
// Complete here
},
};

/*
DO NOT EDIT ANYTHING BELOW THIS LINE
*/

let restaurantsAvailableFor5People =
restaurantFinderApplication.findAvailableRestaurants(5);
console.log(
`Find available restaurants for 5 people: Expected result: Ubiquitous Chip,Monkeyz, actual result: ${restaurantsAvailableFor5People}`
);

let restaurantsServingSalad =
restaurantFinderApplication.findRestaurantServingDish("salad");
console.log(
`Find restaurants serving salad: Expected result: Paesano,Ubiquitous Chip, actual result: ${restaurantsServingSalad}`
);

let numberOfRestaurantsInCityCentre =
restaurantFinderApplication.countNumberOfRestaurantsInArea("center");
console.log(
`Number of restaurants in city centre: Expected result: 2, actual result: ${numberOfRestaurantsInCityCentre}`
);

Object built-in methods​

Since we started JavaScript, we have used console.log to print things to our console.

In week 2 and 3, you learned about array methods like .map(), and .filter().

These are what we call built-in methods, and they're part of the JavaScript language. Someone else created these methods, and we can use them in our code.

Like arrays, objects have built-in methods that can help us. In this lesson, we will learn about Object.keys() and Object.values().

Object.keys()​

This method goes into our object, and returns the object property names as an array.

Here is an example output for using .keys():

let footballClubs = {
chelsea_fc: "England",
fc_barcelona: "Spain",
ac_milan: "Italy",
};

console.log(Object.keys(footballClubs));
// prints [ 'chelsea_fc', 'fc_barcelona', 'ac_milan' ]

Object.values()​

This method goes into our object, and returns the values of every property as an array.

Here is an example output for using .values():

let footballClubs = {
chelsea_fc: "England",
fc_barcelona: "Spain",
ac_milan: "Italy",
};

console.log(Object.values(footballClubs));
// prints [ 'England', 'Spain', 'Italy' ]

Exercise (1)​

Exercise

Return the keys and values of the following object


let capitalCities = {
scotland: "Edinburgh",
kenya: "Nairobi",
australia: "Canberra",
canada: "Ottawa",
};

let highScores = {
55: "Alistair",
100: "David",
89: "Hannah",
34: ["Sergi", "Frank"],
};

// ONLY EDIT BELOW HERE

let capitalCitiesKeys = ;
let highScoresKeys = ;
let capitalCitiesValues = ;
let highScoresValues = ;

// ONLY EDIT ABOVE HERE

console.log(capitalCitiesKeys);
// prints [ 'scotland', 'kenya', 'australia', 'canada' ]

console.log(highScoresKeys);
// prints ['34, '55', '89', '100']

console.log(capitalCitiesValues);
// prints [ 'Edinburgh', 'Nairobi', 'Canberra', 'Ottawa' ]

console.log(highScoresValues);
// prints [[ 'Sergi', 'Frank' ], 'Alistair, 'David', 'Hannah']

Exercise (2)​

Exercise

You have an object of mentors and their ages below, but the keys are inconsistent. JOSH and JAMIE are uppercase, while james and Mozafar are not. You want to return an array of mentors with the names in uppercase.

You're going to have to used what we learned at the start of this lesson, and some other JavaScript methods to accomplish this task.


let mentorsAges = {
james: 29,
JOSH: 35,
JAMIE: 25,
Mozafar: 30,
};

// ONLY EDIT BELOW THIS LINE

let mentorsNames = ;

let mentorsNamedUppercased = ;

// ONLY EDIT ABOVE THIS LINE

console.log(mentorsNamedUppercased);
// prints [ 'JAMES', 'JOSH', 'JAMIE', 'MOZAFAR' ]

Exercise (3)​

Exercise

Objects very often contain other objects.

This exercise will give you practice in getting the keys of objects inside other objects.

Use the provided console.log statements below and follow the instructions above them.

let storeBranches = {
glasgow: {
manager: "Andrew",
assistant: "Laura",
interns: {
head_intern: "Mozafar",
intern: "James",
},
},

edinburgh: {
director: "Kelly",
manager: "Sally",
assistant: "Derek",
interns: {
head_intern: "John",
intern: "Sarah",
},
},
};

// ONLY EDIT BELOW THIS LINE

// # 1
// prints [ 'glasgow', 'edinburgh' ]
console.log();

// # 2
// prints [ 'manager', 'assistant', 'interns' ]
console.log();

// # 3
// prints [ 'head_intern', 'intern' ]
console.log();

// ONLY EDIT ABOVE THIS LINE

Loop through an Object​

Once in a while it will be required to loop through objects. You can achieve this in various ways.

Use for...in statement​

The for...in statement iterates over all distinct properties of an object.

Example:

const flowers = {
tulip: 20,
rose: 10,
lily: 15,
};

for (const key in flowers) {
console.log(`${key}: ${flowers[key]}`);
}

// Prints
// tulip: 20
// rose: 10
// lily: 15

Convert object into an array and loop through the array​

Since we started JavaScript, we have used console.log to print things to our console.

Once you create an array of the object's keys or values using the Object.keys, Object.values methods, you can loop through it as if it was a normal array using array methods like forEach.

Example:

const flowers = {
tulip: 20,
rose: 10,
lily: 15,
};

// Looping through the array created from Object.keys
const flowerKeys = Object.keys(flowers);

flowerKeys.forEach((key) => {
console.log(`${key}: ${flowers[key]}`);
});

// Prints
// tulip: 20
// rose: 10
// lily: 15

Exercise (1)​

Exercise

You are given an object of trainee names and grades Loop through all the trainees' grades and console log the name and grade of the ones with grade more than 18 Try to use both methods shown above to achieve this

const traineeGrades = {
tom: 20,
george: 17,
abdul: 19,
};

// Prints
// TOM - 20
// ABDUL - 19

Pair Programming Kata​

You will be randomly assigned a pair.

exercise Coding Meetup 25 minutes
  • Set a timer and switch between driver and navigator roles after 10 minutes
  • The "driver" is the person typing on the keyboard, just thinking about what needs to be written
  • The "navigator" reviews what the driver is doing and is thinking about to write next

Choose a kata from CYF Array and Object Methods that suits you both.

Coursework​

Click here to view the homework for this lesson.

Feedback​

Please spend two minutes reviewing this lesson to help us improve it for the future. This feedback will be shared with volunteers.