BlogResume

The Building Blocks:
Variables and Values in JavaScript

Published on: March 12, 2025

In this beginners guide, we’ll explore the different types of variables, and how to declare and assign values to them in JavaScript.

How to declare a variable in JS

Variables can be declared using the var, let, or const keywords in JavaScript.

js
// Variables in JavaScript
var a = 10; // Declaring a variable using 'var'
let b = 20; // Declaring a variable using 'let'
const c = 30; // Declaring a constant using 'const'

Naming Conventions

When naming variables, follow these best practices to ensure your code is readable and maintainable:

js
// Use camelCase for variable names
const camelCase = 'camelCase';

// Use PascalCase for class names
class PascalCase {}

// Boolean variables should start with 'is' or 'has'
const isNumber = 10;
const hasValue = true;

// Constants should be in uppercase
const PI = 3.14159;

// Variables starting with '_' are considered private
const _privateVariable = 'private'

Private variables prefixed with an underscore are a common convention. It indicates that the variable should not be accessed directly.
But this doesn't add any real security to the variable.

Re-declarations and Re-assignments

js
// Variables declared with 'var' can be redeclared
var x = 10;
var x = 20;

console.log(x); // 20

// Variables declared with 'var' can be reassigned
x = 30;

console.log(x); // 30
js
// Variables declared with 'let' cannot be redeclared
let x = 10;

console.log(x); // 10

// SyntaxError: Identifier 'x' has already been declared
let x = 20;

// Variables declared with 'let' can be reassigned
x = 30;

console.log(x); // 30
js
// Variables declared with 'const' cannot be redeclared
const x = 10;

// SyntaxError: Identifier 'x' has already been declared
const x = 20;

// SyntaxError: Assignment to constant variable
x = 30;
  • var allows re-declarations and re-assignments.
  • let allows re-assignments but not re-declarations.
  • const does not allow re-declarations or re-assignments.

Function scope with 'var'

js
// Variables declared with 'var' have function scope
var x = 10;
if (true) {
  var x = 20; // Same variable
}
console.log(x); // 20
js
var y = 10;
function test() {
	var y = 20; // Different variable
}
test();
console.log(y); // 10
  • Variables declared with var have function scope.
  • They are scoped to the nearest enclosing function.
  • If there is no enclosing function, they are scoped to the global context.

Block scope with 'let' and 'const'

js
// Variables declared with 'let' and 'const' have block scope
let x = 10;
if (true) {
	let x = 20; // Different variable
}
console.log(x); // 10
  • Variables declared with let and const have block scope.
  • They are scoped to the nearest enclosing block or statement.

Hoisting with 'var'

js
// Variables declared with 'var' are hoisted to the top of the function
console.log(a); // undefined
var a = 10;
  • Variables declared with var are hoisted to the top of their function or global context.
  • Its value is not accessible until the declaration is reached in the code.

Hoisting with 'let' and 'const'

js
// Variables declared with 'let' and 'const' are not hoisted
console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;
  • Variables declared with let and const are not hoisted.
  • They are not accessible before the declaration in the code.

So what should you use?

  • Use const by default, and only use let when you need to re-assign a variable.
  • Avoid using var as it has function scope and can lead to unintended behavior.
  • Also, var is part of the legacy ES5 syntax and is not recommended for modern JavaScript development.

Conclusion

  • Variables are used to store and manage data in JavaScript.
  • You can declare variables using var, let, or const.
  • Follow best practices when naming variables to ensure your code is readable and maintainable.
  • Remember to use const by default, and only use let when you need to re-assign a variable.
  • Avoid using var as it has function scope and can lead to unintended behavior.

Quick Links

BlogAbout

Others

ResumeSitemap

Get in Touch

EmailLinkedInGitHub

©Copyright santhosh.siva.dev. All Rights Reserved.