Function expression in Javascript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a function expression in JavaScript?

A function expression is a way to define a function inside an expression, often assigned to a variable. It can be anonymous or named and is not hoisted like function declarations.

beginner

How do you assign a function expression to a variable?

You write: <code>const myFunc = function() { /* code */ };</code> This stores the function in the variable <code>myFunc</code>.

intermediate

What is the difference between a function declaration and a function expression?

Function declarations are hoisted, so you can call them before they appear in code. Function expressions are not hoisted, so you must define them before calling.

beginner

Can function expressions be anonymous? What does that mean?

Yes, function expressions can be anonymous, meaning they have no name. For example: <code>const f = function() { }</code>. The function has no name but is stored in <code>f</code>.

intermediate

How do arrow functions relate to function expressions?

Arrow functions are a shorter syntax for writing function expressions. For example: <code>const add = (a, b) => a + b;</code> is a function expression using arrow syntax.

Which of these is a valid function expression?

A const greet = function() { console.log('Hi'); };

B function greet() { console.log('Hi'); }

C greet() => { console.log('Hi'); }

D function: greet() { console.log('Hi'); }

Option A shows a function expression assigned to a variable. Option B is a function declaration.

What happens if you try to call a function expression before it is defined?

A It works fine because functions are hoisted.

B It calls the function but with empty parameters.

C It returns undefined.

D It causes an error because function expressions are not hoisted.

Function expressions are not hoisted, so calling them before definition causes an error.

Which is true about anonymous function expressions?

A They cannot be assigned to variables.

B They have no name and are often assigned to variables.

C They must have a name.

D They are hoisted like function declarations.

Anonymous functions have no name but can be stored in variables.

How do arrow functions differ from regular function expressions?

A Arrow functions must have names.

B Arrow functions are hoisted, regular ones are not.

C Arrow functions have a shorter syntax and do not have their own 'this'.

D Arrow functions cannot be assigned to variables.

Arrow functions use shorter syntax and do not have their own 'this' context.

Which keyword is used to assign a function expression to a variable?

A const or let

B var only

C function

D def

You use const or let to assign a function expression to a variable.

Explain what a function expression is and how it differs from a function declaration.

Think about when you can call the function in your code.

Describe how arrow functions relate to function expressions and mention one key difference.

Consider syntax and behavior differences.

Practice

1. What is a function expression in JavaScript?

easy

A. A function that runs automatically when the page loads

B. A way to store a function inside a variable

C. A function declared with the function keyword only

D. A special type of loop

Solution

1. Step 1: Understand function expressions

   A function expression means assigning a function to a variable so it can be used later.

2. Step 2: Compare options

   Only A way to store a function inside a variable describes storing a function inside a variable, which matches the definition of a function expression.

3. Final Answer:

   A way to store a function inside a variable -> Option B

4. Quick Check:

   Function expression = function stored in variable [OK]

Hint: Function expressions assign functions to variables [OK]

Common Mistakes:

• Confusing function expressions with function declarations
• Thinking function expressions run automatically
• Mixing up functions with loops

2. Which of the following is the correct syntax for a function expression?

easy

A. var myFunc = function() { return 5

B. function myFunc() { return 5; }

C. let myFunc = function myFunc() { return 5

D. const myFunc = function() { return 5; };

Solution

1. Step 1: Identify function expression syntax

   A function expression assigns an anonymous function to a variable using = function() { ... }.

2. Step 2: Check options for correct syntax

   const myFunc = function() { return 5; }; uses const with an anonymous function and ends with a semicolon, which is correct syntax.

3. Final Answer:

   const myFunc = function() { return 5; }; -> Option D

4. Quick Check:

   Function expression syntax = variable = function() { } [OK]

Hint: Function expressions assign anonymous functions to variables [OK]

Common Mistakes:

• Using function declaration syntax instead of expression
• Missing semicolon at the end
• Using named function inside expression incorrectly

3. What will be the output of this code?

const greet = function(name) { return `Hello, ${name}!`; };
console.log(greet('Alice'));

medium

A. greet Alice!

B. Hello, name!

C. Hello, Alice!

D. Error: greet is not a function

Solution

1. Step 1: Understand the function expression

   The variable greet holds a function that returns a greeting string with the given name.

2. Step 2: Evaluate the function call

   Calling greet('Alice') returns Hello, Alice! which is printed by console.log.

3. Final Answer:

   Hello, Alice! -> Option C

4. Quick Check:

   Function call with 'Alice' returns greeting [OK]

Hint: Function expressions return values like normal functions [OK]

Common Mistakes:

• Confusing variable name with parameter
• Expecting function name in output
• Thinking function expression causes error

4. Find the error in this function expression:

const add = function(a, b) {
  return a + b
};
console.log(add(2, 3));

medium

A. No error, code runs correctly

B. Function expression must have a name

C. Cannot use const with function expressions

D. Missing semicolon after return statement

Solution

1. Step 1: Check syntax of function expression

   The function is assigned to add using const, which is valid. The return statement is correct without semicolon (optional in JS).

2. Step 2: Verify code execution

   Calling add(2, 3) returns 5 and prints it. No syntax or runtime errors occur.

3. Final Answer:

   No error, code runs correctly -> Option A

4. Quick Check:

   Valid function expression runs without error [OK]

Hint: Semicolons after return are optional in JavaScript [OK]

Common Mistakes:

• Thinking function expressions must be named
• Believing semicolon is mandatory after return
• Assuming const cannot hold functions

5. You want to create a function expression that doubles a number and then immediately call it with 4. Which code does this correctly?

hard

A. const double = function(n) { return n * 2; }(4); console.log(double);

B. function(n) { return n * 2; }(4);

C. const double = (n) => n * 2; double(4);

D. const double = function(n) { return n * 2; }; double(4);

Solution

1. Step 1: Understand immediate function call with expression

   To call a function expression immediately, you add parentheses after the function definition.

2. Step 2: Analyze options

   const double = function(n) { return n * 2; }(4); console.log(double); defines a function expression and immediately calls it with (4), assigning the result to double. Then it logs the result. This matches the requirement.

3. Final Answer:

   const double = function(n) { return n * 2; }(4); console.log(double); -> Option A

4. Quick Check:

   Function expression called immediately with (4) [OK]

Hint: Add (args) right after function expression to call immediately [OK]

Common Mistakes:

• Not calling the function immediately
• Assigning function instead of result
• Using arrow function without immediate call