slopfront
preferences

Learn about JavaScript scope and blocks in a 2 minute read with code you can edit

57 points · submitted Jun 2019 by u/tchaffee

Learn about JavaScript scope and blocks in a 2 minute read with code you can edit

9 comments · 95% upvoted · source · other discussions

comments

tchaffee [OP] 7 points · Jun 2019

My goal is to use the simplest code examples possible so you can quickly learn exactly how JavaScript works. You can edit the code on JSFiddle to experiment yourself. If you have any questions about JS scope and blocks after reading the article, I will be happy to try to help you here.

Histidin 4 points · Jun 2019

So what's difference of var a=1; var a =2; to var a =1 { var a = 2} ?

tchaffee [OP] 4 points · Jun 2019

So the difference between:

var a = 1;
var a = 2;
console.log(a); // Logs 2

and

var a = 1;
{ 
  var a = 2;
}
console.log(a); // Logs 2

There is no difference as far as scope goes and the value of a after the statements execute. Give it a try yourself by modifying the JSFiddle example from the article. Note that for now I am only talking about the use of the var keyword to declare variables. When using let or const, the rules about block scope are different.

Does that help?

jonnywaffles34 3 points · Jun 2019

This is AWESOME! I see you have a post on closures too which I need to work on.

ima_coder 3 points · Jun 2019

Thanks for not making this a video.

MonkeyNin 2 points · Jun 2019

It might make more sense to understand why this happens using function-level-scoping, if you explain hoisting

That it becomes

var cute;
cute = 'not';

if (true) {
    cute = 'cat';
}

For navigation, Because of the label, users may not see the next post. Because your table of contents link appears to only show parts 1-3.

tchaffee [OP] 1 points · Jun 2019

Good suggestion. I will cover hoisting in a future and separate article because I am trying to keep all posts to a 2 to 3 minute read. Since I agree it would help understand what is happening, I will make sure I update this article with a link to the hoisting article when I write it.

​

For navigation, Because of the label, users may not see the next post. Because your table of contents link appears to only show parts 1-3

​

I am not sure what you mean by that? If you have time, could you PM me to show me what you are seeing so I can fix it? Thanks again for the feedback, much appreciated.

MonkeyNin 2 points · Jun 2019

I meant this post shows:

In JavaScript and Scope I, II, and III we looked at scope and functions. What about other statements that use blocks? B

However if you click on it, it's actually parts 1-7. So I almost missed there's already part 5 up -- I only saw it because I was looking for references to hoisting and let.

tchaffee [OP] 2 points · Jun 2019

You are right, that was not very clear. I've changed the article to provide separate links. Thanks again for your help in improving the article.