Question 210330 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Function to capitalize first three letters on each word within given array

I wrote a function that takes in a single word and capitalizes the first three letters. Now I need to run this same function on an array of words, so that it returns each word with the first three letters capitalized. I see there’s a lot of people asking how to capitalize the first letter on each word of a sentence, but this is not the same thing. I have to use the function I already wrote so when I console.log it it looks like this:

console.log(applyAll(['str1', 'str2', 'str3', 'str4'], capitalizeThreeLetters));

I tried doing this using a for loop which returns every word together. In my research I saw the forEach() method could be used to run a function on array elements but I cannot figure out how to apply it.


//Function that takes in str returns it with three first letters capitalized

function capitalizeThreeLetters(str){

  let capFirst = str[0].toUpperCase();
  let capSecond = str[1].toUpperCase();
  let capThird = str[2].toUpperCase();

  let splitStr = str.slice(3);

  let wholeStr = capFirst + capSecond + capThird + splitStr;
  return wholeStr;
}

console.log(capitalizeThreeLetters('testing')); // => returns 'TESting'
console.log(capitalizeThreeLetters('again')); // => returns 'AGAin'



//Function that takes in a string array and applies capitalizeThreeLetters function to each array element so each word is returned with first three letters capitalized

function applyAll(arr){
  
  for (let i = 0; i < arr.length; i++){
  return capitalizeThreeLetters(arr);
  }
}  

console.log(applyAll(['mai', 'brian', 'jeho', 'han'], capitalizeThreeLetters)); 
// => returns 'MAIBRIANJEHOhan'
// => should return ['MAI', 'BRIan', 'JEHo', 'HAN']
Tags:

3

Answers


  1. 0

    Use Array.prototype.map to get a new array with the modified values of a current one

    //Function that takes in str returns it with three first letters capitalized

function capitalizeThreeLetters(str){

  let capFirst = str[0].toUpperCase();
  let capSecond = str[1].toUpperCase();
  let capThird = str[2].toUpperCase();

  let splitStr = str.slice(3);

  let wholeStr = capFirst + capSecond + capThird + splitStr;
  return wholeStr;
}

const result = ['mai', 'brian', 'jeho', 'han'].map(capitalizeThreeLetters);

console.log(result);

    There’s no need to convert each [0] [1] etc characters to uppercase, you can use .toUppercase() on the sliced portion.
    Also you can parametrize the number of characters to capitalize:

    const capitalize = (str, tot=1) => str.slice(0, tot).toUpperCase() + str.slice(tot);

const result = ['mai', 'brian', 'jeho', 'han'].map((str) => capitalize(str, 3));
console.log(result);
    Login or Signup to reply.
  2. 0

    Your applyAll function doesn’t work the way you want. When you return the function immediately exits. In this case, you return inside the loop thus prevent the loop from continuing and running the other 2 iterations.

    Your second issue is that you pass the entire array to capitalizeThreeLetters instead of a single word. You probably want capitalizeThreeLetters(arr[i]). Right now, you are passing the entire array in which leads to the first 3 words in the array being capitalized instead of the first 3 letters of each word.

    You can fix it using map:

    function applyAll(arr){
  return arr.map(capitalizeThreeLetters);
}

    The map function on an array will call a function on each element of the array then return a new array with the results.

    Login or Signup to reply.
  3. 0

    There are quite a few methods available on arrays. The forEach method is one of them, and as you’ve noted it can serve the same function as a for loop. But when you’re intending to use a loop to construct some data from an array, it’s perhaps not the best or most intuitive option.

    Another array method that may be easier and more intuitive is map. Like forEach, the map method will apply a function to each element of your array. However, unlike forEach, the map method returns something at the end. In particular, it returns a new array of the same length, where each element is the result of running your function on the same element in the original array. In this way, the initial array is mapped onto your new array.

    So, for example, you could run this:

    const newArray = (['mai', 'brian', 'jeho', 'han']).map(capitalizeThreeLetters))

    The value stored in that newArray variable would be a new array, that I expect (based on how you described your function) would look like this:

    ['MAI', 'BRIan', 'JEHo', 'HAN']

    You might find it useful to have a look through the list of Array methods on MDN, it’s helpful to be familiar with the options.

    Just one tip to go along with that advice though – I’d recommend staying away from the reduce method. You may see answers on here occasionally that use reduce to condense something down to a single line of code, but it comes with a cost. This method is typically difficult to follow when reading code, and it’s often much more memory intensive than necessary especially when used to create arrays. Just a plain old for loop is pretty much always better than using reduce.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search