বুডিং সফ্টওয়্যার ইঞ্জিনিয়ার এবং ওয়েব ডেভেলপাররা যা প্রথম কোড/অ্যালগরিদম চ্যালেঞ্জ সমাধান করতে চেষ্টা করে সেটি হলো একটি স্ট্রিং কীভাবে রিভার্স করতে হয় তা বের করা। মনে রাখবেন যে একটি স্ট্রিং ক্যারেক্টার এবং স্পেসের কালেকশন মাত্র। আমরা যা করতে চাই সেটি হলো উদাহরণস্বরূপ, "Hello World!" স্ট্রিংটি রিভার্স করে "!dlroW olleH" রিটার্ন করা। এই সমস্যাটি সমাধানের кільক উপায় আছে এবং আমরা এখানে কিছু টি কভার করব।
প্রম্পট
reverseString নামে একটি ফাংশন লিখুন, যা একটি স্ট্রিং রিভার্স করে এবং রিটার্ন করে। রিভার্স করা স্ট্রিংটি ফাংশনে আর্গুমেন্ট হিসেবে দেওয়া হয়।
সমাধান # 1: For Loop
প্রথম, এবং সম্ভবত সবচেয়ে সহজ সমাধান হলো একটি for লুপ ব্যবহার করে স্ট্রিংয়ের পিছন থেকে অগামি দিকে যাওয়া। আমাদের একটি ভেরিয়েবল ইনস্ট্যানশিয়েট বা তৈরি করতে হবে যা নতুন রিভার্সড স্ট্রিং ধারণ করবে當我們 স্ট্রিংর প্রতিটি ক্যারেক্টার পাস করব:
function reverseString(str) { let newStr = ''; for(let i = str.length - 1; i >= 0; i--) { newStr += str[i]; } return newStr; }
আমরা i-কে লাস্ট ইন্ডেক্সে বরাদ্দ করি (যা স্ট্রিংর দৈর্ঘ্য থেকে ১ বিয়োগ করলে পাওয়া যায়) ⇒ এটি আমাদের initialization এবং সেটি আমাদের প্রথম ইন্ডেক্স যা আমরা লুপ করব। for লুপের দ্বিতীয় অংশ হলো আমাদের condition ⇒ এটি লুপকে বলে কখন থামবে। for লুপের তৃতীয় এবং শেষ অংশ হলো লুপ এবং কন্ডিশন সত্য থাকলে আমাদের i কতটুকু increment হবে: i– মূলত আমাদের i কে নিয়ে i – 1-এ রি-অ্যাসাইন করে;
প্রতিটি ইটেরেশনে লুপ করার সময় আমরা str[i]-এ থাকা প্রতিটি ক্যারেক্টার নিয়ে newStr-এ যোগ করি। তারপর আমরা for লুপের বাইরে newStr রিটার্ন করি এবং ফাংশন টার্মিনেট করি।
কোড এডিটরে নিজে চেষ্টা করুন:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title></title> <meta name="description" content="" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="" /> <script> function reverseString(str) { let newStr = ''; for(let i = str.length - 1; i >= 0; i--) { newStr += str[i]; } return newStr; } function showInput(e) { e.preventDefault(); const inputStr = document.getElementById('user_input').value; if(inputStr.length < 1) { alert("Must enter a string to reverse. Try again.") } let reversed = reverseString(inputStr); document.getElementById( 'display' ).innerHTML = reversed; document.getElementById('user_input').value = ''; } </script> <style> * { box-sizing: border-box;; } body { width: 100%; max-width: 500px; height: 100vh; background: lightblue; margin: 0 auto; display: flex; flex-flow: column wrap; align-items: center; justify-content: center; } div { display: flex; flex-flow: column wrap; align-items: flex-start; width: 100%; } form { display: flex; flex-flow: column wrap; width: 100%; background: lightgray; padding: 20px; border: 5px double slategray; } #user_input { width: 100%; } #submit_button { width: 25%; align-self: flex-end; margin-top: 10px; } #display { font-size: 1.4rem; height: 50px; } </style> </head> <body> <div> <form onsubmit="showInput(event);"> <label id="label">Enter a String to Reverse:</label> <input type="text" name="message" id="user_input"/> <input type="submit" onclick="showInput(event);" id="submit_button"/><br /> <label>Your input: </label> <p><span id="display"></span></p> </form> </div> </body> </html>
সমাধান # 2: জাভাস্ক্রিপ্টের ES6 map মেথড
জাভাস্ক্রিপ্টে ES6-এ নতুন একটি বিল্ট-ইন অ্যারে মেথড আছে যাকে map বলা হয়। এটি কী করে সেটি হলো নির্দিষ্ট ভ্যালুসহ একটি নতুন অ্যারে রিটার্ন করা। map মেথডের তিনটি প্যারামিটার আছে: করেন্ট আইটেম, আইটেমের ইন্ডেক্স, এবং সেটি যেটি থেকে আসছে তার একটি কপি। আমরা শেষ দুটি প্যারামিটার সমাধানে ব্যবহার করব।
প্রথমেই আমাদের স্ট্রিংকে অ্যারেতে স্প্লিট করতে হবে split() মেথড ব্যবহার করে। যদি আমরা খালি স্ট্রিং-এ স্প্লিট করি, মেথডটি আমাদের প্রতিটি ইনডিভিজুয়াল ক্যারেক্টার ধারণকারী একটি অ্যারে দেবে। তারপর আমরা সেই নতুন অ্যারেটে map করব।
81% of participants stated they felt more confident about their tech job prospects after attending a bootcamp. Get matched to a bootcamp today.
The average bootcamp grad spent less than six months in career transition, from starting a bootcamp to finding their first job.
function reverseString(str) { let newArr = str.split(''); let rev = newArr.map((letter, index, array) => { let swapIndex = array.length - index - 1; return array[swapIndex]; }); return rev.join('') }
যেহেতু আমরা ইনডেক্স সোয়াপ করতে চাই, আমাদের করেন্ট ইন্ডেক্সের জায়গায় কোন ক্যারেক্টারটি বসাবে সেটির ইন্ডেক্স বের করতে হবে। সেটি হবে যে ক্যারেক্টারটি আমরা রিটার্ন করব।
এটা করতে, আমরা অ্যারের দৈর্ঘ্য বের করি, এক বিয়োগ করি কারণ আমরা জিরো-ভিত্তিক অ্যারে, এবং তারপর করেন্ট ইন্ডেক্সের পজিশন বিয়োগ করি। আমরা যে array[swapIndex] রিটার্ন করি সেটি মূলত করেন্ট ইন্ডেক্সের জায়গা নেয়। এতে আমরা একটি স্ট্রিংর রিভার্সড ক্যারেক্টারসহ অ্যারে পাই।
শেষে যা করতে হবে সেটি হলো অ্যারেটিকে একসাথে জয়েন করে একটি স্ট্রিং বানানো এবং রিটার্ন করা।
কোড এডিটরে সমাধানটি টেস্ট করুন!
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title></title> <meta name="description" content="" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="" /> <script> function reverseString(str) { let newArr = str.split(''); let rev = newArr.map((letter, index, array) => { let newIndex = array.length - index - 1; return array[newIndex]; }); return rev.join('') } function showInput(e) { e.preventDefault(); const inputStr = document.getElementById('user_input').value; if(inputStr.length < 1) { alert("Must enter a string to reverse. Try again.") } let reversed = reverseString(inputStr); document.getElementById( 'display' ).innerHTML = reversed; document.getElementById('user_input').value = ''; } </script> <style> * { box-sizing: border-box;; } body { width: 100%; max-width: 500px; height: 100vh; background: lightblue; margin: 0 auto; display: flex; flex-flow: column wrap; align-items: center; justify-content: center; } div { display: flex; flex-flow: column wrap; align-items: flex-start; width: 100%; } form { display: flex; flex-flow: column wrap; width: 100%; background: lightgray; padding: 20px; border: 5px double slategray; } #user_input { width: 100%; } #submit_button { width: 25%; align-self: flex-end; margin-top: 10px; } #display { font-size: 1.4rem; height: 50px; } </style> </head> <body> <div> <form onsubmit="showInput(event);"> <label id="label">Enter a String to Reverse:</label> <input type="text" name="message" id="user_input"/> <input type="submit" onclick="showInput(event);" id="submit_button"/><br /> <label>Your input: </label> <p><span id="display"></span></p> </form> </div> </body> </html>
বড় কথা হলো map একটি নতুন অ্যারে রিটার্ন করে – তাই আমরা অরিজিনাল str/অ্যারে মডিফাই করছি না যা পাস করা হয়েছে।
সমাধান #3: বিল্ট-ইন জাভাস্ক্রিপ্ট মেথড
এই সমাধান বিল্ট-ইন ফাংশন/মেথড split(), reverse(), এবং join() ব্যবহার করে এই এক-লাইনারে সমাধান করে:
function reverseString(str) { return str.split('').reverse().join(''); }
নিচের কোড রান করে এবং নিজে টেস্ট করে দেখুন এটি কাজ করে!
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title></title> <meta name="description" content="" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="" /> <script> function reverseString(str) { return str.split('').reverse().join(''); } function showInput(e) { e.preventDefault(); const inputStr = document.getElementById('user_input').value; if(inputStr.length < 1) { alert("Must enter a string to reverse. Try again.") } let reversed = reverseString(inputStr); document.getElementById( 'display' ).innerHTML = reversed; document.getElementById('user_input').value = ''; } </script> <style> * { box-sizing: border-box;; } body { width: 100%; max-width: 500px; height: 100vh; background: lightblue; margin: 0 auto; display: flex; flex-flow: column wrap; align-items: center; justify-content: center; } div { display: flex; flex-flow: column wrap; align-items: flex-start; width: 100%; } form { display: flex; flex-flow: column wrap; width: 100%; background: lightgray; padding: 20px; border: 5px double slategray; } #user_input { width: 100%; } #submit_button { width: 25%; align-self: flex-end; margin-top: 10px; } #display { font-size: 1.4rem; height: 50px; } </style> </head> <body> <div> <form onsubmit="showInput(event);"> <label id="label">Enter a String to Reverse:</label> <input type="text" name="message" id="user_input"/> <input type="submit" onclick="showInput(event);" id="submit_button"/><br /> <label>Your input: </label> <p><span id="display"></span></p> </form> </div> </body> </html>
মূলত বিল্ট-ইন reverse() মেথডটি আমাদের পূর্ববর্তী সমাধানে আউटलাইন করা map() মেথডটি আন্ডার দ্য হুড করে; তবে, এটি অরিজিনাল অ্যারে মিউটেট করে একটি নতুন রিটার্ন করার বদলে, কারণ এটি ইন প্লেস রিভার্স করে। আপনি যদি একটি বড় সমস্যা সমাধান করেন, আপনাকে অরিজিনাল অ্যারের একটি কপি তৈরি করতে হতে পারে যাতে আপনি অরিজিনালটি এখনও অ্যাক্সেস করতে পারেন।
এইগুলো এই সমস্যা সমাধানের একমাত্র নির্ভুল পদ্ধতি নয় – এগুলো শুধু আরও জনপ্রিয় পদ্ধতিগুলো। এক্সপেরিমেন্ট করুন এবং দেখুন কোড এডিটরে নিজে অন্য সমাধান খুঁজে পেতে পারেন কিনা। শুধু reverseString() ফাংশন এডিট করুন এবং কিছুই না যদি আপনি এটি স্ক্রিনে দেখতে চান।
