There were many updates brought by ES6. One of the Syntax updates introduced was the concept of declaring variables with let andconst instead of var
To understand whylet & constwere introduced, we must first understand how var works & the concept of hoisting → That being said, here are the 5 questions we will cover in order:
BLOCK SCOPE vs. FUNCTION SCOPE
FUNCTION SCOPE
Local JS Variables
Variables declared within a JavaScript function, become LOCAL to the function.
example:
// code here CANNOT use petName
function myPet() {
var petName = “Domino”;
// code here CAN use petName
}
Global JS Variables
A variable declared outside a function, becomes GLOBAL.A global variable has global scope: All scripts and functions on a web page can access it.
example:
var petName = “Domino”;
// code here can use petName
function petName() {
// code here can also use petName
}
---------
--> the examples above show that var is not limited to the curly brackets. It is the function which defines the scope.
You might be wondering ..ok this is nice but why is function scope a problem… I have one word for you:
HOISTING
→var uses something called ‘hoisting’, which can lead to unexpected results.
Let’s see what happens if I put the variable after the console.log…
function myCourse() {
console.log(courseName + " is a great class");
var courseName = “JavaScript”;
}
myCourse();
This will output: undefined
What we get is kind of strange. The reason this happened is because before it ran any of the code javaScript did this..
function myCourse() {
var courseName;
console.log(courseName + " is a great class");
courseName = “JavaScript”;
}
myCourse();
This will output: undefined is a great class
The variable is actually sitting there but it doesn’t have a value yet and this can cause problems when you create more complex applications. → Hoisting can turn an innocent looking declaration into a subtle bug.
Let’s see what happens if we put a variable outside of the function..
var courseName = “Intro to JavaScript";
function myCourse() {
console.log(courseName + " is a great class");
var courseName = “JavaScript”;
}
myCourse();
This will output: undefined is a great class
Why? because the variable of courseName is still appearing prior to the console.log since it is being hoisted, but it is not defined till after.
Now that we understand var, let’s walk through what Let & Const are, why they were added & when you should use them:
Hope this helped clarify why Let & Const were introduced. Please feel free to message me with any questions in the comments below or via my IG:
https://www.instagram.com/lindavivah
XOXO & Happy Coding!
I get a ton of questions regarding the coding books I read to my 15 month old son, specifically on my Instagram.
Since I have purchased quite a few, here are my top 4 coding book suggestions for babies/young kids:
A great introduction to basic coding and web concepts for children in the form of the alphabet!
Introduces basic coding concepts in an engaging...
I recently passed the AWS Solutions Architect Associate Exam and would like to share some of the resources I used to study for the exam. I used 2 different online courses to study, did the labs included with those courses, & took a few practice tests.
Background: My goal when studying was to really understand and be able to use what I learned on the job. I currently work as a web developer so I do...
What is Binary?