Arrow Function Not Working

JavaScript
1

I feel like somehow I never fully grasped the basics of functions. So, I’m reviewing the function lessons.

Anyway, I tried this code:


console.clear();
var sum;
sum = (a, b) => { a + b };
console.log(sum);

And in the dev console I get this:

“Console was cleared
test-evaluator.ce518…a06218e77ee8.js:569 TypeError: Cannot read property ‘trim’ of undefined”

So, I don’t understand why my arrow function isn’t working.

Little help?

2 
sum = (a, b) => { a + b };

We have to discuss a little bit of JS here.

For the arrow function, there are two ways you can return a value, implicitly and explicitly. If you don’t provide a code block (no open curly brace) and it’s just an expression, the arrow function will just return whatever that expression evaluates to.

const squareIt = x => x*2;

Here, it evaluates x*x and returns it.

But you opened with a curly brace so the arrow function goes into “explicit return” mode, expecting and actual return. Since it sees no return in the code block, it returns undefined. We would have wanted something like this:

const squareIt = x => {
  return x*2;
}

If your arrow function is small, an implicit return makes sense. If not, go explicit.

Since it’s related, there is a gotcha with arrow functions. If you want to return an object as an implicit return, you can’t do this:

const getNameObj = (firstName, lastName) => { first: firstName, last: lastName };

That is going to throw an error because it sees an open curly brace and assumes it is a code block and tries to interpret the innards as an expression. But if we wrap it all in parentheses, JS know that it is all an expression:

const getNameObj = (firstName, lastName) => ({ first: firstName, last: lastName });

That’s bound to come up eventually.

2 Likes
3

Thank you. That does help.

I understand functions a little better now. Tell me, please, am I right in thinking that a function like this:

const functionWithArgs = (x, y) => { return x+y; }

Must have its arguments defined or it will return an error?

I’m trying to work with this code and it seems like I can’t declare it first and then call it after, but it works when I define x and y above it.

Thanks again.

4

Must have its arguments defined or it will return an error?

Yes, unless those are defined in a surrounding scope, which probably isn’t what would be wanted.

I’m trying to work with this code and it seems like I can’t declare it first and then call it after…

I’m not sure I understand. Can you show a complete example of what isn’t working?

1 Like
5

To explain further what those parameters are doing…

That function has no idea how it is going to be used. You are telling it, “There may be some parameters passed to you. If there are, you can call the first one ‘x’ and the second one ‘y’.”

If you send no parameters to it, they will just end up undefined. If you send a third or fourth (or whatever parameter), the function will just ignore them because it hasn’t been told to accept them - it can’t reference them without a name.

1 Like
6

Well, ok. That was weird. I don’t know what I was doing yesterday, but it was throwing an error. Today I did this:

const functionWithArgs = (x, y) => { return x + y; }
functionWithArgs(1, 2);

It did precisely what I wanted it to do. It was probably some silly error on my part. Maybe I misspelled the function call or something.

Anyway, thanks again for your help.

1 Like
7

You can also abbreviate this like so since ‘return’ is implied and curly braces aren’t needed on a single line arrow function.

const functionWithArgs = (x, y) => x + y;
1 Like
8

That does not seem to work.

I’m trying to use this code in the challenge: “Basic JavaScript: Passing Values to Functions with ArgumentsPassed”. It is not working. It fails the tests:

functionWithArgs(1,2) should output 3 .

functionWithArgs(7,9) should output 16 .

So that code seems just to assign the value of x + y to a variable, and doesn’t actually return it, unless I’m missing something.

9

Actually, now nothing seems to work.

I tried the same solution that worked two days ago and it fails to return the correct sums.

This doesn’t make any sense. I am unable to account for this result.

11

Ok.

Here is the code that isn’t working:

console.clear();
function functionWithArgs(x, y) { return (x + y); }
//const functionWithArgs = (x,y) => x+y;
console.log(functionWithArgs(7, 9));
functionWithArgs(7, 9);

I was able to make this work with both syntaxes yesterday after I posted. I just can’t remember what I figured out.

12

I may be wrong, but is not that challenge introduced before the return statement, and so it is just telling you to use the console.log statement to print to the console?

13

I don’t understand what you are saying.

What do you mean by “that challenge”?

14

the challenge you are trying to complete

15

and yes, it is saying your code is wrong because you are not following instructions

  1. Create a function called functionWithArgs that accepts two arguments and outputs their sum to the dev console.
  2. Call the function with two numbers as arguments.
1 Like
16

Ok, wow. It was right there in front of me. I kept thinking it wanted me to return the sum of the arguments, when it only wants them outputted to the dev console.