#5 Javascript Functions | Javascript Hindi Course For Beginners ( 2023 )

A function in programming is a reusable piece of code that performs a specific task when called or invoked. Think of it as a mini-program within a program that can be executed as many times as needed, without having to write the code over and over again. Functions take inputs, perform actions, and return a result. They help to make your code more organised, readable, and maintainable.
 
Why we should use functions ?
  1. Reusability: Functions can be called multiple times in a program, reducing the need to write similar code multiple times.
  1. Modularity: Functions provide a way to divide a large and complex program into smaller, more manageable parts, making the code easier to understand, debug, and maintain.
  1. Abstraction: Functions can be used to hide the implementation details of a task from the rest of the program, allowing for a higher level of abstraction and making it easier to change the implementation without affecting the rest of the program.
  1. Readability: Functions provide a clear and concise way to describe what a section of code does, making the code more readable and easier to understand.
  1. Debugging: Functions can be individually tested and debugged, making it easier to identify and fix problems in your code.
  1. Improved Performance: Functions can be optimised for speed and efficiency, leading to improved performance of the overall program.
  1. Code Reuse: Functions can be easily reused across different projects and programs, reducing the amount of time and effort needed to write new code.
 
The syntax of a function in JavaScript
// syntax example
function functionName(parameter1, parameter2, ...) {
  // function body
  // statements to be executed
  return result;
}
  • function: The function keyword is used to declare a function.
  • functionName: This is the name of the function, which can be any valid JavaScript identifier.
  • parameter1, parameter2, ...: These are optional parameters that can be passed to the function. When the function is called, the values passed as arguments are assigned to these parameters.
  • {}: The curly braces define the body of the function, which contains the statements to be executed when the function is called.
  • return: The return statement is used to return a value from the function. The function execution stops when a return statement is executed.
Here's an example of a simple function in JavaScript that takes two parameters and returns their sum:
// Function Example 
function add(a, b) {
  return a + b;
}
 
Default Parameters
// Default parameters example
// we can pass default values to parameter, if no values in passed in parameters

function calculateArea(width, height = 1)
const area = width * height;
return area;
}
Variable Scrope
// example 1
function downloadVideo () {
const videoLink = "xyz.mp4";
}
downloadVideo()
console.log(videoLink); // this will return undefined 
// as variables of function is block scope than can be access with in function

// example 2

const videoLink = "xyz.mp4";

function downloadVideo () {
console.log(videoLink);
}
downloadVideo()

// inside function we can access global variable
Anonymous function
const login = function(username,password){
console.log(username,"Logged in")
}

// anonymous function  -> no name
// anonymous function can be used as parameters for other functions
Callback function 
// In callback function, function is used as parameter of other function



function printMessage(message, callback) {
  console.log(message);
  callback();
}

function sayGoodbye() {
  console.log("Goodbye!");
}

printMessage("Hello", sayGoodbye);

// using anonymous function 
printMessage("Hello",() => console.log("Hello World "))
IIFE ( Immediately invoked function expression)
// function which is called automatically 
// that function are called IIFE Fuction

// anonymous IIFE example

(function(){
console.log("Say Good Bye");
})()

// Named IIFE exmaple
(function sayGoodBye(){
console.log("Say Good Bye");
})()
Arrow Function → ES6 new function Syntax 
// Arrow Function are new syntax used in javascript for creating function

const sayMyName = (name) => {
console.log("You are", name)
}

const calculateArea = (height,width) => { 
return height * width;
 }
const calculateArea = (height,width) => height * width;
 
Question:
// Question 1
// Print 15 , 16 , 17 tables using function
// Function name should be generateTable()

// Question 2 
// Create a function that calculate area of circle
// Function name should be calcAreaOfCicle()
// create another function calcSquare()
// Pass calcAreaOfCicle function as callback of calcSqaure
// like - calcSqaure(calcAreaOfCircle)
// store value of calculated value in result
//  like - result = calcSqaure(calcAreaOfCircle)
// then print result;