如何从 arr.map(elem => dict[elem]) 中提取 function？

Question

A function should do only one thing is considered a good practice when writing functions. However, I have a function that is already very minimal, but nevertheless I think it can be further extracted, but I don't know how this can be done.

The following recode() function replaces array values according to a look-up dictionary.

function recode(arr, dict) {
    return arr.map(elem => dict[elem])
}

Example to how it works:

// input data to be recoded
const myArr = ['eggplant', 'tomato', 'carrot', 'cabbage'];

// look-up dictionary
const myDict = {
    eggplant: 'purple',
    tomato: 'red',
    carrot: 'orange',
};

const result1 = recode(myArr, myDict)
console.log(result1) // => ["purple", "red", "orange", undefined]

The way I see it, the current recode() function does two things:

1. It matches by identity (you might have a better description than this), ie, elem => dict[elem] ; and
2. it maps over arr

My question is whether I can extract an individual function for elem => dict[elem] , and supply that function to arr.map() . I imagine something along the lines of:

// pseudo-code
function funcInner() {...}

function recode(arr, dict) {
    return arr.map(funcInner)
}

This way, I will have one function that does only the replacement, and another that only maps over arr .

---

EDIT

---

To address the comments, I would like to make an analogy. Let's consider a function that doubles array values.

function doubleArray(arr) {
  return arr.map(x => x * 2)
}

Some folks here might say that doubleArray() is already doing one thing. However, we could still extract:

const doubleNumber = x => x * 2;

function doubleArray2(arr) {
  return arr.map(doubleNumber)
}

As far as I understand, doubleArray() did two things (double & map), whereas doubleArray2() does only one thing (map) and doubleNumber() does one thing (doubles). Therefore, doubleArray() is not a meaningless refactoring.

Furthermore, once we have a function that does one thing, it promotes more accurate unit tests we can write for it.

Lastly, if we translated this code to typescript (which I didn't focus on in this question), then the input type in doubleNumber() is different than the input type in doubleArray() . So that's another reason why I would prefer to extract.

I'm very new to javascript, but this is the way I understand it. So my question about recode() was within this context.

Answer 1

To answer your question:

function recode(arr, dict) {
    return arr.map(elem => funcInner(elem,dict));
};

function funcInner(elem, dict) {
    return dict[elem];
}

But i agree with the others commenting on you question, this may be a little overkill. Your choice.

Answer 2

In essence recode is being used a wrapper around arr.map() . This could also be achieved by assigning recode to a function returned by calling the Function.bind() method .

const recode = myArr.map.bind(myArr, elem => myDict[elem]);

myArr needs to be passed as the first parameter to bind the context of the array.

 // input data to be recoded const myArr = ['eggplant', 'tomato', 'carrot', 'cabbage']; // look-up dictionary const myDict = { eggplant: 'purple', tomato: 'red', carrot: 'orange', }; const recode = myArr.map.bind(myArr, elem => myDict[elem]); const result1 = recode(myArr, myDict) console.log(result1) // => ["purple", "red", "orange", undefined]

But perhaps it is simpler just to call .map() directly:

 // input data to be recoded const myArr = ['eggplant', 'tomato', 'carrot', 'cabbage']; // look-up dictionary const myDict = { eggplant: 'purple', tomato: 'red', carrot: 'orange', }; const result1 = myArr.map(elem => myDict[elem]) console.log(result1) // => ["purple", "red", "orange", undefined]

If there is a desire to have a user-supplied callback, then the ES-6 default parameters could be used:

 function recode(myArr, myDict, callback = elem => myDict[elem]) { return myArr.map(callback); } // input data to be recoded const myArr = ['eggplant', 'tomato', 'carrot', 'cabbage']; // look-up dictionary const myDict = { eggplant: 'purple', tomato: 'red', carrot: 'orange', }; const result1 = recode(myArr, myDict) console.log(result1) // => ["purple", "red", "orange", undefined] const result2 = recode(myArr, myDict, elem => myDict[elem] + 'a') console.log(result2) // => ["purplea", "reda", "orangea", "undefineda"]

Answer 3

A slight variation on Daniel's answer : Have the other function return a function that can be used as callback for Array#map :

function createMapper(dict) {
  return elem => dict[elem];
}

function recode(arr, dict) {
    return arr.map(createMapper(dict));
}

But I would also question whether this is really an improvement over your original code.

Answer 4

You do not need to extract in your case, thats why arrow functions exist.