What is the major difference between JavaScript declared and undeclared variables, since the delete operator doesn't work on declared variables?
var y = 43; // declares a new variable
x = 42;
delete x; // returns true (x is a property of the global object and can be deleted)
delete y; // returns false (delete doesn't affect variable names)
Why does this happen? Variables declared globally are also the properties of the window object, so why can't it be deleted?
Declared variables are created before any code is executed. Undeclared variables do not exist until the code assigning to them is executed. Declared variables are a non-configurable property of their execution context (function or global). Undeclared variables are configurable (e.g. can be deleted).
Repeated and Omitted Declarations If you assign a value to a variable that you have not declared with var , JavaScript implicitly declares that variable for you. Note, however, that implicitly declared variables are always created as global variables, even if they are used within the body of a function.
Undeclared − It occurs when a variable which hasn't been declared using var, let or const is being tried to access. Undefined − It occurs when a variable has been declared using var, let or const but isn't given a value.
We can use strict mode which is a new feature in ECMAScript 5 that allows you to place a program, or a function, in a “strict” operating context. It will throw Reference error : x is not defined, when we assign a value to a variable without declaring it. Example 4: Javascript.
The mechanism for storing and accessing them is the same, but JavaScript treats them differently in some cases based on the value of the configurable
attribute (described below). In regular usage, they should behave the same.
Below are some comparisons of declared and undeclared global variables.
var declared = 1; // Explicit global variable (new variable)
undeclared = 1; // Implicit global variable (property of default global object)
window.hasOwnProperty('declared') // true
window.hasOwnProperty('undeclared') // true
window.propertyIsEnumerable('declared') // true
window.propertyIsEnumerable('undeclared') // true
window.declared // 1
window.undeclared // 1
window.declared = 2;
window.undeclared = 2;
declared // 2
undeclared // 2
delete declared // false
delete undeclared // true
delete undeclared // true (same result if delete it again)
delete window.declared // false
delete window.undeclared // true (same result if delete it yet again)
delete window.undeclared // true (still true)
Both declared and undeclared global variables are properties of the window
object (the default global object). Neither one is inherited from a different object through the prototype chain. They both exist directly in the window
object (since window.hasOwnProperty
returns true
for both).
For declared global variables, the configurable
attribute is false
. For undeclared global variables, it's true
. The value of the configurable
attribute can be retrieved using the getOwnPropertyDescriptor
method, as shown below.
var declared = 1;
undeclared = 1;
(Object.getOwnPropertyDescriptor(window, 'declared')).configurable // false
(Object.getOwnPropertyDescriptor(window, 'undeclared')).configurable // true
If the configurable
attribute of a property is true, the attributes of the property can be changed using the defineProperty
method, and the property can be deleted using the delete
operator. Otherwise, the attributes cannot be changed, and the property cannot be deleted in this manner.
In non-strict mode, the delete
operator returns true
if the property is configurable, and returns false
if it's non-configurable.
Declared global variable
window
)delete
operatorUndeclared global variable
window
)delete
operatorThe main difference is when you're declaring variables inside a function. If you use var
when you're declaring a variable inside a function, then that variable becomes a local variable. However, if you don't use var
, then the variable becomes a global variable no matter where you declare it (inside or outside a function).
When any variable is created via Variable Declaration in JavaScript , these properties are created with "DontDelete" attribute , which basically means that variable you created cannot be Deleted using "delete" expression. All the functions, arguments , function parameters by default are created with this DontDelete attribute. You can think of DontDelete as a flag.
var y = 43;
delete y; //returns false because it is has a DontDelete attribute
Whereas Undeclared assignment doesn't set any attributes like DontDelete . So when we apply delete operator on this undeclared variable , it returns true.
x = 42;
delete x; //returns true because it doesn't have a DontDelete attribute
The difference between property assignment and variable declaration — latter one sets DontDelete, whereas former one doesn’t. That's why undeclared assignment creates a deletable property.
Link on how exactly delete operator works
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With