Variables, Data Types & Operators

Operators are symbols that perform operations on variables and values. JavaScript provides several categories of operators for different types of operations.

Arithmetic Operators - Mathematical Operations:

JavaScript

1let a = 10;
2let b = 3;
3
4// Basic arithmetic
5let addition = a + b; // 13
6let subtraction = a - b; // 7
7let multiplication = a * b; // 30
8let division = a / b; // 3.333...
9let remainder = a % b; // 1 (modulo - remainder of division)
10
11// Exponentiation (ES2016)
12let power = a ** b; // 1000 (10 to the power of 3)
13
14// Assignment with arithmetic
15let x = 5;
16x += 3; // x = x + 3, now x is 8
17x -= 2; // x = x - 2, now x is 6
18x *= 2; // x = x * 2, now x is 12
19x /= 3; // x = x / 3, now x is 4
20
21// Increment and decrement
22let counter = 0;
23counter++; // Post-increment: use value, then add 1
24++counter; // Pre-increment: add 1, then use value
25counter--; // Post-decrement: use value, then subtract 1
26--counter; // Pre-decrement: subtract 1, then use value
27
28console.log(counter); // Current value depends on operations above

Comparison Operators - Testing Relationships:

JavaScript

1let num1 = 10;
2let num2 = "10";
3let num3 = 5;
4
5// Equality comparisons
6console.log(num1 == num2); // true (loose equality - type conversion)
7console.log(num1 === num2); // false (strict equality - no conversion)
8console.log(num1 != num3); // true (not equal, loose)
9console.log(num1 !== num2); // true (not equal, strict)
10
11// Relational comparisons
12console.log(num1 > num3); // true
13console.log(num1 < num3); // false
14console.log(num1 >= 10); // true
15console.log(num3 <= 5); // true
16
17// String comparisons (lexicographic)
18console.log("apple" < "banana"); // true
19console.log("Apple" < "apple"); // true (uppercase comes first)
20
21// Comparing different types
22console.log(10 > "5"); // true (string converted to number)
23console.log("10" > "5"); // false (string comparison)

Logical Operators - Boolean Logic:

JavaScript

1let isLoggedIn = true;
2let hasPermission = false;
3let isAdmin = true;
4
5// AND operator (&&) - both conditions must be true
6let canEdit = isLoggedIn && hasPermission; // false
7let canDelete = isLoggedIn && isAdmin; // true
8
9// OR operator (||) - at least one condition must be true
10let canView = isLoggedIn || hasPermission; // true
11let hasAccess = hasPermission || isAdmin; // true
12
13// NOT operator (!) - reverses the boolean value
14let isGuest = !isLoggedIn; // false
15let needsLogin = !isLoggedIn; // false
16
17// Complex logical expressions
18let canModify = (isLoggedIn && hasPermission) || isAdmin;
19let restrictedAccess = isLoggedIn && !hasPermission && !isAdmin;
20
21// Short-circuit evaluation
22let defaultName = userName || "Guest"; // Use "Guest" if userName is falsy
23let shouldProcess = isLoggedIn && processUserData(); // Only call function if logged in

String Operators - Text Manipulation:

JavaScript

1let firstName = "John";
2let lastName = "Doe";
3let age = 30;
4
5// String concatenation with +
6let fullName = firstName + " " + lastName; // "John Doe"
7let greeting = "Hello, " + firstName + "!"; // "Hello, John!"
8
9// Compound assignment with strings
10let message = "Welcome";
11message += " to our website"; // "Welcome to our website"
12message += ", " + firstName; // "Welcome to our website, John"
13
14// Template literals (modern approach)
15let modernGreeting = `Hello, ${firstName} ${lastName}!`;
16let userInfo = `User: ${fullName}, Age: ${age}`;
17let multiLine = `
18  This is a multi-line
19  string using template
20  literals.
21`;
22
23// Mixing strings and numbers
24let result = "The answer is " + 42; // "The answer is 42"
25let calculation = "5" + 3; // "53" (string concatenation)
26let mathResult = "5" * 3; // 15 (numeric operation)

