Javascript Scoping Review - Function Scope

JavaScript Scope: Function Scope

Recently I was reviewing some Javascript and came across this great tutorial on how best to understand Javascript function scope. It's a youtube video and this guy (so sorry I don't know his name but his channel is called allthingsjavascript.com) explains Javascript function scope nicely, check it out: Understanding Scope in Javascript

USAGE: Copy and paste the code samples below into the Javascript console in your browser, then simply hit return on your keyboard to see the code in action.

Some basic rules of Javascript function scope:
  • Your variables are declared either inside of a function (function scope) or outside of any functions - which will put your variable into the global scope.
  • You can nest functions - and consequently variable declarations inside those functions - which will then create a scope chain. In his video he offers a great diagram explaining this concept by identifying the individually nested functions and their scopes by letter, but at first it will make you think you have to look "out" which could be slightly confusing. Instead when you're tracking scope chains in Javascript you simply look "up" a scope chain - the difference is subtle but (assuming your code is formatted and indented correctly) if you don't see the variable in question inside of the current function, then you can look up a level, and continue looking up until you find your referenced variable, and if you don't find it then you can anticipate an error and plan your code accordingly.
var a =10;
			
var add5=function(num) {
	var b = 5;
	console.log(num + b);
	
	var add10=function(num2) {
		console.log(num2+a);	
	};	
	
	add10(3);
	
	var add15=function(num3) {
		var c=15;
		console.log(num3+c);
	};
	
	add15(3);
};

add5(3);


Link your website to this page! Copy and paste the URL below:
http://www.cfsnap.com/javascript/javascript-scoping-review-function-scope/
Copyright 2019. All Rights Reserved.