Mapping Letters with JS

/* Problem: We need a function that will take a string containing any number of alpha numeric characters excluding white spaces
*  and return an object with key pair values detailing how many times each character shows up in the string. Then we need another function
*  that accepts the array and returns a function that when a number is passed to it, the function returns a color.
*
* @function ('hello');
* this should return an object like this
* @Object = {h: 1, e: 1, l: 2, o:1}
* 
* @function(object)
* this should return a function that when we pass a value to it returns a color the color can be any format accepted by css properties
* @function(number) 
* @var = 'color' 
*/

/* first attempt

function letterCounter(str){
  let tempObj = {};
  for(let i = 0; i < str.length; i++){
    if(tempObj[str[i]]){
    	tempObj[str[i]] += 1;
    }
    else if(str[i] !== ' '){
    	tempObj[str[i]] = 1;
    }
  }
  return tempObj;
}

//this looks good but I hate declaring temporary variables when they are not needed and for loops look kinda meh to me.
//so lets abuse JavaScripts modularity

function letterCounter_perfect(str){
	return [...str.replace(/ /g, "")].reduce((acc, cur)=>{
		acc[cur]?  acc[cur] += 1 : acc[cur] = 1;
    return acc;
  }, {});
}

//Oh this is Perfect

//Lets move on to our next function
//we need to accept the object and return our mapper function

function colorMapLetters(obj) {
  const myColors = ['red', 'green', 'blue', 'brown'];
  let tempArr = Object.values(obj);
  let max = Math.max(...tempArr);
  let min = Math.min(...tempArr);
  let colorMax = myColors.length - 1;
  let colorMin = 0;
  return function(number) {
    let mappedNumber = Math.floor((number - min) * (colorMax - colorMin) / (max - min) + colorMin);
    return myColors[mappedNumber];
  }
}

//ok this works, we use some math magic to map one array to another
//but I think I can make it smaller and more unreadable :-)

function colorMapLetters_perfect(obj, colors=false) {
	const myColors = [...colors] || ['red', 'green', 'blue', 'brown'];
  let min =  Math.min(Object.values(obj));
	return (n)=>{
  	return myColors[Math.floor(n - min) * (myColors.length - 0) / (Math.max(Object.values(obj)) - min) + 0];
  }
}

//this looks so good, and I also made where the user can specify their own colors! I purposely set the min variable as variable so its not
//calculate twice each time I run the function. I would like to point out the downside in this that every time this function is called
//the values that are not stored in variables now need to be recalculated, wasting time.