Arrow functions: What is this block explaining?

Question

function readJson(sample) {
    d3.json("samples.json").then((data) => {
        var extract = data.metadata
        var emptyArray = extract.filter(object => object.id == sample);
        var finalArray = emptyArray[0];
        var Visual = d3.select("#sample-metadata");

        Object.entries(finalArray).forEach(([key, value]) => {
            Visual.append("h6").text(`${key} : ${value}`);
        });
    });
}

My friend handed over this code for me but I'm having a hard time understanding the arrow functions. Can anyone explain what this function is performing? The ID and JSON files are saved as separate files.

I assumed this was JavaScript. Feel free to rollback or [edit] if I was incorrect. — Heretic Monkey, Mar 25 '20 at 21:22
There are 3 arrow functions in your code snippet. Which one do you not understant? — Filip F., Mar 25 '20 at 21:23

score 0 · Answer 1 · answered Mar 25 '20 at 21:38

The arrow functions are being used as anonymous callback functions on the methods .then, filter and .forEach.

You could just as well write it like this:

function readJson(sample) {
    // .json returns a promise which resolves to a json object assigned the name data
    // .then allows you to chain asynchronous functions with other async or synced functions
    d3.json("samples.json").then(function(data){
        var extract = data.metadata
        // Filter all the objects which satisfy the provided testing function
        var emptyArray = extract.filter(function(object){
            return object.id == sample
        });
        var finalArray = emptyArray[0];
        var Visual = d3.select("#sample-metadata");

        // For each key/value pair in finalArray execute the provided function
        Object.entries(finalArray).forEach(function([key, value]){
            Visual.append("h6").text(`${key} : ${value}`);
        });
    });
}

Thank you so much!! Think I'm getting the hang of it – danjamlee Mar 26 '20 at 02:22 — danjamlee, Mar 26 '20 at 02:22

Arrow functions: What is this block explaining?

1 Answers1