Function execution flow in Javascript - Mini Project: Build & Apply

Function Execution Flow

📖 Scenario: Imagine you are building a simple calculator that adds two numbers. You want to understand how functions work step-by-step in JavaScript.

🎯 Goal: You will create a function that adds two numbers, call it with specific values, and print the result. This will help you see how the function runs from start to finish.

📋 What You'll Learn

Create a function named addNumbers that takes two parameters: a and b

Inside the function, return the sum of a and b

Create two variables named num1 and num2 with values 5 and 7 respectively

Call the function addNumbers with num1 and num2 as arguments and store the result in a variable named result

Print the value of result to the console

💡 Why This Matters

🌍 Real World

Functions help organize code into reusable blocks. This is useful in calculators, games, websites, and many programs.

💼 Career

Understanding function execution flow is essential for any programming job. It helps you write clear, reusable, and testable code.

1

Create the function addNumbers

Write a function named addNumbers that takes two parameters called a and b. Inside the function, return the sum of a and b.

Javascript

// Your code here

Hint

Use the function keyword to create a function. Return the sum using return a + b;.

2

Create variables num1 and num2

Create two variables named num1 and num2 and set them to 5 and 7 respectively.

Javascript

function addNumbers(a, b) {
    return a + b;
}

// Your code here

Hint

Use const to create variables and assign the numbers 5 and 7.

3

Call addNumbers and store the result

Call the function addNumbers with num1 and num2 as arguments. Store the returned value in a variable named result.

Javascript

function addNumbers(a, b) {
    return a + b;
}

const num1 = 5;
const num2 = 7;

// Your code here

Hint

Call the function by writing addNumbers(num1, num2) and save it in result.

4

Print the result

Print the value of the variable result to the console using console.log.

Javascript

function addNumbers(a, b) {
    return a + b;
}

const num1 = 5;
const num2 = 7;

const result = addNumbers(num1, num2);

// Your code here

Hint

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

Practice

1. What happens when a JavaScript function is defined but not called?

easy

A. The function runs twice.

B. The function code does not run.

C. The program crashes.

D. The function runs automatically once defined.

Solution

1. Step 1: Understand function definition

   Defining a function only tells the program what the function does but does not run it.

2. Step 2: Recognize function call requirement

   The function code runs only when the function is called explicitly.

3. Final Answer:

   The function code does not run. -> Option B

4. Quick Check:

   Function runs only when called [OK]

Hint: Functions run only when called, not when defined [OK]

Common Mistakes:

• Thinking function runs on definition
• Confusing declaration with execution
• Assuming automatic call

2. Which of the following is the correct way to call a function named greet in JavaScript?

easy

A. greet[];

B. call greet;

C. function greet();

D. greet();

Solution

1. Step 1: Identify function call syntax

   In JavaScript, calling a function requires its name followed by parentheses.

2. Step 2: Check each option

   greet(); uses greet(); which is correct. Others use invalid syntax.

3. Final Answer:

   greet(); -> Option D

4. Quick Check:

   Function call = name + () [OK]

Hint: Call functions with parentheses after name [OK]

Common Mistakes:

• Omitting parentheses
• Using wrong keywords
• Using brackets instead of parentheses

3. What is the output of the following code?

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

console.log(add(3, 4));

medium

A. 7

B. 34

C. undefined

D. NaN

Solution

1. Step 1: Understand function parameters and return

   The function add takes two numbers and returns their sum.

2. Step 2: Calculate the return value for add(3, 4)

   3 + 4 equals 7, so the function returns 7.

3. Final Answer:

   7 -> Option A

4. Quick Check:

   3 + 4 = 7 [OK]

Hint: Return adds numbers, not concatenates without strings [OK]

Common Mistakes:

• Treating numbers as strings
• Missing return statement
• Confusing output with parameters

4. Find the error in this code snippet:

function sayHi() {
  console.log('Hi!');
}
sayHi

medium

A. Missing parentheses to call the function.

B. Function name is incorrect.

C. console.log syntax error.

D. Function cannot be called outside definition.

Solution

1. Step 1: Check how the function is called

   The function sayHi is referenced but not called because parentheses are missing.

2. Step 2: Understand function call syntax

   To run the function, it must be called with parentheses: sayHi();

3. Final Answer:

   Missing parentheses to call the function. -> Option A

4. Quick Check:

   Function call needs () [OK]

Hint: Always use () to call functions [OK]

Common Mistakes:

• Forgetting parentheses
• Confusing function reference with call
• Assuming function runs automatically

5. Consider this code:

function multiply(x, y) {
  return x * y;
}

function calculate() {
  let result = multiply(2, 3);
  return result + 4;
}

console.log(calculate());

What is the output and why?

hard

A. 7, because multiply returns 3 and 3 + 4 = 7.

B. 24, because multiply returns 6 and 6 * 4 = 24.

C. 10, because multiply returns 6 and 6 + 4 = 10.

D. Error, because multiply is not called inside calculate.

Solution

1. Step 1: Trace multiply function call

   Calling multiply(2, 3) returns 2 * 3 = 6.

2. Step 2: Calculate final result in calculate

   The variable result is 6, then result + 4 equals 10.

3. Final Answer:

   10, because multiply returns 6 and 6 + 4 = 10. -> Option C

4. Quick Check:

   2*3=6; 6+4=10 [OK]

Hint: Follow return values step-by-step [OK]

Common Mistakes:

• Multiplying instead of adding final step
• Ignoring return values
• Assuming function not called