JS functions

Author: adityaSrivastava29

functions/functions.js

@@ -0,0 +1,80 @@
+// function statement
+// Function statements are hoisted, meaning they can be called before they are defined in the code.
+// function can be assigned to a variable, passed as an argument, or returned from another function.
+// Function statements are also known as function declarations.
+function a() {
+    console.log("Function Statement or Declaration");
+}
+
+a(); // Calling the function statement
+
+
+//function expression
+// Function expressions are not hoisted, so they must be defined before they are called.  
+
+var b = function() {
+    console.log("Function Expression"); 
+}
+b(); // Calling the function expression
+
+// difference between function statement and function expression is that function statements are hoisted, while function expressions are not.
+// Function expressions can be anonymous or named, while function statements are always named.
+// Function expressions can be assigned to variables, passed as arguments, or returned from other functions.
+// Function statements are defined using the `function` keyword followed by a name, while function expressions can be anonymous or named.
+// Function declaration is a named function that is defined using the `function` keyword.
+
+
+
+
+
+//Anonymous function
+// Anonymous functions are function expressions that do not have a name.
+// They are often used as arguments to other functions or as immediately invoked function expressions (IIFE
+// anonymous function are used as values, such as in callbacks or event handlers.
+
+var c = function() {
+    console.log("Anonymous Function");
+}
+
+setTimeout(c, 2000); // Calling the anonymous function after 1 second
+
+//Named function Expression
+var d = function namedFunction() {
+    console.log("Named Function Expression");
+}
+
+d(); // Calling the named function expression
+ // namedFunction(); // Calling the named function expression by its name will throw an error because it is not hoisted like a function declaration.
+// referemce error: namedFunction is not defined
+
+setTimeout(d, 3000); // Calling the named function expression after 3 seconds
+
+//Differece between arguments and parameters ?
+// Parameters are the variables listed as part of a function's definition.
+// Arguments are the actual values that are passed to the function when it is called.
+// Parameters are used to define the inputs that a function can accept, while arguments are the actual values passed to those parameters when the function is invoked.
+
+
+// First class functions
+
+// In JavaScript, functions are first-class citizens, meaning they can be treated like any other value.
+// They can be assigned to variables, passed as arguments to other functions, returned from functions,  
+// and stored in data structures like arrays and objects.
+// This allows for powerful programming patterns like higher-order functions, callbacks, and function composition.
+// Example of first-class functions
+
+function firstClassFunctionExample() {
+    console.log("This is a first-class function.");
+}
+
+firstClassFunctionExample(); // Calling the first-class function
+
+//Arrow functions
+
+// Arrow functions are a concise way to write function expressions in JavaScript.
+// They use the `=>` syntax and do not have their own `this`, making them particularly useful for callbacks and methods that require the context of the surrounding scope.
+const arrowFunctionExample = () => {
+    console.log("This is an arrow function.");
+};
+
+arrowFunctionExample(); // Calling the arrow function

functions/functions.md

@@ -0,0 +1,136 @@
+# JavaScript Functions: Concepts and Examples
+
+
+
+---
+
+## 1. Function Statement (Function Declaration)
+A function statement is also known as a function declaration. It is hoisted, so you can call it before its definition in the code.
+
+```js
+function a() {
+    console.log("Function Statement or Declaration");
+}
+
+a(); // Calling the function statement
+```
+
+**Key Points:**
+- Hoisted (can be called before definition)
+- Always named
+- Cannot be used as a value directly
+
+---
+
+## 2. Function Expression
+A function expression is created when a function is assigned to a variable. Function expressions are not hoisted, so they must be defined before use.
+
+```js
+var b = function() {
+    console.log("Function Expression");
+}
+b(); // Calling the function expression
+```
+
+**Key Points:**
+- Not hoisted
+- Can be anonymous or named
+- Can be assigned to variables, passed as arguments, or returned from other functions
+
+---
+
+## 3. Anonymous Function
+An anonymous function is a function without a name. It is often used as a value, such as in callbacks or event handlers.
+
+```js
+var c = function() {
+    console.log("Anonymous Function");
+}
+setTimeout(c, 2000); // Calling the anonymous function after 2 seconds
+```
+
+**Key Points:**
+- No name
+- Used as values, callbacks, or arguments
+
+---
+
+## 4. Named Function Expression
+A named function expression is a function expression with a name. The name is only accessible inside the function itself.
+
+```js
+var d = function namedFunction() {
+    console.log("Named Function Expression");
+}
+d(); // Works
+// namedFunction(); // ReferenceError: namedFunction is not defined
+setTimeout(d, 3000); // Calling after 3 seconds
+```
+
+**Key Points:**
+- Name is local to the function body
+- Not hoisted
+
+---
+
+## 5. Difference Between Arguments and Parameters
+- **Parameters** are variables listed in the function definition.
+- **Arguments** are the actual values passed to the function when it is called.
+
+```js
+function sum(a, b) { // a, b are parameters
+    return a + b;
+}
+sum(2, 3); // 2, 3 are arguments
+```
+
+---
+
+## 6. First-Class Functions
+In JavaScript, functions are first-class citizens. This means:
+- They can be assigned to variables
+- Passed as arguments
+- Returned from other functions
+- Stored in data structures
+
+```js
+function firstClassFunctionExample() {
+    console.log("This is a first-class function.");
+}
+firstClassFunctionExample();
+```
+
+**Key Points:**
+- Enables higher-order functions, callbacks, and function composition
+
+---
+
+## 7. Arrow Functions
+Arrow functions are a concise way to write function expressions. They do not have their own `this` and are best for callbacks and methods that use the surrounding context.
+
+```js
+const arrowFunctionExample = () => {
+    console.log("This is an arrow function.");
+};
+arrowFunctionExample();
+```
+
+**Key Points:**
+- Shorter syntax
+- No own `this`, `arguments`, or `super`
+- Cannot be used as constructors
+
+---
+
+## Summary Table
+| Concept                  | Hoisted | Named | Can be Anonymous | Can be Value | Example Use Case         |
+|--------------------------|---------|-------|------------------|--------------|-------------------------|
+| Function Statement       | Yes     | Yes   | No               | No           | Declarations            |
+| Function Expression      | No      | Yes/No| Yes              | Yes          | Callbacks, assignments  |
+| Anonymous Function       | No      | No    | Yes              | Yes          | Callbacks, IIFE         |
+| Named Function Expression| No      | Yes   | No               | Yes          | Recursion, debugging    |
+| Arrow Function           | No      | No    | Yes              | Yes          | Callbacks, short syntax |
+
+---
+
+**Practice:** Try modifying the examples and see how hoisting, naming, and context affect function behavior in JavaScript.

functions/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Functions in JavaScript</title>
+        <h1>Functions in JavaScript</h1>
+        <script src="functions.js"></script>
+    </head>
+</html>