Hugo JS

Hugo JS

1588211280

Javascript ES6: 'var', 'let' and 'const'| Select and prioritize what?

var, let and const are the keywords which are used to declare variables in JavaScript. var comes under the ECMAScript 5th edition (aka ES5) whereas let and const fall under the category of ECMAScript 6th edition (aka ES6 and ES2015).

Since JavaScript does not have any type-checking, either of these keywords can be used to declare a variable of any type (datatype) in JavaScript.

Though all the three keywords are used for the same purpose, they are different.

1. ‘let’ vs. ‘const’:

Change of value in future

Variables declared using the let keyword can change their values in the future.

Consider the example given below:

let iChange = 11;
iChange = 12;

console.log(iChange);

Output:

12

On the first line, the variable iChange is declared using the let keyword and is initialized with value 11. When you come down to the next line, the variable iChangeis again assigned a new value, which is 12. Changing the values of variables declared using the let keyword is allowed. When, on the last line, you try to print the value of the variable iChange, you correctly get the updated value 12.

Variables declared using the const keyword cannot change their values in future. This is why you must always initialize the variables declared with the const keyword.

const PI = 3.14;
PI = 22/7;

console.log(PI);

Output:

Uncaught TypeError: Assignment to constant variable

Here, the variable PI is declared using the const keyword and is initialized with value 3.14 on the first line. When you come down to the next line, the variable PI is updated with a new value 22/7. Changing values of variables declared using the const keyword is not allowed. This is why the second line throws the error shown in the output because you are trying to assign a new value to a constant variable. Therefore, remember that variables declared using the const keyword are read-only & cannot be reassigned any value.

As mentioned earlier, it is mandatory to initialize a constant when declaring it. Let’s see the following statement of code:

const PI;

Output:

Uncaught SyntaxError: Missing initializer in const declaration

You know that you cannot update a constant in future. If you do not initialize a constant during its declaration, you will not be able to assign any value to it EVER! This is why you get a SyntaxError when you leave a constant uninitialized.

What do you think will be the output of the code given below?

const passengerBus = {wheels: 8, passengers: 40}
passengerBus.passengers = 50;

console.log(passengerBus);

Do you think an error will be thrown? Let’s check the output. Here we go.

Output:

{ wheels: 8, passengers: 50 }

The objects (including arrays & functions) declared using the _const_ keyword are mutable.

So far, you’ve learned that variables declared using the const keyword cannot be assigned any other value. While this is true, there’s another side of the story too. Undoubtedly, you cannot assign a new value to a constant but you can manipulate the existing value if it is an object or an array.

In the code given above, you are not changing the entire value assigned to the constant passengerBus but you are manipulating a property inside it. You can add/delete/update a property inside an object declared using the const keyword.

Similar can be done with arrays too. You can add add/delete/update an element inside an array declared using a const keyword.

const android = ['Marshmallow', 'Noughat', 'Oreo'];
arr[3] = 'Pie'; // adding new version

console.log(android);

Output:

['Marshmallow', 'Noughat', 'Oreo', 'Pie']

Now, considering that the keywords let and const belong to the same category, the following points enlist the differences between the variables declared using the let/const keywords and the variables declared using the var keyword:

2. ‘let’ (or ‘const’) vs. ‘var’:

Scope

Variables declared using the let/const keywords are block-scoped.

Consider the following example:

function foo() {
   for (let i = 0; i < 3; i++) {
      console.log(i); // statement 1
   }
   console.log(`All eyes here please: ${i}`); // statement 2
}

foo();

Output:

0
1
2
Uncaught ReferenceError: i is not defined

The variable i is declared using the let keyword inside the for-loop block. This means that when the for-loop block ends, the variable i loses its scope and is no longer accessible outside the curly braces of the for-loop block. Thus, when you try to access the variable i and print its value on statement 2, you get a ReferenceError: i is not defined, as shown in the output.

Consider another example of declaring a variable using the const keyword:

function placeOrder(status) {
   if (status) {
      const message = "Order placed successfully!";
      console.log(message); // statement 1
   }
   console.log(message); // statement 2
}

