Data Analytics

# 📚 JavaScript Tutorial - Part 7/10: Object-Oriented JavaScript & Prototypes #JavaScript #OOP #Prototypes #Classes #DesignPatterns Welcome to Part 7 of our JavaScript series! This comprehensive lesson will take you deep into JavaScript's object-oriented programming (OOP) system, prototypes, classes, and design patterns. --- ## 🔹 JavaScript OOP Fundamentals ### 1. Objects in JavaScript JavaScript objects are dynamic collections of properties with a hidden [[Prototype]] property.

// Object literal (most common)
const person = {
  name: 'Ali',
  age: 25,
  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
};

// Properties can be added dynamically
person.country = 'UAE';
delete person.age;

### 2. Factory Functions Functions that create and return objects.

function createPerson(name, age) {
  return {
    name,
    age,
    greet() {
      console.log(`Hi, I'm ${this.name}`);
    }
  };
}

const ali = createPerson('Ali', 25);

### 3. Constructor Functions The traditional way to create object blueprints.

function Person(name, age) {
  // Instance properties
  this.name = name;
  this.age = age;
  
  // Method (created for each instance)
  this.greet = function() {
    console.log(`Hello, I'm ${this.name}`);
  };
}

const ali = new Person('Ali', 25);

The `new` keyword does: 1. Creates a new empty object 2. Sets this to point to the new object 3. Links the object's prototype to constructor's prototype 4. Returns the object (unless constructor returns something else) --- ## 🔹 Prototypes & Inheritance ### 1. Prototype Chain Every JavaScript object has a [[Prototype]] link to another object.

// Adding to prototype (shared across instances)
Person.prototype.introduce = function() {
  console.log(`My name is ${this.name}, age ${this.age}`);
};

// Prototype chain lookup
ali.introduce(); // Checks ali → Person.prototype → Object.prototype → null

### 2. Manual Prototype Inheritance

function Student(name, age, grade) {
  Person.call(this, name, age); // "Super" constructor
  this.grade = grade;
}

// Set up prototype chain
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

// Add methods
Student.prototype.study = function() {
  console.log(`${this.name} is studying hard!`);
};

### 3. Object.create() Pure prototypal inheritance.

const personProto = {
  greet() {
    console.log(`Hello from ${this.name}`);
  }
};

const ali = Object.create(personProto);
ali.name = 'Ali';

--- ## 🔹 ES6 Classes Syntactic sugar over prototypes. ### 1. Class Syntax

class Person {
  // Constructor (called with 'new')
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  // Instance method
  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
  
  // Static method
  static compareAges(a, b) {
    return a.age - b.age;
  }
}

### 2. Inheritance with `extends`

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age); // Must call super first
    this.grade = grade;
  }
  
  study() {
    console.log(`${this.name} is studying`);
  }
  
  // Override method
  greet() {
    super.greet(); // Call parent method
    console.log(`I'm in grade ${this.grade}`);
  }
}

### 3. Class Features (ES2022+)

class ModernClass {
  // Public field (instance property)
  publicField = 1;
  
  // Private field (starts with #)
  #privateField = 2;
  
  // Static public field
  static staticField = 3;
  
  // Static private field
  static #staticPrivateField = 4;
  
  // Private method
  #privateMethod() {
    return this.#privateField;
  }
}

--- ## 🔹 Property Descriptors Advanced control over object properties. ### 1. Property Attributes

const obj = {};

Object.defineProperty(obj, 'readOnlyProp', {
  value: 42,
  writable: false,       // Can't be changed
  enumerable: true,      // Shows up in for...in
  configurable: false    // Can't be deleted/reconfigured
});

## 🔹 Modern Browser APIs ### 1. Web Components

