LET'S LEARN TOGETHER. THE BEAUTIFUL THING ABOUT LEARNING IS NOBODY CAN TAKE IT AWAY FROM YOU.

Understanding JavaScript Variable Declaration - Let vs. Var vs. Const




Hello World!! Today I am going to explain different way of declaring variables in Javascript. 
Let's understand with examples how Let vs Var vs Const works in Javascript.

Before we start, let me recap the concepts of scope we have in Javascript.
Scope is the concept that manages the accessibility of the variables. At a very high level, the accessibility of the variable is limited to the block where they are defined. Outside the block, the variable in inaccessible. 

Let's jump into some examples -

Example 1: 
var myFunction = function(shouldCheck){
if(shouldCheck){
var x = 'Hello World';
}
return x;
}

var result = myFunction(true);
console.log(result);
Result: Hello World
Explanation: The variable x is declared with var. This makes the variable accessible within the function. The variable is even accessible outside the code block where it is defined. 
 
Example 2:
var myFunction = function(shouldCheck){
if(shouldCheck){
var x = 'Hello World';
}
return x;
}

var result = myFunction(false);
console.log(result);
Result: undefined
Explanation: Exactly the same as above code, the only difference is this time the code block within which x is declared is not getting executed. So we are getting undefined exception.

Example 3:
var myFunction = function(shouldCheck){
var x = 'Hello World from Outside'
if(shouldCheck){
var x = 'Hello World from Inside';
console.log(x);
}
console.log(x)
}

myFunction(true);
Result: 
Hello World from Inside
Hello World from Inside
Explanation: Here the outside x declaration is overwritten by inside x declaration. Calling the function with false will retain the outside x declaration and in that case it will print "Hello World from Outside".

Example 4:
var myFunction = function(shouldCheck){
if(shouldCheck){
let x = 'Hello World';
}
console.log(x);
}

myFunction(true);
Result: x is not defined
Explanation: This time x is defined with let instead of var. Declaring a variable with let will provide block scope i.e. the variable is accessible within the block in which this is defined. This is the biggest difference between declaring variable with Var vs. Let. Now in our example since x is not accessible within the if block, that is why console.log is throwing the error that x is not defined.

Example 5:
var myFunction = function(shouldCheck){
var x = 'Hello World from Outside';
if(shouldCheck){
let x = 'Hello World from Inside';
console.log(x);
}
console.log(x);
}

myFunction(true);
Result: 
Hello World from Inside
Hello World from Outside
Explanation: This time even though we have two declarations of the same variable x (one with var and one with let), inside declaration of x is treated as a separate variable and not overwriting the x declared outside with Var.

Example 6:
var myFunction = function(shouldCheck){
let x = 'Hello World from Outside';
if(shouldCheck){
var x = 'Hello World from Inside';
console.log(x);
}
console.log(x);
}

myFunction(true);
Result: 
Identified 'x' has already been declared
Explanation: This time declaring the outside variable with let will make x accessible within the myFunction scope. Now declaring x again with Var within the same function creates conflicts and that is why the above error.

Example 7:
var myFunction = function(shouldCheck){
const x = 10;

if(shouldCheck){
var x = 100;
console.log(x);
}
console.log(x);
}

myFunction(true);
Result: 
Identified 'x' has already been declared
Explanation: This time declaring the outside variable with const will make x accessible within the myFunction scope i.e. it created the Block scope. Now declaring x again with Var within the same function creates conflicts and that is why the above error.

Example 8:
var myFunction = function(shouldCheck){
const x = 10;

if(shouldCheck){
let x = 100;
console.log(x);
}
console.log(x);
}

myFunction(true);
Result: 
100
10
Identified 'x' has already been declared
Explanation: This time declaring the outside variable with const will make x accessible within the myFunction scope i.e. it created the Block scope. Declaring x inside the loop with let creates another Block scope, which is absolutely fine even though the name of the variables are same. 

In summary, declaring variable with Const and Let will create Block Scope whereas declaring variable with Var will not create Block Scope.

Hope the above examples will help you to understand the basics of variable declaration in Javascript. Thank you and happy JavaScript learning.
 

Share:

2 comments:

  1. Thanks Sudipto da, it's really helpful and cleared manny of my doubts.

    ReplyDelete
    Replies
    1. Thank you and best of luck in learning JavaScript.

      Delete

Follow Me

Enter your email address:

Delivered by FeedBurner

Labels

