Synchronous మరియు Asynchronous JavaScript గురించి అవగాహన

JavaScript ఒక సమయంలో ఒక పనిని మాత్రమే చేస్తుంది. ఎందుకంటే ఇది ఒక single-threaded language.

వేగవంతమైన యాప్‌లను రూపొందించడానికి, synchronous మరియు asynchronous కోడ్ మధ్య తేడాను మీరు తప్పక తెలుసుకోవాలి.

Synchronous Execution

కోడ్ లైన్ బై లైన్ (line by line) రన్ అవుతుంది. ప్రతి పని ముగిసే వరకు తదుపరి పని వేచి ఉంటుంది.

ఒక ATM లైన్‌ను ఊహించుకోండి. మొదటి వ్యక్తి పని ముగించే వరకు రెండో వ్యక్తి మెషీన్‌ను ఉపయోగించలేరు.

ఒకవేళ ఒక పనికి ఎక్కువ సమయం పడితే, మొత్తం ప్రోగ్రామ్ ఆగిపోతుంది. దీనినే 'blocking' అంటారు.

Asynchronous Execution

పనులు స్వతంత్రంగా రన్ అవుతాయి. JavaScript ఒక పనిని ప్రారంభించి, వెంటనే తదుపరి పనికి వెళ్ళిపోతుంది.

ఒక రెస్టారెంట్‌ను ఊహించుకోండి. మీరు ఆహారాన్ని ఆర్డర్ చేసిన తర్వాత, అది వచ్చే వరకు మీ స్నేహితులతో మాట్లాడుకుంటారు. ఆహారం వచ్చే వరకు మీరు ఏమీ చేయకుండా అలా కూర్చుని ఉండరు.

ఈ క్రింది సందర్భాలలో మీ అప్లికేషన్ ఫ్రీజ్ (freeze) అవ్వకుండా asynchronous కోడ్ నిరోధిస్తుంది:

  • API requests
  • Database queries
  • File reading
  • Image uploads

Asynchronous కోడ్‌ను హ్యాండిల్ చేయడానికి మూడు మార్గాలు:

  1. Callbacks ఒక నిర్దిష్ట పని పూర్తయిన తర్వాత ఒక ఫంక్షన్ రన్ అవుతుంది. ఇది మీ ఆహారం వచ్చినప్పుడు డెలివరీ డ్రైవర్ మీకు ఫోన్ చేసినట్లు ఉంటుంది.

  2. Promises ఒక promise భవిష్యత్తులో వచ్చే ఫలితాన్ని సూచిస్తుంది. ఇది resolved (success) లేదా rejected (error) అయ్యే వరకు 'pending' స్థితిలో ఉంటుంది.

  3. Async/Await ఇది asynchronous కోడ్‌ను synchronous కోడ్ లాగా కనిపించేలా చేస్తుంది. ఇది చదవడానికి సులభంగా ఉంటుంది. మీ ప్రోగ్రామ్ యొక్క మిగిలిన భాగాలను బ్లాక్ చేయకుండా, ఒక ఫంక్షన్‌ను తాత్కాలికంగా ఆపడానికి మీరు awaitని ఉపయోగిస్తారు.

How it works under the hood:

JavaScript ఈ పనులను నిర్వహించడానికి ఒక Event Loopని ఉపయోగిస్తుంది.

  • Call Stack: మీ ప్రస్తుత ఫంక్షన్‌లను ట్రాక్ చేస్తుంది.
  • Web APIs: టైమర్లు లేదా ఫెచ్‌ల (fetches) వంటి ఎక్కువ సమయం తీసుకునే పనులను నిర్వహిస్తుంది.
  • Callback Queue: పూర్తయిన పనులను ఉంచుతుంది.
  • Event Loop: స్టాక్ ఖాళీగా ఉన్నప్పుడు క్యూ నుండి పనులను స్టాక్‌లోకి మారుస్తుంది.

Comparison:

Synchronous:

  • వరుస క్రమంలో రన్ అవుతుంది
  • ప్రోగ్రామ్‌ను బ్లాక్ చేస్తుంది
  • రాయడం సులభం
  • భారీ పనులకు నెమ్మదిగా ఉంటుంది

Asynchronous:

  • స్వతంత్రంగా రన్ అవుతుంది
  • Non-blocking
  • కొంచెం క్లిష్టంగా ఉంటుంది
  • వెబ్ యాప్‌లకు సమర్థవంతంగా ఉంటుంది

ఈ కాన్సెప్ట్‌లలో ప్రావీణ్యం సంపాదించడం అనేది React, Node.js మరియు ఆధునిక APIsని ఉపయోగించడానికి కీలకం.

Source: https://www.geeksforgeeks.org/javascript/synchronous-and-asynchronous-in-javascript/ Source: https://www.browserstack.com/guide/synchronous-vs-asynchronous-in-javascript Full post: https://dev.to/annapoo/understanding-synchronous-and-asynchronous-javascript-5gea