DEV Community: Muhid Hossain

জাভাস্ক্রিপ্ট ডেটা স্ট্রাকচার - অবজেক্ট

Muhid Hossain — Tue, 11 Apr 2023 17:31:14 +0000

অবজেক্ট কি?

অবজেক্ট হলো কতগুলো প্রোপার্টির একটি বক্স যেটি মিউটেবল। যেখানে প্রোপার্টি গুলো key-value জোড়ায় থাকে। key যেকোন স্ট্রিং বা এমটি স্ট্রিং হতে পারে এবং ভেলু জাভাস্ক্রিপ্ট-এ বিদ্যমান যেকোন টাইপের ডেটা হতে পারে, কিন্তু undefined হতে পারবে না। প্রত্যেকটি key তে value এড করা বাধ্যতামূলক।
number, string, boolean, null এবং undefined বাদে জাভাস্ক্রিপ্ট-এ সবকিছুই অবজেক্ট। number, string, boolean অবজেক্ট-এর মতোই, যেহেতু এদের অবজেক্ট-এর মতো মেথড রয়েছে, কিন্তু এরা ইমমিউটএবল।

জাভাস্ক্রিপ্ট-এ অবজেক্ট-এর লিস্ট

Dates
Regular Expression
Maths
Arrays
Function
Objects
Booleans (যখন new কিওয়ার্ড দিয়ে কনস্ট্রাক্টর হিসেবে কল করা হয়)
Strings (যখন new কিওয়ার্ড দিয়ে কনস্ট্রাক্টর হিসেবে কল করা হয়)
Numbers (যখন new কিওয়ার্ড দিয়ে কনস্ট্রাক্টর হিসেবে কল করা হয়)

জাভাস্ক্রিপ্ট-এ অবজেক্ট ডিকলার করা

অবজেক্ট লিটারাল ব্যবহার করে

জাভাস্ক্রিপ্ট-এ {} ব্যবহার করে সবথেকে সহজে অবজেক্ট ডিকলার করা যায়।

let obj = {};
obj.name = 'Muhid';
obj["age"] = 25;

let obj2 = {
   "name": 'Muhid',
   age: 25
};

যেহেতু অবজেক্ট-এ key এমপ্টি স্ট্রিং সহ যেকোন স্ট্রিং হতে পারে তাই আমরা এর কোটস "" গুলো ব্যবহার না করেই ডিকলার করতে পারি, যদি স্ট্রিং এ কোন স্পেস না থাকে।

অবজেক্ট-এর মধ্যে নেস্টেড অবজেক্টও এড করা যায়।

let obj = {
   name: "Muhid",
   age: 25,
   details: {
      hobbies: ["Walking", "Plying cricket"],
      Gender: "Male",
   }
}

অবজেক্ট-এর মধ্যে ফাংশনও ডিকলার করা যায়, এই ফাংশনকে method বলে।

let obj = {
   name: 'Muhid',
   getName: function() {
      return this.name;
   }
}

console.log(obj.getName());
//"Muhid"

`new` কীওয়ার্ড ব্যবহার করে অবজেক্ট তৈরি করা

let obj = new Object();
obj.name = "Muhid";
obj.age = 25;
obj.getDetails = function(){
  return `${this.name} is ${this.age} years old`;
};

console.log(obj.getDetails());
//"Muhid is 25 years old"

কনস্ট্রাক্টর ব্যবহার করে অবজেক্ট তৈরি করা

function Obj(name, age){
   //Properties
   this.name = name;
   this.age = age;

   //Methods
   this.getDetails = function(){
     return `${this.name} is ${this.age} years old`;
   }
}

let person = new Obj("Muhid", 25);
console.log(person.getDetails());
//"Muhid is 25 years old"

let person2 = new Obj("Roman", 24);
console.log(person2.getDetails());
//"Roman is 24 years old"

অবজেক্ট-এর ডেটা রিড করা

`.` নোটেশন ব্যবহার করে ডেটা রিড করা

আমরা . নোটেশন ব্যবহার করে অবজেক্ট-এর ডেটা রিড করতে পারি, যদি ঐ key এর মধ্যে কোনো স্পেস না থাকে।

let obj = {
   name: "Muhid",
   "what is this": "Example",
   "my age": 25
};
obj.name;
//"Muhid"

obj.what is this
//Uncaught SyntaxError: Unexpected identifier

স্পেস আছে এমন key দিয়ে প্রোপার্টি এক্সেস করলে ইরর দেখায়।

