DEV Community: Dheeraj Menon

Scope in JavaScript: Understanding Lexical Environment and Scope Chain

Dheeraj Menon — Thu, 24 Mar 2022 16:02:57 +0000

The concept of Scope in JavaScript is directly related to Lexical Environment. Understanding the Lexical Environment is thus very helpful to learn about Scope and have the prerequisite knowledge to dive into Closures.

Scope is the region in which a particular variable can be accessed in the code. It determines the accessibility of a variable. So, how is the scope of a variable decided? This is where Lexical Environment comes into play.

Lexical Environment

In JavaScript, every code block has an internal associated object known as the Lexical Environment. It consists of 2 parts:

Environment Record - An object that stores all local variables as its properties.
A reference to the outer lexical environment.

In short, the lexical environment of any code block is its local memory and the lexical environment of its parent.

Let's understand this through an example. Consider the following code.

Here, we assigned the value 10 to a variable inside the main function. When we try to access this value from a function inside the main function, we successfully obtain 10. But when we try to access it outside the main function, an "Uncaught ReferenceError" is thrown.

Why does this happen? We need to understand the mechanism of the lexical environment to know why.

Lexical Environment Mechanism

When we run this program, a Global Execution Context is created and it is pushed onto the Call Stack. The main function is now invoked and an execution context is created which is also pushed onto the call stack. Since the inner function is invoked inside the main function, another execution context is created and pushed onto the call stack.

Whenever an execution context is created, a lexical environment is also created. For the above 3 execution contexts, there are also 3 lexical environments.

Because of lexical environment, alongside the environment record, we are able to get a reference to the parent lexical environment. Since inner function is lexically inside main function, it will have access to the lexical environment of the main function. Similarly, the main function will have access to the lexical environment of the global execution context. The lexical environment of the global execution context has a reference that points to null.

Now, let us see how the lexical environment is used in this program. When JavaScript engine encounters the console.log(x) inside the inner function, it tries to find out the value of x inside the local memory of inner function.

Since the variable does not exist inside the inner function, it uses the reference and goes into the lexical environment of its parent which is the main function. It searches for the value of x and finds it. Hence, we are able to see 10 printed on the console as our first result.

As for our console.log(x) outside the main function, the JavaScript engine tries to find the value of x in the global execution context. Since it is not found, the engine then uses the reference to parent lexical environment which points to null. Hence, we get an error in this case.

Lexical Environment in the browser

It's time to observe the Call Stack and Scope in the browser for the above example. Note that Lexical Environment is a specification object and only exists theoretically in JavaScript to describe how things work. But the Scope will do a fine job in helping us understand the lexical environment for each execution context in the call stack because it will show us the local memory for each lexical environment and the references to all outer lexical environments.

Note: (anonymous) refers to the global execution context.

Global Execution Context

The Global Execution Context is added to the bottom of the call stack when we run a program. Its scope is global i.e any variable present inside it can be accessed anywhere in the program. It has the window object as well.

Execution Context of main function

The Lexical Environment of our main function is the local memory of main function along with the lexical environment of global execution context. In the local memory, we have the definition of inner function and the value of x.

Execution Context of inner function

The Lexical Environment of our inner function is the local memory of inner function along with the lexical environment of main function and its parent lexical environment as well. The lexical environment of our main function is called a "Closure". A closure remembers its outer variables and can access them. In our example, we can see that the inner function is enclosed inside the main function. Because of this, the inner function is able to access the variable in the main function.

Scope Chain

The mechanism of finding variables shown above in which our code started searching for the variable in its lexical environment and continued its search using the reference to outer lexical environment is known as the Scope Chain.

If the variable is not found, the JavaScript Engine will look into the outer scope until the variable is found or the global scope is reached. If the variable is not even found in the global scope, we use its reference to the null value and a reference error is thrown.

References

The CSS Cascade Algorithm Explained

Dheeraj Menon — Thu, 10 Feb 2022 15:49:49 +0000

The "C" in CSS stands for Cascading. It is what gives the style sheets its cascading nature so understanding the cascade is an important part of learning CSS.

Overview

It is entirely possible for 2 or more competing CSS rules to be applied on the same HTML element. How does the browser decide which rule to choose in such case?

Consider the following 2 CSS rules that were applied on the same button.

Without the cascade algorithm, the browser would have a tough time determining the "winner" of this conflict.

So, what is the cascade?

The cascade is the algorithm used by the browser to solve conflicts where multiple CSS rules are applied to the same HTML element. It takes all the values given to a certain property, sorts them by their precedence and outputs the value with the highest precedence.

Note: Only CSS declarations i.e property-value pairs participate in this cascade.

Now, let's look at the different stages of this cascade algorithm.

Order of Appearance

The order in which CSS rules appear in the style sheet is taken into consideration.

In this example, the color orange was declared last. Because the crimson color was declared before the orange color, it is ignored by the browser.

Specificity

Specificity determines which selector is the most specific using a certain weighing mechanism. By making a rule more specific, it would win out over other rules that appear later in the style sheet.

Let us go back to our previous example and help crimson beat orange.

All classes have higher specificity than all elements. So in this example, the color is crimson because it has a class of heading. It does not matter that orange appeared later in the style sheet. Specificity is checked before order.

Note: An ID is even more specific than a class. In fact, ID selectors have the highest specificity among all selectors.

Importance

All CSS rules written by a developer have normal importance by default. We can give our rules higher importance by simply using the "!important" property in our rule.

Let's look at this in action.

Consider an ID selector used at the absolute bottom of the style sheet. That's the best possibility in both the specificity and order aspect.

But it still loses out to any random CSS rule that has the !important property. This means that importance plays an even bigger role than specificity and order in the cascade battle. So, the only way to beat an important rule is with an important rule that has higher specificity or better order.

Note: There are 4 types of importance rules possible. Animation rule has higher importance than a normal rule. Important rule has higher importance than an animation rule. Finally, Transition rule has higher importance than an important rule. This is because this rule is expected to always change the default visual state of the elements it is applied upon.

Origin

Now, let's understand the final factor in the cascade algorithm. The CSS written by a developer is not the only CSS that is applied to a web page.

When we define HTML elements, they have some CSS rules by default. Let's look at what default CSS rule a heading tag has.

The H1 element has a total of 7 property-value pairs! This is not surprising. After all, this is how the browser differentiates headings from normal text. All these default styles are present in the browser's "user agent stylesheet" as the picture displays.

The author, i.e the developer has the power to make changes in these predefined styles in their own stylesheet which is called the "author stylesheet". Let's change the default font-size of the H1 tag.

In this example, we used our stylesheet to override the default font-size of 2em that a H1 tag has by default.

However, if a user agent stylesheet has an !important property in any of its rule, then not even an author stylesheet with the !important property can override it.

There's also something called as a "user stylesheet" involved in this hierarchy but since most modern browsers do not directly support this feature anymore, this article will not cover it. Here's an image that'll help you understand the whole origin hierarchy. (Credits to web.dev)

Conclusion

The Chrome Devtools is a nice way to debug issues caused due to the cascade. For any chosen element, it'll display all the rules that were applied to it and strike off those rules which were not accepted by the browser. If you still have issues fixing them, you can always rely on the !important property to come to your rescue.

That's about it! Thank you for reading.

How to implement Search feature using JavaScript

Dheeraj Menon — Mon, 17 Jan 2022 07:37:02 +0000

A search bar is a very common feature used in a wide variety of applications. In this article, I will be walking you through a simple approach to implement the search feature using array methods. Note that there are many ways to do this, and this is just one of them. I will be using the classic to-do list project as my reference, but you can also use this approach in other areas such as searching for a certain post in a blog!

Defining HTML Structure

Our HTML file consists of a single container div. It has 3 sections. The first is our search bar which has a form tag that takes text as input.

The next section is an unordered list which contains the list of all todos and the option for deleting them.

The last section consists of a form tag that lets the user add new todos.

PS: You can view the complete code at todo-list. I'm trying to keep only the relevant parts in this article.

The Approach

Whenever a user types in a character in the search form, we will perform a filtering function. For doing this, we will use an event listener that listens to the "keyup" event in the input field of the form.
If we do not get a match to our existing todos, we will hide those todos by applying a class. This class will have a CSS rule that hides its display.

Listen to keyup event

We define a constant "search" to get a reference to the input field of the search form. Now we attach the keyup event to this reference. Every time the user types a letter, we will fire a callback function to get the value of whatever the user has typed until that moment. This value will be stored in a constant "term".

