ওহো, আমি আবার করেছি: জাভাস্ক্রিপ্টে সাধারণ ত্রুটিগুলি ডিবাগ করা৷

জাভাস্ক্রিপ্ট কোড লেখা চ্যালেঞ্জিং হতে পারে এবং কখনও কখনও সরাসরি ভয় দেখাতে পারে, কারণ অনেক ডেভেলপার পরিচিত। কাজের প্রক্রিয়ায়, ত্রুটিগুলি অনিবার্যভাবে উদ্ভূত হয় এবং তাদের মধ্যে কিছু ঘন ঘন পুনরাবৃত্তি হয়। এই নিবন্ধটি, নবজাতক বিকাশকারীদের লক্ষ্য করে, এই ত্রুটিগুলি এবং কীভাবে সেগুলি সমাধান করা যায় সে সম্পর্কে কথা বলে। স্পষ্টতার জন্য, ফাংশন, বৈশিষ্ট্য এবং বস্তুর নামগুলি থেকে নেওয়া হয় জনপ্রিয় গান. এই সমস্ত আপনাকে কীভাবে সাধারণ ভুলগুলি সংশোধন করতে হয় তা দ্রুত মনে রাখতে সহায়তা করে।

আমরা মনে করিয়ে দিচ্ছি: "Habr"-এর সকল পাঠকদের জন্য - "Habr" প্রচারমূলক কোড ব্যবহার করে যেকোনো Skillbox কোর্সে নথিভুক্ত করার সময় 10 রুবেল ছাড়।

Skillbox সুপারিশ করে: ব্যবহারিক কোর্স "মোবাইল ডেভেলপার প্রো".

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.named সম্পত্তি সংজ্ঞায়িত করা হয়নি, আপনি এটি অ্যাক্সেস করতে পারবেন না, কারণ আনুষ্ঠানিকভাবে এটি বিদ্যমান নেই। কিন্তু যদি আপনি girl.named.lucky এর পরিবর্তে girl.name দিয়ে থাকেন, তাহলে সবকিছুই কাজ করবে এবং প্রোগ্রামটি লাকি ফিরিয়ে দেবে।

আপনি বৈশিষ্ট্য সম্পর্কে আরও জানতে পারেন এখানে পড়ুন.

কিভাবে TypeErrors সমাধান করবেন

TypeErrors ঘটে যখন একজন প্রোগ্রামার ডেটার উপর ক্রিয়া সম্পাদন করার চেষ্টা করে যা একটি নির্দিষ্ট প্রকারের সাথে মেলে না। উদাহরণগুলির মধ্যে রয়েছে .bold() ব্যবহার করা, একটি অনির্ধারিত সম্পত্তির জন্য জিজ্ঞাসা করা বা এমন একটি ফাংশনকে কল করা যা আসলে একটি ফাংশন নয়।

সুতরাং, আপনি যদি girl() কল করার চেষ্টা করেন, আপনি ত্রুটি পাবেন Uncaught TypeError: yourVariable.bold একটি ফাংশন নয় এবং মেয়ে একটি ফাংশন নয়, কারণ এটি আসলে একটি বস্তু যা কল করা হচ্ছে, একটি ফাংশন নয়।

ত্রুটিগুলি দূর করার জন্য, আপনাকে ভেরিয়েবলগুলি অধ্যয়ন করতে হবে। তো, মেয়ে কি? মেয়েটির নাম কি? আপনি কোড বিশ্লেষণ করে, console.log, ডিবাগার কমান্ড ব্যবহার করে ভেরিয়েবল প্রদর্শন করে বা কনসোলে ভেরিয়েবলের নাম কল করে খুঁজে বের করতে পারেন। আপনাকে নিশ্চিত করতে হবে যে ভেরিয়েবলের মধ্যে থাকা ডেটা টাইপের উপর কাজ করা সম্ভব। যদি এটি মানানসই না হয়, এটি পরিবর্তন করুন, উদাহরণস্বরূপ, একটি শর্ত যোগ করুন বা চেষ্টা করুন..ক্যাচ ব্লক - এবং অপারেশন সম্পাদনের উপর নিয়ন্ত্রণ অর্জন করুন।

স্ট্যাক ওভারফ্লো

