અરેરે, મેં તે ફરીથી કર્યું: JavaScript માં સામાન્ય ભૂલોને ડીબગ કરવું

JavaScript કોડ લખવો એ પડકારજનક અને ક્યારેક સાવ ડરાવી શકે તેવું હોઈ શકે છે, કારણ કે ઘણા વિકાસકર્તાઓ તેનાથી પરિચિત છે. કાર્યની પ્રક્રિયામાં, ભૂલો અનિવાર્યપણે ઊભી થાય છે, અને તેમાંથી કેટલીક વારંવાર પુનરાવર્તિત થાય છે. આ લેખ, શિખાઉ વિકાસકર્તાઓને ધ્યાનમાં રાખીને, આ ભૂલો અને તેમને કેવી રીતે હલ કરવી તે વિશે વાત કરે છે. સ્પષ્ટતા માટે, ફંક્શન્સ, પ્રોપર્ટીઝ અને ઑબ્જેક્ટના નામો પરથી લેવામાં આવે છે પ્રખ્યાત ગીત. આ બધું તમને સામાન્ય ભૂલોને કેવી રીતે સુધારવી તે ઝડપથી યાદ રાખવામાં મદદ કરે છે.

અમે યાદ કરાવીએ છીએ: Habrના તમામ વાચકો માટે - Habr પ્રોમો કોડનો ઉપયોગ કરીને કોઈપણ સ્કિલબોક્સ કોર્સમાં નોંધણી કરતી વખતે 10 રૂબલ ડિસ્કાઉન્ટ.

સ્કિલબોક્સ ભલામણ કરે છે: પ્રેક્ટિકલ કોર્સ "મોબાઇલ ડેવલપર પ્રો".

TypeError: મિલકત વ્યાખ્યાયિત નથી

let girl = {
    name: "Lucky",
    location: "Hollywood",
    profession: "star",
    thingsMissingInHerLife: true,
    lovely: true,
    cry: function() {
        return "cry, cry, cries in her lonely heart"
    }
}
console.log(girl.named.lucky)

ઉપરોક્ત ઉદાહરણ કોડ ભૂલને ફેંકી દે છે Uncaught TypeError: અવ્યાખ્યાયિતની મિલકત 'લકી' વાંચી શકાતી નથી. સમસ્યા એ છે કે છોકરીની વસ્તુ પાસે નામવાળી મિલકત નથી, જો કે તેની પાસે નામની મિલકત છે. અને છોકરીના નામવાળી મિલકત વ્યાખ્યાયિત ન હોવાથી, તમે તેને ઍક્સેસ કરી શકતા નથી, કારણ કે ઔપચારિક રીતે તે અસ્તિત્વમાં નથી. પરંતુ જો તમે girl.name.lucky ને girl.name થી બદલો છો, તો બધું કામ કરશે અને પ્રોગ્રામ લકી પરત કરશે.

તમે ગુણધર્મો વિશે વધુ જાણી શકો છો અહીં વાંચો.

TypeErrors કેવી રીતે ઉકેલવી

TypeErrors ત્યારે થાય છે જ્યારે પ્રોગ્રામર ડેટા પર ક્રિયાઓ કરવાનો પ્રયાસ કરે છે જે ચોક્કસ પ્રકાર સાથે મેળ ખાતો નથી. ઉદાહરણોમાં .bold() નો ઉપયોગ કરવો, અવ્યાખ્યાયિત ગુણધર્મ માટે પૂછવું અથવા ફંક્શનને કૉલ કરવાનો સમાવેશ થાય છે જે વાસ્તવમાં ફંક્શન નથી.

તેથી, જો તમે ગર્લ() ને કૉલ કરવાનો પ્રયાસ કરશો, તો તમને ભૂલ મળશે Uncaught TypeError: yourVariable.bold એ ફંક્શન નથી અને છોકરી એ ફંક્શન નથી, કારણ કે તે વાસ્તવમાં એક ઑબ્જેક્ટ છે જેને કૉલ કરવામાં આવે છે, ફંક્શન નથી.

ભૂલોને દૂર કરવા માટે, તમારે ચલોનો અભ્યાસ કરવાની જરૂર છે. તો, છોકરી શું છે? છોકરીનું નામ શું છે? તમે કોડનું વિશ્લેષણ કરીને, console.log, ડીબગર કમાન્ડનો ઉપયોગ કરીને ચલોને પ્રદર્શિત કરીને અથવા કન્સોલમાં વેરીએબલ નામને કૉલ કરીને શોધી શકો છો. તમારે ખાતરી કરવાની જરૂર છે કે વેરીએબલમાં સમાવિષ્ટ ડેટા પ્રકાર પર કામ કરવું શક્ય છે. જો તે બંધબેસતું નથી, તો તેને બદલો, ઉદાહરણ તરીકે, એક શરત ઉમેરો અથવા પ્રયાસ કરો..બ્લોક પકડો - અને ઓપરેશનના અમલ પર નિયંત્રણ મેળવો.

સ્ટેક ઓવરફ્લો

જો તમે બેબી વન મોર ટાઈમ (આ બ્રિટની સ્પીયર્સ છે, હા) ગીતના ગીતોના લેખકો પર વિશ્વાસ કરો છો, તો આ સંદર્ભમાં હિટ શબ્દનો અર્થ ગાયકની ફરીથી બોલાવવાની ઈચ્છા છે (અહીં તેના ખૂબ જ સંદર્ભની સમજૂતી છે. ગીત - અનુવાદકની નોંધ). એવું બની શકે છે કે આ ઇચ્છા વાસ્તવિક જીવનમાં કૉલ્સની સંખ્યામાં વધારો તરફ દોરી જશે. પરંતુ પ્રોગ્રામિંગમાં, આ એક પુનરાવર્તન છે જે ભૂલનું કારણ બની શકે છે જો કૉલ સ્ટેક ઓવરફ્લો થાય.

