[JavaScript] Variable

There are two types of variables in JS.

One is a mutable type and the other is an immutable type.

And, we use var, let, and const keywords for defining a variable.

Mutable Variable

We use the var and let keyword for defining mutable variables.

In the past, we used var, but now, we usually use let because var has issues like scope and hoisting.

let mutable_var = 'I am a mutable variable.';
console.log(`${mutable_var}`);
// I am a mutable variable.

mutable_var = 'I can be modified.'; 
console.log(`${mutable_var}`);
// I can be modified.

Literally, a mutable variable can be modified after it is defined.

Immutable Variable

We use the const keyword when we define immutable variables.

const immutable_var = 'I am an immutable variable.';
console.log(`${immutable_var}`);
// I am an immutable variable.

immutable_var = 'I can not be modified.';
// => Uncaught TypeError: Assignment to constant variable.

As you can see in this example code, immutable variables can't be modified after it is defined.

Naming Convention

In naming the variables, we can use all the characters, numbers, underscore (_), and dollar sign ($) except for the special characters.

And we can't start with numbers.

We can't use reserved words for naming variables.

In JS, we normally use the camel case for naming variables and functions and the pascal case for naming class and constructor.

Reserved Words

await	break	case	catch	class	const	continue	debugger
default	delete	do	else	enum	export	extends	false
finally	for	function	if	implements	import	in	instanceof
interface	let	new	null	package	private	protected	public
return	super	static	switch	this	throw	true	try
typeof	var	void	while	with	yield

Variable Reassignment

Unlike the same language as C, JS is allocated new memory space whenever a value is assigned to a variable.

The discarded memory spaces are cleaned up by the GC (Garbage Collector).

Fortunate for you, JS is a managed language, so you don't need to care about memory management.

Hoisting

If you have an experiment with other languages, this is the most confusing concept.

Simply hoisting is the automatic movement of the declaration to the top.

Let me describe it in more detail.

When we execute JS code, JS first prepares to execute the source code through the evaluation process of the source code.

In this process, JS finds all declaration statements and executes them.

Therefore, it seems as if the declaration has been moved to the top.

All JS variables are assigned undefined as default values at this time.

 

Let's see the example.

console.log(`${hoisting_var}`);
// undefined

hoisting_var = 'I am used before definition.';
console.log(`${hoisting_var}`);
// I am used before definition.

var hoisting_var = 'I am a hoisting variable.';
console.log(`${hoisting_var}`);
// I am a hoisting variable.

Like the above example, we can use variables before it is defined.

 

If we use let instead of var, we face errors.

In the var case, undefined variables are hoisted with the undefined type.

On the other hand, in the let and const case, undefined variables are hoisted with the uninitialized state.

var vs let vs const

Type	Scope	Hoisting	Mutable
var	Function	Hoisting	Mutable
let	Block	Hoisting	Mutable
const	Block	Hoisting	Immutable