Assignment Operators - Storing Values:

JavaScript

1let x = 10; // Basic assignment
2
3// Arithmetic assignment operators
4x += 5; // x = x + 5 (now 15)
5x -= 3; // x = x - 3 (now 12)
6x *= 2; // x = x * 2 (now 24)
7x /= 4; // x = x / 4 (now 6)
8x %= 3; // x = x % 3 (now 0)
9x **= 3; // x = x ** 3 (now 0)
10
11// String assignment
12let text = "Hello";
13text += " World"; // text = text + " World" (now "Hello World")
14
15// Multiple assignment
16let a, b, c;
17a = b = c = 5; // All variables get value 5
18
19// Destructuring assignment (modern JavaScript)
20let [first, second] = [1, 2]; // first = 1, second = 2
21let {name, age} = {name: "Alice", age: 25}; // Extract object properties

Conditional (Ternary) Operator - Inline Conditions:

JavaScript

1let age = 20;
2let isAdult = age >= 18 ? true : false; // Simple ternary
3let status = age >= 18 ? "Adult" : "Minor"; // More practical
4
5// Nested ternary (use sparingly)
6let category = age < 13 ? "Child" : age < 18 ? "Teen" : "Adult";
7
8// Using with functions
9let greeting = isLoggedIn ? getUserGreeting() : "Please log in";
10
11// Alternative to if/else for simple assignments
12let discount = isPremium ? 0.2 : 0.1; // 20% or 10% discount
13let shippingCost = orderTotal > 50 ? 0 : 5.99; // Free shipping over $50

Operator Precedence and Associativity:

JavaScript

1// Operator precedence determines order of operations
2let result1 = 2 + 3 * 4; // 14 (multiplication first)
3let result2 = (2 + 3) * 4; // 20 (parentheses override precedence)
4
5// Comparison and logical operators
6let condition = 5 > 3 && 10 < 20; // true (comparison first, then logical)
7let complex = 2 + 3 > 4 && 10 / 2 === 5; // true
8
9// Assignment is right-associative
10let a, b, c;
11a = b = c = 10; // Assigns 10 to c, then b, then a
12
13// Be explicit with parentheses for clarity
14let calculation = (price * quantity) + (tax * price);
15let condition = (age >= 18) && (hasLicense === true);

Type Coercion and Operators:

JavaScript

1// Automatic type conversion with operators
2console.log("5" + 2); // "52" (string concatenation)
3console.log("5" - 2); // 3 (numeric subtraction)
4console.log("5" * 2); // 10 (numeric multiplication)
5console.log("10" / "2"); // 5 (numeric division)
6
7// Boolean coercion
8console.log(!""); // true (empty string is falsy)
9console.log(!0); // true (0 is falsy)
10console.log(!null); // true (null is falsy)
11console.log(!"hello"); // false (non-empty string is truthy)
12
13// Comparison coercion
14console.log(0 == false); // true (loose equality)
15console.log(0 === false); // false (strict equality)
16console.log("" == false); // true (loose equality)
17console.log("" === false); // false (strict equality)

Best Practices for Operators:

**Use === and !==** for comparisons to avoid type coercion issues
Use parentheses to make operator precedence explicit
Avoid complex nested ternary operators - use if/else for clarity
Be careful with type coercion - convert types explicitly when needed
Use compound assignment operators (+=, -=) for conciseness

JavaScript is dynamically typed, meaning variables can change types during execution, and the language automatically converts types in certain situations. Understanding this behavior is crucial for writing reliable code.

Explicit Type Conversion (Type Casting):

Converting to String:

JavaScript

