Defining and Calling Functions0%
Function Parameters and Return Values

Defining and Calling Functions

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

Defining and Calling Functions in JavaScript

Functions are the primary building blocks of software. A function is a reusable, modular block of code designed to perform a specific task. By packaging code into functions, you avoid repeating logic (DRY: Don't Repeat Yourself) and create clean, testable programs.

1. Function Declarations vs. Function Expressions

In JavaScript, there are two traditional ways to define functions:

A. Function Declaration

Uses the function keyword followed by the function name:

JavaScript
// 1. Defining the function
function greetStudent(name) {
console.log(`Hello, ${name}! Welcome to MSK Institute.`);
}
 
// 2. Calling (invoking) the function
greetStudent("Sumit");

B. Function Expression

Assigns an anonymous (or named) function to a variable:

JavaScript
const calculateArea = function(width, height) {
return width * height;
};
 
console.log(calculateArea(5, 10)); // 50

2. Hoisting Differences (Crucial Interview Concept!)

Why does the choice between Declaration and Expression matter? Hoisting!

Function Declarations are Hoisted Completely:

You can call a function declaration before the line where it is written:

JavaScript
sayHello(); // "Hello!" (Works perfectly!)
 
function sayHello() {
console.log("Hello!");
}

Function Expressions are NOT Hoisted:

Because the function is assigned to a const or let variable, it resides in the Temporal Dead Zone until initialized:

JavaScript
sayGoodbye(); // ReferenceError: Cannot access 'sayGoodbye' before initialization!
 
const sayGoodbye = function() {
console.log("Goodbye!");
};

3. Function Execution & The Call Stack

When a function is called in JavaScript:

  1. 1
    A new Execution Context is created.
  2. 2
    The function is pushed onto the top of the Call Stack.
  3. 3
    Its code executes.
  4. 4
    When it hits return or ends, it is popped off the Call Stack, and control returns to the caller.
JavaScript
function first() {
console.log("1");
second();
console.log("3");
}
 
function second() {
console.log("2");
}
 
first();
// Output order:
// 1
// 2
// 3

4. Functions as First-Class Citizens

In JavaScript, functions are First-Class Citizens, which means functions are treated like any other value:

  • They can be assigned to variables.
  • They can be stored in arrays and objects.
  • They can be passed as arguments to other functions (Callbacks).
  • They can be returned from other functions (Higher-Order Functions).
JavaScript
function executeTwice(action) {
action();
action();
}
 
function ringBell() {
console.log("Ding dong! 🔔");
}
 
executeTwice(ringBell); // Rings twice!
Interactive Quiz

Practice Quiz

Question 1
What is the main benefit of organizing code into functions?
Question 2
What happens if you call a Function Declaration before the line where it is defined in code?
Question 3
What happens if you call a Function Expression assigned to a const before its declaration?
Question 4
What does it mean that functions are "First-Class Citizens" in JavaScript?
Question 5
What is the syntax used to invoke (call) a function named init?
Next Lesson

Function Parameters and Return Values

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Template Literals (Basics)Function Parameters and Return Values

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext