Week 1 of #151daysofcode

ParthParolekar — Sat, 14 Aug 2021 18:14:44 +0000

I will be writing a blog every week to share my progress in the #151daysofcode challenge. Its been 2 weeks since I started this challenge and this is the summary of first week.

Day - 1/7

I completed a basic react project that shows the user some books based on the genres they select. It uses some of the basic react features like useState to update the state of the app depending on the genres the user selects. The genres are added dynamically so every time a book is added with a genre that is not already present, a button with that genre name is added in the app and when the user clicks that button, some books from that specific genre are displayed.

Live Project
Source Code

Day - 2/7

On day 2, I made an app with javascript that tells the user if their birthdate is lucky or not. The user inputs their birth-date and their lucky number. It then calculates the sum of digits in their birthdate. For example, if the birthdate is 1st January 2000, then the sum of digits will be (01/01/2000) 0+1+0+1+2+0+0+0=4.
If the sum of digits of the birth-date is divisible by the user's lucky number, then the user's birthdate is lucky, else it is not lucky.

Live Project
Source Code

Day - 3&4/7

On day 3 and 4, I worked on an app that tells the user the minimum number of notes to be returned to the customer. It takes bill amount as the first input and cash received as the second. If the bill amount is 50 and the cash received is 100, then the amount to be returned is 50. Now the app calculates the minimum number of notes to use to return the amount. Here it will be 1 note of 50.

Live Project
Source Code

Day - 5/7

On day 5, I made an app that checks if the user's birthdate is a palindrome or not. A palindrome is a word that spells the same backwards as well. For example "eye" is a palindrome.
The app checks if the user's birthdate is a palindrome in 3 different formats (dd/mm/yyyy, mm/dd/yyyy, mm/dd/yy). If it is not a palindrome, the app goes on to check the next or the previous date which could have been a palindrome and calculates the number of days to that date. This was one of the hardest problems to solve as there were a lot of things to take care of and coming up with a logic was not easy.

Live Project
Source Code

Day 6&7/7

I spent day 6 and 7 in creating an app about triangles. This app has multiple options that you can choose from. You can find the area of a triangle, check the hypotenuse of a triangle, check whether the three angles that you input make a triangle and finally you can take a simple quiz about triangles. You get 2 points for a correct answer, 0 if you skip the question and a point is deducted for every wrong answer.

Live Project
Source Code

Conclusion

This was pretty much what I did in my first 7 days of the #151daysofdcode challenge. I would recommend you to take part in this challenge as it helps me to be consistent. All you have to do is code at least an hour every day and share your progress on twitter. Click on this link if you want to participate.

How code is executed in Javascript.

ParthParolekar — Thu, 12 Aug 2021 05:56:47 +0000

Welcome to my first ever blog. I am learning web development and I would like to share my learning on the internet. In this blog we will see how a javascript code is executed. I saw a youtube video explaining this same topic by Akshay Saini and I will explain it in my own words. It will help me to understand it better and also spread some knowledge along the way.

How code is executed in javascript

Every time a javascript program is run, a Global Execution Context is formed. Think of it as a container that stores all the variables, functions and executes all the code written. There are two components in the global execution context.

1.) Memory component
2.) Code component

Figure 1

Let us take an example code and go step by step to see how each line of code is executed.

Figure 2

The javascript code is executed in two different phases.
Phase 1 - Memory creation phase
Phase 2 - Code execution phase

Phase 1 - Memory creation phase

In this phase, the javascript engine goes through the code written, line by line, and reserves memory for every variable and function that it encounters. The way the data is stored in the memory component is like a key-value pair. The variable name as the key and its value as its value.

Let us see this happening line by line.
Figure 3

The moment javascript encounters the 1st line (see Figure 3), it reserves a memory location for that variable with its name as a key(in this case num) and allocates a value to it. The allocated value is undefined and not 3. In phase 1, the value of the variable is always stored as undefined. Javascript does not care about the value that is assigned to that variable during the memory allocation phase. It stores the variable name as the key and undefined as its value.

Figure 4

Now let us move to the second line.

Figure 5

As you can see, we have a function keyword on line 2. This tells javascript that here's a function declaration. Just like what happened when we declared a variable, a memory location is reserved for this particular function with the name double but unlike the variable where the value is stored as undefined, the value for the function is the code inside the curly braces "{}". Yes! The entire piece of code inside those curly braces is stored in the memory component, line by line, character by character.

Figure 6

Here's an example (Figure 6) to see the values that are stored in variables and let us see what happens when we console.log num and double.

Figure 7

As we discussed above, the value stored in the variable num is undefined and the value stored in the function double is the entire code inside the curly braces{}.

The variables inside the double function do not get stored in the memory component like we saw with the num variable on line 1. We will see what happens to them very shortly.

The global execution context looks like this after completing line 2.
Figure 8

After the function is stored inside the memory component, javascript goes to the line after the function which is line 6 (figure 9)

figure 9

Now the code encounters another variable doubleNum and the same process is followed like with the num variable where the memory is reserved, the variable is stored in that memory and the assigned value is undefined.

The global execution context now looks like this(figure 10)
figure 10

This marks the end of the 1st phase which was the memory creation phase. Let's go to the next phase. The code execution phase.

Phase 2 - Code execution phase

In this phase, javascript goes through the code line by line again but this time it replaces the undefined with the actual values given to the variables.

Let's see what happens when we encounter the first line in the code execution phase.
figure 11

When javascript goes through the 1st line again, it stores the value(3) assigned to the variable num inside the memory component. The memory component now looks like this. (figure12)

figure 12

Next, it moves to the 2nd line where the function is declared and this time, the code is completely skipped till the function ends as it is already stored in the memory component during the memory creation phase.

Now we move to the 6th line and this is where things gets interesting. In this line we invoke a function double with the parenthesis (). This creates an execution context for that function inside the global execution context just like in figure13.

figure13

Just like the whole code has a global execution context, every function has its own execution context in which all the variables inside the function are stored. It is like Inception, a dream inside a dream and here we have an execution context inside an execution context. The same process is followed here. First the memory creation phase and then the code execution phase. A memory location is reserved for the variable number which is the parameter passed to the function. The value given is undefined. Same goes for the variable ans. This is how the execution context looks like after the memory creation phase.

figure14

Moving on to the code execution phase line by line.
figure15

In line 2 the value assigned to the variable number is 3 because when we invoked the function, we passed num as an argument to the function which is 3. The undefined value of number is replaced with 3.
figure16

Moving on to line 3.
figure17

The value stored in ans is number * 2 which is 3 * 2 which is equal to 6. So the undefined value of ans is replaced with 6.

figure18

Let us move to line 4.
figure19

When javascript encounters the return keyword, it takes the value of ans being returned which is 6 and stores it inside the doubleNum variable inside the global execution context.

figure20

After the function is completed executing, the execution context for that function is deleted and the control returns to the global execution context.

figure21

Since we have executed the last line, the global execution context gets deleted which marks the end of the program.

End of program

This was the journey of code execution in javascript. Thank you for reading my first blog. More to come as I learn new things.

DEV Community: ParthParolekar

Week 1 of #151daysofcode

Day - 1/7

Day - 2/7

Day - 3&4/7

Day - 5/7

Day 6&7/7

Conclusion

How code is executed in Javascript.

How code is executed in javascript

Phase 1 - Memory creation phase

Phase 2 - Code execution phase

End of program