Underscore.js কি?
Underscore.js হলো একটি JavaScript লাইব্রেরি যা আপনার কোডে কমপ্লেক্স অপারেশনগুলো সহজতর এবং দ্রুত করতে সাহায্য করে। এটি বিভিন্ন ইউটিলিটি ফাংশন সরবরাহ করে, যেমন অ্যারে, অবজেক্ট, ফাংশন এবং সিকোয়েন্স অপারেশন। Underscore.js ব্যবহার করে আপনি কমপ্লেক্স ডেটা প্রক্রিয়াকরণ এবং ম্যানিপুলেশন দ্রুত করতে পারেন। এর মধ্যে রয়েছে map, reduce, filter, clone, each, এবং আরও অনেক সহায়ক ফাংশন।
Underscore.js ব্যবহার করার সুবিধা
- অ্যারে ও অবজেক্ট ম্যানিপুলেশন: Underscore.js অ্যারে ও অবজেক্টের সাথে কাজ করার জন্য সরল ফাংশন প্রদান করে।
- ফাংশনাল প্রোগ্রামিং: এতে ফাংশনাল প্রোগ্রামিং এর বিভিন্ন কনসেপ্ট যেমন map, filter, reduce ইত্যাদি সহজে ব্যবহার করা যায়।
- ইউটিলিটি ফাংশন: Underscore.js সরবরাহ করে এমন ফাংশনগুলো কোডের পরিমাণ কমিয়ে, কার্যকারিতা বাড়াতে সাহায্য করে।
প্রথম Underscore.js স্ক্রিপ্ট তৈরি করা
এখন চলুন, Underscore.js ব্যবহার করে একটি সহজ স্ক্রিপ্ট তৈরি করি যা অ্যারে বা তালিকার ডেটাকে প্রক্রিয়াকরণ করবে।
১. Underscore.js ইনক্লুড করা
Underscore.js ইনক্লুড করার জন্য আপনি দুইটি পদ্ধতি ব্যবহার করতে পারেন:
- CDN (Content Delivery Network) থেকে সরাসরি অন্তর্ভুক্ত করা:
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.1/underscore-min.js"></script>
- লোকাল ফাইল: যদি আপনি Underscore.js ডাউনলোড করে লোকাল ফাইল হিসেবে ব্যবহার করতে চান, তবে আপনি এটি এখান থেকে ডাউনলোড করতে পারেন এবং তারপর
<script>ট্যাগ দিয়ে অন্তর্ভুক্ত করতে পারেন।
২. প্রথম Underscore.js স্ক্রিপ্ট
এখন আমরা একটি উদাহরণ তৈরি করবো যেখানে আমরা Underscore.js এর each ফাংশন ব্যবহার করব, যা একটি অ্যারে বা তালিকাতে প্রতিটি আইটেমের উপর একটি নির্দিষ্ট ফাংশন প্রয়োগ করবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Underscore.js Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.1/underscore-min.js"></script>
</head>
<body>
<h2>Underscore.js Example</h2>
<div id="output"></div>
<script>
// অ্যারে ডেটা
var numbers = [1, 2, 3, 4, 5];
// Underscore.js 'each' ফাংশন ব্যবহার করা
_.each(numbers, function(num) {
// প্রতিটি আইটেমের উপর কিছু করতে হবে
console.log(num);
});
// আরও এক্সাম্পল: অ্যারে থেকে ডাবল ভ্যালু তৈরি করা
var doubledNumbers = _.map(numbers, function(num) {
return num * 2;
});
// আউটপুট div তে ফলাফল প্রদর্শন করা
document.getElementById('output').innerHTML = "Doubled Numbers: " + doubledNumbers.join(", ");
</script>
</body>
</html>
কোড ব্যাখ্যা:
- Underscore.js CDN: আমরা স্ক্রিপ্ট ট্যাগের মাধ্যমে Underscore.js লাইব্রেরি যোগ করেছি।
_.each(): এটি একটি লুপ ফাংশন যা একটি অ্যারের প্রতিটি আইটেমের উপর নির্দিষ্ট ফাংশন কার্যকর করে। এখানে, আমরা কেবল সংখ্যাগুলো কনসোল-এ লগ করেছি।_.map():map()ফাংশনটি একটি নতুন অ্যারে তৈরি করে যেখানে প্রত্যেকটি আইটেমের জন্য একটি ফাংশন কার্যকর করা হয়। এখানে, আমরা সংখ্যাগুলিকে দ্বিগুণ করেছি এবং এটিdoubledNumbersনামক নতুন অ্যারে তে সংরক্ষণ করেছি।- আউটপুট: শেষে, আমরা
doubledNumbersঅ্যারেটির কনটেন্ট একটিdivতে প্রদর্শন করেছি, যাতে এটি ওয়েব পৃষ্ঠায় দেখা যায়।
Underscore.js এর অন্যান্য গুরুত্বপূর্ণ ফাংশন
_.filter(): অ্যারে বা তালিকার মধ্যে একটি নির্দিষ্ট শর্ত পূর্ণ করা আইটেমগুলি ফিল্টার করতে ব্যবহৃত হয়।var evenNumbers = _.filter(numbers, function(num) { return num % 2 === 0; }); console.log(evenNumbers); // [2, 4]_.reduce(): এটি অ্যারের সকল আইটেমকে একসাথে যোগ করে বা অন্য কোন অপারেশন করে একটি একক মান উৎপন্ন করতে ব্যবহৃত হয়।var sum = _.reduce(numbers, function(memo, num) { return memo + num; }, 0); console.log(sum); // 15_.find(): এটি একটি নির্দিষ্ট শর্ত পূর্ণকারী প্রথম আইটেমটি খুঁজে বের করে।var firstEven = _.find(numbers, function(num) { return num % 2 === 0; }); console.log(firstEven); // 2_.clone(): এটি একটি অবজেক্ট বা অ্যারের কপি তৈরি করে।var clonedArray = _.clone(numbers); console.log(clonedArray); // [1, 2, 3, 4, 5]_.uniq(): এটি একটি অ্যারে থেকে ডুপ্লিকেট আইটেম মুছে ফেলে।var uniqueNumbers = _.uniq([1, 2, 2, 3, 3, 4]); console.log(uniqueNumbers); // [1, 2, 3, 4]
সারাংশ
Underscore.js একটি শক্তিশালী লাইব্রেরি যা JavaScript কোডের উন্নত ফাংশনালিটি যোগ করতে ব্যবহৃত হয়, বিশেষত যখন আপনাকে অ্যারে বা অবজেক্ট ম্যানিপুলেশন, ফাংশনাল প্রোগ্রামিং, এবং ডেটা প্রক্রিয়াকরণ করতে হয়। এখানে আমরা দেখেছি কিভাবে Underscore.js এর each, map, filter এবং অন্যান্য ফাংশন ব্যবহার করে আপনার কোডকে আরও কার্যকর এবং সংক্ষিপ্ত করা যায়। এটি ওয়েব ডেভেলপমেন্টে অনেক সময় এবং পরিশ্রম বাঁচাতে সাহায্য করে।
Read more
