7.10 কীভাবে জাভাস্ক্রিপ্টে Getter এবং Setter ইউজ করতে হয়?

 

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

get – প্রোপার্টির ভ্যালু পাওয়ার জন্য getter মেথড ডিফাইন করতে
set – প্রোপার্টির ভ্যালু ঠিক অথবা পরিবর্তন করার জন্য setter মেথড ডিফাইন করতে

জাভাস্ক্রিপ্ট Getter:
জাভাস্ক্রিপ্টে getter মেথড অবজেক্টের প্রোপার্টিগুলো এক্সেস করতে ব্যবহৃত হয়। নিচের উদাহরণটি লক্ষ্য করুণঃ

const person = {
   // ডাটা প্রোপার্টি
   name: "Mehedi",
   // এক্সেসর প্রোপার্টি (getter)
   get getName (){
     return this.name;
   }
}

console.log(person.name)            // Output: Mehedi
console.log(person.getName)         // Output: Mehedi

console.log(person.getName())       // TypeError: person.getName is not a function

 

একটা জিনিস লক্ষ্য করেছেন? যদিও getName একটা মেথড, কিন্তু আমরা এটাকে নরমাল ভ্যারিয়েবল যেভাবে এক্সেস করি সেভাবেই এক্সেস করতে হবে। মেথডের মত এক্সেস করা যাবেনা।

জাভাস্ক্রিপ্ট Setter:
জাভাস্ক্রিপ্টে setter মেথড অবজেক্টের প্রোপার্টিগুলোর ভ্যালু সেট করতে কিংবা চেঞ্জ করতে ব্যবহৃত হয়। নিচের উদাহরণটি লক্ষ্য করুণঃ

const person = {
   // ডাটা প্রোপার্টি
   name: "Mehedi",
   // এক্সেসর প্রোপার্টি (setter)
   set setName (newName){
     this.name = newName; 
  }
}

console.log(person.name)       // Output: Mehedi
person.setName = "Azad";
console.log(person.name)       // Output: Azad

 

জাভাস্ক্রিপ্ট Object.defineProperty():
আমরা চাইলে Object.defineProperty() ইউজ করে getter এবং setter মেথড ব্যবহার করতে পারি।

const person = {
   name: 'Mehedi'
}

// getting property
Object.defineProperty(person, "getName", {
   get : function () {
     return this.name;
   }
});

// setting property
Object.defineProperty(person, "setName", {
   set : function (value) {
     this.name = value;
   }
});

console.log(person.name);         // Output: Mehedi
person.setName = "Azad"
console.log(person.name);         // Output: Azad

 

আমরা এই উদাহরণে দেখলাম কীভাবে Object.defineProperty() ইউজ করে getter এবং setter মেথড ব্যবহার করতে হয়।

Object.defineProperty(object, property, descriptor) এই মেথডটি তিনটা আর্গুমেন্ট নেয়। সেগুলা হচ্ছেঃ

প্রথম আর্গুমেন্ট হলো অবজেক্টের নাম। আমাদের ক্ষেত্রে সেটা হলো person অবজেক্ট
দ্বিতীয় আর্গুমেন্ট হলো অবজেক্টের এক্সেসর প্রোপার্টির নাম। অর্থাৎ getter এবং setter মেথডের নাম।
তৃতীয় আর্গুমেন্ট হলো একটি অবজেক্ট যা আমাদের getter অথবা setter মেথডের ভিতরের কোড।

 
উদাহরন
  • যদিও getName একটা মেথড, কিন্তু আমরা এটাকে নরমাল ভ্যারিয়েবল যেভাবে এক্সেস করি সেভাবেই এক্সেস করতে হবে। মেথডের মত এক্সেস করা যাবেনা।

const car= {
   name: "Ford",
   get getName (){
     return this.name;
   }
}

console.log(car.name)            // Output: Ford

console.log(car.getName())  
  • getter এবং setter ব্যবহার করে অপেক্ষাকৃত ভালো ডাটা কোয়ালিটি রাখা সম্ভব।

const person = {
  firstName: "John",
  lastName: "Doe",
  language: "en",
  get lang() {
    return this.language.toUpperCase();
  }
};
  • এই উদাহরণে language প্রপার্টি তে upper case ভ্যালু রাখা হয়েছে।

const person = {
  firstName: "John",
  lastName: "Doe",
  language: "",
  set lang(lang) {
    this.language = lang.toUpperCase();
  }
};

person.lang = "en";

 

এসো নিজে করি
  • নিচের কোড স্নিপেটের আউটপুট কি হবে?

let user = {
  name: "John",
  surname: "Smith"
};

Object.defineProperty(user, 'fullName', {
  get() {
    return `${this.name} ${this.surname}`;
  },

  set(value) {
    [this.name, this.surname] = value.split(" ");
  }
});

console.log(user.fullName); 

for(let key in user) {
console.log(key); 
} 
  • নিচের কোড স্নিপেটের আউটপুট কি হবে?
let user = {
  get name() {
    return this._name;
  },

  set name(value) {
    if (value.length < 4) {
      alert("Name is too short, need at least 4 characters");
      return;
    }
    this._name = value;
  }
};

user.name = "Pete";
console.log(user.name);

user.name = ""; 
  • নিচের কোড স্নিপেটের আউটপুট কি হবে?
function User(name, birthday) {
  this.name = name;
  this.birthday = birthday;
  Object.defineProperty(this, "age", {
    get() {
      let todayYear = new Date().getFullYear();
      return todayYear - this.birthday.getFullYear();
    }
  });
}

let john = new User("John", new Date(1992, 6, 1));

console.log( john.birthday ); 
console.log( john.age );