Skip to content

Commit

Permalink
added DSA Content
Browse files Browse the repository at this point in the history
  • Loading branch information
ajay-dhangar committed Dec 7, 2023
1 parent 1332550 commit 982eb6b
Show file tree
Hide file tree
Showing 13 changed files with 372 additions and 162 deletions.
161 changes: 0 additions & 161 deletions courses/javascript/ex-1.md

This file was deleted.

8 changes: 8 additions & 0 deletions docs/basics/_category_.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"label": "Basics concepts",
"position": 3,
"link": {
"type": "generated-index",
"description": "5 minutes to learn the most important RoadMap for Basic Concepts of programming."
}
}
8 changes: 8 additions & 0 deletions docs/basics/javascript/_category_.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"label": "JavaScript",
"position": 1,
"link": {
"type": "generated-index",
"description": "5 minutes to learn the most important RoadMap for JavaScript Mastery."
}
}
202 changes: 202 additions & 0 deletions docs/basics/javascript/ex-1.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,202 @@
---
id: variables-in-javascript
sidebar_position: 1
title: Variables in JavaScript
sidebar_label: Variables in JS
---

import Authors from '../../../src/components/Authors'

---
<Authors names="@ajay-dhangar"/>
---

Hey, everyone! I'm Ajay Dhangar, and today we're delving into a fundamental concept in JavaScript – Variables. Whether you're a beginner or seeking a refresher, this comprehensive guide will provide you with a solid understanding of JavaScript variables. Let's jump right in!

## 1. What are Variables?

In the world of programming, variables act as containers. Think of them like labeled boxes that hold various types of information in your program. These containers allow you to store, retrieve, and manipulate data, providing the foundation for dynamic and interactive code.

### Visualizing Variables

```mermaid
graph TD
subgraph Variables
style Variables fill:#f57,stroke:#333,stroke-width:2px, stroke:#262626;
A(Variable)
end
B["Data Type (e.g., Number, String)"]
C["Variable Name (e.g., age, name)"]
A -->|Stores| B
A -->|Named| C
B -->|Assigned Value| D["Value (e.g., 25, 'John')"]
C -->|Used in Code| E["Code (e.g., age = 25; console.log(name);)"]
```

In JavaScript, we use variables to store and manage data, representing numbers, text, or more complex structures.

```mermaid
graph TD
subgraph Variables
style Variables fill:#f9f,stroke:#333,stroke-width:2px;
A[Variable]
end
BoxStyle(e.g., var, let, const)
style BoxStyle fill:#fff,stroke:#333,stroke-width:2px;
B["Number"]
C["String"]
D["Boolean"]
E["Array"]
F["Object"]
A -->|=| B["10"]
A -->|=| C["'Hello, World!'"]
A -->|=| D["true"]
A -->|=| E["[1, 2, 3]"]
A -->|=| F["{ key: 'value', age: 25 }"]
```

:::tip Definition
In JavaScript, variables are containers that hold information, allowing you to reference and manipulate values within your code. Variables are fundamental to programming, enabling you to work with data dynamically.

In programming, variables are used to store and manage data. They act as symbolic names for values. In JavaScript, you can declare variables using the `var`, `let`, or `const` keywords.

1. `var`:

- Historically used for variable declaration, but it has some scoping issues.
- Variables declared with `var` are function-scoped, meaning they are only accessible within the function where they are declared.

2. `let`:

- Introduced in ECMAScript 6 (ES6) to address the scoping issues of `var`.
- `let` allows block-scoping, meaning the variable is limited to the block (enclosed by curly braces) where it is defined.

3. `const`:

- Also introduced in ES6, `const` is used to declare constants.
- Constants cannot be reassigned after declaration.
- They are block-scoped like variables declared with let.
:::

## 2. Variable Declaration and Types

Now, let's explore how to declare variables and the different types available in JavaScript.

### Variable Declaration

```mermaid
graph TD
subgraph Variables
style Variables fill:#f9f,stroke:#333,stroke-width:2px;
A[let age = 18;]
end
B["if (age >= 18) {"]
C[" console.log('You are an adult.');"]
D["} else {"]
E[" console.log('You are a minor.');"]
A -->|Variable Declaration| B
B -->|Condition Check| C
B -->|Alternative Path| D
D -->|Alternative Output| E
```

In JavaScript, you can declare variables using 'var,' 'let,' or 'const.' While 'var' has been around for a while, ES6 introduced 'let' and 'const.'

**Comparison of 'var,' 'let,' and 'const':**

```javascript
// Using var (function-scoped)
var x = 10;

// Using let (block-scoped, reassignable)
let y = 'Hello';

// Using const (block-scoped, not reassignable)
const pi = 3.14;
```

### Variable Assignment and Dynamic Typing

Once a variable is declared, you can assign values to it. JavaScript's dynamic typing allows the type of a variable to change during runtime.

**Example of Variable Assignment and Dynamic Typing:**

<!-- Visual Aid: Code example demonstrating variable assignment and dynamic typing -->

This flexibility is powerful, but it's crucial to be aware of the data types your variables hold to avoid unexpected behavior.

## 3. Scope and Hoisting

Understanding the scope of variables is crucial for writing robust and error-free code. JavaScript has function-scoped variables with 'var' and block-scoped variables with 'let' and 'const.'

### Scope

Scope defines the context in which variables are accessible. Let's explore function and block scope.

```javascript
function exampleScope() {
if (true) {
var localVar = "I'm accessible inside the function";
let blockVar = "I'm accessible only in this block";
}
console.log(localVar); // Accessible
console.log(blockVar); // Error: blockVar is not defined
}
```

### Hoisting

Variable and function declarations are hoisted to the top of their containing scope during compilation.

```javascript
console.log(hoistedVar); // Outputs undefined
var hoistedVar = "I am hoisted!";
```

## 4. Save Code

To organize and reuse code effectively, consider saving reusable portions as functions or modules. This approach promotes maintainability and helps avoid redundancy.

```javascript
// Example function
function greet(name) {
return `Hello, ${name}!`;
}

// Using the function
let message = greet("Algo");
console.log(message); // Outputs: Hello, Algo!
```

## 5. Best Practices

Before we wrap up, let's discuss some best practices for working with variables in JavaScript.

### Use `const` by Default

In modern JavaScript, it's recommended to use `const` by default. If you know the value will change, then use `let`.

```js
const maxAttempts = 3;
let currentAttempts = 0;
```

### Avoid `var`

The `var` keyword is outdated and can lead to unexpected issues. Prefer `let` and `const` for better-scoped variables.

```js
var oldWay = "I'm using var.";

let modernWay = "I'm using let.";
```

***Congratulations! You've now gained a comprehensive understanding of variables in JavaScript.***

Loading

0 comments on commit 982eb6b

Please sign in to comment.