Welcome to our video on JavaScript syntax and variables.
In this video, we'll start by looking at
the basic syntax of
JavaScript and how the code is structured.
Next, we'll explore how to declare
variables using var, let, and const.
We'll then discuss about the JavaScript data types,
including primitive and reference types.
We'll also cover the variable scope
and explain the concept of hoisting.
JavaScript treats variable names
that differ in case as entirely separate.
For example, the myVar variable
with V caps and all small refer
to two different variables.
The case sensitivity can lead to
unexpected results if you are not consistent with naming.
Curly braces are used to define blocks of code,
such as that for functions, loops, or conditionals.
This helps to group multiple statements
together so that they execute in particular context.
Semicolons, although are
technically optional in JavaScript,
it is a good practice to use them.
Without semicolons, JavaScript may
automatically insert them in places you don't expect,
potentially leading to bugs.
Comments in your code are vital for readability.
Single-line comments using the double slash
are useful for brief note,
while multi-line comments enclosed in
slash star are better for more extensive explanations.
Let's talk about var, let, and const.
The var keyword is function-scoped,
meaning that once declared inside a function,
the variable is accessible anywhere within that function.
However, this can cause scope-related bugs,
especially when used inside loops or conditionals.
Let is a block-scoped variables,
meaning it is only available
within the block where it is declared.
It can be reassigned,
making it ideal for variables that will change,
like counters and loops, etc.
Const also has a block scope,
but it creates constants.
Once a value is assigned to const, it cannot be changed.
It is a good practice to use const for
values that remain constant throughout the code,
and also the reference variables,
such as objects or arrays.
Why use let and const?
Using let and const helps
avoid many of the pitfalls associated with var,
especially dealing with the nested blocks or loops.
These keywords provide better control over your code and
help prevent accidental redeclarations and overrides.
Let's talk about JavaScript data types.
Primitive data types include string, numbers,
both integer and float, Boolean,
null, undefined, and much more like Symbol and BigInt.
Undefined is basically a variable that's declared,
but there is no value assigned to it,
and data type null is an intentional absence of value.
Talking about the reference data types
, these are complex,
or you could say composite data types
which includes objects and arrays.
These data types do not hold the value directly,
rather they store references
to memory locations where the data is stored.
Functions are also considered as
reference data type as they
can be passed around like objects.
JavaScript is dynamically typed,
meaning variables can change types at run time.
For example, a variable that's initially holding
a string would later be reassigned to hold a number.
JavaScript automatically performs type conversion in
some situations like concatenating
a number at the string or adding two numbers.
However, explicit conversion gives
you more control over how the types are changed.
Let's talk about global scope.
Variables declared outside any function
or block are called global scope,
meaning they can be accessed from anywhere in your code.
Be very cautious when declaring
global variables as they can easily create conflicts.
We will talk about this in
a detailed example after this slide.
Function scope means that they
are accessible throughout
the entire function in which they are declared,
regardless of where they are in the code.
Block scope, the let and const introduce block scope,
meaning they are only available within the block or
the curly braces in which they are declared.
This makes let and const much safer to use in loops,
conditionals, and small code blocks.
JavaScript hoist variable declarations
to the top of their scope during compilation.
That means you can
declare or you can use a variable before it is declared,
although only the declaration
is hoisted, not the assignment.
For example, trying to access a let variable before
its declaration results in
a reference error while var will return undefined.
Let's try to demonstrate all of this on the code.
Let me create a new file called as JavaScript.js.
For easiness, let me call it like demo.js.
For instance, if I declare a variable called
as demoNumber = 10 and say,
if I have a function with the name printNumber,
and if it tries to access
the demo number with the help of var,
it is accessible inside the function scope as well.
Now, if I try to call
printNumber here and see what it does,
it will print the number 10 for you.
This variable was declared in the global scope,
and I was able to access this inside a function directly.
If I try to declare the same number here as 20,
and if I try to print
demo number here, what should be the output?
Twenty and 10.
Let's see how this happened.
On line number 8, we called the printNumber function,
which was trying to print
the demo number that was declared inside the functional.
Now, this function was
declaring a variable called as demo number,
which was coinciding with the global variable.
But since we have written it inside a function,
this variable is redeclared
and reassigned inside this function,
and it will be utilized as per the declaration.
Now, how this worked out is
this became a functional scoped variable,
and this is only accessible within this function.
Now, as soon as I move out of this functional scope,
I fall into the global scope, and hence,
I'm able to access the demo number with value
10 which was declared on the global scope.
Now, let's try to see
how we can use the block scoped variables.
Let me declare a function called as demo printer and say,
let me try to declare a variable called as number as 10,
and then say consoled.log, the number.
As soon as I try to call the demoPrinter function,
it will print me the number 10 because this is
the part of the demoPrinter function.
Now, let's do one more thing.
If I declare the demoPrinter here as 20,
this will be again working similar to var.
In this case, we were trying to declare
the number variable 10 inside and then 20.
It works similar like 20 inside
the demoPrinter and 10 from the global scope.
Now let's try to see what
makes the block variable works differently.
As soon as I change this to var,
I'm still getting the same output.
The only thing that I would want to do is
demonstrate how this actually gets hoisted.
As soon as I try to declare
the variable after the console statement,
it will start printing undefined in case of var.
Why? Because the logic of hoisting comes into picture,
all the function declaration and
variable declarations are hoisted inside the scope.
In this case, what will happen
exactly is this specific statement
will go to the top and lie here without assignment,
which means the variable is declared,
but it will only get assigned as soon as
this specific assignment incurs.
In this way, the hoisting works
and you'll get a undefined sense.
This variable was declared here,
but it was not defined,
so hence you're getting undefined.
Now, let's see block scope variables get hoisted.
As soon as I make this as a let variable inside
this global scope and try to run it,
this shows an error that I'm trying to access
the variable number before initialization,
which means there's no concept of hoisting here,
but as soon as it incurs the number to get printed
and the declaration and definition
is beyond the printout or the utilization,
it will throw a reference here.
Let's talk about the best practices.
Using const by default is best when we're
trying to use the variables
that don't need to be reassigned.
This makes your code more
predictable and easier to understand.
Whenever you're trying to declare a specific data type,
which is array or object,
that can be specifically const many a
times if you do not want to
change the reference variable,
but you want to make changes inside
those arrays and objects.
Let should only be used when
a variable needs to be reassigned.
This is especially useful in loops or
conditions where the value of variable might change.
Try avoiding usage of
var in modern JavaScript as much as possible.
It's prone to issues due to
its function scope and hoisting behavior.
Stick with lets and const
for cleaner and more reliable code.
Use meaningful variable names that clearly
describe the value or purpose of the variable.
This improves the readability of your code and makes it
easier for others to understand what the code is doing.
That's all we have for this video.
Thank you and meet you in the next video.