আপনি যদি বেবি ওয়ান মোর টাইম (এটি ব্রিটনি স্পিয়ার্স, হ্যাঁ) গানটির গানের লেখকদের কথা বিশ্বাস করেন তবে এই প্রসঙ্গে হিট শব্দের অর্থ হল গায়ককে আবার ডাকার ইচ্ছা (এখানে এর প্রসঙ্গটির একটি ব্যাখ্যা রয়েছে) গান - অনুবাদকের নোট)। এটা ভাল হতে পারে যে এই ইচ্ছা বাস্তব জীবনে কলের সংখ্যা বৃদ্ধির দিকে পরিচালিত করবে। কিন্তু প্রোগ্রামিংয়ে, এটি একটি পুনরাবৃত্তি যা কল স্ট্যাক ওভারফ্লো হলে একটি ত্রুটি সৃষ্টি করতে পারে।

ত্রুটি এই মত দেখায়:

ত্রুটি: স্ট্যাক স্পেস শেষ (এজ)
অভ্যন্তরীণ ত্রুটি: খুব বেশি পুনরাবৃত্তি (ফায়ারফক্স)
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)
}

একটি উদাহরণ হল অসীম লুপ সহ কেস, যখন সিস্টেম কোনও ত্রুটি বার্তা তৈরি করে না, তবে যে পৃষ্ঠায় জাভাস্ক্রিপ্ট কোড কার্যকর করা হয় তা কেবল হিমায়িত হয়। এটা ঘটবে যদি 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
}

অসীম loops এবং recursions ডিবাগিং

আপনার যদি একটি অসীম লুপের সমস্যা থাকে, তাহলে আপনাকে Chrome বা Edge-এ ট্যাবটি বন্ধ করতে হবে এবং Firefox-এ ব্রাউজার উইন্ডোটি বন্ধ করতে হবে। এর পরে, আপনাকে কোডটি সাবধানে বিশ্লেষণ করতে হবে। আপনি যদি সমস্যাটি খুঁজে না পান তবে আপনার লুপ বা ফাংশনে একটি ডিবাগার কমান্ড যোগ করা এবং ভেরিয়েবলের মান পরীক্ষা করা মূল্যবান। ফলাফল যা প্রত্যাশিত ছিল তার সাথে সামঞ্জস্যপূর্ণ না হলে, আমরা এটি প্রতিস্থাপন করি, এটি সহজেই করা যেতে পারে।

উপরের উদাহরণে, ডিবাগার ফাংশন বা লুপের প্রথম লাইন হিসাবে যোগ করা উচিত। তারপরে আপনাকে ক্রোমে ডিবাগ ট্যাবটি খুলতে হবে, পরিসরে ভেরিয়েবলগুলি বিশ্লেষণ করে। পরবর্তী বোতামটি ব্যবহার করে আপনি প্রতিটি পুনরাবৃত্তিতে তাদের পরিবর্তনগুলি ট্র্যাক করতে পারেন। এই সব করা সহজ, এবং অধিকাংশ ক্ষেত্রে সমস্যা পাওয়া যায়।

আপনি এখানে এই সব সম্পর্কে আরও পড়তে পারেন (ক্রোমের জন্য) এবং এখানে (ফায়ারফক্সের জন্য).

বাক্যগঠন ত্রুটি

জাভাস্ক্রিপ্টের সবচেয়ে সাধারণ ত্রুটিগুলির মধ্যে একটি হল SyntaxError। টেক্সট এডিটর এক্সটেনশন আপনাকে এড়াতে সাহায্য করবে। উদাহরণস্বরূপ, ব্র্যাকেট পেয়ার কালারাইজার কোডে বন্ধনীগুলিকে বিভিন্ন রঙের সাথে চিহ্নিত করে এবং প্রেটিয়ার বা অনুরূপ বিশ্লেষণের সরঞ্জামটি দ্রুত ত্রুটিগুলি খুঁজে পাওয়া সম্ভব করে তোলে। সিনট্যাক্স ত্রুটির সম্ভাবনা কমানোর সর্বোত্তম বিকল্প হল ন্যূনতম নেস্টিং।

মন্তব্যে ভাগ করুন: আপনি ভুলগুলি প্রতিরোধ করতে বা দ্রুত সনাক্ত এবং নির্মূল করতে কী করবেন?

Skillbox সুপারিশ করে:

• দুই বছরের ব্যবহারিক কোর্স "আমি একজন প্রো ওয়েব ডেভেলপার".
• অনলাইন কোর্স "0 থেকে C# বিকাশকারী".
• ব্যবহারিক বছরের কোর্স "0 থেকে PRO পর্যন্ত পিএইচপি বিকাশকারী".

উত্স: www.habr.com