JavaScript Functions: Declaration and Parameters

Functions in JavaScript

• Functions are fundamental to JavaScript, enabling the creation of reusable code blocks.
• They promote organization, efficiency, and maintainability in JavaScript programs.
• A function is a block of code that executes when called.
• It can have a name and accept parameters for processing input.

Function Declaration

• Functions are declared using the function keyword.
• Syntax: function functionName(parameters) { // Function code here }
• function keyword declares the function in JavaScript.
• functionName is the name of the function and follows the same naming rules as variables.
• parameters are optional, they are enclosed in parentheses, and represent values the function expects.
• Function names are identifiers and are used to refer to the function.
• Function declarations are hoisted, allowing them to be called before their definition in the code.

Function Parameters

• Parameters are placeholders defined within a function's parentheses that accept input values.
• They act as local variables within function.
• Syntax: function functionName(parameter1, parameter2, ...) { // Function code using the parameters }
• parameter1, parameter2, etc., are placeholders for values expected when the function is called.
• Valid JavaScript identifiers should be used as parameter names.

Function Arguments

• Arguments are the actual values passed to a function when it's invoked.
• Arguments should match the number and order of the parameters defined in the function declaration.
• Syntax: functionName(argument1, argument2, ...);
• argument1, argument2, etc., are the real values passed when calling the function.

Value-Returning Functions

• Functions can return values to the calling code using the return statement.
• The return statement passes data or information from the function, serving as a result of the function's operation.
• When a return statement is encountered, the function stops execution immediately.
• The return statement syntax: return value;

Variable Scope

• Variable scope refers to the visibility and accessibility of variables within different parts of code.
• JavaScript has two primary scopes: global and local (function).

Global Scope

• Variables declared outside any function are in the global scope and can be accessed and modified from anywhere in your code, including inside functions.

Local (Function) Scope

• Variables declared inside a function are in the local scope.
• These variables can only be accessed and modified within the function they are declared.
• Each function creates its own scope, preventing naming conflicts between variables in different functions.

Block Scope (ES6 and beyond)

• Variables declared with let and const possess block scope, confined to the block of code (e.g., loops, conditionals) where they are defined.
• Such variables are not accessible outside their defining block.
• Function parameters exist within the local scope of the function, acting as local variables accessible only within that function.

Arrow Functions

• Arrow functions, introduced in ECMAScript 6 (ES6) provide a concise syntax, and automatically capture the value of this from the enclosing context.
• Syntax: (parameter1, parameter2, ..., parameterN) => expression
• If only one parameter is provided, the parentheses can be omitted.
• The arrow (=>) signifies the definition of an arrow function.
• expression is a single expression or statement that the function executes, automatically returning the result.
• Examples:
  • No parameters: const sayHello = () => "Hello, world!";
  • One parameter: const doubleNumber = (number) => { return number * 2; }
  • Multiple parameters: const add = (a, b) => a + b;

Callback Functions

• Callback functions are functions passed as arguments to other functions, to be executed upon specific events or condition being met.
• Passing a Function as an Argument is done in JavaScript, where a function being passed is known as a "callback."
• Execution at a Later Time happens in Receiving function which executes the callback function at specific event.
• Examples:
  • Anonymous Callback Functions: setTimeout(function() { console.log("This is a callback executed after 2 seconds."); }, 2000);
  • Arrow Functions as a Callback: setTimeout(() => { console.log("This is an arrow function callback executed after 2 seconds."); }, 2000);