We use the trim() method to get rid of any white spaces before or after the todo. Now, we perform the filterTodos() function on the value we obtain i.e "term". Everytime a new key is entered, this function is called.

Filter Todos function

Firstly, we define a constant "list" to get a reference to all the todos.

We use an arrow function that takes the "term" as a parameter. The next step is to filter through the todos and apply classes to the ones that don't match the input term so that we can hide them.
To perform this function, we need the help of Array Methods so we will convert our list into an array.

Now, we can use the array filter method. It will go through all the items taking "todo" as a parameter and fire a callback function for each of them. If the text content of our todos DO NOT(!) contain the term, they will be filtered out. This method will return an array of all the filtered items.

Now, we can cycle through this array using for-each method. We take todo as a parameter and add a "filtered" class for all the items in the array. I have used method chaining here to make the code look a bit cleaner.

There's one thing we have to take care of in this function. What if the user enters a letter that adds the "filtered" class to a todo and then immediately removes that letter? We would need a way to then remove the newly attached "filtered" class. We can achieve this by doing exactly the opposite of above code. If the text content of our todos contain the term, they will be filtered. Then we can cycle through them and remove the "filtered" class.

CSS Time

Now that we have applied the "filtered" class to all the items that do not match, we would want the user to not be able to see them. For this, we will simply use the CSS display property of none.

Summing up

There's one final problem with this that has to be fixed. What if the user inputs an upper case value? "BUY XYZ" will not match to "buy xyz". To fix this, we can convert every value to lower case by using toLowerCase() method and perform our filter todos function only after that.

Since my JavaScript code snippets have been all over the place, here is what everything covered in this article finally looks like after performing the case conversion.

Feel free to correct me if I have made any mistakes in this article. Thank you for reading.

Beginner's Guide to Computational Thinking

Dheeraj Menon — Thu, 06 May 2021 13:30:10 +0000

There are a lot of resources available for learning computer programming, but very few resources for learning the thinking approach required to program.

If the above picture represents programming, then Computational Thinking is the step that comes before programming.

What is Computational Thinking?

Computational Thinking is the process of approaching a problem systematically and expressing a solution that can be carried out even by a computer.

It is a blueprint for a computer program. The blueprint can then be implemented using a programming language.

So, how does Computational Thinking work? It involves 4 elements. Each of these elements arises from a Question.

1. Problem identification

Question: Have we identified a problem that is solvable by a computer?

Some problems cannot be solved with a computer. We must determine whether a problem is a good candidate for using a computer. It's difficult for computers to solve subjective problems, and hence we come up with problems that consist of data that are usable by a computer. The things to think about here are:
i Topic: What is the big problem you are trying to solve? Can it be stated in a problem statement?
ii Data: What data do you have to contribute to a problem-solving approach? What other data might you need?
iii Feasibility: Can you solve the problem with what you know? What other data might you need?

2. Decomposition

Question: Can we break our problems down into smaller sub-problems?

Once we have a problem statement, the next step would be to break down the problem into smaller sub-problems. These sub-problems then become easier to solve and help in contributing to solve the large problem. Further, these sub-problems could be broken down into even smaller problems. It follows the same notion as elements chemically being composed of single atoms.

3. Pattern recognition

Question: Can we see familiar patterns that can lead us to potential solutions?

Finding solutions to similar problems or finding similar problems that have been solved before can help in solving the decomposed problems more efficiently. Consider how the current problem is similar to other problems you have solved in the past. How can these similarities help in coming up with a solution?

4. Abstraction

Question: Can we identify non-essentials aspects of our problem that we can ignore?

Usually, problems have several non-essentials aspects that can be ignored because they only distract us from solving the main problem. This is when we must filter out parts of the problem so that we can concentrate on the necessary aspects that we want to solve. It's when we create a hierarchy of elements and ignore the least relevant ones. This helps with arriving at an effective solution.

Note: Computational Thinking is an iterative non-linear process. These are not steps to follow for solving a problem but rather things to think about when solving a problem.

Fun Fact: Have you heard of the 4 C's of the 21st century: Critical Thinking, Creativity, Collaboration and Communication? Many people argue that Computational Thinking should be the 5th C.