Forem: Naveen Kamath

Block Scope and Shadowing in JavaScript

Naveen Kamath — Sat, 11 Dec 2021 19:25:28 +0000

Hello Readers,

Read this Blog to know about Block Scope and Shadowing .

Block:

also known as Compound Statement. For Example

{
This is a Block.
}

Block is used to Combine Multiple JS Statements into One Group.
We group multiple statements in a Block, so that we can use it where JS expects one Statement.

if(true)   //This statement will give error.

The if syntax expects any statement after if(true) ...here.

if(true) true //This is correct.

But what if we want to include multiple statements in if block, Here we use Block {}.

if(true){
  line1
  line2
  more lines ...
}

BlockScope:

All the variables and Functions accessible inside a scope, so that's why we say let and const are Block Scoped because they are stored in a different memory space reserved for the Block.

Shadowing:

If we have same Variables outside as well as inside the block. The variable inside the block shadows the outer variables. For Example:

But Not in case of let or const due to lexical scopping

vice versa not true!.
All these programs work same for Arrow Functions too.
Thanks for Reading the blog, Have a Great Day :)

What are Closures in JavaScript?

Naveen Kamath — Sat, 11 Dec 2021 14:53:22 +0000

Hello Readers,

Keep Reading this Blog to know more about Closures ....
Lets Look at this Example:

1. function x(){
2.     var a=14;
3.     function y(){
4.         console.log(a);
5.     }
6.     y();
7. }
8. x();

The above is a Example for Closure. We already know the output of this program ie a equals 14, but lets understand theory behind this.
First we need to Understand what Lexical Scoping(LS) means,

LS means when y() gets called, it tries to find a variable inside local memory but a is not found, so it goes to its Lexical Parent and it finds variable a and thus console logs it. This is called Lexical Scoping.
A Function bundled together with its Lexical Environment forms Closure. Here the Function y was bundled to variables of x.
so in One Way, This is what Closure is !!!!

Closure Deep Dive

Consider the Example:

1. function x(){
2.     var a=14;
3.     function y(){
4.         console.log(a);
5.     }
6.     return y;
7. }
8. var z=x();
9. z();

what is the output of the above program?
The answer is when z() called in line9 returns 14, But how is that possible????
We Know that JS is Synchronus ie after running line 8, x is Deleted ie X() Execution Context(EC) gets Deleted in Call Stack.
To know more about EC, Read my EC Blog
In the above Example, 'a' is not in Global Scope and x gets deleted after line 8, So how program console logs 14. Here Closure comes into picture.
When Functions are Returned from Another Function, They still maintain their Lexical Scoping.
When y is returned, not just function code gets returned but Closure enclosed function along with its Lexical Environment gets returned and was assigned to z. This is the use case of Closures.
Other Uses of Closures:

Currying
setTimeout
memoize etc

Thanks for Reading my Blog folks, Have a great Day :)

How JavaScript Code is Executed ?

Naveen Kamath — Fri, 10 Dec 2021 16:43:47 +0000

Hello Readers,
Did you Ever wonder what happens when JS Code is Executed. Read below to Find out More:

First of all, Everything in JavaScript happens inside an Execution Context(EC). So what is this EC???
Lets Consider the below Example:

1. var number=2;
2. function Square(number){
3.    var answer=number*number;
4.    return answer;
5. }
6. var SquareTwo=Square(2);
7. var SquareFour=Square(4);

When we run the above program, A Global Execution Context is initially Created which consists of 2 phases ie Memory Creation phase and Code Execution Phase.

Memory Creation Phase : Here JS will allocate some memory to all the variables (as Undefined) and Functions are stored as Functions. For Example, variable number will be undefined and square function will have same function etc.

Code Execution Phase : Here once again JS runs line by line and assigns original value to respective variables. For Example, variable var number= 2 is assigned etc.

But when it arrives at line 6 , Function invocation happens and As a result A New Execution Context is created ie

The same Memory Creation phase and Code Execution Phase is followed inside this newly created Execution Context and after all the respective calculated values are assigned , This EC will be automatically deleted.

Here a Problem arises that Inside Functions, There is a possibility of having many Execution Contexts like the below :

