DEV Community

vishwa v
vishwa v

Posted on

Javascript(variables & operators)

Variables
In JavaScript, variables are like containers that hold values. They let us store data, reuse it, and change it when needed. Without variables, programming would be like trying to solve math problems without writing anything down

Declaring Variables

var (old way, rarely used now)

Function-scoped

Can be redeclared and updated

var name = "Saran";
var name = "Vishwa"; // redeclaration allowed
Enter fullscreen mode Exit fullscreen mode

let (modern, preferred for changing values)

Block-scoped

Can be updated but not redeclared in the same scope

let age = 22;
age = 23; // ✅ allowed
Enter fullscreen mode Exit fullscreen mode

const (for fixed values)

Block-scoped

Cannot be updated or redeclared

const pi = 3.14;
// pi = 3.14159; ❌ error
Enter fullscreen mode Exit fullscreen mode

Operators

Assignment operators:

The Assignment Operator (=) assigns a value to a variable

// Assign the value 5 to x
let x = 5;
// Assign the value 2 to y
let y = 2;
// Assign the value x + y to z:
let z = x + y;
Enter fullscreen mode Exit fullscreen mode

Arithmetic operators
Used for mathematical calculations.
There are 6 types

let a = 10, b = 5;

console.log(a + b);  // Addition
console.log(a - b);  // Subtraction
console.log(a * b);  // Multiplication
console.log(a / b);  // Division
console.log(a % b);  // Modulus (remainder)
console.log(a ** b); // Exponentiation

Enter fullscreen mode Exit fullscreen mode

Type casting
Typecasting (also called type conversion) means converting a value from one data type to another.
JavaScript is a loosely typed language, so it often converts types automatically (implicit conversion). But you can also do it manually (explicit conversion).

Implicit Typecasting (Type Coercion)

JavaScript automatically converts values when needed.

console.log("5" + 2);   // String + Number
console.log("5" - 2);   // String - Number
console.log(true + 1);  // Boolean + Number
Enter fullscreen mode Exit fullscreen mode

Output:
52 // "5" becomes string, concatenation
3 // "5" becomes number, subtraction
2 // true becomes 1

Explicit Typecasting (Manual Conversion)

You can manually convert values using built-in functions.

Convert to Number

let str = "123";
console.log(Number(str));
console.log(parseInt("123.45"));
console.log(parseFloat("123.45"));
Enter fullscreen mode Exit fullscreen mode

Output:
123
123
123.45

Convert to String

let num = 100;
console.log(String(num));
console.log(num.toString());
Enter fullscreen mode Exit fullscreen mode

Output:
100
100

Convert to Boolean

console.log(Boolean(1));
console.log(Boolean(0));
console.log(Boolean(""));
console.log(Boolean("Hello"));
Enter fullscreen mode Exit fullscreen mode

Output:
true
false
false
true

Common Pitfalls

Typecasting (type conversion) is powerful, but it can also cause unexpected results if you’re not careful. Let’s look at some common mistakes.

Pitfall 1: String + Number = Concatenation

console.log("5" + 2);
Enter fullscreen mode Exit fullscreen mode

Output:
52

Here, JavaScript converts 2 into a string and joins it with "5". Beginners often expect 7.

Pitfall 2: String - Number = Arithmetic

console.log("5" - 2);
Enter fullscreen mode Exit fullscreen mode

Output:
3

Unlike addition, subtraction forces "5" into a number. This inconsistency can be confusing.

Pitfall 3: == vs ===

console.log(5 == "5");   // true
console.log(5 === "5");  // false
Enter fullscreen mode Exit fullscreen mode

Output:
true
false

== does type coercion (converts "5" to number), while === checks both value and type. Always prefer === for safer comparisons.

Pitfall 4: Boolean Conversion Surprises

console.log(Boolean(""));     // false
console.log(Boolean("0"));    // true
console.log(Boolean(0));      // false
Enter fullscreen mode Exit fullscreen mode

Output:
false
true
false

Pitfall 5: NaN (Not a Number)

console.log(Number("Hello"));
Enter fullscreen mode Exit fullscreen mode

Output:
NaN

Trying to convert non-numeric strings results in NaN. Remember, NaN is still of type "number":

NaN
NaN stands for “Not a Number”.
It’s a special value in JavaScript that represents an invalid number or a failed numeric operation.

When Do You Get NaN?

Invalid Number Conversion

console.log(Number("Hello"));
Enter fullscreen mode Exit fullscreen mode

Output:
NaN

"Hello" cannot be converted to a number.

Math Errors

console.log(0 / 0);
console.log(Math.sqrt(-1));
Enter fullscreen mode Exit fullscreen mode

Output:
NaN
NaN

Division by zero or square root of a negative number results in NaN.

Operations with NaN

let x = NaN;
console.log(x + 5);
console.log(x === NaN);
Enter fullscreen mode Exit fullscreen mode

Output:
NaN
false

Any arithmetic with NaN gives NaN.
And surprisingly, NaN === NaN is false because NaN is not equal to anything, even itself!

Top comments (0)