Declaring Variables without Var, Let, Const - What Would Happen?
Summary
TLDRIn this video, the speaker explores the consequences of declaring variables in JavaScript without using 'var', 'let', or 'const'. They explain that such variables are attached to the global object, which can lead to accidental overwrites of existing properties and affect the browser's default behavior. The speaker suggests using 'var', 'let', or 'const', creating a custom global object, or employing strict mode to avoid these issues. Additionally, they discuss the global execution context and how variables are managed within it, emphasizing the importance of understanding the call stack and function scope.
Takeaways
- đ In JavaScript, variables declared without `var`, `let`, or `const` are attached to the global object, which can lead to unintended behavior.
- đ ïž The global object in a browser environment is `window`, and modifying its properties can disrupt the browser's default functionality.
- đ« Overwriting properties of the global object can weaken the resiliency of a program, making it harder to manage and extend.
- đ To avoid conflicts, it's recommended to use `var`, `let`, or `const` for variable declarations or to create a custom global object for application-wide properties.
- đ Understanding the global object and its properties is crucial for preventing accidental overwrites and ensuring compatibility with third-party libraries.
- đ The `this` keyword in JavaScript refers to the global object, providing a way to access its properties and methods.
- đ Using strict mode in JavaScript can prevent the accidental creation of global variables and enforce more rigorous coding practices.
- đ The call stack in JavaScript is a data structure that manages the execution of functions and helps visualize where variables are scoped.
- đ Functions in JavaScript are both executable code and objects, with the object part containing properties that can be accessed and manipulated.
- đŹ Tools like `console.dir` can be used to inspect the object properties of functions, including the global object.
Q & A
What happens if you declare a variable without using var, let, or const in JavaScript?
-If you declare a variable without using var, let, or const, the variable gets placed onto the global object, which can lead to overwriting existing properties or creating new ones, potentially interfering with the runtime environment's native functionalities.
What is the global object in JavaScript?
-The global object is an object that contains data and functionality allowing the runtime environment, such as a browser or Node.js, to perform various processes. In a browser, this is typically the 'window' object.
Why is it bad to overwrite properties of the global object?
-Overwriting properties of the global object can change the default behavior of the runtime environment, leading to unexpected results and potentially conflicting with third-party libraries or future code.
What is global abatement and how does it help in managing global variables?
-Global abatement is a process where you create a custom global object with properties and functionality that are accessible throughout your application. This prevents overwriting or creating new properties on the native global object.
How can you prevent accidentally writing variables onto the global object?
-To prevent accidentally writing variables onto the global object, always use a variable declaration keyword (var, let, or const), use global abatement, or enable strict mode which prevents variable declarations without a keyword.
What is the call stack in JavaScript and how does it relate to variable scope?
-The call stack is a data structure that follows a last-in, first-out rule and is used to manage the execution of functions. Variables declared with var, let, or const exist within the function portion of the global execution context or the function's scope.
How does strict mode prevent variables from being attached to the global object?
-Strict mode prevents variables from being attached to the global object by throwing an error when a variable is declared without a keyword, thus enforcing the use of var, let, or const.
What are the different ways to access the global object in JavaScript?
-You can access the global object in JavaScript using the 'this' keyword, by directly referencing 'window' in a browser environment, using 'global' in Node.js, or by inspecting the 'global' property in the 'scopes' tab of a function's object representation in the console.
Why is it important to understand the difference between function execution context and the global execution context?
-Understanding the difference between function execution context and the global execution context helps in managing variable scope and avoiding conflicts or unintended side effects when declaring variables.
How can you ensure that your variables do not conflict with existing properties on the global object?
-To ensure that your variables do not conflict with existing properties, use naming conventions that avoid common property names, always declare variables with var, let, or const, and consider using a custom global object for your application's global variables.
Outlines
đ Understanding Global Object in JavaScript
The paragraph discusses the implications of declaring a variable in JavaScript without using 'var', 'let', or 'const'. It explains that such variables are attached to the global object, which can vary depending on the runtime environment (browser or Node.js). In browsers, the global object is 'window', and adding or modifying properties on it can disrupt the browser's default functionality. The concept of global abatement is introduced as a strategy to mitigate this risk by creating a custom global object to hold application-wide properties, ensuring that the native functionalities of the runtime environment are not inadvertently altered.
đ Exploring JavaScript's Call Stack and Variable Scope
This section delves into the JavaScript runtime's call stack, illustrating how it operates on a last-in, first-out principle. It explains that when running JavaScript, code executes within the global execution context, which consists of a function part and an object part, the latter being the global object ('window' in browsers). Variables declared with 'var', 'let', or 'const' exist within the function part of the global execution context, whereas undeclared variables are attached to the global object. The paragraph also touches on the importance of using strict mode to prevent accidental global variable declarations and provides methods to inspect the global object.
đĄïž Preventing Global Object Pollution in JavaScript
The final paragraph focuses on strategies to prevent accidental writing to the global object, which can lead to conflicts and reduced code resilience. It suggests always using a variable declaration keyword, employing global abatement by creating a custom global object, and utilizing strict mode to enforce good practices. The paragraph also outlines various methods to inspect the global object, such as using 'this', 'window', 'global', or the 'console.dir' method in the browser's developer tools. It concludes with an invitation for viewers to engage with the content by subscribing, liking, and commenting with questions.
Mindmap
Keywords
đĄGlobal Object
đĄVariable Declaration
đĄGlobal Abatement
đĄCall Stack
đĄScope
đĄResiliency
đĄStrict Mode
đĄNaming Conventions
đĄRuntime Environment
đĄFunction Execution Context
Highlights
Discussing the consequences of declaring a variable without using var, let, or const in JavaScript.
Exploring the concept of the global object in JavaScript and its role in the runtime environment.
The global object in browsers is 'window', which contains properties for browser functionality.
Overwriting properties of the global object can change the default browser behavior.
Global abatement as a strategy to create a custom global object and avoid conflicts.
Using strict mode to prevent accidental global variable declarations.
The call stack in JavaScript and its function in managing the execution context.
Variables declared with var, let, or const exist within the function scope, not on the global object.
How to prevent variables from being attached to the global object when not declared with var, let, or const.
The importance of naming conventions to avoid conflicts with existing global object properties.
Different ways to inspect the global object in a browser environment.
Using 'this', 'window', and 'globalThis' to access the global object in JavaScript.
The 'console.dir' method to explore the object portion of a function for understanding closures and the global object.
Encouraging viewers to subscribe, like, and comment for further engagement and questions.
Transcripts
hey everyone how's it going today we're
going to talk about what would happen
if you declared a variable without using
var let or const for example i'm here in
the google chrome
dev tools and what if i just said
somewhere equals true
without using constellat or var
in front of it right so i'm just going
to save that variable as is
what just happened let's find out
okay so let's jump into this what would
happen if i did something like this
in production code why is this bad well
the reason why
is probably not what you might think and
it is because
in javascript there exists something
called the global object
now depending on which javascript
runtime you are currently running your
code in that can either be
a browser or node so kind of think of it
as like front-end back-end so depending
on where you are running your code at
any given moment
there's something called the global
object and what the global object is
is an object of data and all this data
basically contains functionality that
allows
that runtime environment to do
all of the various processes that it
needs to do in the browser
the global object is something called
window
and there are a bunch of properties on
this window
object that allow the browser window
the one that we're currently using to do
a whole bunch of different stuff
so for example in this one we have
something called alert
if we were to use that it'll show an
alert pop-up modal
we have document that'll give us access
to the
actual document object model what we see
in the browser viewport over here on the
left
we have things like scroll x and scroll
y
those give us access to the various
functionalities of how the scroll bars
in your viewport work and where the
cursor is at any given moment so let's
jump back
to here right what if we were to declare
a variable without
var let or const what will happen is
that variable gets placed onto the
global object
now that might be fine it might work out
okay
but what if we were to do something like
scroll
x equals 100
000 right then we are actually
overwriting a property that already
exists
on the global object on window and
what's gonna happen
if we were to accidentally overwrite one
of those properties
is that what would happen is that the
default what we would call the user
agent
functionality that is all the stuff that
the browser has to do
that default behavior would actually
change so this could potentially be a
really bad thing
if we are running a program and it
actually is messing with
the runtime environment's native
functionalities
now aside from actually changing the
functionality of the runtime environment
creating new properties on the window
object or potentially overwriting them
will actually weaken what's called the
resiliency of your program in this case
that would be the ease of deleting and
creating new functionality
now one way to circumvent this is a
process called global abatement and what
that is
is basically if you're familiar with the
concept of state
we are creating some sort of global
object that's not
the window object not the not the global
object but we're creating our own global
object
with properties and functionality that
will be available
throughout our entire application our
entire program
so what we could do is i could do
something like
const my globals and that is just going
to be an empty object
and then anytime i have some
functionality which i need
access to throughout my entire program i
can just place it on my global so i
could do
something like my globals dot sumvar
equals true something like that and then
that variable
would be available to me throughout my
entire program via the my global's
global object also making sure that we
are not
overwriting or writing new properties
onto the
the global object the window object in
this case means that we are also safe
from potentially writing functionality
that could conflict with other
third-party libraries which we are using
in our program
now why is that the case because we
could potentially have
some third-party vendor logic which
exists
sort of at the same scope level as
our global object so we want to make
sure that
this is where naming conventions come
into because we want to make sure
that none of these names conflict with
names of
functionality that already exists now
something that's really important to
understand
is okay if we are creating properties
without
var let or const and they get put onto
the window or the global object what
happens when we create variables with
var let or const where do those actually
end up
now in order to understand this we have
to take a look at a feature of the
javascript runtime called the call stack
what the call stack is is it is a data
structure
which follows a last in first out rule
meaning
it's like a stack of pancakes so the
last
stack frame that gets put onto the top
of the stack
will be the first one that has to come
off when we want to take one off
so it's like a stack of plates or
pancakes we have to in order to reach
the bottom ones we have to take the top
ones off
first anytime we are running code
anytime we are running
javascript we are running code in
the global execution context so we
visualize that by placing a stack frame
representing the global context
onto the call stack so that's going to
be our first our sort of base
layer stack frame so what is the global
context the global execution context is
where we are
executing our code by default when we
are running code in javascript and this
kind of has two parts
and the reason why is because what we
use the call stack
for is to visualize the execution of
functions anytime we run a function so
if i had
you know a function
say name right we have a function say
name
and it says it will return
chris let's say okay that's what this
function does
so that when we call say name
what we're going to do is we're going to
place a stack frame onto the call stack
for say name and then
when we are running the code of say name
in other words when we are
when we are evaluating what this
function's
definition actually does all of the code
that's happening
within the scope of this function is
considered to be running
within that stack frame now something
else that we have to understand
about javascript is that when we are
running functions
we have to know that functions are sort
of like a function
and an object so it's kind of two things
so anytime we're running a function we
have to understand that a function is
two parts
a function has both the functionality of
the function itself but it also has
an associated object and so when we're
talking about
this global execution context it's sort
of two parts right there's a function
part of it
and there's also an object part of it
the object part of it
is the global object in other words if
we're in the browser
it's going to be the window
and the function bit of it is actually
where any variables are going to exist
if we were to create them using const
let or var so we have our object portion
we are going to have our function
portion
so if we were to use var
let or const to create a variable
those variables will exist within sort
of that function portion
that that temporary portion of the
running
of the global execution context whereas
if we were to declare them
without var let or const they'll be
placed onto
the window object and a sort of a
similar thing is true
whenever we run a function so let's say
again that we're going to run a function
this function is going to be let's let's
just make it say
create variable
and what this function does is it's
going to create a variable
so i'm going to say const my
variable
equals true
so when we actually run this function
create
variable we're going to place we're
going to push
a stack frame onto the call stack for
create
variable and inside of the running
of that function execution context that
that sort of top level stack frame on
the call stack when we are running that
code
the code inside of that function's scope
what's going to happen to that variable
that we create inside of there
well because we are creating it with
const
it is going to be created within that
function
that function portion of this function
but we know
that if we were to write this variable
without
const actually the first thing that it
would do
is it would look outside of the function
to see
whether there is already something
called
myvariable inside of the global
execution context
if it is it will overwrite it if it's
not
then it will go one level up it'll try
to look on
again the window so regardless of how
many
function execution contexts deep you are
eventually still going to try to write
that variable onto
the global object in this case the
window always something we have to be
careful of
so some ways that we can prevent
ourselves from accidentally potentially
writing
variables onto the global object
way number one always use a variable
declaration keyword so var let or const
way number two use that process of
global abatement
where we created another global object
which would be
accessible throughout the entirety of
our app and then way number three is to
actually prevent ourselves from writing
that functionality in the first place
we can do that using something called
strict mode so one of the things that
strict mode will do
is it will actually prevent us from
writing a variable
without using a variable declaration
keyword by the way
all this talk of the global object if
you ever want to see
what is actually in the global object
there are a couple different ways that
you can do that way number one
we can look at what this is so the
reserved keyword this
in javascript will by default
point to the global object so that's one
way we could
type that in in our dev tools take a
look pop this open
you can see all of the data all of the
functionality
that exists for the global object for
the browser
another way we can call that
runtimes global object by name so either
window
or the node global object which
off the top of my head not sure but we
can look at here in the browser we can
look at window we can just
say do window directly another way
global this
global this by default is going to point
to
this which points to the global object
and then the fourth way is a little bit
weird if you're familiar with the
concept of closure
this should look familiar to you if we
have a function let's say i have a
function
say name and what this function will do
is it will return chris
now we know from before that functions
are both functions and objects so what i
want to do is actually see the
object portion of this function object
combo
and i'm going to do that using
a special console method called console
der that stands for directory so that
will allow us to see
the object portion of a function object
combo
so i'm going to pass in my function here
it was called
say name and that will allow me to see
all of the object
methods and functionality and data
associated
with say name in this case
it doesn't have anything except the
default stuff but
we can see down here that there's going
to be something called scopes
and again if you're familiar with
closure you'll see your closures in
the scopes tab here but you'll also see
something called global and that is
going to point sort of
one level down to the global object
so those are sort of the four ways that
we can look at the global object
at least in the browser all right i'm
going to cap it there for today
if you have found this useful helpful
informative
if you found value in this please feel
free to give me a subscribe down below
like this and leave me a comment if you
have a question i'll be sure to answer
that as soon as i can
thanks for watching have a good one
you
Voir Plus de Vidéos Connexes
Javascript Interview Questions ( Var, Let and Const ) - Hoisting, Scoping, Shadowing and more
local and global Scope in JavaScript | JavaScript Tutorial in Hindi #88
Curso Javascript - #03 const vs let vs var
Immediately Invoked Function Expressions (IIFE) | JavaScript đ„ | Lecture 127
Cara Menentukan Variabel INDEPENDEN dan DEPENDEN Penelitian
Learn Closures In 7 Minutes
5.0 / 5 (0 votes)