#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

* تبدیل مقادیر آرایه از String به Number *

یکی از روش های جالب برای تبدیل تایپ همه آیتم های یک آرایه از string به number استفاده از روش زیر هست ⚡

const stringNumbers = ["12", "4.36", "2000", "mohammad"];

const numbers = stringNumbers.map(Number);

console.log(numbers);

خروجی کد 🧑‍💻

[457, 5.36, NaN, 4500]

توی این کد متد map روی آرایه stringNumbers اعمال می‌شود. این متد هر عنصر آرایه را به یک تابع (در اینجا تابع Number) پاس می‌دهد و نتیجه را در یک آرایه جدید قرار می‌دهد.
تابع Number تلاش می‌کند که هر رشته را به یک عدد تبدیل کند. اگر رشته قابل تبدیل به عدد نباشد، NaN برمی‌گرداند.

در نهایت برای حذف مقادیر NaN میایم و فیلترشون میکنیم :

const filteredNumbers = numbers.filter(number => !isNaN(number));

console.log(filteredNumbers);

و توی خروجی فقط اعداد درست رو دریافت میکنیم ✅

[457, 5.36, 4500]

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

#javascript #js_trick #unary_operators

* عملگرهای یکانی (unary operators) در جاوااسکریپت *

این نوع از عملگر ها فقط بر روی یک عملوند ( یک مقدار یا متغیر ) عمل می‌کنند. به زبان ساده، عملگرهایی هستند که فقط یک ورودی دارند و کار خاصی رو بر روی آن انجام می‌دهند. ✅

این عملگرها عملیات مختلفی مانند افزایش/کاهش، ارزیابی نوع داده، منفی کردن یک مقدار و غیره را انجام می‌دهند ⚡

بریم چند موردش رو تو کد ببینیم 🚀


عملگر بیتی (~) : بیت‌های یک عدد را معکوس می‌کند.

let x = 5; // در باینری: 0000000000000000000000000000010
x = ~x; // در باینری: 11111111111111111111111111111010

عملگر void : هر مقداری را نادیده می‌گیرد و undefined برمی‌گرداند

function exampleFunction() {
    return 42; // این مقدار برگشتی تابع است
}

console.log(void exampleFunction()); // undefined

اگر دوست داشتید در مورد بقیه unary operator ها بدونید توی پست زیر به طور کامل بررسیشون کردیم 🔥

https://www.instagram.com/p/C-a5UK5swFQ

Channel | YouTube | Instagram

#javascript #triks #js_trick

● استفاده از Optional Chaining در جاوااسکریپت ●

وقتی میخواید به یک پروپرتی در یک آبجکت دسترسی پیدا کنید و مطمئن نیستید که آیا اون پروپرتی وجود داره یا نه، میتونید از Optional Chaining استفاده کنید تا از ارور جلوگیری کنید ⚡

مثل عملی 🚀

let user = {
  name: "Ali",
  address: {
    city: "Tehran"
  }
};

console.log(user.address?.city); // "Tehran"
console.log(user.contact?.phone); // undefined (بدون ارور)

ممنون میشم با ری‌ اکشنای خودتون بهمون انرژی بدید ❤️
〰️〰️〰️〰️〰️〰️〰️〰️〰️〰️〰️〰️〰️〰️
Channel | Group | YouTube | Instagram

#javascript #js_trick

● استفاده از Array Destructuring در جاواسکریپت ●

یکی از قابلیت های جذاب جاوااسکریپت Array Destructuring هستش. این قابلیت باعث میشه خیلی راحت و سریع، مقادیر داخل آرایه‌ها رو به متغیرها منتقل کنیم.

مثال عملی 🚀

