#WhatsThat #javascript #object

* متد Object.defineProperty در جاوااسکریپت چیست ؟  *
#part1

یکی از روش‌های قدرتمند در جاوااسکریپت برای تعریف یا تغییر ویژگی‌های یک شیء به صورت دقیق و کنترل شده Object.defineProperty است. با استفاده از این متد، می‌توانید ویژگی‌های جدیدی به یک آبجکت اضافه کنید یا ویژگی‌های موجود را تغییر دهید و حتی رفتارهای سفارشی مدنظر خودتون رو برای آن‌ها تعریف کنید.

ویژگی های کلیدی Object.defineProperty 🚀

➊ کنترل کامل بر روی ویژگی‌ها : شما می‌توانید مشخص کنید که آیا یک ویژگی قابل خواندن، نوشتن یا حذف شدن است یا خیر.

➋ تعریف getter و setter : می‌توانید فانکشنالیتی کاستوم خودتون رو برای خواندن (getter) و نوشتن (setter) مقدار یک ویژگی تعریف کنید. این به شما اجازه می‌دهد تا عملیات پیچیده‌تری را قبل یا بعد از تغییر مقدار یک ویژگی انجام دهید.

➌ ایجاد ویژگی‌های غیر قابل تغییر : می‌توانید ویژگی‌هایی ایجاد کنید که پس از مقداردهی اولیه قابل تغییر نباشند ( در چالش قبلی از این این ویژگی استفاده شده بود ).

➍ بهینه سازی عملکرد : در برخی موارد، استفاده از Object.defineProperty می‌تواند به بهبود عملکرد کد کمک کند.

✅ ساختار کلی Object.defineProperty

Object.defineProperty(obj, prop, descriptor);

1️⃣ obj : آبجکتی که می‌خواهید ویژگی آن را تعریف یا تغییر دهید.

2️⃣ prop : نام ویژگی‌ای که می‌خواهید تعریف کنید.

3️⃣ descriptor : یک آبجکت که ویژگی‌های مورد نظر برای ویژگی جدید را توصیف می‌کند.

⚡ در کل Object.defineProperty یک ابزار قدرتمند برای کنترل دقیق پروپرتی‌ها در جاوا اسکریپت است. با درک کامل این متد، می‌توانید کدهای تمیزتر و انعطاف‌پذیرتری بنویسید. هدف این پست صرفا معرفی این متد بود، توی پست های بعدی به صورت جزئی بخش های جزئی و حرفه ای تر این متد رو بررسی میکنیم ✅

⚠️ ( حتما به این نکته توجه کنید که استفاده بیش از حد از Object.defineProperty می‌تواند کد را پیچیده‌تر کند. بنابراین، بهتر است از آن در مواردی استفاده کنید که واقعا نیاز به کنترل دقیق بر روی ویژگی‌های یک شیء دارید )

Channel | YouTube | Instagram

#javascript #js_trick #object

* متد Object.defineProperty در جاوااسکریپت چیست ؟  *
#part2

توی پارت قبلی به معرفی متد Object.defineProperty پرداختیم و ویژگی های کلیدی و ارگومان های مختلف این متد رو بررسی کردیم :

obj | prop | descriptor

و متوجه شدیم که با آرگومان descriptor میتونیم یسری ویژگی های جدید رو به پروپرتی خودمون اضافه کنیم تا کنترل بهتری روی پروپرتی خودمون داشته باشیم، حالا توی این پارت قراره که به صورت جزئی تر به مقادیر آرگومان descriptor بپردازیم و دونه به دونه با هم دیگه بررسی‌شان کنیم ⚡


مقادیر آرگومان descriptor 🚀

➊ value : مقدار اولیه ویژگی.

➋ configurable : مقدار بولینی که مشخص می‌کند آیا می‌توان ویژگی را حذف کرد یا تعریف آن را تغییر داد. 🛑🔁