`[]` ব্যবহার করে ডেটা রিড করা

আমরা যখন নিশ্চিত নই যে key এর মধ্যে স্পেস আছে কিনা, তখন আমারা [] ব্যবহার করতে পারি।

let obj = {
   name: "Muhid",
   "what is this": "Example",
   "my age": 25
};

obj["name"];
//"Muhid"

obj["what is this"];
//"Example"

obj["my age"];
//25

. এর পরে যে ওয়ার্ড ব্যবহার করা হয় তা অবজেক্ট লিটারাল হিসেবে ইন্টারপ্রেট করা হয়। [] এর ক্ষেত্রে ব্যবহৃত ওয়ার্ডটি ইভালুয়েট করা হয় তারপর ঐ ইভালুয়েট করা ওয়ার্ডে এসাইন করা ভেলু রিটার্ন করা হয়।

let obj = {
   1: "one",
   2: "two",
   3: "three"
};

for(let i = 1; i <= 3; i++){
     console.log(obj.i);
}
//undefined
//undefined
//undefined

for(let i = 1; i <= 3; i++){
     console.log(obj[i]);
}
//"one"
//"two"
//"three"

প্রথম লুপে . ব্যবহার করে ডেটা রিড করার সময় undefined দেখায়, কারণ এখানে i কে প্রোপার্টির key হিসেবে ট্রিট করা হয়েছে। যেখানে i নামে কোনো প্রোপার্টি অবজেক্টটিতে নেই।

দ্বিতীয় লুপে i কে ইভালুয়েট করা হয়েছে obj[i] এর মধ্যে এবং এটি obj[1] এ রুপান্তরিত হয়েছে ও one রিটার্ন করেছে।

অবজেক্ট-এ নেই এমন প্রোপার্টি হ্যান্ডেল করা

যেসব প্রোপার্টি অবজেক্ট-এর মধ্যে নেই সেগুলো রিড করলে undefined রিটার্ন করবে

let obj = {
   first_name: "Muhid"
};

obj.first_name;
//"Muhid"

obj.last_name;
//undefined

আমরা || অপারেটর ব্যবহার করে যেসকল প্রোপার্টি এক্সিস্ট করেনা তাদের পরিবর্তে ডিফল্ট ভ্যালু সেট করতে পারি।

let lastName = obj.last_name || "Hossain";
//"Hossain"

এক্সিস্ট করে না এমন কোন প্রপার্টির মধ্যের প্রপার্টি এক্সেস করলে এরর দেখাবে। && অপারেটর ব্যবহার করে এরর রোধ করা যায়।

obj.last_name;
//undefined

obj.last_name.intial
//Uncaught TypeError: Cannot read property 'intial' of undefined

obj.last_name && obj.last_name.intial
//undefined

&& অপারেটর ডান পাশের এক্সপ্রেশন তখনই ইভ্যালুয়েট করবে যখন বাম পাশের এক্সপ্রেশন true হবে।

অবজেক্ট-এর ভ্যালু আপডেট করা

আমরা নতুন ভ্যালু অ্যাসাইন করে অবজেক্ট-এর ভ্যালু আপডেট করতে পারি। যদি ঐ প্রোপার্টি আগে থেকে বিদ্যমান না থাকে তাহলে এটি নতুন প্রোপার্টি অ্যাড করবে।

let obj = {
   name: "Muhid"
}

obj.name = "Roman";
obj.name;
//"Roman"

obj.age = 25;
obj.age;
//25

obj["gender"] = "Male";
obj["gender"];
//"Male"

অন্য কোন অবজেক্ট-এর ভ্যালু কপি করার সময় মনে রাখতে হবে যে অবজেক্ট রেফারেন্স হিসেবে পাস হয় কখনোই কপি হয় না।

let obj = {};

let person = obj;
person.name = "Muhid";

let person2 = obj.name;
person2;
//"Muhid"

এখানে আমরা person.name এ ভ্যালু এসাইন করেছি কিন্তু আমরা যখন obj.name এর ভ্যালু এক্সেস করছি তখন একই ভ্যালু পাচ্ছি কারণ আমরা একই অবজেক্টকে রেফার করছি।

//Referencing to the same object
let a = b = c = {};

//Referencing to the different objects
let a = {}, b = {}, c = {};

জাভাস্ক্রিপ্ট-এ অবজেক্ট কপি করা

`Shallow` কপি

Shallow কপি করার জন্য আমরা Object.assign(To, From) মেথড ব্যবহার করব যা একটি অবজেক্টকে অন্য অবজেক্টে কপি করে।