const [a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

با حمایتاتون بهمون انرژی بدید برای پستای خفن تر ❤️
〰️〰️〰️〰️〰️〰️〰️〰️〰️〰️
Channel | Group | YouTube

#javascript #js_trick

● متد structuredClone در جاوااسکریپت ●

تو جاوااسکریپت، آبجکت‌ها بر اساس مرجع (Reference) مدیریت میشن. این یعنی اگه یه آبجکت رو به یه متغیر دیگه اختصاص بدی، هر دو متغیر به همون آبجکت اصلی اشاره می‌کنن و تغییر تو یکی، روی اون یکی هم تاثیر می‌ذاره.

مثال 👇

const original = { name: "محمد", age: 18 };
const copy = original;

copy.name = "Doe";

console.log(original.name); // "Doe"

همونطور که می‌بینید توی مقال بالا وقتی copy رو تغییر دادیم، original هم تغییر کرد !

🔰 حالا structuredClone برای ما چیکار میکنه ؟

اگه بخوای یه کپی مستقل از آبجکت بسازی که تغییراتش تاثیری روی آبجکت اصلی نذاره، می‌تونی از متد structuredClone استفاده کنی. این متد یه کپی عمیق (deep clone) از آبجکت می‌سازه.

مثال عملی 🚀

const original = { name: "محمد", age: 18 };
const copy = structuredClone(original);

copy.name = "علی";

console.log(original.name); // "محمد"
console.log(copy.name); // "علی"

اینجا دیگه تغییرات تو copy روی original اثری نداره و هر کدوم مستقلاً تغییر می‌کنن.

Channel | Group | YouTube

#javascript #js_trick

● آشنایی با Numeric Separator در جاوااسکریپت
در جاوااسکریپت ●

ویژگی Numeric Separator به شما این امکان رو می‌ده تا اعداد طولانی تر رو خواناتر کنید. با استفاده از کاراکتر آندرلاین _ می‌تونیم رقم‌ها را در اعداد بزرگ‌تر جدا کنیم، بدون اینکه تاثیری روی مقدار نهایی عدد داشته باشد.

مثال عملی 🚀

const largeNumber = 1_000_000_000; console.log(largeNumber); // 1000000000 

این قابلیت زمانی که با اعداد طولانی کار می‌کنید، بسیار مفید است و به درک بهتر مقادیر کمک می‌کند ⚡

با حمایت خودتون بهمون انرژی بدید ❤️
〰️〰️〰️〰️〰️〰️〰️〰️〰️〰️
Channel | Group | YouTube

●● 🔒 مخفی کردن قسمتی از اطلاعات حساس با JavaScript ●●

خیلی وقتا نیاز داریم که تنها بخشی از یک داده حساس مثل شماره تلفن، شماره کارت بانکی و غیره را نمایش بدیم و باقی اون رو با کاراکترهای خاصی مثل * کاور کنیم. با استفاده از این کد ساده در جاوا اسکریپت، میتونید این کار رو به راحتی انجام بدید 🚀

const mask = (value) => {
    return value.trim().slice(-4).padStart(value.length, '*');
}

console.log(mask('09121111111'));

// خروجی => 1111*******

اگه خوشت اومد برای پستای بیشتر مارو دنبال کن ❤️

#javascript #trick #js_trick
〰️〰️〰️〰️〰️〰️〰️️〰️〰️〰️

Channel | Group | YouTube

#javascript  #js_trick

●● نزار بیشتر از یک بار کلیک کنه ❌ ●●

برای اطمینان از اینکه یک ایونتی فقط یک بار اجرا بشه داخل جاوااسکریپت، میتونید از ویژگی once توی ارگومان سوم ایونتتون استفاده کنید.

button.addEventListener('click',() => {
  alert('سلام رفیق 👋');
}, { once: true });

🌐 مشاده آنلاین مثال استفاده واقعی

🆔 Channel | Group | YouTube

#javascript #js_trick

●● اطلاعات کامل باتری با جاوااسکریپت🔋●●

با استفاده از Battery Status Api میتونید سطح باتری، وضعیت شارژ شدن و دیگر اطلاعات مرتبط با باتری رو به دست بیارید و ازشون استفاده کنید.

نمونه کد 🚀

navigator.getBattery().then(battery => {
    console.log(`Battery level: ${battery.level * 100}%`);
    console.log(`Is charging: ${battery.charging ? 'Yes' : 'No'}`);
});

🌐 استفاده واقعی در وبسایت

🆔 Channel | Group | YouTube