Every useful program eventually hits a decision point. Should this button submit the form or show an error? Does this us

ഓരോ ഉപയോഗപ്രദമായ പ്രോഗ്രാമും ഒടുവിൽ ഒരു തീരുമാനമെടുക്കേണ്ട ഘട്ടത്തിൽ എത്തിച്ചേരുന്നു. ഈ ബട്ടൺ ഫോം സബ്മിറ്റ് ചെയ്യണോ അതോ ഒരു എറർ കാണിക്കണോ? ഈ ഉപയോക്താവ് അഡ്മിൻ ഡാഷ്‌ബോർഡ് കാണണോ അതോ ഗസ്റ്റ് വ്യൂ കാണണോ? കണ്ടിഷണൽ സ്റ്റേറ്റ്‌മെന്റുകളിലൂടെ (conditional statements) ജാവാസ്ക്രിപ്റ്റ് ഈ ചോദ്യങ്ങൾക്ക് ഉത്തരം നൽകുന്നു. അവ നിങ്ങളുടെ കോഡിന്റെ നിയന്ത്രണ വാൽവുകളാണ്: ഒരു എക്സ്പ്രഷൻ true ആണോ false ആണോ എന്നതിനെ അടിസ്ഥാനമാക്കി ഒരു പാത തുറക്കുകയും മറ്റൊന്ന് അടയ്ക്കുകയും ചെയ്യുന്നു. അവയില്ലെങ്കിൽ, നിങ്ങളുടെ സ്ക്രിപ്റ്റ് ഉപയോഗിക്കുന്ന വ്യക്തിയോട് പ്രതികരിക്കാതെ മുകളിൽ നിന്ന് താഴേക്ക് മാത്രം നീങ്ങിക്കൊണ്ടിരിക്കും.

ഏറ്റവും ലളിതമായ ശാഖ: if

if സ്റ്റേറ്റ്‌മെന്റ് എന്നത് നിങ്ങൾ ആദ്യം കടന്നുപോകുന്ന കവാടമാണ്. നിങ്ങൾ ബ്രാക്കറ്റുകൾക്കുള്ളിൽ ഒരു കണ്ടീഷൻ നൽകുന്നു. ആ കണ്ടീഷൻ true ആണെങ്കിൽ, അതിനു താഴെയുള്ള കോഡ് ബ്ലോക്ക് പ്രവർത്തിക്കുന്നു. അത് false ആണെങ്കിൽ, ജാവാസ്ക്രിപ്റ്റ് ആ ബ്ലോക്ക് പൂർണ്ണമായും ഒഴിവാക്കി ഫയലിൽ താഴേക്ക് നീങ്ങുന്നു.

ലളിതമായ, ഒറ്റപ്പെട്ട പരിശോധനകൾക്ക് (one-off checks) നിങ്ങൾക്ക് കൃത്യമായി വേണ്ടതും ഇതാണ്. ഒരു സെർവറിലേക്ക് എന്തെങ്കിലും അയക്കുന്നതിന് മുമ്പ് ഒരു ഫോം ഫീൽഡ് പരിശോധിക്കുന്നത് സങ്കൽപ്പിക്കുക:

const email = document.getElementById("email").value;

if (email === "") {
  alert("Please enter your email.");
}

email ഇല്ലെങ്കിൽ സബ്മിഷൻ നടക്കില്ല. ഈ ലോജിക് വളരെ ലളിതവും വ്യക്തവുമാണ്. തടയേണ്ടത് ഒരു പ്രത്യേക സാഹചര്യം മാത്രമാണുള്ളപ്പോൾ, മറ്റ് ബദൽ നടപടികൾ ആവശ്യമില്ലാത്തപ്പോൾ if ഉപയോഗിക്കുക.

ഒന്നുകിൽ മറ്റൊന്ന്: if...else

മിക്ക യഥാർത്ഥ തീരുമാനങ്ങൾക്കും രണ്ട് വശങ്ങളുണ്ട്. if...else ജോഡി കൃത്യമായി അത് ചെയ്യുന്നു. കണ്ടീഷൻ ശരിയാണെങ്കിൽ (true) ഒരു ബ്ലോക്കും, തെറ്റാണെങ്കിൽ (false) മറ്റേ ബ്ലോക്കും പ്രവർത്തിക്കുന്നു. ഈ രണ്ട് പാതകളും പരസ്പരവിരുദ്ധമാണ്.

പേജ് ലോഡ് ചെയ്യുമ്പോൾ ഡാർക്ക് മോഡ് പരിശോധിക്കുന്നത് സങ്കൽപ്പിക്കുക:

const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;

if (prefersDark) {
  document.body.classList.add("dark");
} else {
  document.body.classList.add("light");
}

ബ്രൗസർ ഒരിക്കലും രണ്ട് ക്ലാസുകളും ഒരേസമയം ചേർക്കില്ല. അത് ഒരു പാത തിരഞ്ഞെടുക്കുന്നു, അത് പ്രവർത്തിപ്പിക്കുന്നു, തുടർന്ന് മുന്നോട്ട് പോകുന്നു. നിങ്ങളുടെ ലോജിക് രണ്ട് സാധ്യതകളായി കൃത്യമായി വിഭജിക്കപ്പെടുമ്പോഴെല്ലാം ഉപയോഗിക്കേണ്ട ഘടന ഇതാണ്.

ഒന്നിലധികം പാതകൾ: if...else if...else

