شرح Arrays و Functions و Objects في JavaScript

إزاي تعمل Array في JavaScript؟ 🧺💻​

تقدر تعمل مصفوفة (Array) بطريقتين مشهورين:

let arr1 = [1, 2, 3];
let arr2 = new Array(1, 2, 3);

✅ الأفضل في أغلب الحالات هو [ ] لأنها أوضح وأسهل.

---

​

الفرق بين push و unshift في المصفوفات 🧩​

• push بيضيف عنصر في آخر المصفوفة
• unshift بيضيف عنصر في أول المصفوفة

let arr = [2, 3];
arr.push(4);     // [2, 3, 4]
arr.unshift(1);  // [1, 2, 3, 4]

​

إزاي تشيل عنصر من Array؟ 🗑️​

• pop() بتشيل آخر عنصر
• shift() بتشيل أول عنصر

let arr = [1, 2, 3];
arr.pop();   // [1, 2]
arr.shift(); // [2, 3]

​

إزاي تعرف عنصر موجود ولا لأ؟ 🔍​

فيه طريقتين مشهورين:

• includes() بترجع true/false
• indexOf() بترجع رقم الـ index أو -1 لو مش موجود

let arr = [1, 2, 3];
console.log(arr.includes(2)); // true
console.log(arr.indexOf(2));  // 1

​

ترتيب عناصر Array باستخدام sort 🧠📌​

الـ sort() بتعمل ترتيب… بس خد بالك إنها بتتعامل مع القيم كـ Strings افتراضيًا.

let arr = [3, 1, 4, 1, 5];
arr.sort(); // [1, 1, 3, 4, 5]

وللترتيب الصحيح للأرقام (تصاعدي/تنازلي) استخدم compare function:

arr.sort((a, b) => a - b); // تصاعدي
arr.sort((a, b) => b - a); // تنازلي

​

الفرق بين slice و splice ✂️⚠️​

• slice بتقص جزء وترجع Array جديدة من غير ما تغيّر الأصل
• splice بتقص/تحذف/تضيف وبتغيّر المصفوفة الأصلية

let arr = [1, 2, 3, 4];
let sliced = arr.slice(1, 3); // [2, 3]
console.log(arr); // [1, 2, 3, 4]

arr.splice(1, 2); // arr بقت [1, 4]
console.log(arr);

​

تحويل Array إلى String باستخدام join 🔗​

let arr = [1, 2, 3];
let str = arr.join("-");
console.log(str); // "1-2-3"

​

عكس ترتيب عناصر المصفوفة reverse 🔁​

reverse() بتعكس العناصر وبتعدّل نفس المصفوفة:

let arr = [1, 2, 3];
arr.reverse(); // [3, 2, 1]

​

دمج مصفوفتين concat و Spread Operator 🧩➕​

let arr1 = [1, 2];
let arr2 = [3, 4];

let merged1 = arr1.concat(arr2);
let merged2 = [...arr1, ...arr2];

console.log(merged1); // [1, 2, 3, 4]
console.log(merged2); // [1, 2, 3, 4]

​

إزالة التكرارات من Array باستخدام Set ✅​

let arr = [1, 2, 2, 3, 3, 3];
let uniqueArr = [...new Set(arr)];

console.log(uniqueArr); // [1, 2, 3]

​

إيجاد أول عنصر يحقق شرط find 🎯​

let arr = [1, 2, 3, 4];
let firstEven = arr.find(x => x % 2 === 0);

console.log(firstEven); // 2

---

​

أنواع الحلقات (Loops) في JavaScript 🔄​

أشهر الحلقات:

• for لما عدد التكرارات معروف
• while لما الشرط هو اللي بيحدد
• do...while بتنّفذ مرة على الأقل
• for...in لتكرار خصائص الـ Objects
• for...of لتكرار عناصر Arrays و Iterables

---

​

الفرق بين for و while ببساطة 🤝​

• for: مناسب لما تعرف هتلف كام مرة
• while: مناسب لما مش عارف العدد بس عندك شرط

​

إيقاف الحلقة break 🛑​

for (let i = 0; i < 10; i++) {
  if (i === 5) break;
  console.log(i);
}

​

تخطي تكرار واحد continue ⏭️​

for (let i = 0; i < 5; i++) {
  if (i === 2) continue;
  console.log(i);
}

​

التكرار على المصفوفة باستخدام forEach ✅​

const numbers = [1, 2, 3];

numbers.forEach(number => {
  console.log(number);
});

---

​

يعني إيه Function في JavaScript؟ 🧠🧰​

Function هي مجموعة أوامر بتتكرر كتير، فبدل ما تكتبها كل مرة… بتحطها في دالة وتنادي عليها وقت ما تحب.

function greet() {
  console.log("أهلاً بيك!");
}

greet();

​

إزاي تعرّف دالة؟ ✍️​

function sum(a, b) {
  return a + b;
}

​

إزاي تستدعي دالة؟ 📞​

console.log(sum(3, 5)); // 8

---

​

الفرق بين Regular Function و Arrow Function ⚡​

Regular Function​

function sayHello(name) {
  return `أهلاً يا ${name}!`;
}

Arrow Function​

const sayHello = (name) => `أهلاً يا ${name}!`;

✅ ملاحظة مهمة:
الـ Arrow Function سهل وسريع… بس this فيها مختلف، فمش دايمًا تنفع لكل الحالات.

