Functional Programming in Javascript – map()

Hi, maybe to start this post you can read the post Functional Programming in Javascript – forEach() nice!

Creating new values from other values

Cool, if we want to apply a function to one value and then create another value from that we can use forEach method and here we are using Functional programming: remember that “Using functional programming in your code means that we are solving problems with less or little code.

// This is an array of objects that have data about movies
const newReleases = [
    {
        "id": 70111470,
        "title": "Die Hard",
        "boxart": "http://cdn-0.nflximg.com/images/2891/DieHard.jpg",
        "uri": "http://api.netflix.com/catalog/titles/movies/70111470",
        "rating": [4.0],
        "bookmark": []
    },
    {
        "id": 654356453,
        "title": "Bad Boys",
        "boxart": "http://cdn-0.nflximg.com/images/2891/BadBoys.jpg",
        "uri": "http://api.netflix.com/catalog/titles/movies/70111470",
        "rating": [5.0],
        "bookmark": [{ id: 432534, time: 65876586 }]
    },
    {
        "id": 65432445,
        "title": "The Chamber",
        "boxart": "http://cdn-0.nflximg.com/images/2891/TheChamber.jpg",
        "uri": "http://api.netflix.com/catalog/titles/movies/70111470",
        "rating": [4.0],
        "bookmark": []
    },
    {
        "id": 675465,
        "title": "Fracture",
        "boxart": "http://cdn-0.nflximg.com/images/2891/Fracture.jpg",
        "uri": "http://api.netflix.com/catalog/titles/movies/70111470",
        "rating": [5.0],
        "bookmark": [{ id: 432534, time: 65876586 }]
    }
];

// Array to save video id and title of movies
let videoIdAndTitle = [];


// Function to go to every position in the array
function getVideoIdAndTitle(myArray) {

    // using a forEach method to go through every position of the array and passing a function in every element of the array
    myArray.forEach(video => videoIdAndTitle.push({ name: video.id, title: video.title })); // ES6 arrow function

    // return the created method    
    return videoIdAndTitle;
}

// Executing the function getVideoIdAndTitle and passing the array of objects newReleases as a parameter
getVideoIdAndTitle(newReleases);

Result:

Nice, but if you read “Using functional programming in your code means that we are solving problems with less or little code.

The last solution is fine! there is not problem but we can use another method that is from functional programming called .map() and this method will help us to solve this problem with less or little code.

If you see this next code we removed the videoIdAndTitle = []; line, the push method and the return videoIdAndTitle; line.

Using .map() give us the same solution but with less code:

// This is an array of objects that have data about movies
const newReleases = [
    {
        "id": 70111470,
        "title": "Die Hard",
        "boxart": "http://cdn-0.nflximg.com/images/2891/DieHard.jpg",
        "uri": "http://api.netflix.com/catalog/titles/movies/70111470",
        "rating": [4.0],
        "bookmark": []
    },
    {
        "id": 654356453,
        "title": "Bad Boys",
        "boxart": "http://cdn-0.nflximg.com/images/2891/BadBoys.jpg",
        "uri": "http://api.netflix.com/catalog/titles/movies/70111470",
        "rating": [5.0],
        "bookmark": [{ id: 432534, time: 65876586 }]
    },
    {
        "id": 65432445,
        "title": "The Chamber",
        "boxart": "http://cdn-0.nflximg.com/images/2891/TheChamber.jpg",
        "uri": "http://api.netflix.com/catalog/titles/movies/70111470",
        "rating": [4.0],
        "bookmark": []
    },
    {
        "id": 675465,
        "title": "Fracture",
        "boxart": "http://cdn-0.nflximg.com/images/2891/Fracture.jpg",
        "uri": "http://api.netflix.com/catalog/titles/movies/70111470",
        "rating": [5.0],
        "bookmark": [{ id: 432534, time: 65876586 }]
    }
];

// Function to go to every position in the array
function getVideoIdAndTitle(myArray) {

    // using a .map() method to go through every position of the array and passing a function in every element of the array
    // .map() creates a new array with the results
    return myArray.map(video => ({ name: video.id, title: video.title })); // ES6 arrow function
}

// Executing the function getVideoIdAndTitle and passing the array of objects newReleases as a parameter
getVideoIdAndTitle(newReleases);

Result:

By Cristina Rojas.