#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 #vs #article

هیچ چیزی بهتر از این عکس نمیتونست فرق بین Primitive و Reference Values رو بهم نشون بده 😂

البته اینا شوخیه، اگر خواستید تفاوت این دوتا رو بهتر بدونید پیشنهاد میکنم این مقاله رو مطالعه کنید، چون هم فارسیه و هم مختصر و مفید توضیح داده ⚡

پ.ن : اگر با زبان برنامه نویسی جاوااسکریپت کار میکنید یکی از مباحث مهمی که حتما باید بدونید primitive و refrence value هستش 👌

#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 #tricks

● سه تا از کابردی ترین متد ها برای کار با آبجکت ها ●

➊ متد Object.keys : این متد تمام keyهای یک آبجکت رو گرفته و آن‌ها را در یک آرایه قرار می‌دهد.

➋ متد Object.values : این متد تمام valueهای یک آبجکت را گرفته و آن‌ها را در یک آرایه قرار می‌دهد.

➌ متد Object.entries : این متد keyها و valueها را به صورت key, value ترکیب می‌کند و آرایه‌هایی از این جفت‌ها ایجاد می‌کند.

مثال عملی 🚀

const obj { key1: 'value1', key2: 'value2', key3: 'value3'

};

const keysArray = Object.keys(obj);

const valuesArray = Object.values(obj);

const entriesArray = Object.entries(obj);

console.log(keysArray); 
// Output: ['key', 'key2', 'key3']

console.log(valuesArray); 
// Output: ['value', 'value2', 'value']

console.log(entriesArray); 
// Output: [['key', 'value'], ['key2', 'value'], ['key3', 'value3']]

با حمایتاتون بهمون انرژی بدید ❤️
〰️〰️〰️〰️〰️〰️〰️〰️〰️〰️
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

#WhatsThat #javascript #window

●● آبجکت window چیه و چه کار هایی برای ما انجام می‌ده ؟ ●●

آبجکت window یک global object هستش که درواقع نماینده پنجره فعلی مرورگریه که اسکریپت شما در حال اجراست و یه جورایی می‌شه گفت که این window مثل مدیر ساختمونه که همه اتاقا و وسایل رو کنترل می‌کنه.

1️⃣ مدیریت تب‌های مرورگر

می‌تونی با window.open یه تب جدید باز کنی یا با window.close یه تب رو ببندی.

let myWindow = window.open("https://example.com")
// بستن تب باز شده بعد از 5 ثانیه
setTimeout(() => {
    myWindow.close();
}, 5000);

2️⃣ دسترسی به ابعاد پنجره

می‌تونی با window.innerWidth و window.innerHeight بفهمی اندازه فعلی پنجره فعلی چقدره. این خیلی به دردت می‌خوره وقتی می‌خوای سایز یه عنصر رو نسبت به اندازه صفحه تنظیم کنی.

let width = window.innerWidth;
let height = window.innerHeight;

let myDiv = document.getElementById("myDiv");

myDiv.style.width = (width / 2) + "px"; 
// نصف عرض پنجره

myDiv.style.height = (height / 3) + "px"; 
// یک سوم ارتفاع پنجره

3️⃣ ذخیره اطلاعات کاربر در LocalStorage

با window.localStorage می‌تونی اطلاعات کاربر رو ذخیره کنی که حتی بعد از بستن و باز کردن مرورگر هم باقی بمونه. مثلا یه کاربر می‌تونه تم سایت رو عوض کنه و بعداً همون تم دوباره براش لود بشه.

// ذخیره اطلاعات
window.localStorage.setItem("theme", "dark");

// خوندن اطلاعات
let theme = window.localStorage.getItem("theme");
console.log("تم انتخاب شده: " + theme);

// پاک کردن اطلاعات
window.localStorage.removeItem("theme");

4️⃣ کنترل URL

با window.location می‌تونی آدرس URL رو بخونی یا عوض کنی. مثلا کاربر رو به یه صفحه دیگه هدایت کنی.

// خوندن آدرس فعلی صفحه
console.log("آدرس فعلی: " + window.location.href);

// هدایت کاربر به صفحه دیگه
window.location.href = "https://example.com";

// تغییر قسمتی از URL بدون لود مجدد صفحه
window.location.hash = "section1"; // کاربر رو به بخش مشخصی از صفحه هدایت می‌کنه

5️⃣ تعامل با کاربر از طریق آلرت‌ها

می‌تونی با window.alert() یه پیام پاپ‌آپ به کاربر نشون بدی یا با window.prompt() ازش چیزی بپرسی.

// نمایش پیام ساده
window.alert("به وبسایت ما خوش آمدید!");

// پرسیدن سوال از کاربر
let name = window.prompt("اسمت چیه؟");
console.log("اسمی که کاربر وارد کرده: " + name);

// گرفتن تأییدیه از کاربر
let result = window.confirm("آیا مطمئن هستید که می‌خواهید ادامه دهید؟");
if (result) {
    console.log("کاربر ادامه داد");
} else {
    console.log("کاربر لغو کرد");
}

✅ در کل همه اینها یسری از قابلیت های پر کاربرد آبجکت window بودن، به زودی یه پست دیگه درست میکنم تا متد های بیشتری از window رو‌ بررسی کنیم

🌐 مشاهده داکیومنت window

🆔 Channel | Group | YouTube