|
| 1 | +<h1 align="center"> Variables </h1> |
| 2 | +<h2 align="center"> var, let and const </h2> |
| 3 | + |
| 4 | +In the previous video, we learned about syntax, types of languages, comments and variables. In this chapter, we will learn about the `var`, `let` and `const` keywords and how to declare variables using them. |
| 5 | + |
| 6 | +# var, let and const |
| 7 | +In javascript, there are three keywords that are used to declare variables: `var`, `let` and `const`. The `var` keyword was used to declare variables in javascript before the `let` and `const` keywords were introduced. The `let` and `const` keywords were introduced in ES6 (ECMAScript 6). ES6 is the latest version of javascript. It was released in 2015. ES6 introduced a lot of new features to javascript. We will learn about some of them in this course. |
| 8 | + |
| 9 | +# var |
| 10 | +The `var` keyword is used to declare variables in JavaScript. Here's an example: |
| 11 | +```js |
| 12 | +var name = "Harry"; |
| 13 | +console.log(name); //output: Harry |
| 14 | +``` |
| 15 | +we can also reassign the value of a variable declared using the `var` keyword: |
| 16 | +```js |
| 17 | +var name = "Harry"; |
| 18 | +name = "Ron"; |
| 19 | +console.log(name); //output: Ron |
| 20 | +``` |
| 21 | +One important thing to note about var is that it has block scope. This means that if a variable is declared with var inside a function, it is accessible anywhere within that block. |
| 22 | + |
| 23 | +Note: Block scope will be discussed in the upcoming videos. For now, just remember that anything inside curly braces `{}` is a block. |
| 24 | + |
| 25 | +Here's an example: |
| 26 | +```js |
| 27 | +var name = "Harry"; |
| 28 | +{ |
| 29 | + var name = "Ron"; |
| 30 | + console.log(name); //output: Ron |
| 31 | +} |
| 32 | +console.log(name); //output: Ron |
| 33 | +``` |
| 34 | +This is the reason why the `var` keyword is not recommended to be used anymore. It can lead to unexpected results. Instead we make use of the `let` and `const` keywords. |
| 35 | + |
| 36 | +# let |
| 37 | +The let keyword is used to declare variables in JavaScript and has block scope. This means that if a variable is declared with let inside a block, it is only accessible within that block. |
| 38 | + |
| 39 | +Here's an example: |
| 40 | +```js |
| 41 | +let a = 29 |
| 42 | + |
| 43 | +let b = " Harry"; |
| 44 | +{ |
| 45 | +let b = "this"; |
| 46 | +console.log(b); //output: this |
| 47 | +} |
| 48 | +console.log(b); //output: Harry |
| 49 | +``` |
| 50 | + |
| 51 | +# const |
| 52 | +The `const` keyword is used to declare variables in JavaScript and is used when you don't want to reassign the variable. The value of a variable declared with `const` cannot be changed. |
| 53 | + |
| 54 | +Here's an example: |
| 55 | +```js |
| 56 | +const name = " Harry"; |
| 57 | +name = "this"; |
| 58 | +console.log(name); //output: Uncaught TypeError: Assignment to constant variable. |
| 59 | +``` |
| 60 | + |
| 61 | +# Differences |
| 62 | + |
| 63 | +| | **Block scoped** | **Hoisting** | **Reassignment** | **Initialization** | |
| 64 | +|----------|-------------------|--------------|------------------|--------------------| |
| 65 | +| `let` | Yes | No | Yes | Optional | |
| 66 | +| `var` | No | Yes | Yes | Optional | |
| 67 | +| `const` | Yes | No | No | Required | |
| 68 | + |
| 69 | + |
| 70 | +* **Block scoped**: `let` and `const` are block-scoped, meaning they are only accessible within the block they were defined in, while `var` is function-scoped, meaning it is accessible within the entire function it was defined in. |
| 71 | +* **Hoisting:** `let` and `const` are not hoisted, meaning they cannot be accessed before they are declared, while `var` is hoisted, meaning it can be accessed before it is declared (although it will have a value of undefined). |
| 72 | +* **Reassignment:** `let` and `var` can be reassigned to a new value, while `const` cannot be reassigned. |
| 73 | +* **Initialization:** `let` and `var` can be declared without being initialized, while `const` must be initialized with a value when it is declared. |
| 74 | + |
| 75 | + |
| 76 | +# Best Practices |
| 77 | +Now we know everything about the variables in JavaScript. Let's look at some best practices that we should follow while declaring variables in JavaScript to make our code more readable and maintainable. |
| 78 | + |
| 79 | +1. Use descriptive and meaningful variable names: Choose variable names that clearly describe the value they hold. This makes your code easier to read and understand. |
| 80 | +```js |
| 81 | +const a = "Harry"; //bad |
| 82 | +const name = "Harry"; //good |
| 83 | +``` |
| 84 | +2. Use camelCase to name your variables. This makes your code easier to read and understand. |
| 85 | +```js |
| 86 | +const myName = "Harry"; //good |
| 87 | +const myname = "Harry"; //bad |
| 88 | +``` |
| 89 | +3. Use const by default and only use let if you need to reassign the variable. Avoid using var. |
| 90 | +```js |
| 91 | +const name = "Harry"; //good |
| 92 | +let temporary = 29; //good |
| 93 | +var name = "Harry"; //bad |
| 94 | +``` |
| 95 | +4. Declare variables at the top of their scope: To make your code more readable, it's best to declare variables at the top of their scope. This makes it easier to see what variables are in scope and what values they hold |
| 96 | +```js |
| 97 | +//good: |
| 98 | +{ |
| 99 | + const name = "Harry"; |
| 100 | + const hobby = "programming"; |
| 101 | + |
| 102 | + console.log("My name is " + name + " and I love " + hobby); // output: My name is Harry and I love programming |
| 103 | +} |
| 104 | +//bad |
| 105 | +{ |
| 106 | + console.log("My name is " + name + " and I love " + hobby); // output: My name is undefined and I love undefined |
| 107 | + const name = "Harry"; |
| 108 | + const hobby = "programming"; |
| 109 | +} |
| 110 | +``` |
| 111 | +5. Use const whenever possible: If you know that a variable will not change, use const to declare it. This helps to prevent bugs in your code that could occur if you accidentally reassign a value to a variable that should not change. |
| 112 | +```js |
| 113 | +const name = "Harry"; //good |
| 114 | +let name = "Harry"; //fine but const is better because we know that the value of name will not change |
| 115 | +var name = "Harry"; //bad |
| 116 | +``` |
| 117 | + |
| 118 | +# Conclusion |
| 119 | +Variables are an essential part of JavaScript programming. They allow us to store and manipulate data in our code. In JavaScript, we can declare variables using the `var`, `let`, and `const` keywords. While the `var` keyword has block scope, it can lead to unexpected results and is no longer recommended. Instead, we should use the `let` and `const` keywords, with `const` being the preferred option whenever possible. When declaring variables, we should follow best practices like using descriptive names, using camelCase, declaring variables at the top of their scope, and using `const` by default. By following these practices, we can make our code more readable and maintainable. |
| 120 | + |
| 121 | +[Go to next lecture](nextlectureslink) |
0 commit comments