undefined vs not defined in JS 🤔 | Namaste JavaScript Ep. 6

Summary

This JavaScript tutorial delves into the concept of 'undefined', a unique keyword in JavaScript that signifies a variable has been declared but not yet assigned a value. The script explains how JavaScript's execution context pre-allocates memory for variables, even before code execution, setting them to 'undefined' as a placeholder. It contrasts 'undefined' with 'not defined', emphasizing the importance of not manually setting variables to 'undefined'. The video also touches on JavaScript's flexibility as a loosely typed language, allowing variables to hold different data types, and warns against assigning 'undefined' to variables, suggesting it should be reserved for its original purpose of indicating uninitialized variables.

Takeaways

• 🌐 JavaScript's 'undefined' is a unique keyword not found in other languages, and it plays a significant role in how JavaScript manages memory and execution.
• 💾 Before any code is executed, JavaScript allocates memory for variables and functions, assigning them a 'undefined' placeholder to indicate no value has been set yet.
• 🔍 Using the debugger, one can observe that variables hold 'undefined' before any values are assigned to them, showcasing JavaScript's pre-allocation of memory.
• 🚫 Attempting to access a variable that has not been declared results in 'not defined', which is different from 'undefined', indicating no memory has been allocated for it.
• 🔄 JavaScript is a loosely typed language, allowing variables to hold any data type, which contrasts with strictly typed languages that enforce data types for variables.
• 🛠️ JavaScript performs type coercion behind the scenes, allowing flexibility in assigning different data types to the same variable without explicit type declarations.
• ❌ It's considered bad practice to assign 'undefined' to a variable as it can lead to inconsistencies and confusion, as 'undefined' is meant to indicate a lack of assignment.
• 📚 Understanding the difference between 'undefined' and 'not defined' is crucial for debugging and writing clear JavaScript code.
• 🔑 The script emphasizes the importance of proper variable initialization and the avoidance of assigning 'undefined' to variables unnecessarily.
• 🎯 The video concludes with a teaser for the next topic, 'scope chain', which is a critical concept in JavaScript and a common interview question.

Q & A

What is the significance of the 'undefined' keyword in JavaScript?

In JavaScript, 'undefined' is a special keyword that signifies a variable has been declared but not yet assigned a value. It is a placeholder value that the JavaScript engine assigns to variables during the memory allocation phase before any code is executed.

How does JavaScript's memory allocation for variables work?

JavaScript allocates memory to variables during the creation of the global execution context, even before any code is executed. This allocation includes assigning the 'undefined' value as a placeholder until the variable is explicitly assigned a value.

What is the difference between 'undefined' and 'not defined' in JavaScript?

In JavaScript, 'undefined' refers to a declared variable that has not been assigned a value yet, whereas 'not defined' means the variable has not been declared at all. 'Undefined' takes up memory space with a placeholder value, while 'not defined' variables do not exist in the scope.

Why is it considered a bad practice to assign 'undefined' to a variable?

Assigning 'undefined' to a variable is considered bad practice because 'undefined' is a special value used by the JavaScript engine to indicate that a variable has not been assigned a value. Overriding this with an assignment can lead to confusion and inconsistencies in the code.

What does it mean for JavaScript to be a loosely typed language?

Being a loosely typed language means that JavaScript does not require variables to be explicitly typed. A single variable can hold values of different types throughout its lifecycle without needing a type declaration.

Can you provide an example of how JavaScript handles type coercion?

JavaScript handles type coercion automatically when different data types are used in expressions. For example, if a string and a number are used in an arithmetic operation, JavaScript will convert the string to a number to perform the calculation.

What is the purpose of using 'debugger' in JavaScript?

The 'debugger' statement in JavaScript is used to initiate a debugging session at that point in the code. When the code execution reaches this statement, it pauses, allowing developers to inspect variables and step through the code to debug issues.

How can you check if a variable is 'undefined' in JavaScript?

You can check if a variable is 'undefined' in JavaScript using the strict equality operator '==='. For example, 'if (a === undefined)' will evaluate to true if the variable 'a' has not been assigned a value.

What is the scope chain, and why is it important in JavaScript?

The scope chain is a data structure in JavaScript that keeps track of all the variables that are currently in the scope of the currently executing code. It is important for understanding how variables are looked up and accessed in different scopes, which is crucial for writing maintainable and efficient code.

Why is the scope chain a hot interview topic for JavaScript developers?

