Forem: sromelrey

JavaScript Concepts: Declaration, Initialization, Mutability, Immutability and Reassignment

sromelrey — Sun, 26 May 2024 15:09:08 +0000

This blog is dedicated to understand the following JavaScript Concepts:

Declaration
Initialization
Mutability
Immutability
Reassignment

Declaration

This is the phase where you tell the JavaScript engine about the variable. For example:

 let age;

declares that there is a variable named age.

Initialization

This phase involves assigning a value to the variable. If you do not explicitly initialize the variable at the time of declaration, JavaScript automatically initializes it to undefined.

let a;
console.log(a);

Output: undefined

Mutability

This refers to the ability to alter the internal state or content of a data structure or object in place. For example, if we have object obj and you changed a property within it, you would be mutating the object:

let obj = { key: "value" }; 
obj.key = "new value";

Mutating the object by changing a property

Immutability

Immutability refers to the inability to alter the state or content of a variable after it has been created. When a variable holds an immutable value, any modification results in the creation of a new value rather than changing the original.

let greeting = "Hello";
let newGreeting = greeting.replace("H", "J");

console.log(greeting);      // Output: "Hello"
console.log(newGreeting);   // Output: "Jello"

In this example:

greeting is a string with the value Hello.
The replace method creates a new string newGreeting with the value Jello.
The original greeting string remains unchanged.

Immutability ensures that primitive values remain constant, preventing unintended side effects. Any operation that attempts to modify an immutable value creates a new value, leaving the original unchanged.

Reassignment

This refers to the act of assigning a new value to a variable. This action doesn't alter the original value; rather, it updates what the variable points to.

let y = "hello"; 
y = "world";

Reassigning y to reference a different string

Conclusion

In this topic, we explored key JavaScript concepts: declaration, initialization, mutability, immutability, and reassignment. Understanding these concepts helps in writing clear and predictable code.

Declaration introduces a variable.
Initialization assigns an initial value.
Mutability allows modification of an object's state.
Immutability prevents changes to a value, ensuring data integrity.
Reassignment updates the variable's reference without altering the original value.

Grasping these concepts is essential for effective JavaScript programming.

Understanding JavaScript keyword var, let, const and hoisting.

sromelrey — Sun, 26 May 2024 09:51:50 +0000

Good day, everyone! Today, we'll explore how var, let, and const work and how hoisting affects each.

Before we dive in, I recommend reading my blog on execution context for a deeper understanding of hoisting.
JavaScript Execution Context and JS Engine Components

Goals and Objectives in this topic:

Understand how var, let, and const works under the hood.
How hoisting affects each keyword.
What is Temporal Dead Zone ?

The keyword var, let, and const is what we use when declaring a variable in JavaScript.

Let's start with the var keyword before ES6 declaring variable can only be done using var the following are the features of this keyword:

`var` keyword:

Function Scope: Variables declared with var are scoped to the function in which they are declared.
Hoisting: Variables are hoisted to the top of their scope and initialized with undefined.
Re-declaration: The same variable can be declared multiple times within the same scope without causing an error.
Global Object Property: If declared outside a function, var becomes a property of the global object (e.g., window in browsers).

The 'let' and 'const' keywords are features introduced in ES6, addressing the shortcomings of the 'var' keyword.
Here's a list of how and what you can use this keywords:

`let` keyword:

Block Scope: Variables declared with let are scoped to the block in which they are declared (e.g., inside a {}).
Hoisting: Variables are hoisted but not initialized, leading to a temporal dead zone until the declaration is encountered.
Re-declaration: Cannot be re-declared within the same scope, preventing accidental redefinitions.
Temporal Dead Zone: Accessing the variable before its declaration results in a Reference Error.

`const` keyword:

Block Scope: Variables declared with const are scoped to the block in which they are declared.
Hoisting: Variables are hoisted but not initialized, leading to a temporal dead zone until the declaration is encountered.
Re-declaration: Cannot be re-declared within the same scope, similar to let.
Immutability: Must be initialized at the time of declaration and cannot be reassigned. However, if the variable holds an object, the object's properties can still be modified.
Temporal Dead Zone: Accessing the variable before its declaration results in a Reference Error.

Understanding how hoisting works with different keywords

What is hoisting? Hoisting is a feature in JavaScript that allows you to use variables or invoke functions before they are declared. Here's a sample code to illustrate this concept:

Here's a sample code of hoisting using `var` and `function declaration`

// * Accessing the 'age' variable before it is initialized
console.log(age);
// ? Will log undefined

var age = 12;

// * Invoking the 'logAge' function before it is declared
logAge(age);
// ? Will log AGE is 12

// * Invoking logAge Function Declaration before it's being declare
function logAge(ageArg) {
  console.log(`log AGE is ${ageArg}`);
}

