Javascript - DOM 2, map and filter

Learning objectives

• Map and filter

Flipped classroom videos

• Map, Filter & Reduce EXPLAINED in JavaScript - It's EASY!

Teacher instruction

• Reload page

• Added difficulty to portfolio handin

• Handin use git, remember

• Code simple input page

Peer instruction

Map

When working with data we often need to transform the data we have from one format to another. Maybe we have an array of objects that should be transformed into an array of strings. Or we have an array of numbers that should be transformed into an array of booleans

Let's take a practical example:

const users = [{
    name: 'Hans',
    age: 24
  }, {
    name: 'Sharmila',
    age: 11
}];

const names = users.map(function(user) {
  return user.name;
});

console.log(names); // ['Hans', 'Sharmila'];

The map can only be called on an array.

It takes a function as argument with a parameter that represents each item in the array in the case the parameter is called user. That is because user represents an individual user (with a name and an age )

The function we give to the map function should return what we want in the newly transformed array! In this case we want the names of the users. So we return user.name. If we instead wanted the users ages in the new array, we would return user.age.

Map with arrow function

Using arrow functions can make our code quite precise 👇

const users = [{
    name: 'Hans',
    age: 24
	}, {
    name: 'Sharmila',
    age: 11
}];

const names = users.map(user => user.name);

console.log(names); // ['Hans', 'Sharmila'];

user is still the parameter and user.name is still being returned we just make havy use of arrow functions.

Filter

The filter function is similar to the map function. But instead of transforming an array we are filtering it. Meaning some items in the array will be filtered out. Let's say we wanted an array of only the users that are above eighteen 👇

const users = [{
    name: 'Hans',
    age: 24
	}, {
    name: 'Sharmila',
    age: 11
}];

const aboveEighteen = users.filter(user => user.age > 18);

console.log(aboveEighteen); // [{ name: 'Hans', age: 24 }];

The function we give to filter has to return a boolean indicating if the current item in the array should kept or removed. Basically the filter function is asking us for each item if it should keep the item. We tell the function that by returning a boolean. If we return true then the item will be kept. If we return false the item will be removed

Only the customer with the name Hans is returned because the filter function only returns the items that are true in the function we give it

Here are a bunch of differences between filter and map

• The array returned from map has the same length as the original array

• The array returned from filter has the same length or smaller than the original array (because some item might be filtered out)

• In map we can return anything

• In filter we can only return a boolean

Map, filter and reduce

📝 Exercise

Now for some map and filter exercises

📝 Exercise 1 - level 1

Using the names array to transform the array so it contains the words but in uppercase. Use the .map function

const names = ["Peter", "Hans", "Mousa", "Keerthika"];

The array should contain the following values

["PETER", "HANS", "MOUSE", "KEERTHIKA"]

📝 Exercise 1.1 - level 1

Using the names array create a new array that only contains the names that have more than 5 characters. Use the .filter method

This should be the array

["Keerthika"]

📝 Exercise 3 - level 2

The following object represents two ufo sightings in Denmark. Take the object and transform it into an array of objects with keys lat, lng. Use the .map method

const ufoSightings = {
  Sheet1: [{
    date: "1980erne",
    start_date: "mellem 10 og 17",
    duration: "8 sek",
    place: "8462 Harlev",
    Vidner: "1",
    Farver: "transparent",
    "lat, lng": "56.1466687, 9.996093"
  },{
    date: "Apr-82",
    start_date: "eftermiddag",
    duration: "1 min",
    place: "Bovrup, 6200 Aabenraa",
    Vidner: "2",
    Farver: "sølv",
    "lat, lng": "54.99635015, 9.5815365025616"
  }]
};

This is what the array should look like:

const ufoSightingsLatLng = [{
    lat: 56.1466687,
    lng: 9.996093
  },{
    lat: 54.99635015,
    lng: 9.5815365025616
}];

📝 Exercise 4

You can choose to either work on your portfolio project 2 or Guess my number

Guess my number

The project is a game where you have to guess a number. Here are the rules

• When clicking the Check! button check if what the user wrote in the input matches the number they have to guess

  • If it's wrong increase the Score by 1 and clear the input

  • If it is correct and smaller than Highscore set the new score as the highscore and clear the input. Also show the correct number in the ?

• If the Again button is clicked clear the score and the highscore and start from scratch

• Add a couple of extra features you think could be cool!

The starter for the project can be found here. Create a new project and copy the files into a new project!