Salesforce (105) Apex (47) admin (27) visualforce (21) ADM (20) dev 501 (19) integration (18) learn salesforce (18) 501 (16) lightning (16) javascript (14) SOAP (13) tutorial (11) Certification. (10) Kitchener Developer Group (8) Certification (7) Trigger (7) security (7) test class (7) unit testing (7) Advanced Admin (6) Advanced Apex (6) Sharing and Visibility (6) design pattern (6) developer (6) report (6) salesforce release (6) service cloud (6) trailhead (6) Lightning Experience (5) New Features (5) SOQL (5) css (5) dashboard (5) debug (5) formula (5) mobile (5) solution management (5) use case (5) JSON (4) Kitchener User Group (4) Lightning Web Component (4) Sales Cloud (4) Salesforce DX (4) Tips (4) WebSphere (4) best practice (4) cast iron (4) component (4) deployment (4) event (4) github (4) html (4) polymer (4) profiles (4) responsive (4) tdd (4) ui (4) visual studio code (4) Architect (3) Live Chat (3) Online Event (3) Opportunity (3) Performance (3) Products (3) REST (3) Role (3) Salesforce Certification (3) Scratch Org (3) Study Notes. (3) Summer15 (3) Web Technology (3) automation tool (3) dynamic apex (3) license (3) map (3) mapbox (3) release (3) singleton (3) version controlling (3) Asynchronous callout (2) Aura Framework (2) Bulkify (2) Community (2) Data Architecture and Management Certification (2) Devops (2) Distributed Version Controlling (2) ES6 (2) Eclipse (2) Einstein (2) Enterprise Territory Management (2) Financial Services Cloud (2) Force.com IDE (2) Governor Limit (2) Groups (2) IBM (2) Implicit Sharing (2) JourneyToCTA (2) LWC (2) Lightning Design System (2) Lightning Feature (2) Live Agent (2) Metadata (2) PD II (2) Price Book (2) SOSL (2) Sharing (2) Spring 15 (2) Summer17 (2) Territory (2) VS Code (2) Virtual Event (2) ant (2) basic (2) chatter (2) coding (2) communication (2) configuration (2) console (2) controller (2) documentation (2) dreamforce (2) flow (2) git (2) jquery (2) logging (2) object (2) permission (2) process builder (2) salesforce1 (2) strategy (2) xml (2) Action Plan (1) Action Plan Template (1) Activity Timeline (1) Advanced Currency (1) Agent Productivity (1) Analytics (1) Apex Sharing (1) AppExchange (1) Arrow (1) Article (1) Asynchronous Apex (1) Batch (1) Bots (1) Browser (1) Bulk data load (1) CTA (1) Calendar (1) Canon (1) Case Management (1) Celebration (1) Cheat Sheet (1) Classic (1) Compare (1) Confetti (1) Constructor (1) Contact Center (1) Continuation (1) Continuous Integration (1) Convert (1) Cookie (1) CumulusCI (1) Custom Metadata (1) Custom Object (1) Custom Permission (1) Customer (1) Dated Exchange Rate (1) Decorator Design Pattern (1) Dev Hub (1) Development (1) Diwali (1) EDA (1) ESLint (1) Education Cloud (1) Email (1) FSC (1) Function (1) Future (1) Global Gathering (1) Goals (1) Guest Access (1) Guest Profile (1) Guest User Sharing Rule (1) Guide (1) HEDA (1) Higher Education (1) Household (1) Husky (1) IDE (1) Ideas (1) Improvement (1) KPIs (1) Knowledge Management (1) Large Data Volume (1) LastModifiedDate (1) Manage Currencies (1) Manual Sharing (1) Metrics (1) Multi Currency (1) New (1) New Feature (1) OOPS (1) OWD (1) Omni-Channel (1) Partner (1) Permission Set (1) Person Account (1) Photo (1) Pipeline (1) Platform Developer I (1) Platform Developer II (1) Presentation (1) Prettier (1) Product Schedule (1) Profile (1) Promise (1) Prototype (1) Public Site (1) Query Plan (1) Queueable (1) QuickReference (1) Related records (1) Reports (1) Retrieve (1) Role Hierarchy (1) SAL (1) SFDX (1) Salesfor (1) Salesforce Advisor Link (1) Salesforce Labs (1) Salesforce Optimizer (1) SalesforceDx (1) Schedule (1) Session (1) Sharing Rule (1) Sharing Sets (1) Site (1) Skills (1) Snap-ins (1) Spring 17 (1) Spring 20 (1) Summer14 (1) Summer16 (1) Summer19 (1) Switch (1) SystemModStamp (1) Timeline (1) Unauthorized Access (1) User License (1) Users (1) Validation Rule (1) Web (1) Webservice (1) Winter'15 (1) Winter'17 (1) access (1) actionFunction (1) actionPoller (1) actionRegion (1) actionSupport (1) agile (1) app (1) approval process (1) aura (1) awesome (1) backup (1) bitbucket (1) book (1) campaign (1) change set (1) code (1) code coverage (1) csv (1) custom button (1) custom settings (1) customization (1) data loader (1) database (1) delegate Admin (1) describe (1) dom (1) duplicate (1) dynamic (1) equals (1) error (1) field-level security (1) folder (1) ftp (1) generic (1) gift (1) global describe (1) hashcode (1) import wizard (1) jenkins (1) keynote (1) long running requests (1) monitoring (1) mysql (1) page layout (1) personal (1) power of one (1) record type (1) relationship (1) request (1) review (1) sub-tab (1) tab (1) username (1) visual workflow (1) workflow (1)

Popular Posts

Total Subscribers

Total Pageviews

Contact Me

Name

Email *

Message *