എല്ലാ പ്രശ്നങ്ങളും ബൈനറി (binary) അല്ല. ചിലപ്പോൾ നിങ്ങൾക്ക് ഒന്നിലധികം സാധ്യതകളുടെ ഒരു ശ്രേണി ആവശ്യമായി വന്നേക്കാം. if...else if...else ചെയിൻ ഉപയോഗിച്ച് നിങ്ങൾക്ക് തുടർച്ചയായി പല കണ്ടീഷനുകൾ പരിശോധിക്കാം. ജാവാസ്ക്രിപ്റ്റ് അവ മുകളിൽ നിന്ന് താഴേക്ക് പരിശോധിക്കുകയും കണ്ടീഷൻ ശരിയായ ആദ്യത്തെ ബ്ലോക്ക് പ്രവർത്തിപ്പിക്കുകയും ചെയ്യുന്നു. ആ കണ്ടീഷൻ മാച്ച് ആയിക്കഴിഞ്ഞാൽ, ബാക്കിയുള്ളവ അവഗണിക്കപ്പെടുന്നു.

ഒരു നമ്പറിനെ ലെറ്റർ ഗ്രേഡിലേക്ക് മാറ്റുന്നത് ഇതിനൊരു ഉദാഹരണമാണ്:

const score = 87;
let grade;

if (score >= 90) {
  grade = "A";
} else if (score >= 80) {
  grade = "B";
} else if (score >= 70) {
  grade = "C";
} else {
  grade = "F";
}

ഇവിടെ ക്രമം (order) വളരെ പ്രധാനമാണ്. നിങ്ങൾ score >= 90 എന്നതിന് മുമ്പ് score >= 70 പരിശോധിക്കുകയാണെങ്കിൽ, മിക്ക പാസ് മാർക്കുകളും C ഗ്രേഡിൽ തന്നെ കുടുങ്ങിപ്പോകും, കാരണം ആദ്യം ശരിയാകുന്ന കണ്ടീഷൻ വിജയിക്കും. നിങ്ങളുടെ കണ്ടീഷനുകൾ ഏറ്റവും കൃത്യമായതിൽ നിന്ന് പൊതുവായതിലേക്ക് ക്രമീകരിക്കുക, കൂടാതെ ഒന്നും വിട്ടുപോകാതിരിക്കാൻ എപ്പോഴും അവസാനമായി ഒരു else ചേർക്കുക.

നിശ്ചിത മൂല്യങ്ങൾ പൊരുത്തപ്പെടുത്താൻ: switch

ഒരു വേരിയബിളിനെ അറിയപ്പെടുന്ന ചില കോൺസ്റ്റന്റുകളുമായി (constants) താരതമ്യം ചെയ്യുമ്പോൾ, നീളമേറിയ if...else ചെയിനുകൾ കോഡിനെ സങ്കീർണ്ണമാക്കും. switch സ്റ്റേറ്റ്‌മെന്റ് ഇത് ലളിതമാക്കുന്നു. ഇത് ഒരു എക്സ്പ്രഷനെ ഒരിക്കൽ മാത്രം വിലയിരുത്തുകയും, തുടർന്ന് strict equality (===) ഉപയോഗിച്ച് case ലേബലുകളുമായി താരതമ്യം ചെയ്യുകയും ചെയ്യുന്നു. ഓപ്ഷനുകൾ വ്യക്തവും പേരുള്ളതുമാണെങ്കിൽ, കോഡ് വേഗത്തിൽ വായിച്ചു മനസ്സിലാക്കാൻ ഇത് സഹായിക്കുന്നു.

നിലവിലെ ദിവസത്തെ അടിസ്ഥാനമാക്കി സ്റ്റോർ സമയം നിശ്ചയിക്കുന്നത് പരിഗണിക്കുക:

const day = new Date().getDay();

switch (day) {
  case 0:
    console.log("Sunday hours: 10am - 4pm");
    break;
  case 6:
    console.log("Saturday hours: 9am - 6pm");
    break;
  default:
    console.log("Weekday hours: 8am - 8pm");
}

break ഉപയോഗിക്കുമ്പോൾ ശ്രദ്ധിക്കുക. നിങ്ങൾ അത് ഒഴിവാക്കിയാൽ, എക്സിക്യൂഷൻ അടുത്ത case-ലേക്ക് പോവുകയും തുടർന്നും പ്രവർത്തിച്ചുകൊണ്ടിരിക്കുകയും ചെയ്യും. ഈ രീതി ചിലപ്പോൾ ഉപകാരപ്രദമാണെങ്കിലും, മിക്കപ്പോഴും ഇത് അറിയാതെ സംഭവിക്കുന്ന ബഗുകൾക്ക് (bugs) കാരണമാകും. ശരിയായി ഉപയോഗിച്ചാൽ, switch നിങ്ങളുടെ ഉദ്ദേശ്യം പെട്ടെന്ന് മനസ്സിലാക്കാൻ സഹായിക്കുകയും ബന്ധപ്പെട്ട ഭാഗങ്ങളെ ഒരേ നിരയിൽ ക്രമീകരിക്കുകയും ചെയ്യുന്നു.

ലളിതമായ തീരുമാനങ്ങൾ: ദെർണറി ഓപ്പറേറ്റർ (Ternary Operator)

? : എന്ന് എഴുതുന്ന ദെർണറി ഓപ്പറേറ്റർ ഒരു എക്സ്പ്രഷനാണ്, സ്റ്റേറ്റ്‌മെന്റല്ല. ആ വ്യത്യാസം വളരെ പ്രധാനമാണ്.