Function execution flow in Javascript

Introduction

Functions help organize code into small tasks. Understanding how they run step-by-step makes your programs work correctly.

When you want to run a set of instructions multiple times.

When you need to break a big problem into smaller parts.

When you want to reuse code without rewriting it.

When you want to control the order in which your code runs.

When you want to get a result back from a set of instructions.

Syntax

Javascript

function functionName(parameters) {
  // code to run
  return value; // optional
}

// calling the function
functionName(arguments);

The function code runs only when you call it.

Parameters are inputs; arguments are the actual values you give.

Examples

This function prints a greeting when called.

Javascript

function greet() {
  console.log('Hello!');
}
greet();

This function adds two numbers and returns the result.

Javascript

function add(a, b) {
  return a + b;
}
let sum = add(3, 4);
console.log(sum);

This function checks if a number is positive and returns a message.

Javascript

function checkNumber(num) {
  if (num > 0) {
    return 'Positive';
  } else {
    return 'Not positive';
  }
}
console.log(checkNumber(5));

Sample Program

This program shows the order in which the function runs and how the program continues after the function call.

Javascript

function multiply(x, y) {
  console.log('Start multiply');
  let result = x * y;
  console.log('Result is', result);
  return result;
}

console.log('Before calling multiply');
multiply(4, 5);
console.log('After calling multiply');

Important Notes

Code inside a function runs only when you call the function.

After the function finishes, the program continues from where it left off.

Return sends a value back and stops the function immediately.

Summary

Functions run their code only when called.

The program pauses at the function call, runs the function, then continues.

Return values let functions give back results.

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