Declaring Variables without Var, Let, Const - What Would Happen?

Summary

In 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

00:00

🌐 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.

05:02

📚 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.

10:02

🛡️ 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.

Keywords

💡Global Object

The Global Object in JavaScript is a fundamental concept referring to the root object in the execution context of JavaScript code. In a web browser, this is typically the 'window' object. The video script discusses how declaring variables without 'var', 'let', or 'const' attaches those variables to the Global Object, which can lead to unintended behavior or conflicts with existing properties. For instance, the script mentions that in a browser environment, the Global Object contains properties like 'alert', 'document', and 'scrollX', which are essential for browser functionality.

💡Variable Declaration

Variable declaration in JavaScript is the process of defining a variable with a specific keyword such as 'var', 'let', or 'const'. The video script emphasizes the importance of using these keywords to prevent variables from being attached to the Global Object, which could lead to overwriting existing properties or creating new ones that might conflict with the application's intended behavior. The script gives an example of declaring a variable with 'const' within a function to keep it scoped to that function rather than the Global Object.

💡Global Abatement

Global Abatement is a strategy discussed in the script to mitigate the risk of polluting the Global Object with unnecessary properties. It involves creating a custom global object, separate from the native Global Object (like 'window'), to store application-wide variables and functions. This approach helps in maintaining a clean and organized codebase, preventing conflicts with native or third-party library functionalities. The script suggests using an empty object like 'const myGlobals = {}' and attaching necessary properties to it.

💡Call Stack

The Call Stack is a data structure in JavaScript that manages the execution of code by keeping track of function calls. It operates on a Last In, First Out (LIFO) principle, where the most recent function call is the first to be completed. The video script explains that the Call Stack is used to visualize the execution context, including the Global Execution Context and Function Execution Contexts. Variables declared with 'var', 'let', or 'const' exist within the function execution context, whereas undeclared variables are attached to the Global Object.

💡Scope

Scope in JavaScript refers to the accessibility of variables and functions within different parts of the code. The video script touches on how variables declared with 'var', 'let', or 'const' have their scope determined by the execution context they are created in. Variables declared globally (without 'var', 'let', or 'const') have a global scope, meaning they are accessible throughout the entire codebase, which can lead to potential conflicts and unintended side effects.

💡Resiliency

Resiliency in the context of the video script refers to the robustness and flexibility of a program, particularly its ability to handle changes without breaking. The script mentions that adding or modifying properties on the Global Object can weaken the resiliency of a program by making it more prone to conflicts and harder to maintain. Using proper variable declaration and global abatement can enhance resiliency by avoiding such conflicts.

💡Strict Mode

Strict Mode is a feature in JavaScript that alters the runtime's behavior in specific ways to help prevent common coding mistakes. The video script explains that one of the benefits of using Strict Mode is that it prevents the accidental creation of global variables, thus avoiding potential conflicts with the Global Object. By declaring 'use strict' at the beginning of a script or function, developers can enforce stricter parsing and error handling, leading to more secure and predictable code execution.

💡Naming Conventions

Naming Conventions are a set of rules for choosing the names of variables, functions, and other identifiers in code. The video script highlights the importance of using naming conventions to avoid conflicts with existing properties on the Global Object or with third-party libraries. By adhering to a consistent naming scheme, developers can reduce the risk of inadvertently overwriting essential properties or creating variables that conflict with those from external libraries.

💡Runtime Environment

The Runtime Environment in JavaScript refers to the context in which the code is executed, such as a web browser or a server using Node.js. The video script discusses how the Global Object varies depending on the runtime environment, with 'window' being the Global Object in browsers and a different object in Node.js. Understanding the runtime environment is crucial for managing how variables and functions interact with the Global Object and its properties.

💡Function Execution Context

A Function Execution Context in JavaScript is created when a function is called. It includes the function's scope chain and variable environment. The video script explains that when a function is executed, a stack frame for that function is pushed onto the Call Stack, and any variables declared within the function using 'var', 'let', or 'const' are scoped to that function's execution context. This is contrasted with global variables, which are attached to the Global Object and can have broader implications on the application's behavior.

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