عملگر ?? یا Nullish Coalescing

گاهی ممکنه مقدار یه متغیر null یا undefined باشه، ولی نمی‌خوای با | | کار کنی چون 0 یا '' رو هم false در نظر می‌گیره.

اینجاست که ?? می‌درخشه!

const name = null;
const displayName = name ?? 'کاربر مهمان';

console.log(displayName); // خروجی: "کاربر مهمان"

فرقش با چیه؟

0 || 10 // Output: 10
0 ?? 10 // Output: 0

?? فقط وقتی مقدار null یا undefined باشه، مقدار دوم رو برمی‌گردونه.

@JavascriptIR

تفاوت بین setTimeout و setInterval

هر دو تابع برای زمان‌بندی هستن، اما کارکردشون متفاوته:
• setTimeout: فقط یک‌بار بعد از زمان مشخص اجرا میشه
• setInterval: به‌صورت پیوسته و تکراری اجرا میشه

مثال:

setTimeout(() => {
  console.log('یک بار اجرا شد');
}, 2000);
// بعد از ۲ ثانیه اجرا میشه


setInterval(() => {
  console.log('هر ۲ ثانیه اجرا میشه');
}, 2000);

ترفند حرفه‌ای:
اگه خواستی setInterval رو متوقف کنی:

const id = setInterval(() => {
  console.log('تکرار');
}, 1000);

clearInterval(id); // هر وقت خواستی متوقفش کن

@JavascriptIR

تفاوت == با Object.is

همه == و === رو می‌شناسن، اما Object.is چیه؟

Object.is(a, b) خیلی شبیه === هست، ولی تفاوت‌های ظریفی داره:

مثال:

NaN === NaN       // false
Object.is(NaN, NaN) // true ✅

+0 === -0         // true
Object.is(+0, -0)   // false ✅

خلاصه‌ش:
و Object.is برای مقایسه خیلی دقیق‌تر از === عمل می‌کنه، مخصوصاً برای موارد خاص مثل NaN یا علامت صفر.

@JavascriptIR

شرکت OpenAI میخواد که ویرایشگر کد Windsurf رو به قیمت ۳ میلیارد دلار خریداری کنه. این ویرایشگر که قبلا Codeium نام‌ داشت و کارش رو با عرضه اکستنشن‌ روی وی‌اس‌کد شروع کرده بود، امسال ویرایشگر مبتنی بر هوش مصنوعی خودش رو عرضه کرد و نامش رو هم تغییر داد. این خرید گرون‌ترین خرید OpenAI تا امروز خواهد بود و احتمالا سیر خرید ادیتورها رو به زودی توسط شرکت‌های دیگه هم ببینیم.

@JavascriptIR

معاون یوتیوب پیش‌بینی کرده که تا پنج سال دیگه، هر ویدیویی که تو یوتیوب آپلود بشه، به صورت اتوماتیک به همه زبون‌های دنیا دوبله میشه. میگه فقط زبان تغییر میکنه و صدای اون آدم ثابت هست و حتی لب‌هاش هم جوری حرکت داده میشن که انگار داره به همون زبون صحبت میکنه.

به نظر میاد دوبله خودکار ویدیوها به زبون‌های مختلف، مهم‌ترین تغییریه که یوتیوب برای ورود به عصر هوش مصنوعی داره روش کار می‌کنه.

@JavascriptIR

چرا بعضی از مدیران فنی سیلیکون‌ولی در حال کنار گذاشتن React هستند؟🤔

تو چند سال گذشته، فریم‌ورک React به یکی از محبوب‌ترین ابزارها برای توسعه رابط کاربری تبدیل شده است.
اما اخیراً خیلی از CTOها و مهندسای ارشد سیلیکون‌ولی به‌صورت تدریجی در حال فاصله گرفتن از React و بررسی گزینه‌های جایگزین هستند.

دلایل این تصمیم را می‌توان در موارد زیر خلاصه کرد:

1. پیچیدگی و هزینه نگهداری بالا
ریکت به‌تنهایی کافی نیست و اغلب نیاز به استفاده هم‌زمان از کتابخانه‌هایی مثل Redux، React Router و غیره دارد.
این موضوع باعث می‌شود توسعه و نگهداری پروژه‌ها پیچیده و زمان‌بر شود.

2. عملکرد محدود در پروژه‌های خاص
در پروژه‌هایی که به سرعت بالا یا بهینه‌سازی دقیق نیاز دارند، React به دلیل استفاده از Virtual DOM نمی‌تواند عملکرد مطلوبی ارائه دهد.