Here's a sample code of hoisting using `let` and `const` and `function expression`

// * Accessing let age before it's initialization
console.log(age);

let age = 12;

// * Invoking logAge Function Expression before it's being declare
logAge(age);

let logAge = function () {
  console.log(`log AGE is ${ageArg}`);
};

I will write a separate blog post under the topic of functions to further explain how hoisting works with function expressions and function declarations when invoking a function.

Temporal Dead Zone

The temporal dead zone starts from the block until the let or const variable declaration is processed. In other words, it is the location where you cannot access the let variables before they are defined.

Here's a sample code to demonstrate the TDZ

console.log(myVar); // ReferenceError: Cannot access 'myVar' before initialization
let myVar = 10;
console.log(myVar); // Output: 10

Although 'let' and 'const' are hoisted, accessing them before their declaration results in a Reference Error, unlike 'var' which returns undefined. This behavior is known as the 'temporal dead zone."

Conclusion

Understanding how var, let, and const work and how hoisting affects each keyword is crucial for writing efficient JavaScript code.

var is function-scoped, hoisted, and can be re-declared within the same scope, which can lead to unexpected behaviors.
let and const are block-scoped, also hoisted but not initialized until their declaration, leading to the temporal dead zone which prevents access before initialization.
const also enforces immutability, meaning it must be initialized during declaration and cannot be reassigned.

Hoisting allows functions and variables to be used before they are declared, but understanding the nuances between these keywords helps prevent common pitfalls, such as reference errors or unintended variable reassignments. For more details on hoisting with function expressions and declarations, stay tuned for my upcoming blog post.

Thanks for reading 😁😁😁😁

JavaScript Concept : Memory Allocation(Stack and Heap) and Behavior

sromelrey — Sun, 26 May 2024 03:54:57 +0000

Good day everyone! Today we will discuss a JavaScript Concept Memory Allocation and Behavior. This concept is crucial to understand deeply on how JavaScript works. Learn alongside me and Enjoy reading!

Goals and Objectives for this Topic:

Understand how memory allocation and behavior function in:
- Primitive types
- Reference types

In JavaScript engines, there are indeed two primary memory spaces used for data allocation: Stack and Heap

Primitive Types

Storage: Primitive types are stored in Stack Memory . The stack is generally used for static memory allocation, which includes fixed-size variables.
Value-based: When you assign or pass a primitive type, it is done by value. This means that the actual value is copied.

Example:

let a = 10;

let b = a; // Copies the value of a into a new memory spot for b

b += 5;    // Changes in b do not affect a

console.log(a); // 10

console.log(b); // 15

Reference types

Storage: Reference types are stored in Heap Memory. The heap is used for dynamic memory allocation, where the size of the structure can change over time.
Reference-based: When you assign or pass reference types, it is done by reference. This means that instead of copying the actual data, a reference (or a pointer) to the object in memory is copied.

Example:

let obj1 = { value: 10 }; 

let obj2 = obj1; // Copies the reference, not the actual object

obj2.value = 15; // Changes the value via obj2 also affect obj1 

console.log(obj1.value); // 15 

console.log(obj2.value); // 15

How JavaScript Manages Memory

JavaScript automatically manages memory with a garbage collector, freeing developers from manually deallocating memory. The garbage collector periodically frees memory used by data that is no longer accessible.

1. Stack

The stack is a Last-In-First-Out (LIFO) data structure used for storing:
- Local variables declared within the function.
- Arguments passed to the function.
- The return address (where to return after the function finishes execution).
It's fast and has a fixed size, pre-allocated by the OS. Once a function completes, its data is automatically removed, freeing space for new calls.
2. Heap
The heap is an unstructured, flexible memory area for dynamic allocation. It's slower than the stack but stores:
- Global variables
- Objects and arrays
- Dynamically allocated data
Garbage collection automatically reclaims unused memory, preventing leaks.

Summary of the key difference:

Understanding the roles of the stack and heap is crucial for writing efficient JavaScript code. You should strive to minimize the use of global variables and large data structures within functions to optimize memory usage and avoid stack overflows. Thanks for reading ❤️❤️❤️!

JavaScript Data Types Primitive vs Non-Primitive

sromelrey — Sat, 25 May 2024 07:05:41 +0000

Good day Everyone! Today we will discuss the Data Types of JavaScript Primitive and Non-Primitive. Learn alongside me, and share your own insights. Enjoy the read!

Goals and Objectives in this topic:

Understand the concept of Data Types:
- Grasp the fundamental idea of data types in JavaScript.
Differentiate Between Primitive and Non-Primitive Data Types:
- Clearly distinguish between primitive and non-primitive types.
Understand the immutability of primitive and mutability of non-primitive types

In JavaScript, data types define the kind of data a variable can hold and how that data is stored and manipulated.

There are two main categories of data types:

