Why Function declaration in Javascript? - Purpose & Use Cases

The Big Idea

What if you could write a set of instructions once and use it anywhere without repeating yourself?

The Scenario

Imagine you need to repeat the same set of instructions multiple times in your code, like calculating the area of different rectangles by writing the formula again and again.

The Problem

Writing the same code repeatedly is slow and boring. It's easy to make mistakes, and if you want to change the formula, you have to find and fix every single place manually.

The Solution

Function declaration lets you write the instructions once, give it a name, and then use that name whenever you need those instructions. This saves time, reduces errors, and makes your code cleaner.

Before vs After

✗ Before

let area1 = width1 * height1;
let area2 = width2 * height2;
// repeated calculation everywhere

✓ After

function calculateArea(width, height) {
  return width * height;
}
let area1 = calculateArea(width1, height1);
let area2 = calculateArea(width2, height2);

What It Enables

It enables you to organize your code into reusable blocks that are easy to manage and update.

Real Life Example

Think of a coffee machine: you press a button (call a function) to make coffee instead of manually mixing ingredients every time.

Key Takeaways

Functions let you reuse code easily.

They reduce mistakes by centralizing instructions.

They make your code cleaner and easier to read.

Practice

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

easy

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

B. func greet() { console.log('Hello'); }

C. def greet() { console.log('Hello'); }

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

Solution

1. Step 1: Recognize JavaScript function syntax

   JavaScript functions are declared using the keyword function followed by the function name and parentheses.

2. Step 2: Check each option's syntax

   function greet() { console.log('Hello'); } uses correct syntax: function greet() { ... }. Options A, B, and D use incorrect keywords or punctuation.

3. Final Answer:

   function greet() { console.log('Hello'); } -> Option A

4. Quick Check:

   JavaScript function declaration = function keyword + name + parentheses [OK]

Hint: Look for 'function' keyword followed by name and parentheses [OK]

Common Mistakes:

• Using 'func' or 'def' instead of 'function'
• Adding colon after 'function'
• Missing parentheses after function name

2. Which of the following is a syntax error when declaring a function in JavaScript?

easy

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

B. function multiply(a, b) { return a * b; }

C. function divide(a, b) return a / b;

D. function subtract(a, b) { return a - b; }

Solution

1. Step 1: Identify function body syntax

   In JavaScript, the function body must be enclosed in curly braces { }.

2. Step 2: Check each option for braces

   function divide(a, b) return a / b; lacks curly braces around the return statement, causing a syntax error. Others have correct braces.

3. Final Answer:

   function divide(a, b) return a / b; -> Option C

4. Quick Check:

   Function body must be inside braces { } [OK]

Hint: Always use curly braces { } around function body [OK]

Common Mistakes:

• Omitting curly braces for function body
• Missing parentheses after function name
• Using incorrect keywords

3. What will be the output of the following code?

function sayHi(name) {
  return 'Hi, ' + name + '!';
}
console.log(sayHi('Anna'));

medium

A. undefined

B. 'Hi, Anna!'

C. sayHi Anna!

D. Hi, Anna!

Solution

1. Step 1: Understand function return and console.log

   The function returns a string combining 'Hi, ', the name, and '!'. The console.log prints this returned string.

2. Step 2: Evaluate the function call sayHi('Anna')

   It returns the string 'Hi, Anna!'. console.log prints it without quotes.

3. Final Answer:

   Hi, Anna! -> Option D

4. Quick Check:

   Function returns string, console.log prints string without quotes [OK]

Hint: console.log prints string without quotes [OK]

Common Mistakes:

• Confusing returned string with printed output including quotes
• Expecting function name to print
• Ignoring return statement

4. Find the error in this function declaration:

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

medium

A. Missing curly braces around function body

B. Missing parentheses after function name

C. Missing semicolon after console.log

D. Function name is invalid

Solution

1. Step 1: Check function declaration syntax

   Functions must have parentheses after the name, even if no parameters are used.

2. Step 2: Identify missing parentheses

   The code misses parentheses after greet, causing a syntax error.

3. Final Answer:

   Missing parentheses after function name -> Option B

4. Quick Check:

   Function name must be followed by () [OK]

Hint: Always put () after function name, even if empty [OK]

Common Mistakes:

• Omitting parentheses after function name
• Thinking semicolon is required after console.log
• Confusing curly braces placement

5. You want to create a function calculateArea that takes width and height and returns the area. Which is the best correct declaration?

hard

A. function calculateArea(width, height) { return width * height; }

B. function calculateArea(width, height) { width * height; }

C. function calculateArea(width, height) { return width + height; }

D. function calculateArea(width, height) { return width / height; }

Solution

1. Step 1: Understand the area formula

   Area of a rectangle is width multiplied by height.

2. Step 2: Check each function's return value

   function calculateArea(width, height) { return width * height; } returns width * height, which is correct. function calculateArea(width, height) { width * height; } lacks return statement, so returns undefined. Options C and D return wrong calculations.

3. Final Answer:

   function calculateArea(width, height) { return width * height; } -> Option A

4. Quick Check:

   Return width * height for area calculation [OK]

Hint: Return product of width and height for area [OK]

Common Mistakes:

• Forgetting return keyword
• Returning sum or division instead of product
• Not using parameters correctly