let obj = {
   name: "Muhid",
   age: 25,
   details: {
     gender: "Male"
   }
};

let copy = Object.assign({}, obj);
copy.name;
//"Muhid"

copy.age
//25

copy.details.gender;
//"Male"

//Update the gender
obj.details.gender = "Female";

copy.details.gender;
//"Female"

দেখা যাচ্ছে যখন আমরা obj.details.gender = "Female" এর ভ্যালু আপডেট করছি তা কপি অব্জেক্ট copy.details.gender মধ্যে রিফ্লেক্ট করছে।
Shallow কপি এর ক্ষেত্রে নেস্টেট অবজেক্ট রেফারেন্স হিসেবেই পাস করা হয়।

`Deep` কপি

আমরা ডিপ কপি করার জন্য JSON.parse() এবং JSON.stringify() একসাথে ব্যবহার করব।

let obj = {
   name: "Muhid",
   age: 25
};

let copy = JSON.parse(JSON.stringify(obj));
copy.name;
//"Muhid"

copy.age
//25

অবজেক্টকে প্রটো-টাইপের সাহায্যে এক্সটেন্ড করা

জাভাস্ক্রিপ্ট-এ সকল অবজেক্ট প্রোটো-টাইপের সাথে লিংক করা থাকে যেখান থেকে আমরা বিভিন্ন প্রপার্টি এবং মেথড ব্যবহার করতে পারি।

let obj = {};

obj.name = "Muhid";
obj.age = 25;
obj.prototype.getDetails = function(){return `${this.name} is ${this.age} years old`};

console.log(obj.getDetails());
//"Muhid is 25 years old"

অবজেক্ট এর ভ্যালু এক্সেস করার সময় যদি ওই প্রোপার্টি না থাকে তাহলে প্রোটো-টাইপের মধ্যে খুঁজে দেখবে। যদি প্রোটো-টাইপের মধ্যেও না থাকে তাহলে undefined রিটার্ন করবে। এই প্রোটো-টাইপ চেইনের মধ্যে খুঁজে দেখা কে Delegation বলে।

অবজেক্ট-এর প্রপার্টি ডিলিট করা

আমরা delete অপারেটর ব্যবহার করে অবজেক্ট থেকে প্রোপার্টি রিমুভ করতে পারি। যদি অবজেক্ট-এর মধ্যে প্রোপার্টিটি না থাকে তাহলে এটি সম্পূর্ণ প্রসেস ইগনোর করে যাবে।

let obj = {};

obj.name = "Muhid";
obj.age = 25;

//Add properties and Methods inside the prototype.
obj.prototype.age = 24;
obj.prototype.getDetails = function(){return `${this.name} is ${this.age} years old`};

console.log(obj.getDetails());
//"Muhid is 25 years old"

//Remove age
delete obj.age;

console.log(obj.getDetails());
//"Muhid is 24 years old"

এটি শুধু অবজেক্টের প্রপার্টি ডিলিট করবে এটি অবজেক্টের সাথে লিঙ্ক করা প্রটো-টাইপ থেকে কিছু রিমুভ করবে না। তাই যদি প্রপার্টিটি প্রোটো-টাইপের মধ্যে থাকে তাহলে তা এক্সেস করবে।

প্রোপার্টি বা মেথড অবজেক্ট এর মধ্যে বিদ্যমান কিনা চেক করা

`hasOwnProperty()` ব্যবহার করে

আমরা hasOwnProperty() মেথড ব্যবহার করে অবজেক্ট এর মধ্যে প্রোপার্টি বা মেথডটি বিদ্যমান কিনা তা চেক করতে পারি। এটি প্রটো-টাইপ চেইনের মধ্যে বিদ্যমান প্রোপার্টি চেক করবে না।

let obj = {
    name: "Muhid",
    age: 25,
    getDetails: function(){
       return `${this.name} is ${this.age} years old`;
    }
};

//Adding property to prototype
obj.prototype.gender = "Male";

console.log(obj.hasOwnProperty("name"));
//true

console.log(obj.hasOwnProperty("age"));
//true

console.log(obj.hasOwnProperty("getDetails"));
//true

console.log(obj.hasOwnProperty("gender"));
//false

`in` অপারেটর ব্যবহার করে

আমরা in অপারেটর ব্যবহার করে অবজেক্ট-এ প্রপার্টি বিদ্যমান কিনা চেক করতে পারি। এটি প্রটো-টাইপ চেইনের মধ্যে বিদ্যমান প্রপারটিও চেক করবে।

