← Back to Course Overview

Module 2: Technical Preparation - Data Types and If-Then Statements

Data Types and Conversions

Boolean Programming Logic and If Statements

Guided Project

In-Depth: Data Types and Control Flow

JavaScript Data Types Explained

JavaScript has several built-in data types that you need to understand for effective programming:

// Primitive types
let string = "Hello, world!";        // Text
let number = 42;                     // Regular number
let bigInt = 9007199254740991n;      // Very large integers
let boolean = true;                  // true or false
let nullValue = null;                // Intentional absence of value
let undefinedValue;                  // Uninitialized variable
let symbol = Symbol("unique");       // Unique identifier

// Complex types
let array = [1, 2, 3, "four", true]; // Collection of values
let object = {                       // Key-value pairs
  name: "JavaScript",
  year: 1995,
  isAwesome: true
};

// Checking types
console.log(typeof string);      // "string"
console.log(typeof number);      // "number"
console.log(typeof boolean);     // "boolean"
console.log(typeof array);       // "object" (arrays are objects in JS)
console.log(typeof object);      // "object"
console.log(Array.isArray(array)); // true (proper way to check for arrays)

Type Conversion: Implicit vs Explicit

JavaScript often converts data types automatically (implicit conversion), but you can also convert types manually (explicit conversion):

// Implicit conversion (automatic)
console.log("5" + 2);        // "52" (number is converted to string)
console.log("5" - 2);        // 3 (string is converted to number)
console.log(5 + true);       // 6 (true is converted to 1)
console.log(5 + false);      // 5 (false is converted to 0)
console.log(Boolean("Hello")); // true (non-empty string converts to true)
console.log(Boolean(""));    // false (empty string converts to false)

// Explicit conversion (manual)
console.log(Number("42"));           // 42
console.log(String(42));             // "42"
console.log(Boolean(1));             // true
console.log(parseInt("42.5px", 10)); // 42 (parses until non-digit)
console.log(parseFloat("42.5px"));   // 42.5

// Common conversion gotchas
console.log(Number(""));       // 0
console.log(Number("hello"));  // NaN (Not a Number)
console.log(Number(null));     // 0
console.log(Number(undefined)); // NaN

Conditional Logic with If-Else Statements

Conditional logic allows your code to make decisions and execute different blocks of code based on conditions:

// Basic if statement
let temperature = 75;

if (temperature > 80) {
  console.log("It's hot outside!");
}

// If-else statement
if (temperature > 80) {
  console.log("It's hot outside!");
} else {
  console.log("It's not too hot today.");
}

// If-else-if ladder
if (temperature > 80) {
  console.log("It's hot outside!");
} else if (temperature > 60) {
  console.log("It's a pleasant day.");
} else if (temperature > 40) {
  console.log("It's a bit chilly.");
} else {
  console.log("It's cold outside!");
}

// Ternary operator (shorthand for simple if-else)
let message = temperature > 80 ? "It's hot!" : "It's not hot.";
console.log(message);

Logical Operators and Compound Conditions

Combine multiple conditions using logical operators to create more complex logic:

// Logical AND (&&) - both conditions must be true
let isWeekend = true;
let isNice = true;

if (isWeekend && isNice) {
  console.log("Let's go to the park!");
}

// Logical OR (||) - at least one condition must be true
let hasUmbrella = false;
let hasRaincoat = true;

if (hasUmbrella || hasRaincoat) {
  console.log("You can go out in the rain.");
}

// Logical NOT (!) - reverses a boolean value
let isRaining = true;

if (!isRaining) {
  console.log("No need for an umbrella.");
} else {
  console.log("Take an umbrella!");
}

// Complex condition
let temperature = 75;
let isRaining = false;
let hasFreeTime = true;

if ((temperature > 70 && !isRaining) && hasFreeTime) {
  console.log("Perfect day for a picnic!");
}

Truthy and Falsy Values

In JavaScript, certain values are considered "falsy" and others "truthy" when evaluated in a boolean context:

// Falsy values:
if (false) {} // false
if (0) {}     // false
if ("") {}    // false
if (null) {}  // false
if (undefined) {} // false
if (NaN) {}   // false

// Everything else is truthy:
if (true) {}        // true
if (1) {}           // true (any non-zero number)
if ("hello") {}     // true (any non-empty string)
if ([]) {}          // true (empty array)
if ({}) {}          // true (empty object)
if (function(){}) {} // true (function)

// Practical use case
function getUserName(user) {
  if (!user) {  // Checks if user is falsy (null/undefined)
    return "Guest";
  }
  
  return user.name || "Unnamed User"; // Return name if exists, otherwise fallback
}

Tips for Debugging Conditional Logic

Additional Resources