Վայ, ես դա նորից արեցի. JavaScript-ում սովորական սխալների վրիպազերծում

JavaScript կոդ գրելը կարող է դժվար լինել, և երբեմն ուղղակի վախեցնող, ինչպես շատ ծրագրավորողներ են ծանոթ: Աշխատանքի ընթացքում անխուսափելիորեն առաջանում են սխալներ, որոնցից մի քանիսը հաճախակի են կրկնվում։ Այս հոդվածը, որն ուղղված է սկսնակ ծրագրավորողներին, խոսում է այս սխալների և դրանց լուծման մասին: Պարզության համար վերցված են ֆունկցիաների, հատկությունների և օբյեկտների անվանումները հայտնի երգ. Այս ամենը օգնում է արագ հիշել, թե ինչպես ուղղել տարածված սխալները:

Հիշեցում. «Habr»-ի բոլոր ընթերցողների համար՝ 10 ռուբլի զեղչ «Habr» գովազդային կոդով Skillbox-ի ցանկացած դասընթացին գրանցվելիս:

Skillbox-ը խորհուրդ է տալիս. Գործնական դասընթաց «Mobile Developer PRO».

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. Հնարավոր չէ կարդալ «lucky» հատկությունը undefined-ից: Խնդիրն այն է, որ աղջկա օբյեկտը չունի անվանական հատկություն, թեև ունի անվանական հատկություն: Եվ քանի որ girl.named գույքը սահմանված չէ, դուք չեք կարող մուտք գործել այն, քանի որ ֆորմալ առումով այն գոյություն չունի: Բայց եթե դուք փոխարինեք girl.named.lucky-ին girl.name-ով, ապա ամեն ինչ կաշխատի, և ծրագիրը կվերադարձնի Lucky-ին:

Դուք կարող եք ավելին իմանալ հատկությունների մասին կարդացեք այստեղ.

Ինչպես լուծել TypeErrors-ը

TypeErrors-ը տեղի է ունենում, երբ ծրագրավորողը փորձում է գործողություններ կատարել տվյալների վրա, որոնք չեն համապատասխանում որոշակի տեսակի: Օրինակները ներառում են՝ օգտագործելով .bold(), չսահմանված հատկություն խնդրելը կամ ֆունկցիա, որն իրականում ֆունկցիա չէ:

Այսպիսով, եթե փորձեք կանչել girl(), ապա կստանաք Uncaught TypeError սխալը՝ yourVariable.bold-ը ֆունկցիա չէ, իսկ girl-ը ֆունկցիա չէ, քանի որ այն իրականում կանչվող օբյեկտ է, այլ ոչ ֆունկցիա:

Սխալները վերացնելու համար անհրաժեշտ է ուսումնասիրել փոփոխականները։ Այսպիսով, ինչ է աղջիկը: Ինչ է girl.named? Դուք կարող եք դա պարզել՝ վերլուծելով կոդը, ցուցադրելով փոփոխականներ՝ օգտագործելով console.log-ը, վրիպազերծիչի հրամանը կամ կանչելով փոփոխականի անունը վահանակում: Դուք պետք է համոզվեք, որ հնարավոր է աշխատել փոփոխականում պարունակվող տվյալների տեսակի վրա: Եթե ​​այն չի համապատասխանում, փոխեք այն, օրինակ, ավելացրեք պայման կամ փորձեք..catch բլոկը և վերահսկողություն ձեռք բերեք գործողության կատարման վրա:

Stack Overflow

Եթե ​​հավատում եք Baby One More Time երգի բառերի հեղինակներին (սա Բրիթնի Սփիրսն է, այո), ապա հիթ բառն այս համատեքստում նշանակում է երգչի ցանկությունը նորից կանչվել (այստեղ բացատրվում է երգի բուն համատեքստը. երգ - թարգմանչի նշում): Հնարավոր է, որ այդ ցանկությունը կհանգեցնի իրական կյանքում զանգերի քանակի ավելացման: Բայց ծրագրավորման մեջ սա ռեկուրսիա է, որը կարող է սխալ առաջացնել, եթե զանգերի փաթեթը լցվի:

Սխալներն այսպիսի տեսք ունեն.

Սխալ․ կույտի տարածություն չկա (եզր)
Ներքին սխալ. չափազանց շատ ռեկուրսիա (Firefox)
RangeError. զանգերի կույտի առավելագույն չափը գերազանցվել է (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 կոդը, պարզապես սառչում է։ Դա տեղի է ունենում, եթե while հանգույցը ավարտման պայման չունի:

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
}

Անսահման օղակների և ռեկուրսիաների վրիպազերծում

Եթե ​​դուք ունեք անսահման հանգույցի խնդիր, դուք պետք է փակեք ներդիրը Chrome-ում կամ Edge-ում և փակեք դիտարկիչի պատուհանը Firefox-ում: Դրանից հետո դուք պետք է ուշադիր վերլուծեք կոդը: Եթե ​​դուք չեք կարող գտնել խնդիրը, ապա արժե ձեր հանգույցին կամ ֆունկցիային ավելացնել վրիպազերծիչ հրաման և ստուգել փոփոխականների արժեքները: Եթե ​​արդյունքը չի համապատասխանում սպասվածին, ապա մենք այն փոխարինում ենք, դա կարելի է հեշտությամբ անել։

Վերևի օրինակում վրիպազերծիչը պետք է ավելացվի որպես ֆունկցիայի կամ հանգույցի առաջին տող: Այնուհետև դուք պետք է բացեք վրիպազերծման ներդիրը Chrome-ում՝ վերլուծելով շրջանակի փոփոխականները: Օգտագործելով հաջորդ կոճակը, դուք կարող եք հետևել դրանց փոփոխություններին յուրաքանչյուր կրկնության հետ: Այս ամենը հեշտ է անել, և շատ դեպքերում խնդիրը հայտնաբերվում է։

Այս ամենի մասին ավելի մանրամասն կարող եք կարդալ այստեղ (Chrome-ի համար) և այստեղ (Firefox-ի համար).

Շարահյուսական սխալ է

JavaScript-ի ամենատարածված սխալներից մեկը SyntaxError-ն է: Տեքստային խմբագրիչի ընդլայնումները կօգնեն ձեզ խուսափել դրանցից: Օրինակ, Bracket Pair Colorizer-ը ծածկագրում նշում է փակագծերը տարբեր գույներով, իսկ Prettier-ը կամ նմանատիպ վերլուծության գործիքը հնարավորություն է տալիս արագ գտնել սխալները: SyntaxError-ի հավանականությունը նվազեցնելու լավագույն տարբերակը նվազագույն բույնն է:

Կիսվեք մեկնաբանություններում. ի՞նչ եք անում սխալները կանխելու կամ դրանք արագ հայտնաբերելու և վերացնելու համար:

Skillbox-ը խորհուրդ է տալիս.

• Երկու տարվա գործնական դասընթաց «Ես PRO վեբ ծրագրավորող եմ».
• Առցանց դասընթաց «C# մշակող 0-ից».
• Գործնական տարվա դասընթաց «PHP ծրագրավորող 0-ից մինչև PRO».

Source: www.habr.com