Mastering Paneer Tikka Masala with Functions

What is a Function?

Technically speaking a function is a block of reusable code that performs a specific task. It takes input (parameters), processes it, and returns an output which helps in making the code modular, maintainable, and reusable.

In layman terms suppose you have you know a unique way of making Paneer Tikka Masala, now instead of explaining it to your friend circle step by step, every time someone asks for the recipe, you come up with a brilliant idea of writing a blog and sharing it(the blog) with your friends, so that you do not spend time repeating yourself and focus on making new recipes.

What is Modular, Maintainable and Reusable?

Modular programming means breaking a large program into smaller, independent, and reusable pieces (modules). Each module (or function) performs a specific task and can be used whenever needed.

In layman terms your paneer tikka recipe could be a part of a bigger recipe, and there could be other recipes similar to yours, and both the recipes are independent of each other. Suppose you find your recipe could be made spicier, so you improvise in your blog, and hence make it easily maintainable and you don’t need to specifically explain it to every friend of yours again.

Writing a function in JS

The simplest way to write a function in JavaScript is by using the function keyword, followed by the function name, parentheses for parameters (if any), and a block of code enclosed in curly braces {}. This structure allows us to define reusable code that can be executed whenever the function is called.

function paneerTikka(peopleCount, spiceLevel){
//your magic to get things done
}

//calling the paneerTikka function
const yummy = paneerTikka(3, 10)

In the above example:

function – Declares a function.
paneerTikka – Function name (descriptive of its purpose).
(peopleCount, spiceLevel) – Parameters (inputs to the function).
{ ... } – Function body where logic will be written.

Function Declaration vs Function Expression

Both function declarations and function expressions are used to define functions in JavaScript, but they have key differences in terms of hoisting (using it even before it’s declared), naming, and flexibility.

Function Declaration

A function declaration is a way to define a reusable block of code that performs a specific task. It starts with the function keyword, followed by a name, parentheses (), and a block of code {} that contains the function's logic.

Key Features of Function Declarations:

1. Hoisted – You can call the function before its definition.

2. Reusable – You can use the function multiple times.

3. Named Function – It must have a name.

Let us break function declaration in terms of our Paneer Tikka:

Imagine I decided to put my Paneer Tikka recipe as a recipe book,

1. The recipe is available for everyone to use, even before opening the book which makes the recipe hoisted

2. Anyone can use the recipe whenever they want, without worrying about its availability.

3. The recipe book comes with a label of what it contains, it becomes a named function

paneerTikka(6, 3);  // this works because function declarations are hoisted.

function paneerTikka(headCount, spiceLevel){
    return `We are making Paneer Tikka with a spice level of ${spiceLevel} for ${headCount} people.`;
}

console.log(paneerTikka(7, 10));

Function Expression

A function expression in JavaScript is a way to define a function and store it in a variable. Unlike function declarations, function expressions are not hoisted with their full definition. Instead, only the variable name is hoisted, but the function assignment remains in place. This means you cannot call a function expression before defining it.

Key Features of Function Expression:

1. Not Hoisted – You cannot call the function before its definition.

2. Anonymous- Can Be Anonymous or Named

3. Stored in a Variable – It must be stored in a variable.

Let us break function declaration in terms of our Paneer Tikka:

Imagine you have a box where you keep multiple sticky notes with different recipes.

1. You cannot use a recipe before opening the box and taking out the sticky note just like function expressions, which cannot be called before their definition.

2. Some sticky notes don’t have a title, only the recipe steps. This makes them anonymous functions when stored in a variable.

3. he sticky note itself is inside the box (a variable). The function expression must be assigned to a variable before using it.

// Box (Variable) storing the Sticky Note (Function Expression)
const paneerTikka = function(headCount, spiceLevel) {
    return `We are making Paneer Tikka with a spice level of ${spiceLevel} for ${headCount} people.`;
};

console.log(paneerTikka(5, 8)); // will Works

console.log(recipeBox(6, 3)); //  ERROR: Cannot access 'recipeBox' before initialization.

const recipeBox = function(headCount, spiceLevel) {
    return `Paneer Tikka for ${headCount} people with spice level ${spiceLevel}`;
};

Summary - Function Expression vs Function Declaration (technical)

Summary - Function Expression vs Function Declaration (Paneer Tikka style)

Conclusion

Function is a great way of avoiding repetitive tasks and easy maintenance. You can use the recipe before you open the book because it's already there. Function expressions are like writing a recipe on a piece of paper. Until you actually write it down, you can't use it. If the paneer tikka is a dish, you always cook alongside others, you could make the best use of it by function declaration but if it is experimental and for special occasions only the Function Expression could be a better approach.