let obj = {
    name: "Muhid",
    age: 25,
    getDetails: function(){
       return `${this.name} is ${this.age} years old`;
    }
};

//Adding property to prototype
obj.prototype.gender = "Male";

console.log("name" in obj);
//true

console.log("age" in obj);
//true

console.log("getDetails" in obj);
//true

console.log("gender" in obj);
//true

অবজেক্ট-এ লুপ চালানো

`for...in` লুপ ব্যবহার করে

আমরা for...in লুপ ব্যবহার করে একটি অবজেক্ট-এর সকল প্রপার্টির উপর লুপ চালাতে পারি।

let obj = {
    name: "Muhid",
    age: 25,
    getDetails: function(){
       return `${this.name} is ${this.age} years old`;
    }
};

//Adding property to prototype
obj.prototype.gender = "Male";

for(let key in obj){
   console.log(obj[key]);
}

//"Muhid"
//25
/*
function () {
  return `${this.name} is ${this.age} years old`;
}
*/
//"Male"

এটি একটি অবজেক্ট-এর সকল প্রপার্টির উপর লুপ চালায় এমনকি প্রোটো-টাইপ চেইনের মধ্যেও। আমরা শুধু বর্তমান স্কোপের মধ্যে বিদ্যমান প্রোপার্টির উপর লুপ চালানোর জন্য hasOwnProperty() ব্যবহার করতে পারি।

for(let key in obj){
   if(obj.hasOwnProperty(key)){
     console.log(obj[key]);
   }
}

//"Muhid"
//25
/*
function () {
  return `${this.name} is ${this.age} years old`;
}
*/

এখানে বিদ্যমান মেথডটির সোর্স কোড প্রিন্ট হয়েছে কারণ আমরা মেথডটি () ব্যবহার করে ইভালুয়েট না করে এক্সেস করেছি। আমরা চাইলে টাইপ চেক করে এটি বন্ধ করতে পারে।

for(let key in obj){
   if(obj.hasOwnProperty(key) && typeof obj[key] !== 'function'){
     console.log(obj[key]);
   }
}

//"Muhid"
//25

`Object.keys()` ব্যবহার করে

Object.keys() একটি অবজেক্ট নেয় এবং অবজেক্ট-এর key গুলোকে অ্যারে আকারে রিটার্ন করে। এটি প্রটো-টাইপ চেইনের key গুলো এক্সেস করে না তাই এটি ব্যবহার করা নিরাপদ।

console.log(Object.keys(obj));

//["name", "age", "getDetails"]

আমরা এই key গুলোর অ্যারেটিকে অবজেক্ট-এর মধ্যে লুপ চালানোর জন্য ব্যবহার করতে পারি।

`for...of` লুপ

//For of loop
for(let key of Object.keys(obj)){
  if(typeof obj[key] !== 'function'){
     console.log(obj[key]);
   }
}

//"Muhid"
//25

`forEach` লুপ

//For each loop
Object.keys(obj).forEach((key) => {
  if(typeof obj[key] !== 'function'){
     console.log(obj[key]);
   }
});

//"Muhid"
//25

অবজেক্ট হলো জাভাস্ক্রিপ্ট-এর হৃদয় এবং অবজেক্ট প্রতিনিয়ত উন্নত হচ্ছে।

জাভাস্ক্রিপ্ট ডেটা স্ট্রাকচার - অ্যারে

Muhid Hossain — Sat, 25 Mar 2023 16:07:32 +0000

সোর্স: www.learnersbucket.com

একই টাইপের অনেকগুলো ডেটা স্ট্রোর করার জন্য যে ডেটা স্ট্রাকচার ব্যবহার করা হয় অ্যারে তার মধ্যে অন্যতম। জাভাস্ক্রিপ্ট-এ অ্যারেও একটি অবজেক্ট যার অ্যারের মতো বৈশিষ্ট্য রয়েছে।

জাভাস্ক্রিপ্ট-এ অ্যারে জিরো ইনবক্স বেইজড, যার মানে অ্যারে এর মধ্যে প্রথম ভ্যালু শূন্যতম পজিশনে দ্বিতীয় ভ্যালু প্রথম পজিশনে তারপর এভাবেই চলতে থাকে।

let numbers = [10, 20, 30, 40];

জাভাস্ক্রিপ্ট-এ অ্যারে তৈরি করা

