Merge pull request #40 from codeharborhub/dev-1

Added Js Docs

Author: ajay-dhangar

docs/javascript/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "JavaScript",
+  "position": 4,
+  "link": {
+    "type": "generated-index",
+    "description": "JavaScript is a programming language that enables you to create dynamically updating content, control multimedia, animate images, and much more. In this tutorial, you'll learn the basics of JavaScript and how to use it to create interactive web experiences."
+  }
+}

docs/javascript/all-about-variables/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "All About Variables",
+  "position": 2,
+  "link": {
+    "type": "generated-index",
+    "description": "In this tutorial, you'll learn what is a variable, how to declare a variable, how to assign a value to a variable, and how to use variables in JavaScript."
+  }
+}

docs/javascript/all-about-variables/hoisting.mdx

@@ -0,0 +1,144 @@
+---
+id: hoisting-in-javascript
+title: Hoisting in JavaScript
+sidebar_label: Hoisting
+sidebar_position: 2
+tags: [javascript, hoisting, variable hoisting]
+description: "Learn about hoisting in JavaScript and how it affects variable declarations and function definitions."
+hide_table_of_contents: true
+---
+
+Hoisting is a unique feature of JavaScript that allows you to access variables and functions before they are declared in your code. This behavior can be surprising if you're not familiar with it, so understanding how hoisting works is essential for writing reliable JavaScript code.
+
+In this tutorial, we'll explore what hoisting is, how it works in JavaScript, and how it affects variable declarations and function definitions.
+
+<AdsComponent />
+<br />
+
+## What Is Hoisting?
+
+Hoisting is a JavaScript mechanism where variable and function declarations are moved to the top of their containing scope during the compilation phase. This means that you can access variables and functions before they are declared in your code, as if they had been "hoisted" to the top of the scope.
+
+It's important to note that only the declarations are hoisted, not the initializations. This means that the variable or function is available for use, but its value is `undefined` until the assignment is encountered in the code.
+
+## How Does Hoisting Work?
+
+### Hoisting with Variables
+
+When it comes to variables, hoisting behaves differently depending on whether the variable is declared using `var`, `let`, or `const`.
+
+**1. Variables Declared with `var`**
+
+Variables declared with `var` are hoisted to the top of their containing function or global scope. This means that you can access the variable before it is declared in the code, but its value will be `undefined` until it is assigned a value.
+
+**Example:**
+
+```javascript title="app.js"
+console.log(myVar); // Output: undefined
+var myVar = "Hello, World!";
+console.log(myVar); // Output: Hello, World!
+```
+
+In this example, the variable `myVar` is hoisted to the top of the scope, so the first `console.log` statement outputs `undefined`. The value of `myVar` is assigned later in the code, so the second `console.log` statement outputs the actual value of the variable.
+
+**2. Variables Declared with `let` and `const`**
+
+Variables declared with `let` and `const` are also hoisted to the top of their containing block, but they are not initialized until the actual declaration is encountered in the code. This means that you cannot access the variable before it is declared.
+
+:::note Note
+Variables declared with `let` and `const` are in a "temporal dead zone" **(TDZ)** until they are initialized. Accessing them before the declaration results in a `ReferenceError`.
+:::
+
+**Example with `let`:**
+
+```javascript title="app.js"
+console.log(myVar); // Throws a ReferenceError
+let myVar = "Hello, World!";
+console.log(myVar); // Output: Hello, World!
+```
+
+**Example with `const`:**
+
+```javascript title="app.js"
+console.log(myVar); // Throws a ReferenceError
+const myVar = "Hello, World!";
+console.log(myVar); // Output: Hello, World!
+```
+
+In both examples, trying to access the variable `myVar` before its declaration results in a `ReferenceError`. This is because variables declared with `let` and `const` are not initialized until the actual declaration is encountered in the code.
+
+<AdsComponent />
+<br />
+
+### Hoisting with Functions
+
+Hoisting behaves differently for function declarations and function expressions.
+
+**1. Function Declarations**
+
+Function declarations are hoisted to the top of their containing scope, similar to variables declared with `var`. This means that you can call the function before it is declared in the code.
+
+**Example:**
+
+```javascript title="app.js"
+sayHello(); // Output: Hello, World!
+
+function sayHello() {
+  console.log("Hello, World!");
+}
+```
+
+In this example, the function `sayHello` is hoisted to the top of the scope, so you can call it before its actual declaration in the code.
+
+**2. Function Expressions**
+
+Function expressions are not hoisted in the same way as function declarations. Only the variable declaration is hoisted, not the function assignment.
+
+**Example:**
+
+```javascript title="app.js"
+sayHello(); // Throws a TypeError
+
+var sayHello = function () {
+  console.log("Hello, World!");
+};
+```
+
+In this example, the variable `sayHello` is hoisted to the top of the scope, but the function assignment is not. Trying to call `sayHello` before the function assignment results in a `TypeError`.
+
+<AdsComponent />
+<br />
+
+### Summary of Hoisting Behavior
+
+Here's a summary of how hoisting works in JavaScript:
+
+- Variables declared with `var` are hoisted to the top of their containing function or global scope. They are accessible before they are declared, but their value is `undefined` until the assignment is encountered.
+- Variables declared with `let` and `const` are hoisted to the top of their containing block but are not initialized until the actual declaration is encountered. Accessing them before the declaration results in a `ReferenceError`. They are in the "temporal dead zone" until they are initialized.
+- Function declarations are hoisted to the top of their containing scope, so you can call them before they are declared in the code.
+- Function expressions are not hoisted in the same way as function declarations. Only the variable declaration is hoisted, not the function assignment.
+- Hoisting can lead to unexpected behavior if you're not aware of how it works. It's important to understand hoisting to write reliable and predictable JavaScript code.
+
+By understanding how hoisting works, you can avoid common pitfalls and write more robust JavaScript code.
+
+<AdsComponent />
+<br />
+
+:::tip
+
+To avoid confusion and potential issues related to hoisting, it's a good practice to declare your variables and functions at the beginning of their containing scope. This makes your code more readable and predictable.
+
+**Remember:**
+
+- Use `let` and `const` for variable declarations to avoid hoisting-related bugs.
+- Declare functions before calling them to ensure they are hoisted correctly.
+- Be mindful of the TDZ when using `let` and `const` to prevent `ReferenceError` issues.
+- Write clean and readable code by declaring variables and functions at the beginning of their containing scope.
+- Take advantage of function declaration hoisting to organize your code in a way that is logical and easy to follow.
+
+Hoisting can feel like magic, but understanding how it works will help you write better JavaScript code.
+:::
+
+## Conclusion
+
+Hoisting is a unique feature of JavaScript that allows you to access variables and functions before they are declared in your code. By hoisting declarations to the top of their containing scope, JavaScript enables you to write code that might seem out of order but still works as expected.

