Arrow functions in Javascript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is an arrow function in JavaScript?

An arrow function is a shorter way to write a function using the => syntax. It makes code simpler and easier to read.

beginner

How do you write a simple arrow function that adds two numbers?

You write it like this: <br><code>const add = (a, b) =&gt; a + b;</code><br>This function takes two inputs and returns their sum.

intermediate

What is the difference between a regular function and an arrow function regarding the this keyword?

Arrow functions do not have their own this. They use this from the surrounding code. Regular functions have their own this.

intermediate

Can arrow functions be used as constructors with the new keyword?

No, arrow functions cannot be used as constructors. They do not have a prototype property and will throw an error if used with new.

beginner

How do you write an arrow function with no parameters?

You write it with empty parentheses: <br><code>const greet = () =&gt; 'Hello!';</code><br>This function returns the string 'Hello!'.

Which of the following is the correct arrow function syntax to multiply two numbers?

A const multiply = (a, b) => { a * b };

B const multiply = function(a, b) { return a * b; };

C const multiply = (a, b) => a * b;

D const multiply = (a, b) => return a * b;

Option C correctly uses arrow function syntax with implicit return. Option B is a regular function. Option A misses the return keyword inside braces. Option D has incorrect syntax.

What happens if you try to use new with an arrow function?

A It throws an error because arrow functions can't be constructors.

B It calls the arrow function without creating an object.

C It returns undefined.

D It creates a new object as usual.

Arrow functions do not have a prototype and cannot be used as constructors, so using new with them throws an error.

How does the this keyword behave inside an arrow function?

A It refers to the arrow function itself.

B It inherits <code>this</code> from the surrounding code.

C It refers to the global object.

D It is always undefined.

Arrow functions do not have their own this. They use the this value from the surrounding context.

Which arrow function correctly returns the string 'Hi'?

A Both B and C

B const sayHi = () => 'Hi';

C const sayHi = () => { return 'Hi'; };

D const sayHi = () => { 'Hi' };

Both B and C correctly return the string 'Hi'. Option D does not return anything because braces without return do not return a value.

Which is a benefit of using arrow functions?

A They always run faster than regular functions.

B They automatically bind to all events.

C They can be used as constructors.

D They allow shorter syntax and lexical <code>this</code> binding.

Arrow functions provide shorter syntax and use the surrounding this value, which can simplify code. They are not constructors and do not automatically bind to events.

Explain how arrow functions handle the this keyword differently from regular functions.

Think about where <code>this</code> points inside arrow functions.

Write an arrow function that takes no parameters and returns the string 'Welcome!'.

Remember how to write arrow functions with no inputs.