placeOrder(true);

Output:

Order placed successfully
Uncaught ReferenceError: message is not defined

The variable messageis declared using the const keyword inside the if-block. This means that when the if-block ends, the variable messageloses its scope and is no longer accessible outside the curly braces of the if-block. This is why, when you try to access variable messageand print its value on statement 2, you get a ReferenceError: message is not defined, as shown in the output.

Variables declared using the var keyword are function-scoped.

Consider the example which we’ve discussed earlier where instead of using let, you use the var keyword to declare the variable i:

function foo() {
   for (var i = 0; i < 3; i++) {
      console.log(i); // statement 1
   }
   console.log(`All eyes here please: ${i}`); // statement 2
}

foo();

Output:

0
1
2
All eyes here please: 3

The variable i is declared using the var keyword inside the for-loop-block. Because the variables declared using the var keyword are function-scoped, the variable i does not go out of scope when the for-loop-block ends and is accessible anywhere inside the scope of the function foo. Thus, on statement 2, when you try to access the variable i and print its value, you get the correct output as 3 (incremented value of variable i after the for-loop’s increment statement is executed) as shown in the output.

Redeclaration

Variables declared using the _let_/_const_keywords cannot be redeclared in the same scope.

What do you think will be the output of the following code?

let avengers = 'Infinity War';
let avengers = 'Endgame';

console.log(avengers);

Output:

Uncaught SyntaxError: Identifier 'avengers' has already been declared

In the above code, you declared a variable with the name avengers using the let keyword and then you declared it again on the next line. Thus, the second line throws an SyntaxError as mentioned in the output.

Variables declared using the varkeyword can be redeclared in the same scope.

Let’s now declare a variable already declared earlier in the same scope using the var keyword.

var avengers = 'Infinity War';
var avengers = 'Endgame';

console.log(avengers);

Output:

Endgame

As evident from the output , you can redeclare variables having the same name in the same scope using the var keyword. The value contained in the variable will be the final value that you have assigned to it.

Hoisting

Variables declared using the _let_/_const_keywords are NOT hoisted.

This is an important point which is forgotten by many and you won’t find it in all articles. To understand what this point means, consider the example given below:

console.log(x);
let x = 10;

Output:

Uncaught ReferenceError: x is not defined

Notice that on the first line in the code given above, you are trying to access a variable x, which is declared and assigned a value on the next line. Essentially, you are trying to access a variable, which has not yet been allocated memory (declared). Since the variable x is declared using the let keyword and the variables declared using the let/const keywords are not hoisted, this throws a ReferenceError: x is not defined, as shown in the output.

Variables declared using the var keyword are hoisted to the top of their scope.

console.log(x);
var x = 10;

Output:

undefined

All the declarations are moved to the top of the scope. Notice that on the first line, you are trying to access a variable x, which is declared and assigned a value on the next line. Now, since the variable x is declared using the var keyword and the variables declared using the var keyword are hoisted to the top of their scope in JavaScript, the code gets converted to the one given below:

var x;
console.log(x);
x = 10;

Here, the variable x is declared on line 1 and is not assigned any value. All the variables in JavaScript are initialized with the default value undefined, if no other value is assigned explicitly by the user. Thus, x is assigned the value undefined, which is what is printed on the second line (before x is updated to 10).

3. The Bigger Question — What to Prefer?

ES6 (aka ES2015) is supported by almost all the browsers today. If you can follow this syntax, it is recommended to use the let and const keywords for declaring all the variables in your code.

Now, which one to choose amongst let and const?

Give me your answer!!!

#javascript #es6 #web development #technology

What is GEEK

Buddha Community

Javascript ES6: 'var', 'let' and 'const'| Select and prioritize what?

JavaScript Var, Let, and Const - 8

To declare a variable in JavaScript either var, let or const is used.
We will distinguish between the three with the following features:

  • Block scope
  • Update and redeclaration
  • Hoisting
  • Undefined

Official Website: https://techstackmedia.com

Watch the entire JavaScript Series, including upcoming JavaScipt videos on YouTube: https://www.youtube.com/playlist?list=PLJGKeg3N9Z_Rgxf1Und7Q0u0cSre6kjif