1// Using String() constructor
2let num = 42;
3let str1 = String(num); // "42"
4let bool = true;
5let str2 = String(bool); // "true"
6
7// Using .toString() method
8let str3 = num.toString(); // "42"
9let str4 = bool.toString(); // "true"
10
11// Template literals (implicit conversion)
12let str5 = `${num}`; // "42"
13let str6 = `The value is ${bool}`; // "The value is true"
14
15// Concatenation with empty string
16let str7 = num + ""; // "42"
17
18console.log(typeof str1); // "string"

Converting to Number:

JavaScript

1// Using Number() constructor
2let str = "123";
3let num1 = Number(str); // 123
4let bool = true;
5let num2 = Number(bool); // 1 (true becomes 1, false becomes 0)
6
7// Using parseInt() and parseFloat()
8let str2 = "123.45px";
9let int = parseInt(str2); // 123 (stops at first non-digit)
10let float = parseFloat(str2); // 123.45 (stops at first non-numeric)
11
12// Using unary plus operator
13let num3 = +str; // 123 (quick conversion)
14let num4 = +"456"; // 456
15
16// Special cases
17console.log(Number("")); // 0 (empty string becomes 0)
18console.log(Number(" ")); // 0 (whitespace becomes 0)
19console.log(Number("abc")); // NaN (invalid number)
20console.log(Number(null)); // 0
21console.log(Number(undefined)); // NaN
22
23// Checking for valid numbers
24let userInput = "123abc";
25let converted = parseInt(userInput);
26if (isNaN(converted)) {
27  console.log("Invalid number");
28} else {
29  console.log("Valid number:", converted);
30}

Converting to Boolean:

JavaScript

1// Using Boolean() constructor
2console.log(Boolean(1)); // true
3console.log(Boolean(0)); // false
4console.log(Boolean("")); // false (empty string)
5console.log(Boolean("hello")); // true (non-empty string)
6console.log(Boolean([])); // true (empty array is truthy!)
7console.log(Boolean({})); // true (empty object is truthy!)
8
9// Using double NOT operator (common shortcut)
10console.log(!!1); // true
11console.log(!!0); // false
12console.log(!!""); // false
13console.log(!!"hello"); // true
14
15// Falsy values in JavaScript
16let falsyValues = [false, 0, -0, 0n, "", null, undefined, NaN];
17falsyValues.forEach(value => {
18  console.log(`${value} is ${Boolean(value) ? 'truthy' : 'falsy'}`);
19});
20
21// Everything else is truthy
22let truthyValues = [true, 1, -1, "0", "false", [], {}, function() {}];
23truthyValues.forEach(value => {
24  console.log(`${value} is ${Boolean(value) ? 'truthy' : 'falsy'}`);
25});

Implicit Type Conversion (Type Coercion):

String Coercion:

JavaScript

1// When using + with strings, everything becomes a string
2console.log("5" + 2); // "52"
3console.log("Hello " + true); // "Hello true"
4console.log("Result: " + null); // "Result: null"
5console.log("Value: " + undefined); // "Value: undefined"
6
7// Template literals always convert to string
8let mixed = `Age: ${25}, Active: ${true}`; // "Age: 25, Active: true"
9
10// Array to string conversion
11console.log("Items: " + [1, 2, 3]); // "Items: 1,2,3"
12console.log("User: " + {name: "John"}); // "User: [object Object]"

Numeric Coercion:

JavaScript

1// Mathematical operators (except +) convert to numbers
2console.log("10" - 5); // 5
3console.log("10" * "2"); // 20
4console.log("15" / "3"); // 5
5console.log("10" % "3"); // 1
6
7// Unary operators
8console.log(+"42"); // 42
9console.log(-"42"); // -42
10console.log(+true); // 1
11console.log(+false); // 0
12console.log(+null); // 0
13console.log(+undefined); // NaN
14
15// Comparison operators
16console.log("10" > 5); // true (converts to numbers)
17console.log("10" > "5"); // false (string comparison)
18console.log("a" > 5); // false (NaN comparisons are always false)

Boolean Coercion:

JavaScript

