Variables and Operators in Javascript

Welcome back to the JavaScript learning series! . In the first blog, we explored the basics of JavaScript syntax, literals, expressions, and more. Now, let’s continue by covering more concepts like the usage of let, const, and JavaScript operators. This is your second step into mastering JavaScript!

When to Use let, const, in JavaScript

JavaScript let

let – Block Scope, Local Scope, and Redeclaration

let is used to declare variables that are block-scoped, meaning they are only available within the block ({}) they are declared in. It’s commonly used in loops, conditionals, and function blocks because the variable declared with let can be updated but not redeclared.

Block Scope:

if (true) {

let name = “John”;

console.log(name); // Works within the block

}

console.log(name); // Error: name is not defined

Local Scope: Variables declared inside a function using let are local to that function.

function greet() {

let greeting = “Hello!”;

console.log(greeting);

}

greet(); // Outputs: Hello!

console.log(greeting); // Error: greeting is not defined

Redeclaration: Variables declared with let cannot be redeclared within the same scope.

let age = 25;

let age = 30; // Error: Identifier ‘age’ has already been declared

JavaScript const

const – Constant Objects and Arrays

const is used for variables that should not be reassigned. While const values themselves cannot be changed, you can still modify the properties of objects or arrays declared with const.

Constant Objects

const person = { name: “John”, age: 30 };

person.age = 31; // This works, properties can change

person = { name: “Jane” }; // Error: Assignment to constant variable

Constant Arrays

const numbers = [1, 2, 3]; numbers.push(4); // This works, elements can be modified numbers = [5, 6, 7]; // Error: Assignment to constant variable

Difference Between var, let, and const

Feature	Var	let	const
Scope	Function/Global	Block	Block
Redeclaration	Allowed	Not Allowed	Not Allowed
Reassignment	Allowed	Allowed	Not Allowed
Hoisting	Yes (with undefined)	No (not initialized)	No (not initialized)

JavaScript Operators

JavaScript operators perform operations on variables and values. There are different types of operators, and they play an important role in controlling the flow and output of your code.

Let’s go over them in more detail:

1. Arithmetic Operators

These are used to perform mathematical operations.

Addition (+): Adds two values together.

let a = 5;

let b = 3;

let result = a + b; // 8

Subtraction (-): Subtracts one value from another.

let result = a – b; // 2

Multiplication (*): Multiplies two values.

let result = a * b; // 15

Division (/): Divides one value by another.

let result = a / b; // 1.6667

Modulus (%): Returns the remainder of a division.

let result = a % b; // 2 (5 divided by 3 leaves a remainder of 2)

Increment (++): Increases a variable’s value by 1.

let a = 5;

a++; // a becomes 6

Decrement (–): Decreases a variable’s value by 1.

let a = 5;

a–; // a becomes 4

2. Assignment Operators

These operators are used to assign values to variables.

Assignment (=): Assigns the value on the right to the variable on the left.

let x = 10; // x is now 10

Addition assignment (+=): Adds the right operand to the left operand and assigns the result to the left operand.

let x = 10;

x += 5; // x is now 15

Subtraction assignment (-=): Subtracts the right operand from the left operand and assigns the result to the left operand.

x -= 3; // x is now 12

Multiplication assignment (*=): Multiplies the left operand by the right operand and assigns the result to the left operand.

x *= 2; // x is now 24

Division assignment (/=): Divides the left operand by the right operand and assigns the result to the left operand.

x /= 4; // x is now 6

3. Comparison Operators

These operators compare two values and return a boolean (true or false) depending on the comparison.

Equal to (==): Checks if two values are equal (without checking their type).

let x = 5;

let y = “5”;

console.log(x == y); // true (because both values are 5, even though one is a string)

Strict equal (===): Checks if two values are equal and of the same type.

console.log(x === y); // false (because one is a number, the other isa string)

Not equal (!=): Checks if two values are not equal.

console.log(x != y); // false (they are equal in value)

Strict not equal (!==): Checks if two values are not equal or not of the same type.

console.log(x !== y); // true (they are not equal in type)

Greater than (>): Checks if the left value is greater than the right.

console.log(7 > 5); // true

Less than (<): Checks if the left value is less than the right.

console.log(7 < 5); // false

Greater than or equal to (>=): Checks if the left value is greater than or equal to the right.

console.log(5 >= 5); // true

Less than or equal to (<=): Checks if the left value is less than or equal to the right.

console.log(5 <= 4); // false

4. String Operators

JavaScript uses the + operator to concatenate (join) strings.

Concatenation (+): Joins two or more strings together.

let firstName = “John”;

let lastName = “Doe”;

let fullName = firstName + ” ” + lastName; // John Doe

Concatenation with variables and strings:.

let greeting = “Hello, ” + firstName + “!”;

console.log(greeting); // Hello, John!

5. Logical Operators

Logical operators are typically used in conditional statements to combine multiple conditions.

Logical AND (&&): Returns true if both conditions are true.

let age = 20;

let hasLicense = true;

console.log(age >= 18 && hasLicense); // true (because both conditions are true)

Logical OR (||): Returns true if at least one condition is true.

let hasID = false;

let knowsPassword = true;

console.log(hasID || knowsPassword); // true (because one condition is true)

Logical NOT (!): Inverts the result.

let isAdult = true;

console.log(!isAdult); // false (because NOT true is false)

6. Bitwise Operators

Bitwise operators perform operations on the binary representations of numbers.

AND (&): Performs a bitwise AND.

let a = 5; // 0101

let b = 3; // 0011

let result = a & b; // 0001 (1 in decimal)

OR (|): Performs a bitwise OR.

let result = a | b; // 0111 (7 in decimal)

XOR (^): Performs a bitwise XOR.

let result = a ^ b; // 0110 (6 in decimal)

NOT (~): Inverts all the bits.

let result = ~a; // -(a+1) (inverts 5’s bits)

Left Shift (<<): Shifts the bits of a number to the left by a specified number of positions.

let result = a << 1; // 1010 (10 in decimal)

Right Shift (>>): Shifts the bits of a number to the right.

let result = a >> 1; // 0010 (2 in decimal)

7. Ternary Operator

A concise way to perform conditional operations. It’s a shorthand for an if-else statement.

Ternary (? :):

let age = 20;

let canVote = (age >= 18) ? “Yes” : “No”;

console.log(canVote); // “Yes”

8. Type Operators

typeof: Returns the type of a variable or value.

let name = “John”;

console.log(typeof name); // “string”

instanceof: Checks if an object is an instance of a specific class.

let date = new Date();

console.log(date instanceof Date); // true

Conclusion

In this blog, we went through foundational aspects of JavaScript, focusing on variables and operators, two of the most essential building blocks of the language. We explored the different ways to declare variables (let, const, and var), each with its unique use cases and scope rules. Understanding when to use each variable declaration is important for writing clear and maintainable code.

Whether you’re performing calculations, comparing values, or building logic into your applications, having a solid understanding of variables and operators will serve as the foundation for more complex programming tasks.

Request more information

Variables and Operators in Javascript