The scope chain is a hot interview topic because it tests a candidate's understanding of how JavaScript manages variable scope and execution contexts. Mastery of scope chain concepts is essential for writing efficient and bug-free JavaScript code.

Outlines

00:00

💡 Understanding 'undefined' in JavaScript

This paragraph explains the concept of 'undefined' in JavaScript, which is a unique keyword not found in other programming languages. It highlights how JavaScript allocates memory for variables and functions before executing any code, resulting in variables initially holding the 'undefined' value. The paragraph uses the debugger tool to illustrate that memory is reserved for a variable 'a' before it is assigned a value of 7. It emphasizes the difference between 'undefined' and 'not defined', where 'undefined' is a placeholder in memory indicating no value has been assigned yet, whereas 'not defined' means no memory has been allocated. The paragraph also clarifies that 'undefined' is not equivalent to an empty value or no memory allocation.

05:00

🔑 JavaScript's Loose Typing and Variable Flexibility

The second paragraph delves into JavaScript's loosely typed nature, allowing variables to hold different data types without being restricted to a specific one. It demonstrates how a variable can successively hold a string, a number, and then revert to a string, showcasing JavaScript's flexibility. The speaker advises against deliberately assigning the 'undefined' value to a variable, as it is meant to serve as a placeholder indicating that no value has been assigned. The paragraph concludes with a caution against misusing 'undefined' and encourages letting it serve its intended purpose as an indicator of unassigned variables.

10:01

📚 Upcoming Topic: JavaScript Scope Chain

The final paragraph briefly introduces the upcoming topic of the scope chain in JavaScript, hinting at its importance and relevance in interviews. It encourages viewers to watch the next video for a deeper understanding of this concept. The speaker also requests viewers to like the video and thanks them for watching, signing off with a 'namaste'.

Keywords

💡undefined

In JavaScript, 'undefined' is a special keyword that represents the absence of a value. It is used to indicate that a variable has been declared but not yet assigned a value. In the script, the speaker explains that JavaScript allocates memory for variables before any code is executed, and during this allocation, variables are initialized to 'undefined'. This is different from 'not defined', where no memory has been allocated for the variable. The script uses the debugger to illustrate that 'a' is 'undefined' before the line 'a = 7' is executed.

💡global execution context

The 'global execution context' refers to the environment in which JavaScript code is executed. It is a phase during which the JavaScript engine sets up the global scope, hoists declarations, and initializes built-in objects. The script mentions that JavaScript creates a global execution context and allocates memory to all variables and functions before executing any code, which is when 'undefined' comes into play.

💡memory allocation

Memory allocation in the context of the script refers to the process by which JavaScript reserves space in memory for variables and functions. The speaker uses the debugger to demonstrate that memory is allocated to variable 'a' before it is assigned a value, resulting in it being 'undefined'. This allocation is a fundamental aspect of how JavaScript manages variables.

💡loose typing

Loose typing, also known as weak typing, means that a programming language does not enforce strict data types for variables. In JavaScript, this allows a single variable to hold different data types throughout its lifecycle. The script explains that JavaScript is a loosely typed language, which is why a variable like 'a' can hold 'undefined', a number, or a string, depending on how it is assigned.

💡hoisting

Hoisting is a JavaScript mechanism where variable and function declarations are moved to the top of their containing scope during the compilation phase. The script touches on hoisting when discussing how memory is allocated to variables before any code is executed, which is part of the JavaScript engine's preparation of the global execution context.

💡not defined

'Not defined' in JavaScript refers to a variable that has not been declared at all, hence no memory has been allocated for it. This is contrasted with 'undefined', which is a value that indicates a variable has been declared but not yet assigned. The script uses the example of trying to access a variable 'x' that has not been declared to illustrate 'not defined'.

💡debugger

The 'debugger' statement in JavaScript is used to initiate a debugging session at a specified point in the code. In the script, the speaker uses 'debugger' to pause execution before the line 'a = 7' is executed, allowing the demonstration of how variables are 'undefined' before they are assigned a value.

💡strict equality

Strict equality (===) is an operator in JavaScript that checks if two values are equal and of the same type. The script uses '===' to check if a variable 'a' is strictly equal to 'undefined', which is a way to explicitly test for the 'undefined' value.

💡variable assignment

