كيفية تعلم جافا سكريبت في عام 2026: خريطة طريق كاملة للمبتدئين

// Try this in your browser console right now
console.log("Hello from JavaScript!");
console.log(2 + 2);
console.log("My name is " + "Alice");
console.log(Math.random()); // random number 0-1

// The console is your playground — experiment freely

// Declare variables
const name = "Alice";   // cannot reassign (most common)
let age = 25;           // can reassign
// var x = old;         // avoid in 2026

// Types
const text = "Hello";       // string
const number = 42;          // number
const decimal = 3.14;       // also number
const isTrue = true;        // boolean
const nothing = null;       // intentionally empty
let missing;                // undefined

// String methods you'll use constantly
const str = "  Hello World  ";
console.log(str.trim());               // "Hello World"
console.log(str.toLowerCase());        // "  hello world  "
console.log(str.includes("World"));    // true
console.log(str.replace("World","JS")); // "  Hello JS  "
console.log(str.split(" "));           // ["", "", "Hello", "World", "", ""]
console.log(`Hi, my name is ${name}`); // template literal

// Arrays
const fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]);         // "apple"
fruits.push("date");             // add to end
const last = fruits.pop();       // remove from end

// Array methods (most important!)
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);         // [2, 4, 6, 8, 10]
const evens = numbers.filter(n => n % 2 === 0);  // [2, 4]
const sum = numbers.reduce((acc, n) => acc + n, 0); // 15
const hasThree = numbers.includes(3);             // true
const found = numbers.find(n => n > 3);           // 4

// Objects
const person = {
  name: "Alice",
  age: 30,
  greet() {
    return `Hi, I'm ${this.name}`;
  }
};

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

// Multiple ways to write functions
function traditional(x, y) { return x + y; }
const arrow = (x, y) => x + y;
const arrowMultiLine = (x) => {
  const result = x * 2;
  return result;
};

// Higher-order functions
function repeat(fn, n) {
  for (let i = 0; i < n; i++) fn(i);
}
repeat(console.log, 3);  // logs 0, 1, 2

// Closure
function counter(start = 0) {
  let count = start;
  return {
    increment: () => ++count,
    value: () => count
  };
}
const c = counter(10);
console.log(c.increment()); // 11

// Fetch data from an API
async function fetchPosts() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts");
    const posts = await response.json();
    console.log(`Got ${posts.length} posts`);
    return posts;
  } catch (error) {
    console.error("Error:", error.message);
  }
}

fetchPosts().then(posts => {
  posts.slice(0, 3).forEach(post => {
    console.log(post.title);
  });
});