1. Primitive Data Types:

Primitive data types represent simple, fundamental values. They are immutable, meaning their values cannot be changed directly after they are assigned. When you reassign a new value to a primitive variable, a new memory location is created to store the new value.

Here's a simple example to illustrate the immutability of primitive types:

var age = 12;

age = 2;

1. Memory Allocation and Assignment:

Initially, age is declared with var. It gets assigned undefined (default for var).
Then, age is assigned the value 12.
Memory is allocated in the Heap to store this value.

2. Reassignment:

When you write age = 2;, a new memory location is allocated in the Heap to store the value 2.
The variable age now references this new memory location.

3. Garbage Collection:

JavaScript has a garbage collector that automatically cleans up unused memory.
Since there are no more references to the memory location that held 12 (the original value), it becomes a candidate for garbage collection.

Summary:

The value 12 is no longer accessible through the variable age after the reassignment.
It might eventually be removed from the Heap by the garbage collector when it determines it's no longer needed.

Here are the common primitivedata types in JavaScript:

Number: Represents numeric values, including integers (whole numbers) and decimals. (e.g., 12, 3.14, -100)
String: Represents sequences of characters, used for text. (e.g., "Hello", 'World')
Boolean: Represents logical values, either true or false.
Undefined: Indicates that a variable has been declared but not yet assigned a value.
Null: Represents the intentional absence of a value. (different from undefined)
Symbol (ES6+): A unique and immutable identifier (rarely used).
BigInt (ES 2020): A type which is the built-in object that can represent whole numbers larger than 253 – 1.

2. Non-Primitive Data Types:

Non-primitive data types, also called reference types, are more complex and store collections of data. They are mutable, meaning their content can be modified after they are created. When you assign a non-primitive data type to a variable, you're storing a reference (memory address) to the actual data location in the Heap (unstructured storage area). Any changes made through the variable reference will affect the original data.

Here's a simple example to illustrate the mutability of Non-primitive

// * Object Creation
// ? We create an object person with properties name ("Alice") and age (30):
const person = {
    name: "Alice",
    age: 30
  };

// * Initial Output:
console.log(person); 
// ? Output: { name: "Alice", age: 30 }

// * Object Mutation:
person.age = 31; 
// ? Modifying a property of the object

// * Final Output:
console.log(person); 
//? Output: { name: "Alice", age: 31 }

Key Points:

const prevents reassignment of the object but allows property modification.
person.age = 31; changes the age property, showing object mutability.
You can modify or add properties using dot notation (e.g., person.city = "New York";).

Here are some common non-primitive data types in JavaScript:

Object: A collection of key-value pairs used to store structured data.
(e.g., { name: "Alice", age: 30 })
Array: An ordered collection of items, which can hold different data types.
(e.g., [1, "apple", true])
Function: A reusable block of code that performs a specific task.

Key Differences:

Conclusion:

Understanding primitive and non-primitive data types is crucial for writing efficient and predictable JavaScript code. You need to choose the appropriate data type based on the kind of data you want to store and manipulate.

This understanding enables you to write more efficient and predictable JavaScript code.

Thanks for reading ❤️❤️❤️!

JavaScript Execution Context and JS Engine Components

sromelrey — Fri, 24 May 2024 13:03:36 +0000

Hello everyone! Welcome to my blog, where I’ll be documenting my journey to mastering the JavaScript language. This is the first post in what will be a series chronicling my experiences, challenges, and triumphs as I dive deep into the world of JavaScript. I hope you'll join me on this adventure, learn alongside me, and share your own insights. Enjoy the read!

Goals and Objectives in this topic:

Understand the concept of Execution Context (EC)and it’s phases
- Creation Phase
- Execution Phase
Understanding how Function behave’s in (EC)
- Creation
- Definition
- Execution
Understand the following Engine Components
- Clean Up
- Call Stack
- Heap
- Built-in Functions and Objects
- Type Information

Understanding the concept of Execution Context (EC) and it’s Phase

To help us visualize how the EC works and its phases here’s a simple code for demonstration.

var age = 12;

console.log(age);

function logAge(ageArg) {
  console.log(`log AGE is ${ageArg}`);
}

logAge(age);

When the JavaScript Engine Starts Running the Code, it creates a global Execution Context. This context is divided in to two parts Creation Phase and Execution Phase.

1. Global Execution Context (Creation Phase):

Memory Allocation: Space is reserved in the Heap (unstructured storage) for the variable age.

Initialization: The variable ageis initialized with the value undefined(default for var variables in JavaScript).

In JavaScript with var variables, initialization with the actual value happens during the execution phase when the line with the assignment is encountered. The creation phase only allocates memory and assigns undefinedby default.

Reference Creation: A reference is created in the global scope pointing to the memory location of age in the Heap. This allows you to access age using its name throughout the global scope.

