famashines

2024-12-18

javascript

Module 4: Exploring Data Types

Objective: Understand the different data types in JavaScript, how to use them, and why they matter.

1. What Are Data Types?

Data types describe the kind of information a variable can hold. Think of it as a label that tells JavaScript how to handle the data.

Example:

Numbers: 25, 3.14
Text: "Hello, world!"
Logical values: true, false

Real-Life Analogy:

Imagine different containers for different items:

A bottle for water (number).
A jar for cookies (string).
A light switch for on/off states (boolean).

JavaScript has primitive data types and non-primitive data types. Let’s focus on the most important ones first.

2. Primitive Data Types

Primitive data types are the basic building blocks in JavaScript. There are six main types:

Number

Represents any number (integer or decimal).

Example:

let age = 30; // Integer
let price = 19.99; // Decimal

Arithmetic is straightforward:

let sum = 10 + 5; // 15
let product = 4 * 5; // 20

String

Represents text. Strings are enclosed in quotes (', ", or `).

Example:

let greeting = "Hello, world!";
let name = 'Alice';
let message = `Welcome, ${name}!`; // Template literal

Boolean

Represents a logical value: true or false.

Example:

let isAdult = true;
let isStudent = false;

Undefined

A variable declared but not assigned a value.

Example:

let job;
console.log(job); // undefined

Null
- Represents an intentional absence of value.
- Example:
```
let car = null;
```
Symbol (advanced)
- Unique identifiers (not commonly used for beginners).

3. Non-Primitive Data Types

Non-primitive types include objects and arrays. We’ll cover them in detail in later modules. For now:

Objects group related data together.
Arrays store multiple values in an ordered list.

Example:

let person = { name: "Alice", age: 25 }; // Object
let numbers = [1, 2, 3, 4]; // Array

4. Type Checking

You can check a variable’s type using the typeof operator.

Example:

let age = 25;
console.log(typeof age); // "number"

let name = "Alice";
console.log(typeof name); // "string"

let isActive = true;
console.log(typeof isActive); // "boolean"

5. Type Conversion

JavaScript allows you to convert between data types.

String to Number:

let num = "42";
console.log(Number(num)); // Converts to 42

Number to String:

let num = 42;
console.log(String(num)); // Converts to "42"

Boolean to String:

let flag = true;
console.log(String(flag)); // "true"

6. Practical Examples

Let’s try a few common use cases for data types:

Concatenating Strings:

let firstName = "John";
let lastName = "Doe";
let fullName = firstName + " " + lastName;
console.log(fullName); // John Doe

Using Booleans in Conditions:

let isLoggedIn = true;
if (isLoggedIn) {
    console.log("Welcome back!");
} else {
    console.log("Please log in.");
}

Undefined vs. Null:

let uninitialized;
console.log(uninitialized); // undefined

let empty = null;
console.log(empty); // null

7. Practice Exercise

Task 1:

Declare variables for:

Your favorite number.
A greeting message using your name.
Whether you like pizza (true or false).

Example Solution:

let favoriteNumber = 7;
let greeting = "Hi, I’m Alice!";
let likesPizza = true;

console.log(favoriteNumber);
console.log(greeting);
console.log(likesPizza);

Task 2:

Use typeof to check the type of each variable.

8. Challenge: Simple Calculator

Write a small program to calculate the sum, difference, and product of two numbers.

Example Code:

let num1 = 10;
let num2 = 5;

let sum = num1 + num2;
let difference = num1 - num2;
let product = num1 * num2;

console.log("Sum: " + sum);
console.log("Difference: " + difference);
console.log("Product: " + product);

9. Common Errors

Mismatched Quotes:

let greeting = "Hello'; // Error: Mismatched quotes

Incorrect Type Conversion:

let num = "abc";
console.log(Number(num)); // NaN (Not a Number)