3. ظهور فریم‌ورک‌های جدید و سریع‌تر
فریم‌ورک‌هایی مانند Svelte و SolidJS بدون استفاده از Virtual DOM و با ساختاری ساده‌تر، عملکرد بسیار بهتری در برخی سناریوها دارند. این ابزارها به توسعه‌دهندگان اجازه می‌دهند با کد کمتر و ساده‌تر، خروجی بهتری بگیرند.

4. تمرکز بر تجربه توسعه‌دهنده (DX)
فریم‌ورک‌های جدید تجربه‌ی توسعه‌ی سریع‌تر و راحت‌تری را فراهم می‌کنند. در نتیجه، تیم‌های فنی در جست‌وجوی ابزارهایی هستند که زمان توسعه را کاهش دهند و بهره‌وری را افزایش دهند.

نتیجه اینکه :
ریکت همچنان محبوب و پرکاربرد است، اما تکنولوژی‌های جدید مثل Svelte، SolidJS و حتی Qwik در حال جلب توجه مدیران فنی هستند.
این ابزارها ممکن است آینده نقش پر رنگ ترس در توسعه رابط کاربری داشته باشن.
منبع:
Why Silicon Valley CTOs Are Secretly Moving Away from React

@JavascriptIR

تحریم Chat GPT برای ایران برداشته شد!

هر وقت میرم خونه آشناها

@JavascriptIR

پارامترهای پیش‌فرض (Default Parameters)

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

function greet(name = 'مهمان') {
  console.log(`سلام ${name}!`);
}

greet();        // خروجی: سلام مهمان!
greet('سارا');  // خروجی: سلام سارا!

ترفند حرفه‌ای:
مقدار پیش‌فرض می‌تونه حاصل یه تابع یا محاسبه هم باشه:

function randomID(id = generateID()) {
  console.log(id);
}

@JavascriptIR

معرفی پکیج: slugify

🔧 کاربرد:
تبدیل متن‌های فارسی یا انگلیسی به URL-friendly slug
مثلاً:

slugify("سلام دنیا!") → "salam-donya"

📦 نصب:

npm install slugify

⚡️ نکته جذاب:
– به صورت خودکار فاصله‌ها، کاراکترهای خاص و حروف اضافه رو حذف یا جایگزین می‌کنه
– خیلی برای ساخت آدرس مقاله‌ها و لینک‌ تمیز تو بلاگ‌ها کاربردیه!

🔗 صفحه npm پکیج

@JavascriptIR

مقایسه for و forEach – کدوم سریع‌تره؟

وقتی می‌خوای روی یه آرایه تکرار کنی، معمولاً از forEach یا for استفاده می‌کنی.
اما اگه برات سرعت مهمه، باید بدونی:

const arr = Array(100000).fill(0);

// for loop
console.time('for');
for (let i = 0; i < arr.length; i++) {
  arr[i]++;
}
console.timeEnd('for');

// forEach
console.time('forEach');
arr.forEach((v, i) => {
  arr[i]++;
});
console.timeEnd('forEach');

نتیجه:
در بیشتر مرورگرها، for حدود ۳۰٪ تا ۷۰٪ سریع‌تر از forEach اجرا میشه، چون:

حلقه for: سبک‌تره و بهینه‌تر اجرا میشه
حلقه forEach: توابع callback می‌سازه که باعث overhead می‌شه


پیشنهاد:

اگه پرفورمنس برات مهمه (مثل حلقه داخل انیمیشن یا محاسبه سنگین)، از for استفاده کن.
ولی اگه کد خوانا و تمیز می‌خوای و حجم داده‌ات خیلی زیاد نیست، forEach گزینه راحت‌تریه.

@JavascriptIR

معرفی پکیج dotenv

کاربرد:
مدیریت متغیرهای محیطی (Environment Variables) در پروژه‌ها
به جای اینکه اطلاعات حساس رو مستقیم توی کد بنویسی، می‌ریزی داخل فایل .env

yarn add dotenv

بعد از نصب یه فایل با اسم .env می‌سازیم.
متغیرهای مورد نیاز رو به این صورت قرار میدیم:

API_KEY=123456
PORT=3000

و توی کد هم به این صورت قابل استفاده هست.

import dotenv from 'dotenv';
dotenv.config();

console.log(process.env.API_KEY); // 123456

مزایا:
– کمک به جداسازی کد از اطلاعات حساس
– بسیار مناسب برای توسعه امن در Node.js و حتی React
– از CI/CD تا پروژه‌های لوکال، همیشه مفیده!

صفحه npm پکیج

@JavascriptIR

تو پروژه جدیدم مجبور شدم فرانت هم بزنم…
منی که همیشه پشت سر کدای بک‌اند قایم می‌شدم، حالا دارم می‌رم سراغ UI 😅