class MyElement extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<h2>Custom Element</h2>`;
  }
}

customElements.define('my-element', MyElement);

### 2. Intersection Observer

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
});

document.querySelectorAll('.animate').forEach(el => {
  observer.observe(el);
});

### 3. Web Storage

// Local Storage (persistent)
localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme');

// Session Storage (tab-specific)
sessionStorage.setItem('token', 'abc123');

--- ## 🔹 Best Practices 1. Use ES modules for modern projects 2. Keep modules focused (single responsibility) 3. Configure tree-shaking to eliminate dead code 4. Use semantic versioning (^1.2.3 in package.json) 5. Set up pre-commit hooks (linting, formatting) --- ### 📌 What's Next? In Part 7, we'll cover: ➡️ Object-Oriented JavaScript ➡️ Classes & Prototypes ➡️ Design Patterns #JavaScript #ModernWeb #FrontendDevelopment 🚀 Practice Exercise: 1. Convert an existing script to ES modules 2. Create a Webpack config that bundles JS and CSS 3. Build a custom element with shadow DOM

# 📚 JavaScript Tutorial - Part 6/10: Modules & Modern JavaScript #JavaScript #ES6 #Modules #Webpack #ModernJS Welcome to Part 6 of our JavaScript series! Today we'll explore code organization with modules and modern JavaScript features that revolutionized frontend development. --- ## 🔹 JavaScript Modules ### 1. Module Systems Comparison | System | Syntax | Environment | Features | |--------------|-----------------|--------------|----------| | ES Modules | import/export | Modern browsers, Node.js | Native standard | | CommonJS | require/module.exports | Node.js | Legacy Node | | AMD | define/require | Browser | Async loading | ### 2. ES Modules (ES6) #### Exporting:

// Named exports (multiple per file)
export const API_URL = 'https://api.example.com';
export function fetchData() { /* ... */ }

// Default export (one per file)
export default class User { /* ... */ }

#### Importing:

// Named imports
import { API_URL, fetchData } from './utils.js';

// Default import
import User from './models/User.js';

// Mixed imports
import User, { API_URL } from './config.js';

// Import everything
import * as utils from './utils.js';

### 3. HTML Integration

<script type="module">
  import { initApp } from './app.js';
  initApp();
</script>

--- ## 🔹 Modern JavaScript Features ### 1. Block-Scoped Declarations (ES6)

let x = 10;    // Block-scoped variable
const PI = 3.14; // Block-scoped constant

### 2. Template Literals (ES6)

const name = 'Ali';
console.log(`Hello ${name}! Today is ${new Date().toLocaleDateString()}`);

### 3. Arrow Functions (ES6)

const add = (a, b) => a + b;
[1, 2, 3].map(n => n * 2);

### 4. Destructuring (ES6)

// Array destructuring
const [first, second] = [1, 2];

// Object destructuring
const { name, age } = user;

### 5. Spread/Rest Operator (ES6)

// Spread
const nums = [1, 2, 3];
const newNums = [...nums, 4, 5];

// Rest parameters
function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}

### 6. Optional Chaining (ES2020)

const street = user?.address?.street; // No error if null

### 7. Nullish Coalescing (ES2020)

const limit = config.maxItems ?? 10; // Only if null/undefined

--- ## 🔹 JavaScript Tooling ### 1. Package Management with npm/yarn

npm init -y                 # Initialize project
npm install lodash          # Install package
npm install --save-dev webpack # Dev dependency

### 2. Module Bundlers #### Webpack Configuration (webpack.config.js):

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }
};

### 3. Babel (JavaScript Compiler) #### .babelrc Configuration:

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

### 4. ESLint (Code Linter) #### .eslintrc.json Example:

{
  "extends": "eslint:recommended",
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "single"]
  }
}

--- ## 🔹 Practical Example: Modular App Structure

project/
├── src/
│   ├── index.js          # Entry point
│   ├── utils/            # Helper modules
│   │   ├── api.js        # API functions
│   │   └── dom.js        # DOM helpers
│   ├── components/       # UI components
│   │   ├── header.js
│   │   └── modal.js
│   └── styles/
│       └── main.css      # Imported in JS
├── package.json          # npm config
├── webpack.config.js     # Bundler config
└── .babelrc              # Compiler config

Example Component (`components/header.js`):

export function createHeader(title) {
  const header = document.createElement('header');
  header.innerHTML = `<h1>${title}</h1>`;
  return header;
}

Main Entry Point (`index.js`):

import { createHeader } from './components/header.js';
import { fetchPosts } from './utils/api.js';

document.body.appendChild(createHeader('My Blog'));

async function init() {
  const posts = await fetchPosts();
  console.log('Loaded posts:', posts);
}

init();

---

function oldFetch(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.onload = () => {
    if (xhr.status === 200) {
      callback(JSON.parse(xhr.response));
    } else {
      callback(null, xhr.status);
    }
  };
  xhr.send();
}

--- ## 🔹 Best Practices 1. Always handle errors in promises/async functions 2. Use async/await for better readability 3. Cancel requests when no longer needed (AbortController) 4. Throttle rapid API calls (debounce input handlers) 5. Cache responses when appropriate --- ### 📌 What's Next? In Part 6, we'll cover: ➡️ JavaScript Modules ➡️ ES6+ Features ➡️ Tooling (Babel, Webpack, npm) #JavaScript #AsyncProgramming #WebDevelopment 🚀 Practice Exercise: 1. Fetch GitHub user data (https://api.github.com/users/username) 2. Create a function that fetches multiple Pokémon in parallel 3. Build a retry mechanism for failed requests (max 3 attempts)

# 📚 JavaScript Tutorial - Part 5/10: Asynchronous JavaScript #JavaScript #Async #Promises #FetchAPI #WebDev Welcome to Part 5 of our JavaScript series! Today we'll conquer asynchronous programming - the key to handling delays, API calls, and non-blocking operations. --- ## 🔹 Synchronous vs Asynchronous ### 1. Synchronous Execution

console.log("Step 1");
console.log("Step 2"); // Waits for Step 1
console.log("Step 3"); // Waits for Step 2

### 2. Asynchronous Execution

console.log("Start");

setTimeout(() => {
  console.log("Async operation complete");
}, 2000);

console.log("End");

// Output order: Start → End → Async operation complete

--- ## 🔹 Callback Functions Traditional way to handle async operations. ### 1. Basic Callback

function fetchData(callback) {
  setTimeout(() => {
    callback("Data received");
  }, 1000);
}

fetchData((data) => {
  console.log(data); // "Data received" after 1 second
});

### 2. Callback Hell (The Pyramid of Doom)

getUser(user => {
  getPosts(user.id, posts => {
    getComments(posts[0].id, comments => {
      console.log(comments); // Nested nightmare!
    });
  });
});

--- ## 🔹 Promises (ES6) Modern solution for async operations. ### 1. Promise States - Pending: Initial state - Fulfilled: Operation completed successfully - Rejected: Operation failed ### 2. Creating Promises

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true;
    success ? resolve("Data fetched!") : reject("Error!");
  }, 1500);
});

### 3. Using Promises

fetchData
  .then(data => console.log(data))
  .catch(error => console.error(error))
  .finally(() => console.log("Done!"));

### 4. Promise Chaining

fetchUser()
  .then(user => fetchPosts(user.id))
  .then(posts => fetchComments(posts[0].id))
  .then(comments => console.log(comments))
  .catch(error => console.error(error));

### 5. Promise Methods

Promise.all([promise1, promise2]) // Waits for all
Promise.race([promise1, promise2]) // First to settle
Promise.any([promise1, promise2]) // First to fulfill

--- ## 🔹 Async/Await (ES8) Syntactic sugar for promises. ### 1. Basic Usage

async function getData() {
  try {
    const response = await fetchData();
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

### 2. Parallel Execution

async function fetchAll() {
  const [users, posts] = await Promise.all([
    fetchUsers(),
    fetchPosts()
  ]);
  console.log(users, posts);
}

--- ## 🔹 Fetch API Modern way to make HTTP requests. ### 1. GET Request

async function getUsers() {
  const response = await fetch('https://api.example.com/users');
  const data = await response.json();
  return data;
}

### 2. POST Request

async function createUser(user) {
  const response = await fetch('https://api.example.com/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(user)
  });
  return response.json();
}

### 3. Error Handling

async function safeFetch(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error(response.status);
    return await response.json();
  } catch (error) {
    console.error("Fetch failed:", error);
  }
}

--- ## 🔹 Practical Example: Weather App

async function getWeather(city) {
  try {
    const apiKey = 'YOUR_API_KEY';
    const response = await fetch(
      `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`
    );
    
    if (!response.ok) throw new Error('City not found');
    
    const data = await response.json();
    return {
      temp: Math.round(data.main.temp - 273.15), // Kelvin → Celsius
      conditions: data.weather[0].main
    };
  } catch (error) {
    console.error("Weather fetch error:", error);
    return null;
  }
}

// Usage
const weather = await getWeather("London");
if (weather) {
  console.log(`Temperature: ${weather.temp}°C`);
  console.log(`Conditions: ${weather.conditions}`);
}

--- ## 🔹 AJAX with XMLHttpRequest (Legacy) Older way to make requests (still good to know).

I recommend you to join @TradingNewsIO for Global & Economic News 24/7 ⚡️Stay up-to-date with real-time updates on global events. ➡️ Click Here and JOIN NOW ! #إعلان InsideAds - ترويج

Stop wasting time scrolling. Start making money. 💰 With @TaniaTradingAcademy you just copy, paste… and cash out. No stress. No complicated strategies. Just pure profits. 💥 Anyone can do it. The earlier you join, the faster you win. 🟣 Join the winning side 👉 @TaniaTradingAcademy #إعلان InsideAds - ترويج

Tired of endless job hunting? Unlock high-paying remote jobs from top startups – fresh roles posted daily. Want early access to exclusive $50+/h positions you won’t find on LinkedIn? Get ahead now — the best offers go fast! See today’s hottest openings before everyone else. #إعلان InsideAds - ترويج

🙏💸 500$ FOR THE FIRST 500 WHO JOIN THE CHANNEL! 🙏💸 Join our channel today for free! Tomorrow it will cost 500$! https://t.me/+QHlfCJcO2lRjZWVl You can join at this link! 👆👇 https://t.me/+QHlfCJcO2lRjZWVl

Most people just watch others make money online. Why not you? ➡️ 21,000+ already joined. Be next, click NOW! #إعلان InsideAds - ترويج

I’ve watched traders lose thousands because they missed this one signal. It happened to me too—until I found a formula nobody talks about. Want to see what really moves the gold market? Discover the signal here Don’t be the last one to know. #إعلان InsideAds - ترويج

“I posted just one word, and the whole feed EXPLODED with hearts and fire. Even my friends were shocked…” Why? Because there’s something special happening here — and only those who see it first get it. Don’t blink. Dive in now — before you miss it. #إعلان InsideAds - ترويج

Think building wealth is complicated? Discover how real investors use the Wheel Strategy and ETFs to generate low-risk, steady income—no guesswork, just disciplined results. Get weekly trade breakdowns, proven tips, and global investing insights in one place. Ready to take control? Join Wheel & Wealth now and start securing your financial future! #إعلان InsideAds - ترويج

## 🔹 Practical Example: Interactive Todo List

// DOM Elements
const form = document.querySelector('#todo-form');
const input = document.querySelector('#todo-input');
const list = document.querySelector('#todo-list');

// Add new todo
form.addEventListener('submit', function(e) {
  e.preventDefault();
  
  if (input.value.trim() === '') return;
  
  const todoText = input.value;
  const li = document.createElement('li');
  li.innerHTML = `
    ${todoText}
    <button class="delete-btn">X</button>
  `;
  
  list.appendChild(li);
  input.value = '';
});

// Delete todo (using delegation)
list.addEventListener('click', function(e) {
  if (e.target.classList.contains('delete-btn')) {
    e.target.parentElement.remove();
  }
});

--- ## 🔹 Working with Forms ### 1. Accessing Form Data

const form = document.querySelector('form');
form.addEventListener('submit', function(e) {
  e.preventDefault();
  
  // Get form values
  const username = form.elements['username'].value;
  const password = form.elements['password'].value;
  
  console.log({ username, password });
});

### 2. Form Validation

function validateForm() {
  const email = document.getElementById('email').value;
  
  if (!email.includes('@')) {
    alert('Please enter a valid email');
    return false;
  }
  
  return true;
}

--- ## 🔹 Best Practices 1. Cache DOM queries (store in variables) 2. Use event delegation for dynamic elements 3. Always prevent default on form submissions 4. Separate JS from HTML (avoid inline handlers) 5. Throttle rapid-fire events (resize, scroll) --- ### 📌 What's Next? In Part 5, we'll cover: ➡️ Asynchronous JavaScript ➡️ Callbacks, Promises, Async/Await ➡️ Fetch API & AJAX #JavaScript #FrontEnd #WebDevelopment 🚀 Practice Exercise: 1. Create a color picker that changes background color 2. Build a counter with + and - buttons 3. Make a dropdown menu that shows/hides on click

# 📚 JavaScript Tutorial - Part 4/10: DOM Manipulation & Events #JavaScript #WebDev #FrontEnd #DOM Welcome to Part 4 of our JavaScript series! Today we'll learn how to make web pages interactive by mastering DOM manipulation and event handling. --- ## 🔹 What is the DOM? The Document Object Model is a tree-like representation of your webpage that JavaScript can interact with.

<!-- HTML Structure -->
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1 id="main-title">Hello World</h1>
    <ul class="items">
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </body>
</html>

graph TD
  document --> html
  html --> head
  html --> body
  head --> title
  title --> text["My Page"]
  body --> h1
  h1 --> h1text["Hello World"]
  body --> ul
  ul --> li1["Item 1"]
  ul --> li2["Item 2"]

--- ## 🔹 Selecting DOM Elements ### 1. Single Element Selectors

// By ID (returns single element)
const title = document.getElementById('main-title');

// By CSS selector (first match)
const item = document.querySelector('.items li');

### 2. Multiple Element Selectors

// By class name (HTMLCollection)
const items = document.getElementsByClassName('item');

// By tag name (HTMLCollection)
const listItems = document.getElementsByTagName('li');

// By CSS selector (NodeList)
const allItems = document.querySelectorAll('.items li');

--- ## 🔹 Modifying the DOM ### 1. Changing Content

// Text content (better for security)
title.textContent = 'New Title';

// HTML content (use carefully!)
title.innerHTML = '<em>New</em> Title';

// Attribute changes
title.setAttribute('class', 'highlight');

### 2. Styling Elements

// Direct style property access
title.style.color = 'blue';
title.style.fontSize = '2rem';

// Multiple styles at once
title.style.cssText = 'color: blue; font-size: 2rem;';

// Toggle classes
title.classList.add('highlight');
title.classList.remove('highlight');
title.classList.toggle('highlight');

### 3. Creating & Adding Elements

// Create new element
const newItem = document.createElement('li');
newItem.textContent = 'Item 3';

// Append to parent
const list = document.querySelector('ul');
list.appendChild(newItem);

// Insert at specific position
list.insertBefore(newItem, list.children[1]);

// Remove elements
list.removeChild(newItem);

--- ## 🔹 Event Handling Responding to user interactions. ### 1. Inline Events (Avoid)

<button onclick="handleClick()">Click Me</button>

### 2. Recommended Approach

const button = document.querySelector('button');

// Add event listener
button.addEventListener('click', function(e) {
  console.log('Button clicked!', e.target);
});

// Remove event listener
button.removeEventListener('click', handleClick);

### 3. Common Event Types | Event | Description | |-------|-------------| | click | Mouse click | | dblclick | Double click | | mouseenter/mouseleave | Hover effects | | keydown/keyup | Keyboard input | | submit | Form submission | | load | Page/images loaded | | scroll | Page scrolling | --- ## 🔹 Event Object & Propagation ### 1. Event Object Properties

element.addEventListener('click', function(event) {
  console.log(event.type);      // "click"
  console.log(event.target);    // Clicked element
  console.log(event.clientX);   // Mouse X position
  console.log(event.key);       // Key pressed (for keyboard events)
});

### 2. Stopping Propagation

// Stop bubbling up
event.stopPropagation();

// Prevent default behavior
event.preventDefault();

### 3. Event Delegation

document.querySelector('ul').addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    console.log('List item clicked:', e.target.textContent);
  }
});

---

“I made more in one week with crypto than in 3 months at my old job. No one believed me at first…” But I followed 1 unexpected rule that everyone ignores. Want in? Check here before it’s too late #إعلان InsideAds - ترويج

## 🔹 Practical Example: Todo List Manager

const todoList = [
    {id: 1, task: 'Buy groceries', completed: false},
    {id: 2, task: 'Do laundry', completed: true}
];

// Add new task
function addTask(task) {
    const newTask = {
        id: todoList.length + 1,
        task,
        completed: false
    };
    todoList.push(newTask);
}

// Mark task as complete
function completeTask(id) {
    const task = todoList.find(item => item.id === id);
    if (task) task.completed = true;
}

// Get pending tasks
function getPendingTasks() {
    return todoList.filter(task => !task.completed);
}

--- ## 🔹 Best Practices 1. Use `const` for arrays/objects (the reference is constant) 2. Prefer functional methods (map, filter) over loops 3. Validate JSON before parsing 4. Use descriptive property names 5. Destructure deeply nested objects carefully --- ### 📌 What's Next? In Part 4, we'll cover: ➡️ DOM Manipulation ➡️ Event Handling ➡️ Form Validation #JavaScript #WebDevelopment #Programming 🚀 Practice Exercise: 1. Create an array of products (name, price, inStock) 2. Write functions to: - Filter out-of-stock products - Calculate total inventory value - Sort by price (high-to-low) 3. Convert your array to JSON and back

# 📚 JavaScript Tutorial - Part 3/10: Arrays, Objects & JSON #JavaScript #WebDev #Programming #DataStructures Welcome to Part 3 of our JavaScript series! Today we'll master arrays, objects, and JSON - essential for handling complex data. --- ## 🔹 Arrays in JavaScript Ordered collections that can hold multiple values. ### 1. Creating Arrays

// Array literal (recommended)
const fruits = ['Apple', 'Banana', 'Orange'];

// Array constructor
const numbers = new Array(1, 2, 3);

// Mixed data types
const mixed = [1, 'Hello', true, {name: 'Ali'}];

### 2. Accessing Elements

console.log(fruits[0]);  // "Apple" (0-based index)
console.log(fruits.length);  // 3

### 3. Common Array Methods | Method | Description | Example | |--------|-------------|---------| | push() | Add to end | fruits.push('Mango') | | pop() | Remove from end | fruits.pop() | | shift() | Remove from start | fruits.shift() | | unshift() | Add to start | fruits.unshift('Kiwi') | | slice() | Get sub-array | fruits.slice(1, 3) | | splice() | Add/remove items | fruits.splice(1, 0, 'Berry') | --- ## 🔹 Modern Array Methods (ES6+) Powerful functional programming tools. ### 1. forEach()

fruits.forEach(fruit => console.log(fruit));

### 2. map()

const upperFruits = fruits.map(fruit => fruit.toUpperCase());

### 3. filter()

const longFruits = fruits.filter(fruit => fruit.length > 5);

### 4. reduce()

const sum = [1, 2, 3].reduce((total, num) => total + num, 0);

### 5. find() & findIndex()

const banana = fruits.find(fruit => fruit === 'Banana');
const bananaIndex = fruits.findIndex(fruit => fruit === 'Banana');

### 6. some() & every()

const hasApple = fruits.some(fruit => fruit === 'Apple');
const allLong = fruits.every(fruit => fruit.length > 3);

--- ## 🔹 Objects in JavaScript Collections of key-value pairs (properties). ### 1. Creating Objects

// Object literal (recommended)
const person = {
    name: 'Ali',
    age: 25,
    hobbies: ['reading', 'coding'],
    address: {
        city: 'Dubai',
        country: 'UAE'
    }
};

### 2. Accessing Properties

// Dot notation
console.log(person.name);  // "Ali"

// Bracket notation (useful for dynamic keys)
const key = 'age';
console.log(person[key]);  // 25

### 3. Modifying Objects

// Add property
person.job = 'Developer';

// Delete property
delete person.age;

// Check property existence
'name' in person;  // true

--- ## 🔹 Object Methods ### 1. Object.keys()

const keys = Object.keys(person);  // ["name", "age", ...]

### 2. Object.values()

const values = Object.values(person);

### 3. Object.entries()

for (const [key, value] of Object.entries(person)) {
    console.log(`${key}: ${value}`);
}

### 4. Object Spread (ES9+)

const newPerson = {...person, age: 26};

--- ## 🔹 JSON (JavaScript Object Notation) Universal data format for APIs. ### 1. JSON ↔️ JavaScript

// Object to JSON string
const jsonStr = JSON.stringify(person);

// JSON string to object
const parsedObj = JSON.parse(jsonStr);

### 2. JSON Structure

{
    "name": "Ali",
    "age": 25,
    "isStudent": false,
    "courses": ["Math", "CS"]
}

--- ## 🔹 Destructuring Assignment Unpack values from arrays/objects. ### 1. Array Destructuring

const [first, second] = fruits;
console.log(first);  // "Apple"

### 2. Object Destructuring

const {name, age} = person;
console.log(name);  // "Ali"

// With renaming
const {name: personName} = person;

### 3. Function Parameter Destructuring

function printUser({name, age}) {
    console.log(`${name} is ${age} years old`);
}

---

“I haven’t paid for internet in months—my friends said it was impossible.” But here’s how I got free internet on Ethio Telecom—no activators, zero hassle. Want to know the step-by-step trick everyone is whispering about? 👉 Check here before it’s gone #إعلان InsideAds - ترويج

I recommend you to join @TradingNewsIO for Global & Economic News 24/7 ⚡️Stay up-to-date with real-time updates on global events. ➡️ Click Here and JOIN NOW ! #إعلان InsideAds - ترويج