জাভাস্ক্রিপ্ট-এ অনেকগুলো উপায়ে অ্যারে ডিকলার করা যায়। জাভাস্ক্রিপ্ট-এ অ্যারে-এর নির্দিষ্ট কোনো ডাইমেনশন নেই, তাই ডিক্লেয়ার করার সময় সাইজ ঠিক করে দেয়া লাগে না।

সিনট্যাক্স

//[] ব্যবহার করে অ্যারে ডিক্লেয়ার
let week = []; //সহজ উপায়

//সপ্তাহের তিন দিন নিয়ে একটি অ্যারে
let week = ['Monday', 'Tuesday', 'Wednesday'];

//কনস্ট্রাক্টর ব্যবহার করে অ্যারে ডিক্লেয়ার
let week = new Array();  

//অ্যারে লেন্থ ৭ এর একটি অ্যারে
let week = new Array(7); 

//সপ্তাহের তিন দিন নিয়ে একটি অ্যারে
let week = new Array('Monday', 'Tuesday', 'Wednesday');

[ ] ব্যাবহার করে অ্যারে ডিক্লেয়ার করা বেশি সুবিধাজনক।

জাভাস্ক্রিপ্ট-এ অ্যারে একটি অবজেক্ট তাই চাইলেই জাভাস্ক্রিপ্ট-এ আছে এরকম যে কোনো টাইপের ডেটা একটি অ্যারেতে স্টোর করা যায়।

অ্যারে লেন্থ

প্রত্যেকটি অ্যারেরই একটি লেন্থ প্রপার্টি থাকে যা ব্যবহার করে আমরা অ্যারের সাইজ জানতে পারি।

let week = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
console.log(week.length);
//7

যেহেতু জাভাস্ক্রিপ্ট-এ নির্দিষ্ট কোন ডায়মেনশন নেই তাই length প্রোপার্টি হল সর্বশেষ ইনডেক্স + ১ এর ইলিমেন্ট নির্দেশ করে।

let arr = [];
arr[1000] = 1;
console.log(arr.length);
//1001

যদিও এখানে ১০০০ তম ইনডেক্সে একটিমাত্র ইলিমিট রয়েছে তারপরও আমরা এখানে অ্যারে লেন্থ ১০০১ পাচ্ছি।
জাভাস্ক্রিপ্ট-এ অ্যারেতে সর্বোচ্চ ৪,২৯৪,৯৬৭,২৯৫ সংখ্যক মান থাকতে পারে।

অ্যারেতে ইলিমেন্ট অ্যাড করা

অ্যারে-এর শেষে ইলিমেন্ট অ্যাড করা

অ্যারে-এর শেষে ইলিমেন্ট অ্যাড করার জন্য আমরা Array.push() মেথড ব্যবহার করতে পারি।

let arr = [1, 2, 3, 4];
arr.push(5);
//[1, 2, 3, 4, 5];
arr.push(6, 7);
//[1, 2, 3, 4, 5, 6, 7];

এছাড়া length প্রোপার্টি ব্যবহার করেও অ্যারে-এর শেষে ইলিমেন্ট অ্যাড করা যায়।

let arr = [1, 2, 3, 4];
arr[arr.length] = 5;
//[1, 2, 3, 4, 5];

অ্যারে-এর শুরুতে ইলিমেন্ট অ্যাড করা

অ্যারে-এর শুরুতে ইলিমেন্ট অ্যাড করার জন্য আমরা Array.unshift() মেথড ব্যবহার করতে পারি।

let arr = [2, 3, 4, 5];
arr.unshift(0, 1);
//[0, 1, 2, 3, 4, 5];

অ্যারে-এর নির্দিষ্ট কোনো ইনডেক্সে ইলিমেন্ট অ্যাড করা

অ্যারে-এর নির্দিষ্ট ইনডেক্সে ইলিমেন্ট অ্যাড করার জন্য আমরা Array.splice() মেথড ব্যবহার করতে পারি।

let arr = [1, 2, 3, 5, 6];
arr.splice(3, 0, 4);
//[1, 2, 3, 4, 5, 6]

Array.splice() সম্পর্কে বিস্তারিত: Array.splice()

অ্যারে থেকে ইলিমেন্ট রিমুভ করা

অ্যারে-এর শেষ থেকে ইলিমেন্ট রিমুভ করা

অ্যারে-এর শেষ থেকে ইলিমেন্ট রিমুভ করার জন্য আমরা Array.pop() মেথড ব্যবহার করতে পারি। এই অ্যারে-এর শেষ ইলিমেন্টটি রিমুভ ও রিটার্ন করে।

