HowToDoInJava

  • Java 8
  • Regex
  • Concurrency
  • Best Practices
  • Spring Boot
  • JUnit5
  • Interview Questions
  • Dark Mode

TypeScript Variables – var, let and const

By Lokesh Gupta | Filed Under: TypeScript

In vanilla JavaScript, variables are declared using ‘var‘ keyword. In ES6, now, you can define variables using let and const keywords also. All three keywords have simalar syntax for variable declaration and initialization, but they differ on their scope and usage. Let’s learn the differences between these 3 keywords.

var keyword

‘var‘ keyword has traditional variable definition syntax. Optionally, you can initialize the variable with a value. f you do not initialize your variable in the var statement, it is automatically assigned the JavaScript value undefined.

var value ; 	//value is 'undefined'

var data = 100;	//initialized with number 100

var blogName = 'howtodoinjava.com';	//initialized with string value

1) Scope

  • Variables declared with the var keyword have function scope (i.e. global scope inside function in which they are declared); this means that they can be accessed by any function sharing the same scope.
    function fun() 
    {
    	var dataX = 10;	//Globally available inside function fun()
    
    	if(true) 
    	{
    		var dataY = 20;	//Globally available inside function fun() 
    
    		console.log(dataX);	//Output 10
    		console.log(dataY);	//Output 20
    	}
    	
    	console.log(dataX);	//Output 10
    	console.log(dataY);	//Output 20
    }
    
    fun();
    
    console.log(dataX);	//Not available outside function; dataX is undefined
    console.log(dataY);	//Not available outside function; dataY is undefined
    
  • Variables can be used before you declare or initialize them. Their value will be undefined in this case, but there will not be any runtime error.
    function fun() 
    {
    	console.log(dataX);	//Output 'undefined'
    	
    	var dataX = 10;
    }
    fun();
    

2) Hoisting of var declarations

Please note that variables declared with the var keyword are subject to hoisting. Hoisting means that if we declare a variable (declared but not initialized) at the end of a function, the runtime will hoist it to the top and we will not have any error if we would have used that variable before being declared.

Read More: JavaScript Hoisting

3) If you do not use ‘var’ keyword

In JavaScript, if you do not use var keyword for variable declaration (implicit declaration) then variable will be created in global scope. e.g.

for(index=0; index< array.length; index++){		//index is in global scope
   //code
}

Above for-loop will create a variable called index in the global scope. If someone else happened to also be using a global index variable, then you’ve just overwritten their variable.

To avoid giving the variable global scope, you must use the var keyword in your variable declaration.

let keyword

let keyword is very similar to var keyword – with more restrict in scoping.

  1. Use the let statement to declare a variable, when scope MUST BE restricted to the block in which it is declared.
    function fun() 
    {
    	let dataX = 10;	
    
    	if(true) 
    	{
    		let dataY = 20;	
    
    		console.log(dataX);	//Output 10
    		console.log(dataY);	//Output 20
    	}
    	
    	console.log(dataX);	//Output 10
    	console.log(dataY);	//dataY is 'undefined'
    }
    
    fun();
    

    See above highlighted line. If you have used ‘var‘ keyword then dataY would have been available due to its global scope within function. Because of let keyword, dataY is not visible beyond if block.

  2. A variable declared using let cannot be used before its declaration or an error will result.
    function fun() 
    {
    	console.log(x);		//Output 'undefined'
    	console.log(y);		//Error - "Uncaught ReferenceError: y is not defined"
    	
    	var x = 10;
    	let y = 11;
    }
    fun();
    

const keyword

  1. const declares a block-scoped variable with a constant value. It is basically variable declaration with ‘var‘ keyword where variable value is constant and cannot be changed.
  2. const follows the same scoping principles as the let keyword.
  3. if you know that the variable you are declaring cannot and should not be allowed to reassign, then declare it with const, else use the let keyword.

Syntax and Usage

const PI = "3.14";

PI = 12;	//Uncaught TypeError: Assignment to constant variable.

Drop me your questions in comments section.

Happy Learning !!

TwitterFacebookLinkedinRedditPocket

About Lokesh Gupta

A family guy with fun loving nature. Love computers, programming and solving everyday problems. Find me on Facebook and Twitter.

Leave a Reply

This comment form is under antispam protection
This comment form is under antispam protection
  Subscribe  
Notify of

Search Tutorials

TypeScript Tutorial

  • TypeScript – Introduction
  • TypeScript – Types
  • TypeScript – Union Types
  • TypeScript – String Literal Types
  • TypeScript – var, let and const
  • TypeScript – Template Strings
  • TypeScript – Arithmetic Operators
  • TypeScript – Logical Operators
  • TypeScript – Comparison Operators
  • TypeScript – ‘for…of’ Loop
  • TypeScript – Spread Operator
  • TypeScript – Arrays
  • TypeScript – Enums
  • TypeScript – Map
  • TypeScript – Set
  • TypeScript – Functions
  • TypeScript – Function Overloading
  • TypeScript – Transpiler
  • TypeScript – Truthy and falsy
  • TypeScript – == vs ===
  • TypeScript – undefined vs null
  • TypeScript – Variable Hoisting
  • TypeScript – tsconfig.json

Popular Tutorials

  • Java 8 Tutorial
  • Core Java Tutorial
  • Collections in Java
  • Java Concurrency
  • Spring Boot Tutorial
  • Spring AOP Tutorial
  • Spring MVC Tutorial
  • Spring Security Tutorial
  • Hibernate Tutorial
  • Python Tutorial
  • Jersey Tutorial
  • Maven Tutorial
  • Log4j Tutorial
  • Regex Tutorial

Meta Links

  • Advertise
  • Contact Us
  • Privacy policy
  • About Me

Recommended Reading

  • 10 Life Lessons
  • Secure Hash Algorithms
  • How Web Servers work?
  • How Java I/O Works Internally?
  • Best Way to Learn Java
  • Java Best Practices Guide
  • Microservices Tutorial
  • REST API Tutorial
  • How to Start New Blog

Copyright © 2016 · HowToDoInjava.com · All Rights Reserved. | Sitemap

wpDiscuz