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.

Practice

1. What is the main advantage of using arrow functions in JavaScript?

easy

A. They replace all regular functions in JavaScript.

B. They provide a shorter syntax for writing functions.

C. They can only be used for asynchronous code.

D. They automatically create new objects.

Solution

1. Step 1: Understand arrow function purpose

   Arrow functions are designed to write functions in a shorter way compared to regular function expressions.

2. Step 2: Compare options

   Only They provide a shorter syntax for writing functions. correctly states the main advantage: shorter syntax. Other options are incorrect or misleading.

3. Final Answer:

   They provide a shorter syntax for writing functions. -> Option B

4. Quick Check:

   Arrow functions = shorter syntax [OK]

Hint: Arrow functions are mainly about shorter syntax [OK]

Common Mistakes:

• Thinking arrow functions create new objects automatically
• Believing arrow functions only work with async code
• Assuming arrow functions replace all regular functions

2. Which of the following is the correct syntax for an arrow function that adds two numbers a and b?

easy

A. const add = (a, b) => { a + b; };

B. const add = (a, b) { return a + b; };

C. const add = a, b => a + b;

D. const add = (a, b) => a + b;

Solution

1. Step 1: Check arrow function syntax

   Arrow functions can omit braces and return keyword for single expressions, so (a, b) => a + b is valid.

2. Step 2: Analyze options

   A: concise and correct with implicit return. B: missing => operator, syntax error. C: misses parentheses around parameters. D: lacks return statement inside braces.

3. Final Answer:

   const add = (a, b) => a + b; -> Option D

4. Quick Check:

   Concise arrow function = (a, b) => a + b [OK]

Hint: Use parentheses for multiple params and omit braces for single expression [OK]

Common Mistakes:

• Omitting parentheses when multiple parameters exist
• Forgetting to return value inside braces
• Using commas incorrectly in parameter list

3. What will be the output of the following code?

const numbers = [1, 2, 3];
const squares = numbers.map(n => n * n);
console.log(squares);

medium

A. [1, 4, 9]

B. [2, 4, 6]

C. [1, 2, 3]

D. Error

Solution

1. Step 1: Understand map with arrow function

   The map method applies the arrow function n => n * n to each element, squaring each number.

2. Step 2: Calculate output array

   Input array is [1, 2, 3]. Squared values are [1*1, 2*2, 3*3] = [1, 4, 9].

3. Final Answer:

   [1, 4, 9] -> Option A

4. Quick Check:

   map squares each element = [1, 4, 9] [OK]

Hint: map with n => n*n squares each number [OK]

Common Mistakes:

• Confusing map output with original array
• Expecting map to modify array in place
• Misunderstanding arrow function return behavior

4. Identify the error in the following arrow function code:

const greet = name => {
  console.log('Hello, ' + name);
};
greet();

medium

A. Missing parentheses around parameter name.

B. Arrow functions cannot have multiple statements inside braces.

C. Calling greet without an argument causes name to be undefined.

D. The function should return a value instead of logging.

Solution

1. Step 1: Check parameter syntax

   Single parameter can omit parentheses, so syntax is correct.

2. Step 2: Analyze function call

   Calling greet() without argument means name is undefined, so output will be 'Hello, undefined'. This is likely unintended.

3. Final Answer:

   Calling greet without an argument causes name to be undefined. -> Option C

4. Quick Check:

   Missing argument = undefined parameter [OK]

Hint: Check if function parameters get proper arguments when called [OK]

Common Mistakes:

• Thinking parentheses are required for single parameter
• Expecting arrow functions to auto-fill missing arguments
• Confusing logging with returning values

5. Consider this code snippet:

function Counter() {
  this.count = 0;
  setInterval(() => {
    this.count++;
    console.log(this.count);
  }, 1000);
}
const c = new Counter();

What is the main reason the arrow function inside setInterval works correctly to update this.count?

hard

A. Arrow functions do not have their own this, so they use this from the surrounding context.

B. Arrow functions automatically bind this to the global object.

C. Arrow functions create a new this for each call.

D. Arrow functions cannot access this at all.

Solution

1. Step 1: Understand this in arrow functions

   Arrow functions do not have their own this. Instead, they use this from the surrounding function or object.

2. Step 2: Apply to Counter example

   Inside setInterval, the arrow function uses this from Counter instance, so this.count correctly refers to the instance property.

3. Final Answer:

   Arrow functions do not have their own this, so they use this from the surrounding context. -> Option A

4. Quick Check:

   Arrow function this = surrounding this [OK]

Hint: Arrow functions inherit this from their surrounding scope [OK]

Common Mistakes:

• Assuming arrow functions bind this to global object
• Thinking arrow functions create new this each call
• Believing arrow functions cannot access this