Pick Function Refactoring & Property Management

mehedi imunmehedi imun
3 min read

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

এটির সিনট্যাক্স এবং ব্যবহার ধরে নিচের উদাহরণে দেখানো হলো:

const pick = <T extends Record<string, unknown>, k extends keyof T>( obj: T, keys: k[] ): Partial<T> => { const finalObj: Partial<T> = {}; for (const key of keys) { if (obj && Object.hasOwnProperty.call(obj, key)) { finalObj[key] = obj[key]; } } return finalObj; };

আমাদের আর্গুমেন্ট হিসেবে পাঠানো ডাটাঃ

const user = { name: 'John Doe', age: 30, email: 'johndoe@example.com', address: '123 Main Street, }; const selectedUser = pick(user, ['name', 'email']); console.log(selectedUser);

উপরের উদাহরণে, আমরা একটি user অবজেক্ট এবং একটি কী অ্যারে ['name', 'email'], pick ফাংশনের প্যারামিটার হিসেবে পাঠিয়েছি ।

এই pick ফাংশনটি শুধুমাত্র নির্দিষ্ট Keys গুলো যেমনঃ [’name’,’email’] ধরে user অবজেক্ট থেকে তা সিলেক্টাট করে নিয়ে রিটার্ন করেছে । এর ফলাফল হবে:

{ name: 'John Doe', email: 'johndoe@example.com' }

এখানে name এবং email কীগুলো নির্দিষ্ট করা হয়েছে তাই মাত্র এই দুটি কী সিলেক্ট করে রিটার্ন করছে তবে আপনি চাইলে আরও কী দিয়ে কল করতে পারেন ।

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

pick ফাংশনটি মূলত একটি সিম্পল ফাংশন যা নির্দিষ্ট কীগুলো সিলেক্ট করে নিয়ে একটি নতুন অবজেক্ট তৈরি করে দেয়, এতক্ষনে এটা আমরা বুঝে গেছি। (— বুঝলে ভোজপাতা, না বুঝলে তেজপাতা)

তো এইবার আমরা এইটা বুঝার চেষ্টা করি pick ফাংশনটি কি ভাবে কাজ করে ।

পিক ফাংশনটি একটি জেনেরিক ফাংশন যা দুটি আর্গুমেন্ট গ্রহণ করে। ফাংশনটি প্রথম আর্গুমেন্ট হিসেবে একটি অবজেক্ট (obj) গ্রহণ করে যার টাইপ T । এটি হলো মূল অবজেক্ট যার থেকে কীগুলো সিলেক্ট করা হবে এবং দ্বিতীয় আর্গুমেন্ট হিসেবে একটি কী অ্যারে (keys) গ্রহণ করে,এখানে আপনি যেই কীগুলো দিবেন, অবজেক্ট থেকে সেই কীগুলো রিটার্ন পাবেন।

const finalObj: Partial<T> = {};

এখানে একটি empty অবজেক্ট তৈরি করে এর নাম দেওয়া হলো finalObj যা হবে Partial<T> টাইপের অবজেক্ট।

তারপর একটি ফর লুপ চালিয়ে keys অ্যারের প্রতিটি কীতে লুপ চালানোর মাধ্যমে প্রতিটি কীগুলোর জন্য নিম্নলিখিত চেক গুলি করে । প্রথমে চেক করে অব্জেক্টটি আছে কিনা , যদি থাকে এর সাথে && সর্ট সার্কিট করে দেখে যে আমরা যে keys হিসবে যে ভ্যালুগুলো দিয়েছি সেগুলোর সাথে ম্যাচ করছে কিনা । যদি ম্যাচ করে করে তাহলে if ব্লকটি কাজ করবে ।

hasOwnPropertry : hasOwnProperty একটি জাভাস্ক্রিপ্ট বিল্ট ইন মেথড ! এটি চেক করে দেখে অব্জেক্ট এর মধ্যে আমাদের দেয়া প্রপার্টি আছে কিনা ! যদি থাকে সে true রিটার্ন করে না থাকলে false রিটার্ন করবে। নিচের উদাহরণ টা দেখে নিই

const obj = { name: 'John', age: 25, }; console.log(obj.hasOwnProperty('name')); // true console.log(obj.hasOwnProperty('gender')); // false

এখন আমরা এই obj.hasOwnProperty এর সাথে জাভাস্ক্রিপ্ট এর বিল্ট ইন calll মেথডকে বাইন্ড করে আর্গুমেন্ট হিসেবে আমাদের অব্জেক্ট এবং একটি করে key পাঠিয়ে দিচ্ছি যাতে করে । যদি key টা উক্ত অব্জেক্ট এর মধ্যে থাকে তাহলে সে true রিটার্ন করবে এবং আমাদের if ব্লকটি কাজ করবে, আর যদি সে false রিটার্ন করে তাহলে if ব্লকটি কাজ করবে না

if (obj && Object.hasOwnProperty.call(obj, key)) { finalObj[key] = obj[key]; }

যদি চেক সত্যি হয়, তবে finalObj অবজেক্টের প্রোপার্টি হিসেবে key নিয়ে এর মান হিসেবে finalObj[key] = obj[key] রেখে দেয়।

ফর লুপ শেষ হলে, finalObj অবজেক্ট রিটার্ন করা হয়। এটি হবে অরিজিনাল অবজেক্ট (obj) থেকে কেবল সিলেক্টেড প্রোপার্টিগুলো একটা নতুন অবজেক্ট হিসাবে রিটার্ন পায়:

{ name: 'John Doe', email: 'johndoe@example.com' }

আশা করি বুঝতে পেরেছেন !! একদম ইজি একটা জিনিস বুঝে ব্যবহার করতে পারলে আর ফিরে দেখতে হবে না ! যেকোন প্রজেক্টে আপনি ব্যবহার করতে পারবেন ।

1
Subscribe to my newsletter

Read articles from mehedi imun directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

mehedi imun
mehedi imun

I am a passionate web instructor at Programming Hero, specializing in web development technologies such as Typescript, Express, Mongoose, Rest API, Redux, React, RTK Query, Testing, GraphQL, Deployment, PostgreSQL, Next.js, and Docker. With a commitment to providing exceptional education and support to students, I play a vital role in their journey to becoming skilled web developers. As a web instructor at Programming Hero, I deliver engaging and informative lessons while providing personalized feedback and support to students. Collaborating with colleagues, I continuously enhance our curriculum and teaching methodologies to ensure students are prepared for the dynamic field of web development. Staying up-to-date with industry trends and best practices, I incorporate cutting-edge knowledge into our curriculum, equipping students with the skills needed to thrive in the ever-evolving web development industry. I aim to share my passion for web development, helping students achieve their career goals, and fostering a community of skilled professionals. Let's connect and collaborate on transforming aspiring developers into web development heroes!