1// In conditional contexts, values are converted to boolean
2let value1 = "hello";
3if (value1) { // "hello" is truthy
4  console.log("This runs");
5}
6
7let value2 = 0;
8if (value2) { // 0 is falsy
9  console.log("This doesn't run");
10}
11
12// Logical operators use boolean coercion
13console.log("hello" && "world"); // "world" (both truthy, returns last)
14console.log(0 && "world"); // 0 (first is falsy, returns first)
15console.log("hello" || 0); // "hello" (first is truthy, returns first)
16console.log(0 || "world"); // "world" (first is falsy, returns second)

Object and Array Coercion:

JavaScript

1// Objects convert to string via toString() method
2let obj = {
3  name: "John",
4  toString() {
5    return this.name;
6  }
7};
8
9console.log("User: " + obj); // "User: John"
10
11// Arrays convert to string by joining elements
12let arr = [1, 2, 3];
13console.log("Numbers: " + arr); // "Numbers: 1,2,3"
14
15let emptyArr = [];
16console.log("Empty: " + emptyArr); // "Empty: "
17
18// Date objects
19let now = new Date();
20console.log("Current time: " + now); // Converts to date string

Comparison and Equality:

JavaScript

1// Loose equality (==) performs type coercion
2console.log(0 == false); // true
3console.log(1 == true); // true
4console.log("" == false); // true
5console.log("0" == false); // true
6console.log(null == undefined); // true
7
8// Strict equality (===) does NOT perform coercion
9console.log(0 === false); // false
10console.log(1 === true); // false
11console.log("" === false); // false
12console.log("0" === false); // false
13console.log(null === undefined); // false
14
15// Best practice: use strict equality
16function compareValues(a, b) {
17  if (a === b) {
18    return "Equal";
19  } else if (a == b) {
20    return "Equal after coercion";
21  } else {
22    return "Not equal";
23  }
24}
25
26console.log(compareValues(0, false)); // "Equal after coercion"
27console.log(compareValues(0, "0")); // "Equal after coercion"

Practical Type Conversion Patterns:

JavaScript

1// Safe number conversion with validation
2function toSafeNumber(value, defaultValue = 0) {
3  const converted = Number(value);
4  return isNaN(converted) ? defaultValue : converted;
5}
6
7console.log(toSafeNumber("42")); // 42
8console.log(toSafeNumber("abc")); // 0
9console.log(toSafeNumber("abc", -1)); // -1
10
11// Safe boolean conversion
12function toSafeBoolean(value) {
13  if (typeof value === 'string') {
14    return value.toLowerCase() === 'true';
15  }
16  return Boolean(value);
17}
18
19console.log(toSafeBoolean("true")); // true
20console.log(toSafeBoolean("false")); // false
21console.log(toSafeBoolean(1)); // true
22
23// Input validation and conversion
24function processUserAge(input) {
25  // Convert to number
26  const age = parseInt(input);
27  
28  // Validate
29  if (isNaN(age) || age < 0 || age > 150) {
30    throw new Error("Invalid age provided");
31  }
32  
33  return age;
34}
35
36// Usage with error handling
37try {
38  let userAge = processUserAge("25");
39  console.log("Age is valid:", userAge);
40} catch (error) {
41  console.log("Error:", error.message);
42}

Best Practices for Type Conversion:

Be explicit - use Number(), String(), Boolean() instead of relying on coercion
Validate input - always check if conversion was successful
Use strict equality (===) to avoid unexpected coercion
Handle edge cases - empty strings, null, undefined, NaN
Document expected types - use comments or TypeScript for clarity
Test with different input types - ensure your functions handle various data types properly

JavaScript

Learning Objectives

Introduction

Variable Declarations: let, const, and var

JavaScript Data Types: Understanding the Type System

JavaScript Operators: Building Program Logic

Type Conversion and Dynamic Typing

Variables, Data Types & Operators - Interactive Data Processing Lab

How It Works

Key Takeaways

What's Next?

Table of Contents