Friday, October 29, 2021
In JavaScript anything defined outside of a function is considered a global scope while anything that's defined inside a function is called a variable scope (local or function scope) meaning it exists inside the lifetime of the function. Let's use code to demonstrate this point
So which street fighter will win? Would it be Ryu at the global level or Ken at the local scope level? Let's go to the console to find out!
Ken is the winner! In JavaScript the local variable gets the precedence over the global variable if it's the same name.
The var keyword is used to distinguish that the variable is a local variable instead of the global variable. Let's see what happens if we don't use the var keyword in this code example
Do you think the word local or global will displayed? Let's run it and see what happens.
That's right without knowing it, you've changed the global variable if you don't use the var keyword.
One final concept about JavaScript scope that gives backend developers a lot of problems is the concept of function hoisting. As the name implied all the variables within the function is hoisted at the top of function. There are no concept of a block scope variable. A variable inside a for loop has the same scope as the variable outside of the variable. Let's use code to demonstrate this concept.
It's surprising that the first console.log statement shows the globalVariable as being undefined. That's because there's a local variable with the same name and it hasn't been declared yet. So it is undefined. But on the second console.log the globalVariable is defined as "local", that's because the globalVariable variable is defined in the function and is hoisted to the top of the function taking over the globalVariable at the global scope. It's as if the globalVariable was never defined when operating inside of the function.
Now let's see what happens when we use variables inside an if statement and for statement
Let's look at the output.
As you can see all three variables are accessible throughout the function even the for loop variable "c"!. That is weird indeed, it's something you have to think about when programming in JavaScript. One way to minimize this confusion is the declare all the variables at once at the top of the function.
var streetFighter = "Ryu"; function displayFighter() { var streetFighter = "Ken"; console.log(streetFighter); } displayFighter();
So which street fighter will win? Would it be Ryu at the global level or Ken at the local scope level? Let's go to the console to find out!
Ken is the winner! In JavaScript the local variable gets the precedence over the global variable if it's the same name.
The var keyword is used to distinguish that the variable is a local variable instead of the global variable. Let's see what happens if we don't use the var keyword in this code example
globalVariable = "global"; function displayGlobalVariable() { globalVariable = "local"; console.log(globalVariable); } displayGlobalVariable();
Do you think the word local or global will displayed? Let's run it and see what happens.
That's right without knowing it, you've changed the global variable if you don't use the var keyword.
One final concept about JavaScript scope that gives backend developers a lot of problems is the concept of function hoisting. As the name implied all the variables within the function is hoisted at the top of function. There are no concept of a block scope variable. A variable inside a for loop has the same scope as the variable outside of the variable. Let's use code to demonstrate this concept.
var globalVariable = "global"; function displayGlobalVariable() { console.log("globalVariable: " + globalVariable); var globalVariable = "local"; console.log("globalVariable: " + globalVariable); } displayGlobalVariable();
It's surprising that the first console.log statement shows the globalVariable as being undefined. That's because there's a local variable with the same name and it hasn't been declared yet. So it is undefined. But on the second console.log the globalVariable is defined as "local", that's because the globalVariable variable is defined in the function and is hoisted to the top of the function taking over the globalVariable at the global scope. It's as if the globalVariable was never defined when operating inside of the function.
Now let's see what happens when we use variables inside an if statement and for statement
var globalVariable = "global"; function displayGlobalVariable() { var a = "top of function"; if(typeof a == "string") { var b = "inside if"; for(var c=0; c < 7; c++) { console.log(c); } } console.log(a); console.log(b); console.log(c); } displayGlobalVariable();
Let's look at the output.
As you can see all three variables are accessible throughout the function even the for loop variable "c"!. That is weird indeed, it's something you have to think about when programming in JavaScript. One way to minimize this confusion is the declare all the variables at once at the top of the function.
Subscribe to:
Post Comments (Atom)
Search This Blog
Tags
Web Development
Linux
Javascript
DATA
CentOS
ASPNET
SQL Server
Cloud Computing
ASP.NET Core
ASP.NET MVC
SQL
Virtualization
AWS
Database
ADO.NET
AngularJS
C#
CSS
EC2
Iaas
System Administrator
Azure
Computer Programming
JQuery
Coding
ASP.NET MVC 5
Entity Framework Core
Web Design
Infrastructure
Networking
Visual Studio
Errors
T-SQL
Ubuntu
Stored Procedures
ACME Bank
Bootstrap
Computer Networking
Entity Framework
Load Balancer
MongoDB
NoSQL
Node.js
Oracle
VirtualBox
Container
Docker
Fedora
Java
Source Control
git
ExpressJS
MySQL
NuGet
Blogger
Blogging
Bower.js
Data Science
JSON
JavaEE
Web Api
DBMS
DevOps
HTML5
MVC
SPA
Storage
github
AJAX
Big Data
Design Pattern
Eclipse IDE
Elastic IP
GIMP
Graphics Design
Heroku
Linux Mint
Postman
R
SSL
Security
Visual Studio Code
ASP.NET MVC 4
CLI
Linux Commands
Powershell
Python
Server
Software Development
Subnets
Telerik
VPC
Windows Server 2016
angular-seed
font-awesome
log4net
servlets
tomcat
AWS CloudWatch
Active Directory
Angular
Blockchain
Collections
Compatibility
Cryptocurrency
DIgital Life
DNS
Downloads
Google Blogger
Google Chrome
Google Fonts
Hadoop
IAM
KnockoutJS
LINQ
Linux Performance
Logging
Mobile-First
Open Source
Prototype
R Programming
Responsive
Route 53
S3
SELinux
Software
Unix
View
Web Forms
WildFly
XML
cshtml
githu
Hi, You are giving good knowledge about coding. I will suggest you to increase your positive reviews. So You can take help of wallow tv that help you to Get more Yelp reviews and elevate your reputation and attract new customers by leveraging proven strategies to encourage authentic feedback. From personalized interactions to innovative incentives, discover ingenious approaches to cultivate a loyal following and stand out in the digital landscape. Maximize your impact and watch your business soar with a surge of glowing reviews on Yelp.
ReplyDelete