Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added DSA Content #5

Merged
merged 1 commit into from
Dec 7, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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