DEV Community: Ashlyn Joshy

The Scope Chain, Scope & Lexical Environment

Ashlyn Joshy — Wed, 18 Sep 2024 10:50:11 +0000

The ideas of scope, scope chain, and lexical environment are crucial to JavaScript. We are familiar with these terminologies, yet their responsibilities can be unclear at times. Let's explore more to see how they operate together.

Scope in Javascript is directly related to the lexical environment. Scope is where you can access the specific variable or a function in our code.

Case 1 :

function a(){
    console.log(b);
}
var b = 10;
a();

output

10

In the above code the function a() can access the variable b which is outside the function.

Case 2:

function a(){
    function c(){
        console.log(b);
    }
    c();
}
var b = 10;
a();

output

10

Here the function c(), which is inside the function a() can able to access the variable b.

Case 3:

Here the variable b is inside the function a()

function a(){
    var b = 10;
    function c(){
        console.log(b);
    }
    c();
}
a();

output

10

Case 4:

In this variable b is inside the function a() and trying to access the variable b outside.

function a(){
    var b = 10;
    function c(){
        console.log(b);
    }
    c();
}
console.log(b);
a();

output

ReferenceError : b is not defined

So, Scope means where you can access the specific variable or a function in our code.

In case 1: The function a() can able to access the variable b because b is in the global scope.

In case 2: The value of b is printed. It means that within the nested function also, the global scope variable can be accessed.

In case 3: The value of b is printed because the b is inside the local memory of the function a(). The function c() can able to accessed its because variable b is present in the lexical environment of its parent.

In the call stack = [global execution context , a() , c()]

c() = lexical environment pointer pointing to a().

a() = lexical environment pointer pointing to the global execution context.

global execution context = lexical environment pointer pointing to null.

Whenever execution context is created a lexical environment is also created.

The lexical environment is the local memory along with the lexical environment of the parent.

Lexical environment = local memory + lexical environment of parent.

The term lexical means in-hierarchy or in-sequence.

The Javascript engine first searches for a variable in the current local memory space, if it's not found. it will search for the variable in the lexical environment of its parent and if this is not found then it searches that variable in the subsequent lexical environment and the sequence goes on until the variable found in the lexical environment or the lexical environment become null.

The mechanism of searching variable in the subsequent lexical environment is known as the scope chain.

In case 4: A function can access a global variable, but the global execution context can't access any local variable. So it's showing the error.

If you found the article helpful, consider passing it along to fellow developers. Happy coding 💻

Undefined Vs Not Defined in Javascript

Ashlyn Joshy — Tue, 17 Sep 2024 11:53:08 +0000

When working with JavaScript, you might run into the terms not defined and undefined. While they may sound identical, they represent different situations in JavaScript programming.

In phase one memory allocation, the Js will assign each variable a placeholder known as undefined.

To understand it better. Undefined occurs when memory is allocated for a variable but no values have been assigned yet.

If a variable is not even declared in the memory allocation and attempted to access, it is known as not defined.

console.log(x);
var x = 20;
console.log(x);
console.log(y);

The output of the code will be

undefined
20
Uncaught ReferenceError: y is not defined

key points

not defined !== undefined

Never assign undefined to a variable manually.

So this was all about the Undefined and Not defined. Hope it helped you understand the concept better and make your journey of learning JavaScript better.

Thank you for reading the article 🙏🏻 and if you liked it, do share.

map(), filter(), and reduce() in Javascript

Ashlyn Joshy — Mon, 02 Sep 2024 09:19:11 +0000

In JavaScript, map, filter, and reduce are powerful array methods that allow you to manipulate and transform arrays efficiently. Each method iterates over the elements of an array, applies an operation, and returns a new array based on that.

Map Function

The main purpose of the map function is to create a new array from the existing one.

const arr = [5,3,7,4,6];

function square(x){
   return x * 2;
}

const double = arr.map(square);
console.log(double); // [10,6,14,8,12]

//an alternative method

const triple = arr.map((x) => x * 3);
console.log(triple); // [ 15, 9, 21, 12, 18 ]

key point

For each array element, the map() calls a function to generate a new array. The original array is unchanged. When an array element is empty, the method is not executed.

Filter Function

The primary goal of the filter function is to filter out elements from an existing array to build a new array.

const arr = [7,10,6,3,8];
const even = arr.filter((x) => x % 2 == 0 );
console.log(even); // [10, 6, 8]

key point

Elements that pass are generated in a new array by the filter() method. The original array is unchanged. When an array element is empty, the method is not executed.

Reduce Function

its function that takes all the values of the array and comes up with a single value out of them. It reduces the array to give a single output.

In the reduce array method there are two parameters accumulator and current.Current represents the value of the current element in the array. The accumulator holds the value result from the previous call to the callback function. On the first call, its value is initialValue if the latter is specified; otherwise, its value is 0.

const arr = [7,16,4,8,3];

//normal function 
function sumOfNumbers(arr){
   let sum = 0;
   for(let i = 0; i < arr.length ; i++){
       sum += arr[i];
   }
   return sum;
}
console.log(sumOfNumbers(arr)); // 38

//reduce array method
const sum = arr.reduce(function (acc,curr){
   acc += curr;
   return acc;
},0);
console.log(sum); // 38

key point

The accumulator result is the only value that the reduce() method returns. The original array is unchanged. When an array element is empty, the method is not executed.

Example

Now let us take an example for all the map, filter and reduce methods and see how to implement

const users = [
    { firstName: "Babu", lastName: "Kumar", age: 29 },
    { firstName: "Minnu", lastName: "Jose", age: 39 },
    { firstName: "Ramu", lastName: "Vasu", age: 35 },
    { firstName: "Kuttu", lastName: "Shaji", age: 48 },
];

//print out all the users fullname = ["Babu Kumar", "Minnu Jose" , ....];
const fullName = users.map((x) => x.firstName + " " + x.lastName);
console.log(fullName);

//print out count of how many unique people with unique age are there 
//age = { '29': 1, '35': 1, '39': 1, '48': 1 }

const age = users.reduce((acc, curr) => {
    if(acc[curr.age]){
        acc[curr.age] = ++acc[curr.age];
    }else{
        acc[curr.age] = 1;
    }
    return acc;
},{})
console.log(age);

//print out the user's first name where age is greater than 30

//method 1: using function chaining
const result = users.filter((x) => x.age > 30).map((x) => x.firstName)
console.log(result);

//method 2: using reduce function
const answer = users.reduce((acc,curr)=>{
if(curr.age > 30) {
acc.push(curr.firstName);
}
return acc;
},[]);
console.log(answer);

So this was all about the Map, Filter, and Reduce. Hope it helped you understand the concept better and make your journey of learning JavaScript better.

Thank you for reading the article 🙏🏻 and if you liked it, do share.