Functions module<\/a>.<\/p>\nSyntax:<\/strong><\/p>\nfunction functionName(parameters) {<\/em>
\n\/\/ code block<\/em>
\n}<\/em><\/p>\n Example:<\/strong><\/p>\nfunction add(a, b) {<\/em>
\nreturn a + b;<\/em>
\n}<\/em><\/p>\nconsole.log(add(2, 3)); \/\/ Output: 5<\/em><\/p>\nKey Features:<\/strong><\/p>\n\n- Named function (like add above).<\/li>\n
- Hoisted: Can be called before it appears in the code.<\/li>\n
- Good for defining main functions used throughout the program.<\/li>\n<\/ul>\n
Function Expression<\/h3>\n
A Function Expression is a function assigned to a variable, which may be anonymous or named. It can be anonymous or named. For broader context, see the Introduction to JavaScript guide.<\/p>\n
Syntax:<\/strong><\/p>\nconst functionName = function(parameters) {<\/em>
\n\/\/ code block<\/em>
\n};<\/em><\/p>\nExample:<\/strong><\/p>\nconst multiply = function(a, b) {<\/em>
\nreturn a * b;<\/em>
\n};<\/em><\/p>\nconsole.log(multiply(4, 5)); \/\/ Output: 20<\/em><\/p>\nKey Features:<\/strong><\/p>\n\n- Can be anonymous (no name) or named (rarely).<\/li>\n
- Not hoisted: You must define it before you call it.<\/li>\n
- Useful for passing functions as arguments or storing them in variables.<\/li>\n<\/ul>\n
Key Differences Between Declaration and Expression:<\/strong><\/p>\n\n\n\n| Feature<\/th>\n | Function Declaration<\/th>\n | Function Expression<\/th>\n<\/tr>\n<\/thead>\n |
\n\n| Name<\/td>\n | Always named<\/td>\n | Can be anonymous or named<\/td>\n<\/tr>\n |
\n| Hoisting<\/td>\n | Yes<\/td>\n | No<\/td>\n<\/tr>\n |
\n| When defined<\/td>\n | During the code parsing phase<\/td>\n | During the execution phase<\/td>\n<\/tr>\n |
\n| Common Use<\/td>\n | Defining main reusable blocks<\/td>\n | Assigning to variables, callbacks<\/td>\n<\/tr>\n |
\n| Example usage<\/td>\n | function add(a, b) {}<\/code><\/td>\nconst add = function(a, b) {}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\nHoisting Example:<\/strong><\/p>\nFunction Declaration (Works before defining):<\/strong><\/p>\nsayHello(); \/\/ Output: Hello<\/em><\/p>\nfunction sayHello() {<\/em>
\nconsole.log(‘Hello’);<\/em>
\n}<\/em><\/p>\nFunction Expression (Fails if called early):<\/strong><\/p>\nsayHi(); \/\/ Error: Cannot access ‘sayHi’ before initialization<\/em><\/p>\nconst sayHi = function() {<\/em>
\nconsole.log(‘Hi’);<\/em>
\n};<\/em><\/p>\nBest Practices:<\/strong><\/p>\n\n- Use function declarations for functions you call throughout the code.<\/li>\n
- Use function expressions for callbacks, dynamic functions, or inside event listeners.<\/li>\n
- In modern JavaScript, prefer arrow functions (()=>{}) for short expressions.<\/li>\n<\/ul>\n
Parameters, Arguments, Return values<\/h2>\n1. Parameters<\/h3>\nParameters are variables listed inside the parentheses of a function definition.
\nThey act as placeholders for the values (arguments) that the function will receive when it is called.<\/p>\n Syntax:<\/strong><\/p>\nfunction greet(name) {<\/em>
\nconsole.log(`Hello, ${name}`);<\/em>
\n}<\/em><\/p>\n\n- Here, name is the parameter.<\/li>\n
- It is a local variable inside the function.<\/li>\n<\/ul>\n
2. Arguments<\/h3>\nArguments are the actual values you pass into a function when you call it.
\nThey are assigned to the function\u2019s parameters.<\/p>\n Syntax:<\/strong><\/p>\ngreet(“Alice”);<\/em><\/p>\n\n- “Alice” is the argument passed to the greet function.<\/li>\n
- The function uses “Alice” wherever name is referenced.<\/li>\n<\/ul>\n
Important Points:<\/strong><\/p>\n\n- The number of parameters and arguments should match, but JavaScript is flexible:<\/li>\n
- Extra arguments are ignored.<\/li>\n
- Missing arguments become undefined.<\/li>\n<\/ul>\n
function displayInfo(name, age) {<\/em>
\nconsole.log(`${name} is ${age} years old.`);<\/em>
\n}<\/em><\/p>\ndisplayInfo(“Bob”); <\/em>
\n\/\/ Output: Bob is undefined years old.<\/em><\/p>\n3. Return Values<\/h3>\n\n- Return values are the results that a function sends back after it finishes running.<\/li>\n
- You use the return keyword to send data out of the function.<\/li>\n<\/ul>\n
Syntax:<\/strong><\/p>\nfunction add(a, b) {<\/em>
\nreturn a + b;<\/em>
\n}<\/em><\/p>\nconst result = add(2, 3);<\/em>
\nconsole.log(result); \/\/ Output: 5<\/em><\/p>\n\n- return a + b; sends back the sum.<\/li>\n
- The result variable now holds the value 5.<\/li>\n<\/ul>\n
Important Rules About return:<\/strong><\/p>\n\n- A function stops executing immediately after return.<\/li>\n
- If no return is specified, the function returns undefined by default.<\/li>\n
- You can return any type: numbers, strings, objects, arrays, even another function.<\/li>\n<\/ul>\n
function noReturn() {<\/em>
\nconsole.log(“This function doesn’t return anything explicitly.”);<\/em>
\n}<\/em><\/p>\nconsole.log(noReturn()); <\/em>
\n\/\/ Output: This function doesn’t return anything explicitly.<\/em>
\n\/\/ undefined<\/em><\/p>\nQuick Summary Table:<\/strong><\/p>\n\n\n\n| Term<\/th>\n | Meaning<\/th>\n | Example<\/th>\n<\/tr>\n<\/thead>\n | \n\n| Parameter<\/td>\n | Placeholder variable in function definition<\/td>\n | function greet(name)<\/code><\/td>\n<\/tr>\n\n| Argument<\/td>\n | Actual value passed into the function<\/td>\n | greet(\"Alice\")<\/code><\/td>\n<\/tr>\n\n| Return Value<\/td>\n | The output a function sends back<\/td>\n | return a + b<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\nBest Practices:<\/strong><\/p>\n\n- Always name parameters clearly for readability.<\/li>\n
- Ensure correct number of arguments are passed.<\/li>\n
- Use return to make functions more reusable and predictable.<\/li>\n<\/ul>\n
Arrow functions<\/h2>\nJavaScript Arrow Functions (ES6+)<\/h3>\nArrow functions are a concise syntax for defining functions, introduced in ES6 (ECMAScript 2015). They reduce boilerplate, provide lexical this (they do not bind their own this), and are broadly supported by modern browsers and Node.js.<\/p>\n 1. Basic Syntax of Arrow Functions<\/strong><\/p>\nTraditional Function:<\/strong><\/p>\nfunction add(a, b) {<\/em>
\nreturn a + b;<\/em>
\n}<\/em><\/p>\nArrow Function (equivalent):<\/strong><\/p>\nconst add = (a, b) => {<\/em>
\nreturn a + b;<\/em>
\n};<\/em><\/p>\n\n- function keyword is removed.<\/li>\n
- Arrow (=>) is used instead.<\/li>\n
- The function is usually assigned to a variable.<\/li>\n<\/ul>\n
2. Shortened Syntax for Simple Returns<\/strong><\/p>\nIf the function has only one expression, you can omit {} and return completely.<\/p>\n const add = (a, b) => a + b;<\/em><\/p>\n\n- Clean and automatic return of the value.<\/li>\n<\/ul>\n
3. Arrow Function Variations<\/strong><\/p>\n\n\n\n| Case<\/th>\n | Syntax Example<\/th>\n | Notes<\/th>\n<\/tr>\n<\/thead>\n | \n\n| Multiple Parameters<\/td>\n | (a, b) => a + b<\/code><\/td>\n| Use parentheses for two or more params<\/td>\n<\/tr>\n | \n| Single Parameter<\/td>\n | name => console.log(name)<\/code><\/td>\n| Parentheses optional if one param<\/td>\n<\/tr>\n | \n| No Parameters<\/td>\n | () => console.log('Hello')<\/code><\/td>\n| Always need parentheses<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n Examples:<\/strong><\/p>\nOne parameter:<\/strong><\/p>\nconst square = x => x * x;<\/em>
\nconsole.log(square(5)); \/\/ Output: 25<\/em><\/p>\nNo parameter:<\/strong><\/p>\nconst greet = () => console.log(“Hello!”);<\/em>
\ngreet(); \/\/ Output: Hello!<\/em><\/p>\nMore complex body (need {} and return):<\/strong><\/p>\nconst sum = (a, b) => {<\/em>
\nconst result = a + b;<\/em>
\nreturn result;<\/em>
\n};<\/em>
\nconsole.log(sum(2, 3)); \/\/ Output: 5<\/em><\/p>\n4. Special Behavior of this in Arrow Functions<\/strong><\/p>\n\n- Arrow functions do NOT have their own this context.<\/li>\n
- They inherit this from the surrounding (parent) scope.<\/li>\n<\/ul>\n
Example:<\/strong><\/p>\nfunction Person() {<\/em>
\nthis.name = “Alice”;<\/em><\/p>\nsetTimeout(() => {<\/em>
\nconsole.log(`Hello, ${this.name}`);<\/em>
\n}, 1000);<\/em>
\n}<\/em><\/p>\nconst p = new Person();<\/em>
\n\/\/ Output after 1 second: Hello, Alice<\/em><\/p>\n\n- If you used a regular function inside setTimeout, this.name would be undefined.<\/li>\n
- Arrow function keeps the this of Person.<\/li>\n<\/ul>\n
Arrow Function vs Regular Function (Key Differences)<\/strong><\/p>\n\n\n\n| Feature<\/th>\n | Regular Function<\/th>\n | Arrow Function<\/th>\n<\/tr>\n<\/thead>\n | \n\n| Syntax<\/td>\n | Longer (function keyword needed)<\/td>\n | Shorter and cleaner (=>)<\/td>\n<\/tr>\n | \n| this Behavior<\/td>\n | Dynamic based on how it’s called<\/td>\n | Lexical (inherits from parent)<\/td>\n<\/tr>\n | \n| Suitable for<\/td>\n | Constructors, methods, complex logic<\/td>\n | Short functions, callbacks<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n When to Use Arrow Functions<\/strong><\/p>\n\n- When you want shorter syntax for simple operations.<\/li>\n
- When you need to preserve the surrounding this.<\/li>\n
- Ideal for array methods like map(), filter(), reduce().<\/li>\n
- Good for event handlers, callbacks, promises, and simple utility functions.<\/li>\n<\/ul>\n
Quick Summary:<\/strong><\/p>\n | | | | | | | | | |