This post is originally posted to my blog and my youtube channel.
Javascript variables are containers that holding pieces of data.
There are three keywords used when declaring variable in Javascript, namely var
, let
and const
. They follow this pattern or syntax var variableName = variableValue;
.
Javascript variables are dynamic typing mean that they can change from one data type to another. Below, the variable fullName change from string to number and then boolean.
var fullName = 'Frugence Fidel'; // Frugence Fidel
fullName = 100; // 100
fullName = false; // false
Temporal Dead Zone
You cannot access the variable before you define it.
console.log(fullName); // Uncaught ReferenceError: fullName is not defined
const fullName = 'Frugence Fidel';
Ways or styles for naming variables
-
snake_case
var full_name = 'Frugence Fidel';
-
camelCase
var fullName = 'Frugence Fidel';
It's recommanded to use camelCase.
Three ways of declaring variables
=> var
This was the only way to declare variable before ES6. Here you can declare the same variables more than one time and can be updated.
var myFriend = 'Baraka';
var myFriend = 'Peter';
console.log(myFriend); // 'Peter'
If you declare variable inside the block statement, the variable will leak outside.
var bodyWeight = 50;
if (bodyWeight > 49) {
var water = 1.4;
console.log(`For body weight of ${bodyWeight}kg, you should drink water atleast ${water}litre`);
}
console.log(water); // 1.4
=> let and const
let
and const
are the new ways for declaring variables introduced in ES6. In let
and const
you cannot declare the variable twice.
let myFriend = 'Baraka';
let myFriend = 'Peter'; // Uncaught SyntaxError: Identifier 'myFriend' has already been declared
In most case let
and const
are almost same, the only difference I known, const
cannot be updated but let
can.
// let can be updated
let myFriend = 'Baraka';
myFriend = 'Peter';
console.log(myFriend); // Peter
// const cannot be updated
const otherFriend = 'Patrick';
otherFriend = 'Raphael'; // Uncaught TypeError: Assignment to constant variable.
The variable is not leaked outside of the block statement if you use let
or const
.
const bodyWeight = 50;
if (bodyWeight > 49) {
const water = 1.4;
console.log(`For body weight of ${bodyWeight}kg, you should drink water atleast ${water}litre`);
}
console.log(water); // Uncaught ReferenceError: water is not defined
When to use var, let and const
Always use const
when declaring variable, use only let
when you want update the variable. var
shouldn't be used in ES6 and above.
Here is video about the subject
Top comments (4)
const
is a little more complex than what you have here. The reference is immutable, but the value is not. So something like......will not generate an error.
If this all confuses you a bit like it does me, tools like JSLint can help you determine when it may be more appropriate to change a
let
to aconst
. 😀(Also, sorry for the self-promotion, but since the other commenter mentioned Kyle Simpson and it is relevant to your post, I am running an online training on JavaScript language fundamentals that features Kyle and 3 other fantastic trainers - knowjs.org)
Identifiers in dash case (aka kebab case) are valid properties of objects, but not as variable names.
Apart from that, I personally agree with the conclusion; but to add a different perspective, Kyle Simpson (author of the You don't know JS book series) has a section on that in his book on functional programming:
github.com/getify/Functional-Light...
There is no fragment I can link to, I'm referring to the section "Reassignment".
I don't dispute the argument, that people which didn't bother to learn the language could confuse not being able to reassign a binding with an object being immutable, I just expect that anybody who develops software for a living to master the fundamental semantics the programming language they use.
Can you please let me know how you got the "Uncaught ReferenceError: fullName is not defined" . Actually the variable 'fullName' will be hoisted and you won't get an "Uncaught ReferenceError" if u reference it . In this case if you console.log fullName you will get the value as "undefined".
Why are we not talking about hoisting ?