-
-
Notifications
You must be signed in to change notification settings - Fork 214
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
1332550
commit 982eb6b
Showing
13 changed files
with
372 additions
and
162 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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." | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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." | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.*** | ||
|
Oops, something went wrong.