ભૂલો આના જેવી દેખાય છે:

ભૂલ: સ્ટેક જગ્યાની બહાર (એજ)
આંતરિક ભૂલ: ખૂબ જ પુનરાવર્તન (ફાયરફોક્સ)
રેન્જ એરર: કૉલ સ્ટેકનું મહત્તમ કદ ઓળંગી ગયું (Chrome)

સ્ટેક ઓવરફ્લો થાય છે જો ડેવલપર રિકર્ઝનમાં બેઝ કેસને ધ્યાનમાં ન લે, અથવા જો કોડ ઇચ્છિત કેસને સંબોધતો ન હોય.

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness++
    return oneMoreTime(stillBelieve, loneliness)
}

આ કિસ્સામાં, stillBelieve ક્યારેય ખોટું ન હોઈ શકે, તેથી દરેક વખતે OneMoreTime કૉલ કરવામાં આવશે, પરંતુ ફંક્શન ક્યારેય પૂર્ણ થશે નહીં.

જો તમે બે મિત્રો પર આધાર રાખવાનું શરૂ કરો છો, તો તેનાથી એકલતા ઓછી થશે, અને તમારે કૉલની રાહ જોવી પડશે નહીં.

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness--
    stillBelieve = false
    return oneMoreTime(stillBelieve, loneliness)
}

એક ઉદાહરણ અનંત લૂપ્સ સાથેના કિસ્સાઓ છે, જ્યારે સિસ્ટમ ભૂલ સંદેશો જનરેટ કરતી નથી, પરંતુ જે પૃષ્ઠ પર JavaScript કોડ એક્ઝિક્યુટ થાય છે તે ખાલી થીજી જાય છે. આવું થાય છે જો જ્યારે લૂપમાં સમાપ્તિની સ્થિતિ ન હોય.

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
}

તમે નીચે પ્રમાણે સમસ્યા હલ કરી શકો છો:

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
  worldEnded = true
}

અનંત આંટીઓ અને પુનરાવર્તનોને ડીબગ કરવું

જો તમને અનંત લૂપની સમસ્યા હોય, તો તમારે ક્રોમ અથવા એજમાં ટેબ બંધ કરવાની અને ફાયરફોક્સમાં બ્રાઉઝર વિન્ડો બંધ કરવાની જરૂર છે. આ પછી, તમારે કોડનું કાળજીપૂર્વક વિશ્લેષણ કરવાની જરૂર છે. જો તમે સમસ્યા શોધી શકતા નથી, તો તમારા લૂપ અથવા ફંક્શનમાં ડીબગર કમાન્ડ ઉમેરવા અને ચલોની કિંમતો તપાસવા યોગ્ય છે. જો પરિણામ અપેક્ષિત હતું તે અનુરૂપ ન હોય, તો અમે તેને બદલીએ છીએ, આ સરળતાથી કરી શકાય છે.

ઉપરના ઉદાહરણમાં, ડીબગરને ફંક્શન અથવા લૂપની પ્રથમ લાઇન તરીકે ઉમેરવું જોઈએ. પછી તમારે ક્રોમમાં ડીબગ ટેબ ખોલવાની જરૂર છે, અવકાશમાં ચલોનું વિશ્લેષણ કરીને. આગલા બટનનો ઉપયોગ કરીને તમે દરેક પુનરાવર્તન સાથે તેમના ફેરફારોને ટ્રૅક કરી શકો છો. આ બધું કરવું સરળ છે, અને મોટાભાગના કિસ્સાઓમાં સમસ્યા જોવા મળે છે.

તમે આ બધા વિશે અહીં વધુ વાંચી શકો છો (ક્રોમ માટે) અને અહીં (ફાયરફોક્સ માટે).

વાક્યરચના ભૂલ

JavaScript માં સૌથી સામાન્ય ભૂલોમાંની એક સિન્ટેક્સ એરર છે. ટેક્સ્ટ એડિટર એક્સ્ટેન્શન્સ તમને તેમને ટાળવામાં મદદ કરશે. ઉદાહરણ તરીકે, કૌંસ જોડી કલરાઇઝર કોડમાં કૌંસને વિવિધ રંગો સાથે ચિહ્નિત કરે છે, અને પ્રિટિયર અથવા સમાન વિશ્લેષણ સાધન ઝડપથી ભૂલો શોધવાનું શક્ય બનાવે છે. સિન્ટેક્સ એરરની સંભાવના ઘટાડવાનો શ્રેષ્ઠ વિકલ્પ ન્યૂનતમ માળખું છે.

ટિપ્પણીઓમાં શેર કરો: તમે ભૂલોને રોકવા અથવા તેને ઝડપથી શોધવા અને દૂર કરવા માટે શું કરો છો?

સ્કિલબોક્સ ભલામણ કરે છે:

• બે વર્ષનો પ્રેક્ટિકલ કોર્સ "હું પ્રો વેબ ડેવલપર છું".
• ઓનલાઇન કોર્સ "0 થી C# વિકાસકર્તા".
• એક વર્ષનો પ્રેક્ટિકલ કોર્સ "0 થી PRO સુધી PHP વિકાસકર્તા".

સોર્સ: www.habr.com