Function expression in Javascript - Mini Project: Build & Apply

Function Expression

📖 Scenario: You are creating a simple calculator that can add two numbers. Instead of using a normal function declaration, you will use a function expression to keep your code neat and flexible.

🎯 Goal: Build a function expression called add that takes two numbers and returns their sum. Then use it to add two numbers and show the result.

📋 What You'll Learn

Create a function expression named add

The function should take two parameters: a and b

The function should return the sum of a and b

Call the add function with the numbers 5 and 7

Print the result of the function call

💡 Why This Matters

🌍 Real World

Function expressions are used in JavaScript to create flexible and reusable blocks of code, often passed as arguments or stored in variables.

💼 Career

Understanding function expressions is essential for writing modern JavaScript code, useful in web development, backend programming, and working with frameworks.

1

Create a function expression

Create a function expression called add that takes two parameters a and b and returns their sum.

Javascript

// Create a function expression named add that takes a and b
// Your code here

Hint

Remember, a function expression is stored in a variable. Use const add = function(a, b) { return a + b; };

2

Call the function expression

Create a variable called result and assign it the value of calling the add function with arguments 5 and 7.

Javascript

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

// Call add with 5 and 7 and store in result
// Your code here

Hint

Call the function like this: add(5, 7) and save it in result.

3

Print the result

Use console.log to print the value of the variable result.

Javascript

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

const result = add(5, 7);

// Print the result
// Your code here

Hint

Use console.log(result); to show the output in the console.

4

Run and check output

Run the program and check that the output is 12.

Javascript

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

const result = add(5, 7);

console.log(result);  // Check output

Hint

The output should be the sum of 5 and 7, which is 12.

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