DEV Community: Saurav Khdoolia

Dear Developer, I need your help, in helping you!

Saurav Khdoolia — Sun, 19 Jul 2020 16:12:08 +0000

Dear Developer,

I write this while I'm resting as I've nothing to do.

Laying down on this couch,
with a white coffee mug(it has a github sticker) on the table,
And watching the rain fall.

It sounds amazing, peaceful and I feel so connected to the Nature.

Then, Suddenly i found myself in deep Thoughts about the purposeless-ness that I've been feeling. It's weird to think about it, when I've a job, family and good friends too.

Heck I've not even got cold since a year or so.

But it's restless,

You: Why?

Me: (coughs) You probably dont know, but I've a worm of teaching people hard stuff after learning it for myself. And I'm not getting opportunities to do that.

You: What does that even mean?

Me: That means you should tell me what you want to learn(Web development or Software development related, if i may say that) some stuff, that you found hard or are just interested in it.

You: Well, I can rather just look up Google. Then why?

Me: Well, First of all It's gonna be personal, I'll write it as you asked, so you can learn.
We'll have chance to discuss it, between us and with our other developer friends. Sounds good?

You: Yeah, I guess.

Me: Then, Comment:

What's that one thing that you're struggling with?
What's that one thing that you want to learn but find it hard to grab?

Go ahead, I'll try my best to learn and then teach you. I'm waiting for you.

The Great Lexical Scope of JS?

Saurav Khdoolia — Sun, 19 Jul 2020 11:10:44 +0000

Have you ever wondered why sometimes, this was undefined, while you thought it was there and that sometimes your functions work in weird ways. Well, then you're at the right spot. We'll be discussing Lexical Scopes, in this post.

What is Lexical Scope?

Javascript is basically a compiled language, The code you write is first compiled to AST then to a efficient binary, which is later executed by the JS Engine. All the variables and scopes are placed on their positions after declaration, So that they can be used by the engine while executing the program. All the declarations at the time of compilation are done in different scopes, For example:

var call = "Mr."

const Greet = function(name){
    const greeting = "Good Morning";
    console.log(`${greeting}, ${call} ${name}`)
}

Greet("Saurav")

So, What is lexical scope in here! Let's break it down.

Compiler first declares the var call, in global scope(No problemo).
Compiler then, declares a const Greet and assigns it the func we defined, in Global scope.
Then, Compiler goes inside the function we defined(New Scope Manager for the function), and checks(consults the global scope manager) if there is a greeting variable already defined in the upper scope(i.e, Global scope), if not, then it goes ahead and declares greeting.
- The Compiler checks in with current Scope Manager(of function), if there is a greeting declaration.
- Then, Compiler checks for call, but
The functions Scope Manager says: I don't know bruh, Who's this? Ask big brother global Scope Manager!

Compiler asks global Scope manager, it replies with Yes!, I've call already declared.

This is lexing, The call declaration is available to function's Scope Manager through lexical scope.
- Lexical Scope is nothing too complicated(assume it!), It is just the Scope that is determined during the compilation and is available from outer to inner scopes. e.g, Global scope is available to every scope, so on and so forth.
Compiler then comes to the Greet("Saurav") statement. Checks Greet, it's declared and Compilers compiles the code to AST.

Execution takes place after this.

There are more steps, but let's not discuss them now. I think you get what lexical scope is?

If still, You've got some doubts? Let's discuss them, Tweet @sauravkhdoolia

Resources:

Scopes

This post first appeared on The Vision Project
If You're reading this post on The Vision project. Please report any issues here

Front End Architecture 101

Saurav Khdoolia — Sat, 30 May 2020 13:24:23 +0000

Focus on Entities first, Then use cases then go the Presentation layer.

Loose Coupling, High Cohesion.

Coupling: The degree of direct knowledge that one element has of another!

High Cohesion: Keep similar & related things together!!!

Do front end as Loose Coupling, High Cohesion!

As you look in the image above, Start from Entities, Then Use Cases and then the UI! It's a good practise... Do remember the dependency rule.

Check this talk by Nir Kaufman @ ReactNYC