➌ enumerable : یک مقدار بولین که مشخص می‌کند آیا ویژگی در یک حلقه for...in ظاهر می‌شود یا خیر. 👁️‍🗨️

➍ writable : یک مقدار بولین که مشخص می‌کند آیا می‌توان مقدار ویژگی را تغییر داد. 📝

➎ get : یک تابع که بعنوان گِتِر برای پروپرتی ما عمل میکند.

➏ set : یک تابع که به عنوان سِتِر برای پروپرتی ما عمل می‌کند.

✅ مثال عملی :

const person = {};

Object.defineProperty(person, 'name', {
  value: 'علی',
  writable: false,
  enumerable: true,
  configurable: false
});

console.log(person.name); // خروجی: علی

person.name = 'حسن' ;

ℹ️ در این مثال، ما یک ویژگی جدید به نام name با مقدار اولیه علی به آبجکت person اضافه کردیم. همچنین مشخص کردیم که این ویژگی قابل تغییر نیست، در حلقه‌های for...in قابل مشاهده است و نمی‌توان آن را حذف کرد.

⚠️ در نتیجه خط اخر با خطا مواجه میشود زیرا ویژگی writable را برابر با false قرار دادیم و پروپرتی name قابل تغییر نیست.

💥 توی پارت بعدی که پارت پایانی هستش درمورد دو پروپرتی set و get در descriptor به صورت کامل صحبت میکنیم و به صورت جزئی به بررسی این دو ویژگی می‌پردازیم ☕

Channel | YouTube | Instagram

#javascript #js_trick #object

* متد Object.defineProperty در جاوااسکریپت چیست ؟  *
#part3

توی پارت های قبلی ( یک و دو ) به معرفی متد Object.defineProperty پرداختیم و ویژگی های کلیدی و ارگومان های مختلف این متد رو بررسی کردیم.

حالا توی این پست قراره که پروپرتی های get و set که متعلق به آرگومان descriptor هستند رو باهم بررسی کنیم.


❓ مفهوم getter چیست ؟

گِتِر تابعی است که هر زمان به مقدار یک ویژگی دسترسی پیدا می‌کنید، فراخوانی می‌شود.
به جای بازگرداندن مقدار مستقیم ویژگی، getter می‌تواند یک محاسبه انجام دهد یا مقدار را از منبع دیگری دریافت کند.

❔ مفهوم setter چیست ؟

سِتِر تابعی است که هر زمان مقداری به یک ویژگی نسبت داده می‌شود، فراخوانی می‌شود.
به جای جایگزینی مستقیم مقدار ویژگی، setter می‌تواند مقدار جدید را تغییر دهد یا قبل از ذخیره سازی آن، یک عملیات اعتبارسنجی انجام دهد.

بریم تو مثال عملی ببینیم چیکار میکنند 🚀

const obj = {};

let value = 0;

Object.defineProperty(obj, 'prop', {
    get() {
        return value;
    },
    set(newValue) {
        value = newValue + 1;
    },
    configurable: true,
    enumerable: true
});

obj.prop = 10;
console.log(obj.prop);

set :
وقتی obj.prop = 10 را می‌نویسیم، در واقع setter فراخوانی می‌شود و مقدار value به ۱۱ تغییر می‌کند.

get :
وقتی console.log(obj.prop) را می‌نویسیم، در واقع getter فراخوانی می‌شود و مقدار فعلی value که ۱۱ است در خروجی چاپ خواهد شد.

کاربردهای عملی set و get ✅

１ محاسبه مقادیر : می‌توانید از getter برای محاسبه مقادیر بر اساس مقادیر دیگر استفاده کنید. 👇

const person = {
   firstName: "ali",
   lastName: "ahmadi"
};

Object.defineProperty(person, 'fullName', {
  get() {
    return ${this.firstName} ${this.lastName}.toUpperCase();
  }
});

console.log(person.fullName); 

خروجی :