Variable assignment in JavaScript involves assigning a value to a variable. The script explains that once a variable like 'a' is assigned a value (e.g., 'a = 7'), the 'undefined' value is replaced with the assigned value. This highlights how variables can change their values over time in JavaScript.

💡scope chain

Although not directly explained in the script, the scope chain is a concept that is mentioned as a topic for a future video. The scope chain is a list of scopes that is searched when looking up variables and functions in JavaScript. It is related to how variables are accessed and managed within different scopes (global, local, block).

Highlights

Undefined is a unique keyword in JavaScript, signifying a variable has been declared but not yet assigned a value.

JavaScript's execution context creates memory allocation for variables and functions before any code is executed.

The debugger can be used to inspect the memory allocation and the 'undefined' state of a variable before it's assigned a value.

Variables in JavaScript are initialized with 'undefined' as a placeholder before they are assigned an actual value.

Accessing a variable that has not been declared results in a 'not defined' error, as opposed to 'undefined' which indicates declared but not assigned.

The difference between 'undefined' and 'not defined' is clarified, with 'undefined' indicating memory allocation and 'not defined' indicating no memory allocation.

JavaScript is a loosely typed language, allowing variables to hold different data types throughout their lifecycle.

Loosely typed languages provide flexibility but also require careful handling of data types to avoid unexpected behavior.

It's demonstrated that a variable can hold different types, such as numbers and strings, at different points in the code.

Assigning 'undefined' to a variable is discouraged as it can lead to inconsistencies and is not a recommended practice.

The 'undefined' keyword should be reserved for its original purpose of indicating whether a variable has been assigned a value.

The video concludes with a teaser for the next topic, the scope chain, which is an important concept and a common interview question.

The presenter encourages viewers to give the video a thumbs up and watch the next video on the scope chain.

The video ends with a musical note, signaling the conclusion and a friendly farewell.

Transcripts

undefined is a very special keyword in

javascript

and it is not there in other languages

it has a lot to do with

how javascript code is executed so as we

have studied in the previous videos also

that javascript code is executed in a

different way

it creates a global execution context

and allocates memory to

all the variables and functions even

before a single line of code is executed

remember this so undefined comes into

picture

here only let us see with the code also

so suppose we created a variable

a is equals to 7 right so even before

this line of code is executed

right javascript has tried to allocate

memory to this

a right memory space to a even before

this line of code is run

okay let me show you with the help of

debugger so i am putting the debugger

right before this line is executed okay

so let us see an interesting thing so if

we refresh the page

this a this line hasn't been executed

yet

right but javascript has already

allocated memory to this

a okay so we have already reserved

memory for a now

okay so if we see here is the reserved

memory

so right now a is undefined so at this

point if you try to

in the console if you try to log what a

is see i have hold the program

i have held the program like i put a

debugger right so i have hold the

program at that state itself

so if you try to log a right now it is

undefined

so why this happened okay so when it

allocates memory to all the variables

and functions

to the variables it tries to put a

placeholder right it is like a

placeholder which is

placed in the memory okay that special

keyword is

undefined so if we try to lock this

so you get undefined in it so undefined

is

like taking memory it is it is very

different than not defined okay

so suppose if i try to access something

else right so suppose if i

try to do a console log of x over here

okay

so which we have not allocated memory to

okay if we run this code if we run this

code we have not allocated any memory to

x right

so what will happen if we try to find

x you won't find anything that is known

as

not defined but we have allocated memory

to

a if you try to console log a

we can find that so even before i put

this where

a is equals to 7 right so suppose if i

try to log a

over here even before putting 7 to a

i am trying to log this a so what

happens is

what happens is let me just run

it so in the console you will find that

we have printed undefined this a was

printed undefined

this is the value with javascript engine

allocated to a

while creating the memory okay but once

this line has been executed

after this line you will see that the

value of a has changed to

7 okay let me just remove that x if you

try to log here see it was undefined

before

this undefined was coming from the place

just because javascript engine allocated

undefined that special placeholder

to a okay not like not defined

not defined in something which has not

been allocated memory

okay so this is the difference between

undefined

and not defined okay we'll see something

more

so remember undefined is not equal to

empty some people think that

undefined means empty like it is not

taking up any memory space or something

no it is a special keyword it takes up

its own memory

but you can assume it to be like a

placeholder which is kept for the time

being

until the variable is assigned some

other value okay

till that point it will store this

placeholder known as undefined

okay and one more thing i would show you

right now

is suppose if i do um suppose this is