---

​

هل ينفع Function جوه Function؟ ✅​

أيوه، وده بيخليك تعمل حاجات قوية جدًا:

function outerFunction(x) {
  function innerFunction(y) {
    return x + y;
  }
  return innerFunction;
}

const add5 = outerFunction(5);
console.log(add5(10)); // 15

​

الفرق بين return و console.log 🤔​

• return بترجع قيمة وتوقف الدالة
• console.log بتطبع بس ومش بترجع حاجة

function sum(a, b) {
  return a + b;
  console.log("مش هيتنفذ"); // مش هيوصل هنا
}

​

Recursion: هل الدالة تقدر تنادي نفسها؟ 🔁​

أيوه، وده اسمه Recursion:

function factorial(n) {
  if (n === 0) return 1;
  return n * factorial(n - 1);
}

console.log(factorial(5)); // 120

---

​

الفرق بين Function Declaration و Function Expression 🧩​

Function Declaration (بتتعملها Hoisting)​

function greet() {
  console.log("أهلاً!");
}

Function Expression (لازم تتعرّف الأول)​

const greet = function () {
  console.log("أهلاً!");
};

دالة تستقبل عدد معاملات غير معروف Rest Parameters 📦​

function sumAll(...numbers) {
  return numbers.reduce((sum, num) => sum + num, 0);
}

console.log(sumAll(1, 2, 3, 4)); // 10

Higher-Order Functions يعني إيه؟ 🧠✨​

دي دوال:

• بتاخد دوال تانية كـ parameters
  أو
• بترجع دالة كـ result

زي: map, filter, reduce
مثال map:

const numbers = [1, 2, 3, 4];
const squared = numbers.map(num => num * num);

console.log(squared); // [1, 4, 9, 16]

​

الفرق بين map و forEach 🔥​

• map بترجع Array جديدة
• forEach بتعمل تنفيذ بس من غير return

reduce بتشتغل إزاي؟ 🧮​

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, cur) => acc + cur, 0);

console.log(sum); // 10

​

Object في JavaScript: يعني إيه كائن؟ 📦​

الـ Object بيخزن بيانات على شكل: key : value

let person = {
  name: "John",
  age: 30,
  greet: function() {
    console.log("Hello!");
  }
};

طرق إنشاء Object 🏗️​

let obj1 = {};
let obj2 = new Object();
let obj3 = Object.create(null);

Property vs Method 🔧​

let car = {
  brand: "Toyota", // Property
  start: function() { // Method
    console.log("Car started");
  }
};

الوصول للخصائص Dot و Bracket 🧷​

console.log(car.brand);
console.log(car["brand"]);

إضافة وتعديل وحذف خصائص ✍️🗑️​

let obj = {};

obj.name = "John"; // إضافة
obj.name = "Doe";  // تعديل

delete obj.name;   // حذف

---

​

Object.keys و Object.values و Object.entries 🧠​

let obj = { a: 1, b: 2 };

console.log(Object.keys(obj));    // ["a", "b"]
console.log(Object.values(obj));  // [1, 2]
console.log(Object.entries(obj)); // [["a", 1], ["b", 2]]

---

​

hasOwnProperty vs in 🔍​

let obj = { a: 1 };

console.log(obj.hasOwnProperty("a")); // true
console.log("a" in obj);              // true

✅ الفرق: in بتشوف كمان اللي جاي من الـ prototype.

---

​

نسخ Object: Shallow Copy و Deep Copy 🧬​

Shallow Copy​

let obj1 = { a: 1, b: { c: 2 } };
let shallowCopy = { ...obj1 };

Deep Copy​

let deepCopy = JSON.parse(JSON.stringify(obj1));

---

​

Object.freeze و Object.seal 🧊🔒​

Object.freeze (تجميد كامل)​

let obj = { a: 1 };
Object.freeze(obj);
obj.a = 2; // مش هيتغير

Object.seal (منع إضافة/حذف)​

let obj2 = { a: 1 };
Object.seal(obj2);
obj2.a = 2;     // ينفع
delete obj2.a;  // مينفعش

---

​

this داخل Object 🧭​

let user = {
  name: "John",
  greet: function() {
    console.log(this.name);
  }
};

user.greet(); // John

---

​

Prototype يعني إيه؟ 🧱​

Prototype نظام في JavaScript بيخلّي الكائنات تورّث خصائص ودوال من كائنات تانية.

let obj = { a: 1 };
console.log(obj.__proto__); // Object prototype

والتحقق:

let obj1 = {};
let obj2 = Object.create(obj1);

console.log(obj1.isPrototypeOf(obj2)); // true

---

​

الفرق بين Object.defineProperty و Object.defineProperties ⚙️​

• Object.defineProperty لتحديد خاصية واحدة مع إعدادات
• Object.defineProperties لتحديد كذا خاصية مرة واحدة

مثال سريع:

let obj = {};

Object.defineProperty(obj, "name", {
  value: "Ahmed",
  writable: false
});

console.log(obj.name); // Ahmed

---

​

الخلاصة 🔥​

لو فهمت:

• Arrays + Methods
• Loops + break/continue
• Functions + Arrow + Higher-Order
• Objects + Prototype

يبقى أنت كده ماسك أساس JavaScript الصح 💪💻