Function Definition (not Creation): The function logAgeis defined and stored in memory. This includes its code and argument (ageArg). However, the function itself isn't executed yet.

2. Global Execution Context (Execution Phase):

Variable Assignment: The line age = 12; is encountered. The value 12 is assigned to the previously allocated memory location for age.

Console Output: The line console.log(age); is executed. The value of age (which is now 12) is retrieved from the Heap using the reference in the global scope and printed to the console.

Function Call: The line logAge(age); is reached. This triggers the creation of a separate execution context for the logAgefunction.

Each function call creates a new execution context to manage the function's execution environment, including its scope, arguments, and call stack frame.

3.Function Execution Context for `logAge` (Creation Phase):

Note: This phase happens only when logAge is called.

Memory Allocation: If logAgehas any arguments (like ageArg in this case), memory is allocated for them in the Heap within this context.

Local Variable Initialization (if any): Any variables declared within the logAgefunction are initialized, usually with undefined.

4. Function Execution Context for `logAge`(Execution Phase):

Argument Passing: The value of age (which is 12 from the global context) is passed as an argument to the logAgefunction and assigned to the ageArgparameter within the function's execution context.

Function Body Execution: The code within the logAge functionis executed. In this case, it uses template literals to construct a string and then logs it using console.log.

Overall Sequence:

Global Execution Context (Creation Phase)
Global Execution Context (Execution Phase) - including variable assignment, console output, and function call
Function Execution Context for logAge (Creation Phase) - only when the function is called
Function Execution Context for logAge (Execution Phase) - function body execution

Cleaning Up: The JavaScript engine employs a garbage collector to manage memory. Once the function execution context for logAge is complete and there are no more references to the function arguments or local variables, the memory used by them in the Heap becomes available for garbage collection.

Call Stack:

The call stack keeps track of the currently executing function and its arguments.
In this code, the call stack would have:
- logAge function call when it's executed.
- The global execution context when the script starts running.

Heap:

The Heap stores the values of variables and function arguments during execution.
In this code, the Heap would store:
- The value 12 for the variable age.
- The value 12 passed as an argument to the logAge function (stored in the ageArg memory location).

Built-in Functions and Objects:

The code uses built-in functions like console.log. These functions are predefined and readily available for use.

Type Information:
JavaScript is loosely typed, so the engine doesn't explicitly store type information for variables. In this case, both age and ageArg would hold the numeric value 12.

Conclusion

By understanding the JavaScript Execution Context and its components, you've gained valuable insight into how your code is processed and executed. We've explored the creation and execution phases of the global execution context, as well as the creation and execution phases that occur within function calls. This knowledge helps you write more efficient and predictable JavaScript code.

Thanks for reading 😁😁😁😁

Forem: sromelrey

JavaScript Concepts: Declaration, Initialization, Mutability, Immutability and Reassignment

Declaration

Initialization

Mutability

Immutability

In this example:

Reassignment

Conclusion

Understanding JavaScript keyword var, let, const and hoisting.

Goals and Objectives in this topic:

var keyword:

let keyword:

const keyword:

Understanding how hoisting works with different keywords

Here's a sample code of hoisting using var and function declaration

Here's a sample code of hoisting using let and const and function expression

Temporal Dead Zone

Conclusion

JavaScript Concept : Memory Allocation(Stack and Heap) and Behavior

Goals and Objectives for this Topic:

Primitive Types

Example:

Reference types

How JavaScript Manages Memory

1. Stack

2. Heap

Summary of the key difference:

JavaScript Data Types Primitive vs Non-Primitive

Goals and Objectives in this topic:

In JavaScript, data types define the kind of data a variable can hold and how that data is stored and manipulated.

1. Primitive Data Types:

Here's a simple example to illustrate the immutability of primitive types:

1. Memory Allocation and Assignment:

2. Reassignment:

3. Garbage Collection:

Summary:

2. Non-Primitive Data Types:

Here's a simple example to illustrate the mutability of Non-primitive

Key Points:

Key Differences:

Conclusion:

JavaScript Execution Context and JS Engine Components

Goals and Objectives in this topic:

Understanding the concept of Execution Context (EC) and it’s Phase

To help us visualize how the EC works and its phases here’s a simple code for demonstration.

1. Global Execution Context (Creation Phase):

2. Global Execution Context (Execution Phase):

3.Function Execution Context for logAge (Creation Phase):

4. Function Execution Context for logAge(Execution Phase):

Overall Sequence:

Conclusion

`var` keyword:

`let` keyword:

`const` keyword:

Here's a sample code of hoisting using `var` and `function declaration`

Here's a sample code of hoisting using `let` and `const` and `function expression`

3.Function Execution Context for `logAge` (Creation Phase):

4. Function Execution Context for `logAge`(Execution Phase):