Three Important JavaScript Concepts

JavaScript, being one of the fastest-growing and most popular programming languages, encircles important concepts that every JavaScript developer should be familiar with.

Important JavaScript Concepts

There are three JavaScript concepts:

1. Hoisting

2. Scope

3. Equality

1. Hoisting

Hoisting is a behavior in JavaScript where function and variable declarations are moved to the top of their respective scopes during the compilation phase.

It means that you can use functions or variables in your code before they are declared.

Consider the below example:

Printname();
concole.log(name);

var name = 'The Tech Platform';

function Printname()
{
    console.log('Sofia');
}

In the above code, we see the usage of hoisting. The function Printname() is called before its actual declaration, yet it still executes successfully.

However, it is important to note that hoisting does not physically move the declarations in the code. Instead, memory space is allocated for them before the code execution starts. This allows functions and variables to be accessed before they are declared in the code.

2. Scope

Scope refers to the visibility and accessibility of variables, functions, and objects in a particular part of your code during runtime. JavaScript has two types of scopes:

1. Global Scope

2. Local Scope.

In the given code, we can observe examples of both.

Global scope

The global scope refers to variables or functions that are accessible throughout the entire code. Variables declared outside of any function or block have a global scope. They can be accessed from anywhere within the script, including inside functions.

const age = 20;

function Printage()
{
    console.log(age);
}

console.log(age);
Printage();

The variable age is declared outside any function, making it accessible from both inside and outside of functions within the script.

Local scope

Local scope refers to variables or functions that are accessible only within a specific block or function where they are defined. Variables declared inside a function or block have a local scope and are not accessible outside of that scope. Trying to access a local variable outside of its scope will result in an error.

Here, we have an example:

function Printname()
{
    const age = 20;
    console.log(age);
}

Printname();
console.log(age);

The function Printname() has a local variable age declared inside it. This variable is only accessible within the function. Attempting to access it from outside the function will result in an error.

3. Equality

In JavaScript, equality refers to comparing values or objects for equality. There are two equality operators:

1. Double equal (==)

2. Triple equal (===).

Double Equal (==):

The double equal operator checks for abstract equality by comparing the values of the operands. It performs type coercion, meaning it may convert the operands to a common type before comparison. For example, 5 == '5' will return true because it compares the values without considering the data types.

Triple Equal (===):

The triple equal operator checks for strict equality by comparing both the values and data types of the operands. It does not perform type coercion. For example, 5 === '5' will return false because the values are the same, but the data types are different.

Consider the below example:

console.log(5=='5');
console.log(5==='5');
console.log('5'==='5');

const o1 = 
{
    name: 'The Tech Platform',
    age: 20
}

const o2 = 
{
    name: 'The Tech Platform',
    age: 20
}

console.log(o1==o2);
concole.log(o1===o2);

In the code, we can observe the differences between these operators:

• The expression 5 == '5' returns true because abstract equality checks the values without considering the data types.

• The expression 5 === '5' returns false as strict equality checks both the values and data types, finding them different.

• The expression '5' === '5' returns true as both the values and data types are the same.

Furthermore, when comparing two objects (o1 and o2), neither the abstract equality nor the strict equality operators compare the actual object contents. Instead, they compare the memory addresses of the objects. Hence, the comparisons o1 == o2 and o1 === o2 both result in false because the two objects have different memory addresses, despite having the same property values.

Conclusion

Understanding these concepts in JavaScript is essential for writing robust and error-free code. By grasping hoisting, scope, and equality, developers can effectively manage variable declarations, control access to variables, and perform accurate comparisons, ensuring the desired behavior and reliability of their JavaScript applications.