الفرق بين Sync وAsync في JavaScript

في عالم JavaScript، لازم تبقى عارف الفرق بين Synchronous و Asynchronous علشان الكود يشتغل صح وما يحصلش بطء أو مشاكل في الأداء. هنا هاشرحلك الموضوع بطريقة سهلة وبأمثلة عملية تساعدك تفهم الفرق على طول.

الكود المتزامن (Synchronous) ​

الكود المتزامن بيشتغل سطر ورا سطر بالترتيب، يعني السطر اللي بعده مستني السطر اللي قبله يخلص.

خصائص سريعة:​

• التنفيذ صارم بالترتيب.
• أي تأخير في سطر = تأخير في كل الكود بعده.
• مناسب للعمليات السريعة والبسيطة.

أمثلة عملية:​

• عمليات حسابية بسيطة:

console.log("أول سطر");
console.log("تاني سطر");
console.log("ثالث سطر");

الناتج هيكون بالترتيب:

أول سطر
تاني سطر
ثالث سطر

• تعديل بيانات أو طباعة نصوص بسيطة.

أي عملية بطيئة هنا هتأخر كل السطور اللي بعده، زي قراءة ملف كبير من القرص بدون Async.

---

الكود غير المتزامن (Asynchronous) ​

الكود غير المتزامن مش لازم يستنى. ممكن يبدأ حاجة ويكمّل الكود العادي، ولما الحاجة دي تخلص، يرجع يكمل تنفيذها.

بيشتغل مع:​

• جلب بيانات من API
• قراءة ملفات أو قواعد بيانات
• انتظار مؤقت (setTimeout, setInterval)

الأدوات المستخدمة:​

• Callback Functions
• Promises
• Async / Await

مثال عملي مع Promise:​

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("البيانات جاهزة!");
    }, 2000); // انتظار 2 ثانية
  });
}

console.log("قبل جلب البيانات");

fetchData().then((data) => {
  console.log(data);
});

console.log("بعد جلب البيانات");

الناتج هيكون:

قبل جلب البيانات
بعد جلب البيانات
البيانات جاهزة!

الكود مكمل تنفيذه من غير ما ينتظر انتهاء الـ fetch، وده الفرق الكبير مع الـ Sync.

---

الفرق باختصار ​

النوع	الطريقة	ينتظر سطر السابق؟	مناسب ل
Sync	متزامن	نعم	عمليات سريعة، تعديل بيانات، طباعة نصوص
Async	غير متزامن	لا	جلب بيانات، قراءة ملفات، عمليات طويلة

الخلاصة:

• Sync = ترتيب صارم – كل سطر يستنى اللي قبله.
• Async = مرونة – الكود يكمل وميقفش نفسه، ويرجع ينفذ الحاجة بعدين.

نصيحة عملية ​

لو الكود بتاعك فيه عمليات طويلة أو طلبات من الإنترنت، استخدم Async / Await أو Promises لتجنب تأخير تنفيذ باقي البرنامج.
وده بيخلي تطبيقك أسرع وتجربة المستخدم أفضل.