docs/javascript/all-about-variables/variable-declarations.mdx

@@ -0,0 +1,187 @@
+---
+id: variable-declarations
+title: Variable Declarations
+sidebar_label: Variable Declarations
+sidebar_position: 1
+tags: [javascript, variables, variable declarations, var, let, const]
+description: "Learn how to declare variables in JavaScript using the var, let, and const keywords."
+hide_table_of_contents: true
+---
+
+Variables are an essential part of any programming language, allowing you to store and manipulate data in your code. In JavaScript, variables are declared using the `var`, `let`, or `const` keywords. Each of these keywords has its own characteristics and best practices for usage. In this tutorial, we'll explore how to declare variables in JavaScript and discuss the differences between `var`, `let`, and `const`.
+
+<AdsComponent />
+<br />
+
+## What Are Variables?
+
+Variables are named containers that store data values in memory. They allow you to reference and manipulate data throughout your code. In JavaScript, variables can hold various types of data, such as numbers, strings, objects, arrays, functions, and more. You can assign a value to a variable using the assignment operator (`=`) and update the value as needed.
+
+:::note Better Understanding
+Think of variables as containers that hold data. Just like a box where you can store items, a variable holds a piece of information that you can use and modify throughout your program.
+:::
+
+**Example:**
+
+Imagine you're working on a to-do list app. You might need to store the user's name, the tasks they want to complete, and the status of each task. Variables allow you to store these pieces of information:
+
+    ```javascript title="app.js"
+    // Declare variables to store user information
+    let userName = "Ajay";
+
+    // Declare variables to store tasks
+    let task = "Complete JavaScript tutorial";
+
+    // Declare variables to store task status
+    let isTaskCompleted = false;
+    ```
+
+In this example:
+
+- The `userName` variable stores the user's name as a string.
+- The `task` variable stores the task description as a string.
+- The `isTaskCompleted` variable stores the completion status of the task as a boolean value.
+- You can update these variables as needed throughout your program.
+
+Now that you understand the concept of variables, let's explore how to declare them using the `var`, `let`, and `const` keywords.
+
+<AdsComponent />
+<br />
+
+## Declaring Variables with `var`, `let`, and `const`
+
+In JavaScript, you can declare variables using the `var`, `let`, or `const` keywords. Each keyword has its own scope, hoisting behavior, and mutability characteristics. Let's examine the differences between `var`, `let`, and `const` and when to use each one.
+
+### 1. The `var` Keyword
+
+The `var` keyword was the original way to declare variables in JavaScript. Variables declared with `var` have function-level scope, meaning they are accessible within the function in which they are defined. If a variable is declared outside a function, it becomes a global variable.
+
+:::note Note
+Before ES6 (ECMAScript 2015), `var` was the only way to declare variables in JavaScript. However, `var` has some peculiar behaviors that can lead to bugs if not used carefully.
+:::
+
+**Syntax:**
+
+```javascript title="app.js"
+var variableName = value;
+```
+
+**Example:**
+
+```javascript title="app.js"
+var age = 25;
+console.log(age); // Outputs: 25
+```
+
+**Key Characteristics of `var`:**
+
+- **Function Scope:** Variables declared with `var` are function-scoped. They are accessible within the function in which they are defined.
+- **Hoisting:** Variables declared with `var` are hoisted to the top of their function or global scope. This means you can access the variable before it is declared.
+- **Re-declaration:** Variables declared with `var` can be reassigned and updated throughout the program. You can also redeclare a variable without any errors.
+
+**Example of Hoisting with `var`:**
+
+```javascript title="app.js"
+console.log(name); // Outputs: undefined
+var name = "Alice";
+```
+
+- **Imagination:** Imagine `var` as a mischievous magician that pulls your variable declarations to the top, even if you didn’t expect it!
+
+### 2. The `let` Keyword
+
+The `let` keyword was introduced in ES6 (ECMAScript 2015) to address some of the issues associated with `var`. Variables declared with `let` have block-level scope, meaning they are accessible within the block (enclosed by curly braces) in which they are defined. This makes `let` more predictable and less error-prone than `var`.
+
+**Syntax:**
+
+```javascript title="app.js"
+let variableName = value;
+```
+
+**Example:**
+
+```javascript title="app.js"
+let count = 0;
+console.log(count); // Outputs: 0
+```
+
+**Key Characteristics of `let`:**
+
+- **Block Scope:** Variables declared with `let` are block-scoped. They are accessible within the block (e.g., if statement, loop, or function) in which they are defined.
+- **No Hoisting:** Variables declared with `let` are not hoisted to the top of their block. You cannot access the variable before it is declared.
+- **Re-declaration:** Variables declared with `let` cannot be redeclared in the same scope. Attempting to redeclare a variable with `let` will result in a syntax error.
+
+**Example of Block Scope with `let`:**
+
+```javascript title="app.js"
+if (true) {
+  let x = 10;
+  console.log(x); // Outputs: 10
+}
+
+console.log(x); // Error: x is not defined
+```
+
+- **Imagination:** Imagine `let` as a security guard that only allows access to variables within its defined block, keeping things well-organized and predictable.
+
+### 3. The `const` Keyword
+
+The `const` keyword was also introduced in ES6 (ECMAScript 2015) to declare constants in JavaScript. Variables declared with `const` are block-scoped and cannot be reassigned once they are initialized. This makes `const` ideal for declaring values that should not change throughout the program.
+
+**Syntax:**
+
+```javascript title="app.js"
+const variableName = value;
+```
+
+**Example:**
+
+```javascript title="app.js"
+const birthYear = 2001;
+console.log(birthYear); // Outputs: 2001
+```
+
+**Key Characteristics of `const`:**
+
+- **Block Scope:** Variables declared with `const` are block-scoped, similar to `let`.
+- **No Hoisting:** Variables declared with `const` are not hoisted to the top of their block.
+- **Immutable:** Variables declared with `const` cannot be reassigned or updated after initialization. Attempting to reassign a `const` variable will result in a syntax error.
+
+**Example of Immutability with `const`:**
+
+```javascript title="app.js"
+const PI = 3.14159;
+PI = 3.14; // Error: Assignment to constant variable.
+```
+
+- **Imagination:** Imagine `const` as a stone tablet with an inscription that cannot be changed once it's been carved. It's a constant reminder of the value it holds.
+
+<AdsComponent />
+<br />
+
+## When to Use `var`, `let`, or `const`?
+
+Here are some guidelines on when to use `var`, `let`, or `const` in your JavaScript code:
+
+- Use `var` when you need variables with function-level scope or global scope. However, it's recommended to use `let` or `const` instead of `var` to avoid hoisting issues and potential bugs.
+- Use `let` when you need variables with block-level scope that can be reassigned or updated.
+- Use `const` when you need variables with block-level scope that should not be reassigned after initialization. This is useful for declaring constants or values that should remain unchanged.
+- As a best practice, prefer using `const` for variables that do not need to be reassigned. This helps prevent accidental reassignments and makes your code more predictable.
+
+By understanding the differences between `var`, `let`, and `const`, you can choose the appropriate keyword based on the scope and mutability requirements of your variables.
+
+## Quick Comparison Table
+
+Here's a quick comparison of the key characteristics of `var`, `let`, and `const`:
+
+| No. | Feature        | `var`          | `let`       | `const`     |
+| :-- | :------------- | :------------- | :---------- | :---------- |
+| 1.  | Scope          | Function-level | Block-level | Block-level |
+| 2.  | Hoisting       | Yes            | No          | No          |
+| 3.  | Re-declaration | Allowed        | Not allowed | Not allowed |
+| 4.  | Reassignment   | Allowed        | Allowed     | Not allowed |
+| 5.  | Initialization | Optional       | Optional    | Required    |
+
+## Conclusion
+
+In this tutorial, you learned how to declare variables in JavaScript using the `var`, `let`, and `const` keywords. Each keyword has its own scope, hoisting behavior, and mutability characteristics. By understanding the differences between `var`, `let`, and `const`, you can choose the appropriate keyword based on the requirements of your variables.