let arr = [1, 2, 3, 4, 5];
let last = arr.pop();
console.log(arr);
//[1, 2, 3, 4];

console.log(last);
//5

আমার length প্রোপার্টি ব্যবহার করেও অ্যারে থেকে ইলিমেন্ট রিমুভ করতে পারি। এই পদ্ধতি অ্যারে ছোট করে এবং রিমুভ করা ইলিমেন্ট অ্যাক্সেস করা যায় না।

let arr = [1, 2, 3, 4, 5];
arr.length = 3;
console.log(arr);
//[1, 2, 3];

অ্যারে-এর শুরু থেকে ইলিমেন্ট রিমুভ করা

অ্যারে-এর শুরু থেকে ইলিমেন্ট রিমুভ করতে আমরা Array.shift() মেথড ব্যবহার করতে পারি।

let arr = [1, 2, 3, 4, 5];
console.log(arr.shift());
//1

console.log(arr);
//[2, 3, 4, 5]

অ্যারে-এর নির্দিষ্ট কোনো ইনডেক্সের ইলিমেন্ট রিমুভ করা

অ্যারে-এর নির্দিষ্ট কোনো ইনডেক্সের ইলিমেন্ট রিমুভ করতে আমরা Array.slice() বা Array.splice() ব্যবহার করতে পারি।

let arr = [1, 2, 3, 4, 5];

let elm = arr.splice(2, 1);
console.log(elm);
//3

let elm2 = arr.slice(2, 3);
console.log(elm2);
//4

Array.splice(start, count) start ইনডেক্স থেকে শুরু করে count পর্যন্ত সকল ইলিমেন্ট রিমুভ করে। এটি অরিজিনাল অ্যারেকে পরিবর্তন করে।
Array.slice(start, end) start এবং end ইনডেক্সের মধ্যে সকল ইলিমেন্ট রিমুভ করে। এটি অরিজিনাল অ্যারেকে পরিবর্তন করে না।

`delete` অপারেটর ব্যবহার করে অ্যারে থেকে ইলিমেন্ট ডিলেট করা

যেহেতু জাভাস্ক্রিপ্ট-এ অ্যারেও অবজেক্ট তাই আমারা delete অপারেটর ব্যবহার করে ইলিমেন্ট ডিলেট করতে পারি।

let arr = [1, 2, 3, 4, 5];
delete arr[3];
//[1, 2, 3, empty, 5];

তবে এই মেথড ব্যবহার করলে ইলিমেন্টটি সম্পুর্ন ভাবে রিমুভ হয় না, এটি শুধু নির্দিষ্ট ইনডেক্সের ইলিমেন্ট ডিলেট করে দেয়।

অ্যারে-এর ইলিমেন্ট এক্সেস করা

যেহেতু অ্যারে জিরো ইনডেক্স বেইজড তাই আমরা নিউমেরিক ইনডেক্স ব্যবহার করে ইলিমেন্ট এক্সেস করতে পারি।

let arr = [1, 2, 3, 4, 5];
arr[0];
//1

arr[1];
//2

arr[2];
//3

arr[3];
//4

যদি এমন কোনো ইলিমেন্ট এক্সেস করতে চাওয়া হয় যা অ্যারেতে বিদ্যমান নয় তাহলে undefined রিটার্ন করবে।

অ্যারেতে লুপ এর ব্যবহার

যেহেতু জাভাস্ক্রিপ্ট নিউমেরিক ইনডেক্স বেইজড তাই আমরা এর length ব্যবহার করে প্রতিটি ইলিমেন্টের উপর লুপ চালাতে পারি।

`for` লুপের ব্যবহার

let arr = [1, 2, 3, 4, 5];
for(let i = 0; i < arr.length; i++){
   console.log(arr[i]);
}

//1
//2
//3
//4
//5

`for...in` লুপের ব্যবহার

জাভাস্ক্রিপ্ট-এ অ্যারেও অবজেক্ট হওয়ায় আমরা for...in লুপ ব্যবহার করতে পারি। তবে খেয়াল রাখতে হবে এক্ষেত্রে প্রোপাটির অর্ডার ঠিক থাকবে তার কোন নিশ্চয়তা নেই।

let arr = [1, 2, 3, 4, 5];
for(let prop in arr){
  console.log(arr[prop]);
}

//1
//2
//3
//4
//5

`forEach()` মেথডের ব্যবহার

let arr = [1, 2, 3, 4, 5];
arr.forEach((e, i) => {
   console.log(`${e} is at index ${i}`);
});

