Assign to variable with arrow function doesn't work properly

Question

I have problem with arrow functions in javascript. When I try

<!DOCTYPE html>
<html>
    <body>
        <p>Click the button to get the sum of the numbers in the array.</p>
        <button onclick="myFunction()">Try it</button>
        <p>Sum of numbers in array: <span id="demo"></span></p>
        <script>
            var numbers = [1, 2, 3, 4];

            function myFunction() {
                 const result =
                    numbers.reduce(
                        (total, sum) => total + sum
                    );
                document.getElementById("demo").innerHTML = result;
            }
        </script>
    </body>
</html>

it works ok. But when I try

<!DOCTYPE html>
<html>
    <body>
        <p>Click the button to get the sum of the numbers in the array.</p>
        <button onclick="myFunction()">Try it</button>
        <p>Sum of numbers in array: <span id="demo"></span></p>
        <script>
            var numbers = [1, 2, 3, 4];

            function myFunction() {
                 const result = numbers =>
                    numbers.reduce(
                        (total, sum) => total + sum
                    );
                document.getElementById("demo").innerHTML = result;
            }
        </script>
    </body>
</html>

the result value is a string rather than a number. I tried different insertion options for parentheses, but it does not work for me. Where I am doing mistake?

Because I tried to adapt the "arrow function" to this problem. In this example, yes, I have access to the numbers variable directly in the block, but I tried to do an anonymous function. — jpp
– jpp, Commented Aug 11, 2017 at 15:52
The problem is that you've defined result as a function, but then you didn't call the function using result(numbers). — castletheperson
– castletheperson, Commented Aug 11, 2017 at 15:54

richie · Accepted Answer · 2017-08-11 16:08:04Z

1

This uses a self-executing anonymous arrow function to achieve what you want:

<!DOCTYPE html>
<html>
    <body>
        <p>Click the button to get the sum of the numbers in the array.</p>
        <button onclick="myFunction()">Try it</button>
        <p>Sum of numbers in array: <span id="demo"></span></p>
        <script>
            var numbers = [1, 2, 3, 4];

            function myFunction() {
              const result = (numbers => numbers.reduce(
                (total, sum) => total + sum
              ))(numbers);
              document.getElementById("demo").innerHTML = result;
            }
        </script>
    </body>
</html>

As other people have pointed out the extra function is not necessary in this specific case. However it shows how you could approach a similar problem where you need nested functions, e.g. if you are defining functions in loops.

edited Aug 11, 2017 at 16:08

answered Aug 11, 2017 at 16:01

richie

2,4883 gold badges21 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

You don't need this const result = numbers => numbers.reduce..., or more specifically you don't need numbers =>, you can just make it so const result = numbers.reduce(....

similar to what you have without using the arrow function.

EDIT

I've updated the snippet to include your function which can accept a parameter.

By using:

var myFunction = (numberArr) =>{//code here}

You can then pass numbers into myFunction() or another array of you're choosing. Thus the html has been updated to reflect this:

<button onclick="myFunction(numbers)">Try it</button>

<html>
    <body>
        <p>Click the button to get the sum of the numbers in the array.</p>
        <button onclick="myFunction(numbers)">Try it</button>
        <p>Sum of numbers in array: <span id="demo"></span></p>
        <script>
            var numbers = [1, 2, 3, 4];

            var myFunction = (numberArr) => {
                 const result = numberArr.reduce(
                        (total, sum) => total + sum
                    );
                document.getElementById("demo").innerHTML = result;
                console.log(typeof result)
            }
            
           
        </script>
    </body>
</html>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 11, 2017 at 15:49

Joe B.

1,1747 silver badges16 bronze badges

3 Comments

jpp Over a year ago

Yes, I know, but I wanted to do it specifically using ES6 syntax.

Joe B. Over a year ago

Then for the anonymous function you would make it var myFunction = () => { //code here//} and that will work. I updated the script in my snippet.

Joe B. Over a year ago

I also updated it so it could accept numbers as a parameter.

Collectives™ on Stack Overflow

Assign to variable with arrow function doesn't work properly

2 Answers 2

Comments

EDIT

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

EDIT

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related