undefined right

so if i never put any value inside a

right like i just declared that okay

where a

and i never put any value to it so it

will throughout our whole program

have this value undefined that

placeholder kept inside a

and to show you that it is something in

javascript

we can also do something like this okay

uh so suppose

if i have my uh if

a is equal equal equal to undefined so

equal equal equal to you might not be

aware of the syntax

but see it is just checking whether two

things are equal or not

and strictly checking we will talk about

it later in the videos okay that will be

interesting

but for now just assume that it is

checking two things are equal or not

so if we try to see that a is equal

equal to undefined

okay that undefined is a thing or not so

if we try to do a console log of

um over here let us just log it

a is undefined okay

and if we try to do something like

else we just console log

a um string a is

not undefined okay so if we try to

check like this what you will see see

a is undefined okay a is undefined it is

like

it goes into this if it meets this

condition

it go inside this if block and suppose

if i put some value in a

okay a is equals to 10 meanwhile so it

will say

that a is not undefined it has some

value in it okay

now the a is replaced that undefined is

replaced by

10. interesting right now when we are

talking about

undefined let me tell you a little bit

more about javascript and variables in

it okay

so you know javascript is a loosely

typed language

so loosely typed means that it does not

attaches

its variables to any specific data type

so suppose if i created

a and put in string in it so later on in

the program i can also put numbers in it

i can also put boolean in it

it is like very javascript is very

flexible in this case

right it is loosely typed that is known

as loosely type language

if it was strict type then just like

other languages just like c

or c plus plus if you assign a variable

that

if it is a string a so it will only hold

string

it won't hold numbers or booleans or

anything else

but it is not the case in javascript you

can put anything

and everything inside this variable okay

so

if i do a var a for the time being

it can like just hold undefined

okay if i do a console log over here it

will just hold

undefined okay and if i later on put a

is equals to 10 here

so and try to log it again so it will it

can hold numbers also

and it can also hold a string again

okay so this is a perfectly valid

javascript code okay

um i mistyped it

no issues so it is a perfectly fine

javascript code

okay and if i log this a once again

okay so see what the output will be

undefined

so until unless any value is specified

there is a placeholder undefined

when you have put in 10 so it is 10 now

and when you put in string hello world

it is hello world now

ok so javascript is very flexible in

this case

that is why javascript is known as

loosely type language

loosely typed language are also known as

weekly typed language

weekly type language so it does not mean

that it is weak in any sense

it does not have any deficiency or

something it is not weak at all

in fact i feel that the language is more

stronger

okay because it is handling a lot of

stuff behind the scenes okay you give it

string it handles automatically behind

the scenes it okay it's a string

you give it a number it takes it and

puts number in it and manages all these

things behind it so it is not weak at

all for sure

in fact i feel that it is more flexible

and beautiful

in this case okay so and it has to do a

lot of things

while coercion also okay when you change

one type to another type

it is doing a lot of stuff we might

cover that in the later videos

for now just understand that javascript

is a loosely typed language

and some people also call it as a weekly

type language okay

so let me tell you an important thing

never do this mistake okay

never do this mistake of doing something

like this

a is equal to undefined what does that

mean

see undefined is a value it is a keyword

in javascript

and it is totally possible to assign and

define to any variable

but it is kind of a mistake and it is

a bad thing to do in javascript okay you

should not do it

because see first of all what is

undefined so undefined is like a

placeholder which is

kept inside the variables

and it states that in the whole code

that variable

was not assigned anything right so it is

meant for a specific purpose

so it is not generally a good way to put

undefined like this

though it is a totally okay to do this

okay if you just

log it once again if you log a once

again you will see that okay you

you can put undefined once again but it

can lead to a lot of inconsistencies

so it is not a good practice to do this

i won't say it's a mistake

but it's not a good practice or a

healthy practice to

put undefined into any variable so don't

do this mistake right

let us just keep undefined for its own

purpose

right undefined was meant to uh

know okay that whether that variable

was assigned anything or not okay so let

it be

used for that space only and for the js

community

let us not ever put undefined into any

variable

okay so it's just a request that's all

for

now in the next video we'll be covering

the scope chain it is a very beautiful

topic i would say

and it is very hot interview topic also

okay in the interview

a lot of people ask about what is a

scope chain so definitely watch that

video

so before moving on to that video just

like always

give this video a thumbs up and thank

you for watching namaste javascript

[Music]

you