Confused by arrow functions

Hey!
So I’m new here and learning JS. I have just gone through the material written about functions and I’m now working on the rock, paper, scissors project.

https://www.codecademy.com/courses/introduction-to-javascript/projects/rock-paper-scissors-javascript

I got to admit that I am quite confused. After going through the course material for functions, and now beginning the project, it seems arrow functions is the norm. I wonder: why?

You create the function by starting with const, so is it a variable? A variable which value only is affected by the block of code that you write in the function?

And then when I see new variables initiated in these arrow functions, I get even more confused. I understand that arrow functions makes it easier to write shorter and concise code, but I’m struggling to understand the logic of the concept itself.

Thanks in advance!

Heya!

An arrow function at it’s core is just a simpler, more concise way of writing a function. These three ways of writing a function are all effectively equivalent:

const addTwo = num => { 
   return num + 2
}

const addTwo = function(num) {
   return num + 2
}

function addTwo(num) {
  return num + 2
}

There are a couple benefits of using arrow functions instead of using the function keyword:

  • You can use what’s called an implicit return. This means that if you are immediately and directly returning a value, you can omit the return keyword and the braces, so the above example could be re-written as: const addTwo = num => num + 2 :
    image
  • => is a lot cleaner and simpler than using the function keyword, although of course stylistic choices within code can be fairly subjective.

Yes, it is. Ultimately, a variable is just a name that represents a value stored in memory. This value can be (almost) anything, be it a string, a number, something like a function or an instance of a class. Variables aren’t just limited to be the more traditional data types (such as a string).

1 Like

Thanks for the fast reply!

This makes things less foggy.

I fully agree that it’s a lot cleaner and simpler. I think the benefit for a beginner like me to write longer code with more keywords and brackets is that I understand whats going on. Without fully understanding arrow functions I would feel a bit uncomfortable using it. Maybe a weird comparison but I feel like arrow functions is like reading a book where you have to read between the lines to get the full picture.
I get how codecademy wants to learn this away quickly. As getting a habit of writing simple and concise code is beneficial for all.

Being a beginner in JS it was easy to lock myself to think that variables only had values equal to primitive data types. Thanks for clearing this up. I’ll continue the course and coding with a more open mind haha :smile:

1 Like

Glad I could help!

Yeah I know exactly what you mean, if you aren’t super familiar with arrow functions, a more traditional function that uses the function keyword can be a lot more clear, verbose and a little bit more intuitive.

That said, they are very widespread and commonly used and are steadily becoming the norm so it’s definitely something I would recommend dedicating a little bit of time to get used to, the more you practice with them the more normal and comfortable to use it’ll be.

Happy coding! :smile:

1 Like

A quick follow up question on the project.

The walkthrough shows the following code

if (userChoice === ‘paper’) {
if (computerChoice === ‘scissors’) {
return ‘The computer won!’;
} else {
return ‘You won!’;
}
}

i didn’t know you could have continuous ‘{’ without ‘}’. How does this interaction work? Does the first initial curly bracket just initiate the line after? and the second (end) curly bracket tell the computer when to stop reading?
Whats the thought behind this?

1 Like
if (userChoice === 'paper') { // <- opening
  if (computerChoice === 'scissors') {
    return 'The computer won!';
  } else {
    return 'You won!';
  }
} // <- closing

Would you mind clarifying what you mean here, I’m not sure I understand, sorry! The important thing is that every opening { must have a corresponding } at the start and end of the block respectively, which is what we have in the code from that exercise you shared.

The ending curly bracket tells the computer that it’s the end of that block, for example in your code it means the end of that if statement or the end of that function, etc and tells it when it should stop including code as part of the block.

Happy coding! :slight_smile:

After the first opening, if (computerChoice === ‘scissors’) { //New opening follows

Ahh I see now, my bad!

So what’s happening there is that yes, it is a new opening (and is therefore a new block) but that block is nested within the outer block (the parent if statement with the userChoice === "paper" condition) and they are treated as two independent (nested) blocks by the JS interpreter.

It’s perfectly valid to have blocks nested inside of other blocks (and therefore to have two continuous opening { brackets) so long as there is the appropriate number of closing brackets afterwards at the end and JS is able to keep track of which brackets are part of which blocks and avoid any conflicts.

Hopefully that helps! :slight_smile:

1 Like

again thanks for fast replies!

1 Like

Aside

With regard to arrow functions, there are some distinct differences between them and conventional functions. Subjective style decisions should be set aside and the syntax that is most suited to the setting used. In most cases, a function can and probably should just be written as a standard function.

Arrow functions are intentionally skint of some of the properties of a normal function (this, arguments, &c.) because they are meant to be concise. They are lambda, small, anonymous functions that fill the role of helper functions, often times written into the body of a parent function they are helping. They let us turn code bloated functions into functional programs.

Bottom line, forget choice. Use the concise form where it best fits, else stick to standard functions, particularly, function expressions that are assigned to a variable.

const foo = function (bar) {
    // do something with bar and return
}

Just saying.

2 Likes