Check it out on the article: https://techstack.hashnode.dev/javascript-var-let-and-const

Become a patron to learn more: https://www.patreon.com/techstackmedia

Next: https://techstack.hashnode.dev/javascript-data-types

Techstack Media is in partnership with Skillshare: http://bit.ly/tsm-skillshare
Learn anything and get the required skill you need to kickstart a long-lasting career.

Website Request: bello@techstackmedia.com

Social Media:
✅ Facebook: https://facebook.com/techstackmedia
✅ Twitter: https://twitter.com/techstackmedia
✅ Instagram: https://instagram.com/techstackmedia
✅ LinkedIn: https://linkedin.com/in/techstackmedia

#javascriptdatatypes #javascipthoisting #javascriptvariable #techstackmedia #webdev #DEVCommunity #100DaysOfCode #opensource #codenewbies #womenwhocode #html #webdevelopment

#javascript #javascript var #let #const

Eldora  Bradtke

Eldora Bradtke

1589938080

JavaScript Variables: var and let and const

There are three ways to create variables in a JavaScript application: using var, using let, or using const. This will not be a post trying to convince you which one you should use, or arguing about what is best. It’s just good to know about the differences and what it means when you use the different options. But hopefully by the end of all this you’ll be comfortable with the three options and can make a decision for your team that will suit your needs. To get the most out of this post, it is best if you understand variable scope, which we covered in this post previously.

#javascript #var #let #const

Tanya  Shields

Tanya Shields

1591952760

Declaring A Winner Between JavaScript's var, let And const

When ECMAScript 6 (also known as ECMAScript 2015) was released a collection of new APIs, programming patterns and language changes became a standard. Since ES6 started gaining browser and nodejs support developers are wondering if they should stop using the traditional var to declare variables.
ES6 introduced two new ways to declare variables, let and const.

var - has function level scoping and can change the value reference
let - has block level scoping and can change the value reference
const - has block level scoping but cannot change the value reference
Both provide better block scoping that var. const differs from let because the immediate value cannot be changed once it is declared.
Variables declared using var are function scoped, which has led to confusion to many developers as they start using in JavaScript.

#javascript #var #let #const #programming

Dexter  Goodwin

Dexter Goodwin

1623916080

A Simple Explanation Of JavaScript Variables: Const, Let, Var

The variable is a fundamental concept that any developer should know.

In JavaScript, constlet, and var are the statements you can declarate variable.

I’m going to describe each variable type around the declaration, initialization, value access, and assignment. Each of the 3 types (constlet, and var) create variables that behave differently exactly in these 4 steps.

This post isn’t quite beginner friendly, but rather useful to solidify your knowledge of variables and their behavior.

Let’s get started.

1. Variable identifier

First, let’s understand what a variable is.

In simple terms, a variable is a placeholder (or a box) for a value. A value in JavaScript can be either a primitive value or an object.

The variable has a name, which stricter is called identifier. Examples of identifiers are myNumbernamelistitem.

The syntax of an identifier is pretty simple:

An identifier can contain letters, digits 0..9, and special symbols $_. An identifier cannot start with a digit 0..9.

Examples of valid identifiers are myNumbermy_numberlist1$item_nameab$_.

#javascript #variable #const #let #var

Eldora  Bradtke

Eldora Bradtke

1593862020

JavaScript Variables Explained. Var, Let and Const with examples.

Before the arrival of ES6 or EcmaScript 6 released in 2015, as a Javascript developer, you could only declare variables using the var keyword.
Now things has changed and two new keywords have been introduced to meet the developers needs who felt the old one way solution very tight for the modern web app requirements.
In this article I will try to explain you in the simplest way possible, the differences between var, let and const type variables.
I think the best way to do this is to try to extrapolate the essence of their nature by describing them in few words followed by examples which gives you the confirmation and consolidation of what you learned in the theory.
Like many other programming languages, JavaScript has variables. I talk you through var, let and const, and how they differ from each other with the use of some simple examples.

#javascript #var #let #const #programming