To resolve this, Call Stacks were discovered : Call Stack maintains the order of Execution of Execution Contexts.

Here First EC4 is resolved and Deleted and similar process to be followed until EC1 gets deleted and the program finishes .
This is how JS works, Thanks for Reading my Blog Folks :)

Make Your Own Translator App in TEN Minutes

Naveen Kamath — Sat, 05 Dec 2020 19:05:18 +0000

Hello Guys, In this Blog I will tell You how to make a Minion Translator Web App ,Enjoy :)

Entire Code is Available on Github

Follow these Steps to get started :

# Setup :
1. Create a New Repository in Git.
2. Initialize index.html file in vs code or any other text editor.
3. Put Title ,Heading in place.
4. Initial commit ,Publish repo.

If you Dont know Github check my blog :How to Host Your First Website.

# Adding a Button :
- Create a Button in Html . <button id="btn-translate">Translate</button>
- Reference the button in Js using query Selector. let btnTranslate=document.querySelector('#btn-translate');
- Add Event Listener to Button. btnTranslate.addEventListener('click',clickEventHandler); function clickEventHandler(){ console.log('clicked');;

Thats it Button is Ready.

# Add TextArea Input :
- put a TextArea input Tag in html. <textarea class="txt-input" placeholder="Enter the Sentence to Translate"></textarea>.
- Read that is Js: let txtInput=document.querySelector('.txt-input');;
- Read the value of the Tag : console.log("Input: ",txtInput.value);;

We are done with Input Area .

# Add a Div to show Output :
- Create a Output Div . <div class="txt-input" id="output"></div>
- Reference in Js: let outputDiv=document.querySelector('#output');
- Use innerText to write div when button click happens outputDiv.innerText=(text in input div);

Final Thing Left is Calling Api from Fun Translations

Call a mock server using fetch() method.
Add fetch call in app and Update the outpur from .then() of the fetch call.

For Example:

let url='https://api.funtranslations.com/translate/minion.json'

fetch(url)

.then(response=>response.json)

.then(json=>{ transText=json.contents.translated; outputDiv.innerText=transText; })

Finally your Minion Translation APP is ready .

For source code check : Github

Thank You , Have a Nice Day :)

How to Host Your First Website

Naveen Kamath — Wed, 02 Dec 2020 09:16:06 +0000

Hello Guys ,In this Blog I will tell you how to Host your First website from scratch .
Follow These Steps :

Use Github:

If you Dont know How Github works ,Dont worry ! . I will tell you :)

Install Github Desktop:

you can click this link here and also Create a Account in Github.com .
- Now Open GitHub Desktop and Intialise a git repo .Click 'Add a New Repository '. Give the Repo name of your wish and click create . Hurray your first Git Repo has been created !!
Creating a New File in that Repo :
- Open this repo in VS Code or Any other editor of your choice.
- Create a File index.html.
- See the Changes
- ### Commit Your First Changes :
- Open Github Desktop ,and Write a commit Message and then click 'Commit to Main '. Some Good practises to write commits :
  - feat - to Add a Feature.
  - fix - to improve bug fix.
  - docs - changes in Document.
  - style - Everything Related to Styling.
  - Refractor - Here the code Changes ,but its neither bug fix or add a new Feature.
  - Test - Related to Testing.
  - chore -Updating Build Tasks,configs etc .
Finally Add a README.md File .
- click to know more.
- Publish Your Repo to Github from your Local Pc .Thats it You Now understand how to use Github and Git Desktop.

Use Netlify to Host our Website :

First , Sign upto netlify and link your Github Account.
If you followed these steps , then the next steps are piece of Cake for you :) .
Select new Site from repository and select your Github repository.

Check Deploy and change Domain Name .

YAY ! Your website is hosted now :

One Final thing Left :

Understand Pull and push Request :

push :
- After you publish your Repository to Github ,From Now On if you make any changes to your website . Make sure to commit and push the code to your github account.
pull :
- If multiple people are working with the same code base , then For Eg: if your friend commits and pushes the code, MakeSure you pull that code to your Local pc.Thats it !.

Thank you ,Bye :)