برای همین شروع کردم به یاد گرفتن Tailwind —
و راستش؟ بر خلاف چیزی که فکر می‌کردم، خیلی راحت و دوست‌داشتنیه!

سرعتم هنوز کنده، ولی هرچی بیشتر باهاش کار می‌کنم، بیشتر خوشم میاد.
هیچ‌وقت فکر نمی‌کردم ساختن یه UI تمیز بدون یه خط CSS این‌قدر کیف بده!

دو سال پیش روی یه پروژه کار می‌کردم که نیاز بود از WebSocket استفاده کنم. همه چیز خوب بود تا وقتی که برنامه رو با کلاستر ران کردم. چندتا worker کنار هم.

اما یه مشکل عجیب پیش اومد:
سوکت‌آیدی‌ها هر کدوم فقط روی همون worker بودن، و workerها همدیگه رو نمی‌دیدن!
یعنی پیام‌ها یا eventها بین سوکت‌ها درست رد و بدل نمی‌شدن. البته اینو بعدا متوجه شدم.

یه عالمه سرچ و سوال تو استک اورفلو زدم، فهمیدم مشکل اینه که هر worker یه فضای مجزاست و خودش فقط سوکت‌های داخل خودش رو می‌شناسه.

راه‌حل چیه؟
باید از یه سرویس third party مثل Redis یا یه message broker استفاده کنیم که سوکت‌آیدی‌ها رو ذخیره کنه و workerها بتونن به هم دسترسی داشته باشن.

بعد از پیاده‌سازی این روش، مشکل حل شد و همه سوکت‌ها مثل یه تیم هماهنگ کار کردن.

نتیجه اینکه وقتی Node.js رو کلاستر می‌کنیم، باید حواسمون باشه سوکت‌ها رو نمی‌تونیم فقط داخل یه worker مدیریت کنیم.
باید یه راه‌کار مرکزی برای هماهنگی سوکت‌ها داشته باشیم، وگرنه real-time تبدیل می‌شه به real-confuse! 😅

تفاوت await داخل for, forEach

ممکنه فکر کنی اینا فرقی ندارن، ولی تفاوتشون می‌تونه باعث کلی باگ بشه!

❌ اشتباه رایج:

[1, 2, 3].forEach(async (num) => {
  await doSomething(num);
});




اشکال:
چون forEach نمیتونه await رو درست هندل ‌کنه!
کد بالا تموم میشه قبل از اینکه همه awaitها کامل اجرا شن.


✅ روش درست:

for (const num of [1, 2, 3]) {
  await doSomething(num);
}

مزیت:
– منتظر می‌مونه هر await کامل بشه
– ترتیب اجرا حفظ میشه
– بدون باگ، بدون سورپرایز

نکته برای دولوپرهای تازه‌کار

اگر در ابتدای مسیر برنامه‌نویسی هستی، یک تغییر ساده در طرز فکر می‌تونه تأثیر بزرگی داشته باشه:

به جای اینکه فقط کدی بنویسی که “کار کنه”،
سعی کن کدی بنویسی که بتونی در یک بازبینی فنی (code review) ازش دفاع کنی.

این یعنی شروع مسیر تبدیل شدن به یک توسعه‌دهنده‌ی حرفه‌ای.

متغیرهایی که با let تعریف می‌کنیم، به Scope وابسته‌ هستن

خیلی‌ها فکر می‌کنن let فقط یه نسخه مدرن‌تر از var ـه، ولی فرق مهمی دارن:

if (true) {
  let x = 10;
}
console.log(x); // ReferenceError

برخلاف var که function-scoped هست،
let (و همین‌طور const) block-scoped هستن.
یعنی فقط داخل بلاک {} قابل دسترس هستن.

وقتی از let استفاده می‌کنیم، باید مطمئن باشیم که می‌فهمیم متغیرت توی چه محدوده‌ای استفاده میشه!
این باعث جلوگیری از باگ‌های پنهان و رفتارهای غیرقابل‌پیش‌بینی میشه.

مقداردهی اولیه به پارامترهای توابع

در جاوااسکریپت می‌تونیم برای پارامترهای تابع، مقدار پیش‌فرض تعریف کنیم:

function greet(name = "مهمان") {
  console.log("سلام " + name);
}

greet();        // سلام مهمان
greet("علی");   // سلام علی

مزیت:
– کدمون تمیزتر و امن‌تر میشه
– نیازی به if (!name) برای چک کردن وجود مقدار نداریم
– مخصوصاً برای توابع عمومی یا فرم‌ها خیلی مفیده

مقدار پیش‌فرض می‌تونه نتیجه یه تابع هم باشه:

function generateID() {
  return Math.random().toString(36).slice(2);
}

function createUser(id = generateID()) {
  console.log("User ID:", id);
}