0

I'm new to javascript and I'm having difficulty keeping up with the various ways of writing functions, particularly the newer arrow function styles that don't require a return statement.

I spent a while trying to write a function that takes a string containing both numbers and number strings, converts all into numbers and then gets the sum / total.

From what I can gather, I was on the right path by trying to use the map() method to return a new array, followed by parseInt to change the strings to numbers, and finally reduce() to get the sum.

When I tried this, the reduce method would not work, and I would be left with the array of numbers.

Someone else wrote a solution that works that uses the same steps as mine, but I am struggling to work out how this would work when written in the longer format that I have learned (I haven't extensively studied shorter form ES6 arrow functions yet).

Any advice on how I could change my function so that it works like the shorter one would be greatly appreciated.

My function:

const myArr = [3, 7, 8, "5", "9", 6, "2"];

function sumMix(x) {
 return x.map((str) => { 
    return parseInt(str);
 });
 str.reduce((acc, cur) => {
     return acc + cur;
 });   
}

sumMix(myArr);

The working solution I found

const myArr = [3, 7, 8, "5", "9", 6, "2"];

function sumMix(x){
   return x.map( str => parseInt(str)).reduce( (acc, cur) => acc + cur );
}

sumMix(myArr);
Jack Averill
  • 821
  • 1
  • 10
  • 27
  • 3
    Nothing after a `return` statement will be run, at that point you "exit" the function. – DBS Dec 01 '22 at 14:15
  • 1
    Your long function returns the `map()` result, but completely skips the `reduce()` part, because it already returned. – Roman Hocke Dec 01 '22 at 14:16
  • I see, so is there a way of writing this without returning until the very end? I think I read somewhere that functions without return statements were a new addition with ES6 - I'm wondering how this would have been written prior to that. – Jack Averill Dec 01 '22 at 14:19
  • 1
    Also! Remember to provide radix for yout parseInt() to avoid unexpected outcomes. ... or just use Number() ;-) see https://stackoverflow.com/a/66659301/4299304 – soupy-norman Dec 01 '22 at 14:19
  • Thanks soupy-norman, I'll have a look. :) – Jack Averill Dec 01 '22 at 14:37

2 Answers2

1

Just chain the reduce on to the map like:

const myArr = [3, 7, 8, "5", "9", 6, "2"];

function sumMix(x) {
 return x.map((str) => { 
    return parseInt(str);
 }).reduce((acc, cur) => {
     return acc + cur;
 });   
}

sumMix(myArr);

Without chaining the reduce, like thers said, you are just returning the array result from the map, which correctly parses as integers but doesnt proceed on to reduce them

terpinmd
  • 1,014
  • 8
  • 15
  • 1
    Thank you! This is exactly what I was looking for and what I was trying to understand. It's a longer way of solving the problem but I'm trying to understand this way of writing functions before moving onto the more modern, shorter ones. Being able to compare the two is a huge help :) – Jack Averill Dec 01 '22 at 14:36
  • 1
    @Jack1991 glad that is what you were looking for. While they look different in the end they are still just JavaScript objects, of type Function. – terpinmd Dec 01 '22 at 14:39
0

particularly the newer arrow function styles that don't require a return statement

It still returns something, the 'normal' braces can be omitted so the function directly returns the expression

Read more about arrow functions here

The map() and reduce() can be combined if we do an parseInt on the cur.

Remember to give 0 as initial value to reduce() so we can simply add the parseInt(cur)

const myArr = [3, 7, 8, "5", "9", 6, "2"];

const sumMix = x => x.reduce((acc, cur) => acc + parseInt(cur), 0)

const res = sumMix(myArr);
console.log(res); // 40
0stone0
  • 34,288
  • 4
  • 39
  • 64
  • For whatever reason they want to know how to modify the first non arrow function version so that it works – terpinmd Dec 01 '22 at 14:25