ALI AHMADI

２ اعتبارسنجی داده‌ها : می‌توانید از setter برای اطمینان از اینکه مقادیر ورودی معتبر هستند، استفاده کنید. 👇

const person = {};

Object.defineProperty(person, 'age', {
  get() {
    return this._age;
  },
  set(newAge) {
    if (newAge < 0) {
      throw new Error('سن نمی‌تواند منفی باشد.');
    }
    this._age = newAge;
  }
});

person.age = 30;
console.log(person.age); // خروجی: 30

try {
  person.age = -5;
} catch (error) {
  console.error(error.message); // خروجی: سن نمی‌تواند منفی باشد.
}

و این هم از پارت آخر متد Object.defineProperty

یک مقدار طولانی شد به این دلیل که دوسداشتم این متد رو به خوبی درک کنید ⚡❤️

Channel | YouTube | Instagram

#javascript #js_trick #object

* چرا باید از ()Object.is در مقایسه برابری استفاده کنید ؟ *

در جاوا اسکریپت از عملگر == برای مقایسه برابری دو مقدار استفاده می‌شود. با این حال، این عملگر به دلیل تبدیل خودکار نوع داده‌ها (coercion) می‌تواند نتایج غیرمنتظره‌ای را به همراه داشته باشد. برای مثال :

console.log(0 == ""); // true console.log(null == undefined); // true

در مقابل، === مقایسه برابری دقیق تری را انجام می‌دهد و به نوع داده‌ها توجه می‌کند. 👇

console.log(0 === ""); // false
console.log(null === undefined); // false

* حالا بریم بینیم متد Object.is دقیقا چیه ؟ 🤔 *

این متد یک روش جدید در جاوااسکریپت است که برای مقایسه برابری دقیق دو مقدار، مشابه === ، عمل می‌کند. با این تفاوت که Object.is در موارد خاص مانند مقایسه NaN، -0 و +0، نتایج دقیق‌تری ارائه می‌دهد.

* 💥 مثال عملی 👇 *

const a = NaN;
const b = 0 / 0;

console.log(a === b); // false
console.log(Object.is(a, b)); // true

در این قطعه کد دو متغیر به نام‌های a و b تعریف میکنیم و هر دو را برابر با مقدار NaN قرار می‌دهیم. این مقدار ( NaN ) معمولاً زمانی ایجاد می‌شود که یک عملیات ریاضی منجر به نتیجه‌ای نامعتبر شود، مانند تقسیم صفر بر صفر.

１مقایسه اول ( a ===b ) : این مقایسه از عملگر برابری دقیق (===) استفاده می‌کند که هم مقدار و هم نوع داده‌ای دو متغیر را بررسی می‌کند. در این مورد، هر دو متغیر مقدار NaN دارند اما === باز هم false را برمی‌گرداند. دلیل این اتفاق این است که در استاندارد IEEE 754 (استاندارد اعداد ممیز شناور)، NaN با خودش برابر نیست.

２ مقایسه دوم ( Object.is(a, b) ) : این مقایسه از متد Object.is استفاده می‌کند که برای مقایسه برابری دو مقدار طراحی شده است. این متد در بیشتر موارد مانند === عمل می‌کند، اما در مورد NaN رفتاری متفاوت دارد. Object.is تشخیص می‌دهد که هر دو متغیر مقدار NaN دارند و بنابراین true را برمی‌گرداند.

* ✅ مزایای استفاده از این متد چیه ؟ *

● دقت بیشتر : این متد در مقایسه با == و === دقت بیشتری در مقایسه برابری دارد 🚀

● خوانایی کد: استفاده از این متد کد شما را خواناتر و قابل فهم‌تر می‌کند ✅

● سازگاری با استانداردها: این متد بخشی از استاندارد های ECMAScript 2015 است و در اکثر مرورگرهای مدرن پشتیبانی می‌شود ⚡

Channel | YouTube | Instagram