//1 is at index 0
//2 is at index 1
//3 is at index 2
//4 is at index 3
//5 is at index 4

Array.forEach() মেথড অ্যারে-এর সকল ইলিমেন্টের উপর লুপ চালায় এবং ইলিমেন্ট ও ইনডেক্স কল ব্যাক ফাংশনে পাস করে।

`for...of` লুপের ব্যবহার

let arr = [1, 2, 3, 4, 5];
for(let val of arr){
   console.log(val);
}

//1
//2
//3
//4
//5

অ্যারে সর্টিং

জাভাস্ক্রিপ্ট-এ অ্যারে সর্টিং এর জন্য নিজস্ব মেথড রয়েছে।

let arr = [2, 5, 3, 7, 5];
arr.sort(); //By default in ascending order
//[2, 3, 5, 5, 7];

arr.sort((a, b) => b - a);
//[7, 5, 5, 3, 2]

Array.sort() মেথড একটি কলব্যাক ফাংশন নেয় এবং রিটার্ন করা ভেলু এর উপর নির্ভর করে ইলিমেন্ট গুলো সর্ট করে।

অ্যারে-এর মধ্যে ইলিমেন্ট সার্চ করা

জাভাস্ক্রিপ্ট-এ অ্যারে এর মধ্যে ইলিমেন্ট সার্চ করার জন্য নিজস্ব মেথড রয়েছে।

`Array.indexOf()` ব্যবহার করে সার্চ করা।

Array.indexOf() মেথড ম্যাচিং ইলিমেন্টের ইনডেক্স রিটার্ন করে। ইলিমেন্টটি খুঁজে না পেলে -1 রিটার্ন করে।

let arr = [2, 5, 3, 7, 5];
arr.indexOf(2);
//0

arr.indexOf(1);
//-1

`Array.includes()` ব্যবহার করে সার্চ করা

Array.includes() ES7 এর একটি মেথড, যা অ্যারে-এর মধ্যে কোনো ইলিমেন্ট বিদ্যমান কিনা তা চেক করার জন্য ব্যবহার করা হয়। এটি ইলিমেন্ট খুঁজে পেলে true আর না পেলে false রিটার্ন করে।

let arr = [2, 5, 3, 7, 5];
arr.includes(2);
//true

arr.includes(1);
//false

মাল্টি-ডাইমেনশনাল অ্যারে

জাভাস্ক্রিপ্ট-এ অ্যারে অনেক ফ্লেক্সিবাল এবং সাধারনত ইনিশিয়ালাইজড নয়। আমরা যদি ইনিশিয়ালাইজড ভেলু সহ অ্যারে তৈরি করতে চাই তাহলে Array.fill(value) ব্যবহার করতে পারি।

let arr = new Array(7).fill(1);
//[1, 1, 1, 1, 1, 1, 1];

জাভাস্ক্রিপ্ট-এ মাল্টি-ডাইমেনশনাল অ্যারে নেই, কিন্তু একটি অ্যারে-এর মধ্যে আরেকটি অ্যারে রাখা যায়।

let matrix = [
   [1, 2, 3],
   [4, 5, 6],
   [7, 8, 9]
];

/*
(3) [Array(3), Array(3), Array(3)]
0: (3) [1, 2, 3]
1: (3) [4, 5, 6]
2: (3) [7, 8, 9]
length: 3
__proto__: Array(0)
*/

আমরা ইলিমেন্ট এক্সেস করার জন্য লুপ চালাতে পারি।

for(let i = 0; i < matrix.length; i++){
   for(let j = 0; j < matrix[i].length; j++){
       console.log(matrix[i][j]);
   }
}

//1
//2
//3
//4
//5
.
.
.

আমরা দুইটি স্কয়ার ব্রাকেট [][] ব্যবহার করেছি। কারন প্রথম স্কয়ার ব্রাকেট অ্যারে রিটার্ন করে এবং দ্বিতীয় স্কয়ার ব্রাকেট ঐ অ্যারে-এর ইলিমেন্ট এক্সেস করে।

let arr = matrix[0];
//[1, 2, 3]

arr[0]
//1

or

let arr = matrix[0][0]
//1

যেহেতু আমারা অ্যারে-এর মধ্যে অ্যারে রাখতে পারি, তাই আমরা নেস্টেট অ্যারে তৈরি করতে পারি।

let arr = [
   [
     [1, 2, 3],
     [3, 4, 5] 
   ],
   [
     [1, 2, 3],
     [3, 4, 5]
   ]
];

