JavaScript is hard what other resources can help reinforce this material

I am having a hard time making a connection between the examples and the tasks asked of me in the lessons. Some of them are making sense and are easily completed, but others I am just clueless on how to execute the task.

Ex. https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/es6/write-concise-object-literal-declarations-using-object-property-shorthand

The example is:
const getMousePosition = (x, y) => ({ x, y });

The solution does not have the parentheses() around the right side of the arrow.

Under what circumstances should there be the parentheses to the right of the arrow and when should they not be used?

At a broader level, I think I am in part struggling with lessons where the exercise is very different from the examples. I am finding it diffucult to come to the solution without a clear understanding where the exercise has commonality with the example.

Ex. https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/es6/write-concise-declarative-functions-with-es6

I had no problem with the exercise on this lesson. The instruction was very clear, the example was understandable, and it was easily reproduced in the exercise on the right panel.

Are there more resources that can help me practice and understand JavaScript?

Let’s change this just a little. Let’s say you wanted this function to return the sum of x + y, then you could write:

const getMousePosition = (x, y) => x + y ;

This is a single line arrow function that has the return implied. We could rewrite this as:

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

Since we are now enclosing the body in curly brackets we have to explicitly return something. The important point here is that if you have an opening curly brace immediately after the arrow then JS is expecting an explicit return statement.

Now let’s go back to the original function. We want to return an object {x, y}. If we try writing that as a single line with the implied return we get:

const getMousePosition = (x, y) => { x, y };

Notice how we have an opening curly brace right after the arrow, so JS is expecting an explicit return, which we don’t have. So you can see that we have an ambiguous situation here trying to return an object in a single line arrow function. Fortunately, JS allows us to add parens around the object to make it clear that we want to return an object instead of starting a function body with an explicit return. And so we are back to the original answer:

const getMousePosition = (x, y) => ({ x, y });

1 Like

Thank you for the explanation. I removed the return and put this in the parentheses and it did work as expected.