𝗦𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀 અને 𝗔𝘀𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 ને સમજવું

JavaScript એક સમયે એક જ કાર્ય (task) ચલાવે છે. આનું કારણ એ છે કે તે એક single-threaded ભાષા છે.

ઝડપી એપ્સ બનાવવા માટે, તમારે synchronous અને asynchronous કોડ વચ્ચેનો તફાવત જાણવો આવશ્યક છે.

Synchronous Execution

કોડ લાઇન પ્રમાણે ચાલે છે. દરેક કાર્ય અગાઉના કાર્યના પૂર્ણ થવાની રાહ જુએ છે.

ATM ની લાઇન વિશે વિચારો. જ્યાં સુધી પહેલો વ્યક્તિ કામ પૂરું ન કરે ત્યાં સુધી બીજો વ્યક્તિ મશીનનો ઉપયોગ કરી શકતો નથી.

જો એક કાર્યમાં લાંબો સમય લાગે, તો આખો પ્રોગ્રામ અટકી જાય છે. આને blocking કહેવામાં આવે છે.

Asynchronous Execution

કાર્યો સ્વતંત્ર રીતે ચાલે છે. JavaScript એક કાર્ય શરૂ કરે છે અને તરત જ બીજા કાર્ય પર આગળ વધી જાય છે.

એક રેસ્ટોરન્ટ વિશે વિચારો. તમે ખોરાકનો ઓર્ડર આપો છો, અને પછી જ્યારે તમે રાહ જોતા હોવ ત્યારે મિત્રો સાથે વાત કરો છો. તમે બીજું કંઈ પણ કર્યા વગર ખોરાક આવવાની રાહ જોતા બેસી રહેતા નથી.

Asynchronous કોડ નીચેની બાબતો દરમિયાન તમારી એપ્લિકેશનને ફ્રીઝ (freeze) થતી અટકાવે છે:

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

Asynchronous કોડ હેન્ડલ કરવાની ત્રણ રીતો:

  1. Callbacks એક ચોક્કસ કાર્ય પૂર્ણ થયા પછી ફંક્શન ચાલે છે. તે ડિલિવરી ડ્રાઈવર જ્યારે તમારો ખોરાક આવે ત્યારે તમને ફોન કરે છે તેના જેવું છે.

  2. Promises Promise ભવિષ્યના પરિણામનું પ્રતિનિધિત્વ કરે છે. તે જ્યાં સુધી resolve (સફળતા) અથવા reject (ભૂલ) ન થાય ત્યાં સુધી pending સ્ટેટમાં રહે છે.

  3. Async/Await આ asynchronous કોડને synchronous કોડ જેવો બનાવે છે. તે વાંચવામાં સરળ છે. તમે તમારા પ્રોગ્રામના બાકીના ભાગને બ્લોક કર્યા વગર ફંક્શનને રોકવા માટે await નો ઉપયોગ કરો છો.

તે અંદરથી (under the hood) કેવી રીતે કામ કરે છે:

JavaScript આ કાર્યોનું સંચાલન કરવા માટે Event Loop નો ઉપયોગ કરે છે.

  • Call Stack: તમારા હાલના ફંક્શન્સને ટ્રેક કરે છે.
  • Web APIs: ટાઈમર્સ અથવા fetches જેવા લાંબા કાર્યો સંભાળે છે.
  • Callback Queue: પૂર્ણ થયેલા કાર્યોને રાખે છે.
  • Event Loop: જ્યારે સ્ટેક ખાલી હોય ત્યારે ક્યુ (queue) માંથી કાર્યોને સ્ટેકમાં ખસેડે છે.

તુલના:

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