🧠 JavaScript Data Types & Structures

🔢 Primitive Data Types

JavaScript supports several primitive data types:

• String: Textual data enclosed in "double", 'single', or `backtick` quotes.
• Number: Numeric data (Note: JavaScript only has one number type; there are no separate integers or floats).
• Boolean: Logical values: true or false.
• Undefined: A declared variable that has not been assigned a value.
• Null: A variable explicitly assigned with no value.

console.log("Hi"); // Outputs: Hi
console.log(5 + 4); // Outputs: 9

🧪 Boolean Example

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

⚠️ Undefined vs. Not Defined

In JavaScript, a variable that is declared but not assigned a value returns undefined:

let x;
console.log(x); // Outputs: undefined
console.log(typeof x); // Outputs: "undefined"

Note:

• Undefined: The variable exists but has no value.
• Not Defined: Attempting to access a variable that hasn't been declared results in a ReferenceError.

// console.log(t1); // ReferenceError: t1 is not defined

🧰 Non-Primitive (Reference) Data Types

These include more complex data structures:

• Arrays: Ordered lists of values.
• Objects: Collections of key-value pairs.
• Functions: Reusable blocks of code.

📚 Arrays

Arrays store a list of values by index.

let marks = [90, 100, 40];
console.log(marks[0]); // Outputs: 90
console.log(marks[1]); // Outputs: 100
console.log(marks[2]); // Outputs: 40

🗂️ Objects

Objects store properties as key-value pairs. For example:

let person = {
  name: "Sumit",
  age: 20,
  hobbies: ["Chess", "Badminton"],
};

console.log(typeof person); // Outputs: "object"

🔍 Accessing Object Properties

Dot Notation: Use when the key is a valid identifier.

console.log(person.name); // Outputs: "Sumit"

Bracket Notation: Use when the key has spaces or special characters, or for dynamic access.

console.log(person["age"]); // Outputs: 20

let key = "hobbies";
console.log(person[key]); // Outputs: ["Chess", "Badminton"]

🏗️ Complex Data Structures

🧱 Nested Objects

Objects can be nested within other objects:

let person2 = {
  name: "Sumit",
  age: 20,
  hobbies: ["Chess", "Badminton"],
  address: {
    city: "Vadodara",
    state: "Gujarat",
  },
};

🏙️ Accessing Nested Properties

console.log(person2.address.city); // Outputs: "Vadodara"
console.log(person2["address"]["city"]); // Outputs: "Vadodara"

🎯 Array Elements within Objects

console.log(person2.hobbies[1]); // Outputs: "Badminton"

👥 Array of Objects

A common data structure is an array where each element is an object:

let users = [
  { id: 1, name: "John", active: true },
  { id: 2, name: "Jane", active: false },
  { id: 3, name: "Bob", active: true },
];

📌 Accessing a Specific Object

console.log("Name: " + users[2].name + ", Status: " + users[2].active);
// Outputs: Name: Bob, Status: true

🔄 Functions

Functions are used for code reusability and to improve maintainability.

function add(n1, n2) {
  return "Sum is " + (n1 + n2);
}

console.log(typeof add); // Outputs: "function"
console.log(add(4, 10)); // Outputs: "Sum is 14"
console.log(add(4, 8)); // Outputs: "Sum is 12"

🧾 Function to Get User Details

This function returns a user's name and status by their index in the users array.

function getDetails(index, users) {
  return "Name: " + users[index].name + ", Status: " + users[index].active;
}

console.log(getDetails(0, users)); // Outputs: Name: John, Status: true
console.log(getDetails(1, users)); // Outputs: Name: Jane, Status: false
console.log(getDetails(2, users)); // Outputs: Name: Bob, Status: true

✨ ES6 Features

🧵 Template Literals

Template literals allow for multi-line strings and make string interpolation easier with backticks (`).

const multiLine = `
  This is a multi-line
         string that preserves
  line breaks and spacing
`;

console.log(multiLine);

🔗 String Interpolation

Embed variables directly within strings:

let name1 = "Ragav";
let age1 = 30;

console.log(`Name: ${name1}, Age: ${age1} has followers ${2 * 1000}`);
// Outputs: Name: Ragav, Age: 30 has followers 2000

🛠️ Refactored Function with Template Literals

Enhance readability by using template literals within your functions.

function getDetails(index, users) {
  return `Name: ${users[index].name}, Status: ${users[index].active}`;
}

console.log(getDetails(0, users)); // Outputs: Name: John, Status: true
console.log(getDetails(1, users)); // Outputs: Name: Jane, Status: false
console.log(getDetails(2, users)); // Outputs: Name: Bob, Status: true