1.
The delete Keyword
The delete keyword in JavaScript is used to remove a property from an object. It is
specifically designed to handle the removal of properties and is an important tool in
managing dynamic objects.
Syntax:
delete [Link];
or
delete object["property"];
How it works:
When you use the delete keyword, it removes a property from the object
entirely, and the property no longer exists.
The delete keyword only affects the object itself and not any prototype chain
properties. If the property is inherited from the prototype, it will remain
unaffected.
Examples:
const car = {
brand: "Toyota",
model: "Corolla",
year: 2020
};
[Link]([Link]); // Output: "Corolla"
delete [Link]; // Remove the "model" property
[Link]([Link]); // Output: undefined (model property no longer exists)
Important:
Non-configurable Properties: If a property is non-configurable (like those
created with [Link]()), the delete keyword will have no effect.
Arrays: When used on arrays, it doesn't change the length of the array. It simply
removes the item, leaving a hole in the array.
let arr = [1, 2, 3, 4];
delete arr[2]; // Removes element at index 2
[Link](arr); // Output: [1, 2, <1 empty slot>, 4]
The length of the array does not change, and the result is a sparse array.
2. The for...in Statement
The for...in statement is a loop that allows you to iterate over the properties of an object.
It provides a convenient way to access all enumerable properties of an object (including
properties in the prototype chain).
Syntax:
for (variable in object) {
// code to execute
}
How it works:
The loop iterates through each property in the object.
The loop will iterate over all enumerable properties, including properties
inherited from the object's prototype chain.
The variable (usually key or property) takes on the name of each property.
Example:
const person = {
name: "Alice",
age: 30,
profession: "Engineer"
};
for (let prop in person) {
[Link](prop + ": " + person[prop]);
}
// Output:
// name: Alice
// age: 30
// profession: Engineer
Important Notes:
Enumerable Properties: Only enumerable properties are included in the loop.
These are properties whose enumerable attribute is set to true (which is the
default for most properties).
Prototype Chain: for...in will also iterate over properties that are part of the
object's prototype chain, not just the object's own properties.
const obj = {
a: 1,
b: 2
};
[Link].c = 3; // Inherited property
for (let key in obj) {
[Link](key); // Output: a, b, c (c is inherited from the prototype)
}
Avoiding Inherited Properties: If you only want to loop through an object's
own properties and exclude properties from the prototype chain, use the
hasOwnProperty() method (covered below).
3. The hasOwnProperty() Method
The hasOwnProperty() method is used to check if an object has a property as its own
property (i.e., not inherited from the prototype chain).
Syntax:
[Link](property);
How it works:
It returns true if the object has the specified property as its own (not inherited).
It returns false if the object does not have the property or if the property is
inherited from the prototype chain.
Example:
const person = {
name: "Alice",
age: 30
};
[Link]([Link]("name")); // Output: true
[Link]([Link]("toString")); // Output: false (inherited from
Object prototype)
Using hasOwnProperty() with for...in:
When iterating with a for...in loop, you can use hasOwnProperty() to check if the
property belongs directly to the object and is not inherited from the prototype chain.
const obj = {
a: 1,
b: 2
};
[Link].c = 3;
for (let key in obj) {
if ([Link](key)) {
[Link](key + ": " + obj[key]); // Output: a: 1, b: 2
}
}
Why hasOwnProperty() is Useful:
Prevents Iteration Over Prototype Properties: It helps you filter out
properties that are inherited through the prototype chain, ensuring that only the
object's own properties are iterated over.
Prevents Errors: In cases where an object might inherit from other objects, you
can avoid mistakenly acting on inherited properties by using hasOwnProperty().
4. The Global window Object
In JavaScript, the global execution context is represented by the window object in
browsers. This object serves as a global namespace for all globally accessible variables,
functions, and objects in a browser environment. Every browser-based JavaScript
program has access to this object.
Key Characteristics:
The window object is automatically available in the global scope in browsers.
It serves as the global object, meaning that variables declared in the global scope
(outside of any function) become properties of the window object.
Many built-in JavaScript functions, such as alert(), setTimeout(), and
setInterval(), are methods of the window object.
The window object is not available in environments like [Link], where the
global object is global instead.
Global Scope Example:
// Declare a global variable
var x = 10;
// x is automatically a property of the `window` object
[Link](window.x); // Output: 10
Global Functions:
Functions like alert() are part of the window object.
// The `alert` function is a method of the window object
alert("Hello, World!"); // Triggers a popup message
Important Notes:
In strict mode ('use strict';), variables declared without var, let, or const do not
get added as properties of the window object, avoiding accidental global
variables.
The window object also provides access to other important browser properties,
such as document (for DOM manipulation), localStorage, and location (for URL
handling).
5. Object References
In JavaScript, variables that hold objects do not contain the actual data of the object but
rather a reference to that object. When you assign an object to a variable, the variable
stores a reference to the memory location of the object, not a copy of the object itself.
Key Characteristics:
Objects are reference types, meaning that variables hold a reference (or pointer)
to the location where the object is stored in memory, not the actual data.
When you assign one object to another variable, you are assigning the reference,
not the object itself.
Changing one reference will affect all other references that point to the same
object.
Example of Object Reference:
const person1 = { name: "Alice", age: 30 };
const person2 = person1; // person2 now references the same object as person1
[Link] = 31; // Modify the object through person2
[Link]([Link]); // Output: 31 (person1 is also affected because both person1
and person2 point to the same object)
In the example above, person1 and person2 both refer to the same object in memory.
Thus, any change made to the object through one variable will be reflected when
accessed through the other variable.
6. Aliasing
Aliasing occurs when multiple variables refer to the same object in memory.
Essentially, aliasing is the concept of having multiple references (or aliases) to the same
object.
How Aliasing Works:
When one variable is assigned the value of another variable (both referring to
objects), they both reference the same object.
Modifying the object through one alias will change the object for all aliases.
Example of Aliasing:
let obj1 = { value: 42 };
let obj2 = obj1; // obj2 is an alias to obj1, they both refer to the same object
[Link] = 100; // Modifying obj2 also modifies obj1
[Link]([Link]); // Output: 100
In this example, obj2 is an alias for obj1. Since they both point to the same object in
memory, any changes made through one alias affect the object, which is reflected in
both obj1 and obj2.
Aliasing and Functions:
function modifyObject(obj) {
[Link] = 99; // Modify the object through the reference
}
const myObject = { value: 1 };
modifyObject(myObject);
[Link]([Link]); // Output: 99 (myObject is modified because the function
receives a reference)
In this case, myObject is passed to modifyObject(). The function modifies the object
through its reference, so the changes are reflected in the original object.
7. Pass-by-Reference vs. Pass-by-Value Semantics
JavaScript behaves differently when passing primitive types and objects to functions.
This difference is often referred to as pass-by-value for primitives and pass-by-
reference for objects.
Pass-by-Value (Primitives):
Primitive types in JavaScript include number, string, boolean, undefined, null,
symbol, and bigint.
When you pass a primitive value to a function, JavaScript creates a copy of the
value. The original value remains unchanged, even if the function modifies the
copy.
Example of Pass-by-Value:
let x = 10;
function changeValue(val) {
val = 20; // Changes the copy of x, not x itself
}
changeValue(x);
[Link](x); // Output: 10 (x remains unchanged because it was passed by value)
Here, the value of x is copied into the function’s parameter val, so changing val does not
affect x outside the function.
Pass-by-Reference (Objects):
Reference types (like objects, arrays, and functions) are passed by reference.
When you pass an object to a function, you pass a reference to the object, not a
copy of it. Therefore, modifications made to the object inside the function affect
the original object.
Example of Pass-by-Reference:
let person = { name: "John", age: 25 };
function changePerson(p) {
[Link] = 30; // Modifies the original object
}
changePerson(person);
[Link]([Link]); // Output: 30 (the original object is modified)
In this example, person is passed by reference, so any changes made to the object inside
the function directly affect the original object.
Pass-by-Value vs Pass-by-Reference Summary:
Data Type Passing Behavior
Primitives Pass-by-Value (copies the value)
Objects Pass-by-Reference (copies the reference)