for(let i = 0; i < arr.length; i++){
  for(let j = 0; j < arr[i].length; j++){
    for(let k = 0; k < arr[i][j].length; k++){
        console.log(arr[i][j][k]);
    }
  }
}

//1
//2
//3
//3
//4
//5
.
.
.

জাভাস্ক্রিপ্ট অ্যারে-এর নির্দিষ্ট কোনো ডাইমেনশন নেই, তাই আমরা জিগজ্যাক মাল্টি-ডাইমেনশনাল অ্যারে তৈরি করতে পারি।

let arr = [
   [1, 2, 3, 4, 5],
   [1, 2],
   [1, 2, 3, 4],
   [1, 2, 3]
];

যেকোনো ভ্যালু অ্যারে কিনা তা চেক করা

জাভাস্ক্রিপ্ট-এ কোনো ভেলু আ্যারে কিনা চেক করার জন্য নিজস্ব মেথড রয়েছে

`Array.isArray()` মেথড ব্যবহার করে

let arr = [1, 2, 3];

Array.isArray(arr);
//true

Array.isArray('string');
//false

Array.isArray({abc: 'xyz'});
///false

Google Tag Manager with Next.js (TypeScript/Bangla)

Muhid Hossain — Sun, 22 Aug 2021 09:39:41 +0000

এই ব্লগটিতে আমরা শিখব কিভাবে Next.js প্রোজেক্টে গুগল ট্যাগ ম্যানেজার ইমপ্লিমেন্ট করতে হয়।

এজন্য আমাদের প্রয়োজন হবে,

Next.js প্রোজেক্ট
গুগল ট্যাগ ম্যানেজার অ্যাকাউন্ট

ধাপসমূহ

১/ .env ফাইলে গুগল ট্যাগ ম্যানেজার আইডি ডিফাইন করা
২/ pages ফোল্ডার এর মধ্যে _document.tsx ফাইল তৈরি করা
৩/ lib/gtm/index.tsx ফাইল তৈরি করে প্রয়োজনীয় ফাংশন ডিফাইন করা
৪/ _app.tsx ফাইলে রাউট পরিবর্তন ট্র্যাক করা

১ম ধাপঃ

রুট ডিরেক্টরিতে .env ফাইলর মধ্যে আপনার প্রোজেক্টের গুগল ট্যাগ ম্যানেজার আইডি অ্যাড করুন।

GTM-XXXXXXX এর স্থলে আপানর গুগল ট্যাগ ম্যানেজার আইডি লিখুন।

২য় ধাপঃ

pages ফোল্ডারের মধ্যে _document.tsx ফাইল তৈরি করে গুগল ট্যাগ ম্যানেজার কনফিগার করুন।

_document.tsx সম্পর্কে বিস্তারিত জানতে Next.js documentation পড়তে পারেন।

সমস্যাঃ

গুগল ট্যাগ ম্যানেজার শুধুমাত্র পেইজ রিলোড করলে ট্যাগ ফায়ার করে। যেহেতু React/Next.js এরমতো সিঙ্গেল পেইজ অ্যাপ্লিকেশানে রাউট পরিবর্তন হলেও পেইজ রিলোড হয় না। ফলে প্রথমবার ওয়েবসাইটে ঢুকলে ট্যাগ ফায়ার হয় পরবর্তীতে রাউট পরিবর্তন করলেও ট্যাগ ফায়ার হয় না।

সমাধানঃ

এই সমস্যার থেকে পরিত্রান পাওয়ার জন্য আমাদেরকে ম্যানুয়াল ভাবে প্রতিবার রাউট পরিবর্তন হলে নিম্নউক্ত pageview ফাংশন কল করতে হবে এবং গুগল ট্যাগে হিস্টরি চেইঞ্জ ট্রিগার অ্যাড করতে হবে।

হিস্টরি চেইঞ্জে ট্রিগারঃ documentation

৩য় ধাপঃ

রুট ডিরেক্টরিতে lib/gtm ফোল্ডার তৈরি করে তার মধ্যে index.tsx ফাইল তৈরি করুন এবং pageviews এবং events ট্রাক করার জন্য কাস্টমে ফাংশন লিখুন।

৪য় ধাপঃ

এখন রাউট পরিবর্তনে pageview ফাংশন কল করার জন্য _app.tsx ফাইলে useEffect হুক ব্যবহার করুন।

ব্যাস হয়ে গেলো ইমপ্লিমেন্টেশন।