خروجی این کد JavaScript چیست؟

در این مثال از prototype chain و shadowing روی یک property استفاده شده است. با دقت به ترتیب اجرا و این‌که هر بار چه مقداری log می‌شود توجه کنید و خروجی نهایی را به ترتیب سطرها بنویسید.

const base = {
  value: 1,
  inc() {
    this.value++;
    console.log("base:", this.value);
  }
};

const obj = Object.create(base);
obj.value = 10;

obj.inc();
base.inc();

delete obj.value;
obj.inc();

base.value = 100;
obj.inc();

خروجی دقیق این کد در console چه خواهد بود؟ (همه سطرهای خروجی را به ترتیب بنویسید)

🔖 #Javascript #JS #جاوااسکریپت

👤 Developix

💎 Channel: @DevelopixJavascript

💠 نسخه جدید ران‌تایم نود جی‌اس (NodeJS) منتشر شده است

🔸 ارتقا از نسخه 26.4.0 به 26.5.0

🔹 لیست تغییرات این نسخه:
- افزودن متد جدید blob.textStream() در ماژول buffer
- افزودن فلگ جدید --experimental-import-text برای ESM
- افزودن نمونه‌برداری تأخیر هر چرخه رویداد در perf_hooks
- افزودن و اکسپوز کردن ReadableStreamTee در ماژول stream
- گزارش گروه‌های مذاکره‌شده TLS در ماژول tls
- سایر بهبودها و به‌روزرسانی‌های داخلی و مستندات، و غیره

🔖 #nodejs, #web, #js, #release

💎 @DevelopixJavascript

ساخت TODO List یکی از بهترین تمرین‌های واقعی برای جا افتادن مفاهیم DOM، event ها و ذخیره داده‌ها در مرورگر است. این بار بدون React و فریم‌ورک، فقط با Vanilla JS و LocalStorage 💪

منبع اصلی ایده و توضیحات: آموزش MDN درباره Web Storage API و مستندات DOM Manipulation.

ایده کلی 👇
یک فرم ساده داریم برای اضافه‌کردن task ها، لیست را با JS توی DOM رندر می‌کنیم و هر تغییری که کاربر می‌دهد را در localStorage ذخیره می‌کنیم تا بعد از refresh هم از بین نرود.

نکته خوبش این است که با همین مثال ساده، چند تا چیز مهم جا می‌افتد:

• کار با querySelector و ساخت element های جدید
• مدیریت event ها مثل submit و click
• تبدیل array به string و برعکس با JSON.stringify و JSON.parse
• sync نگه‌داشتن UI با state ذخیره‌شده در localStorage

یک اسکلت ساده از کد 👇

<!-- index.html -->
<form id="todo-form">
  <input id="todo-input" placeholder="کار جدید..." />
  <button type="submit">اضافه کن</button>
</form>

<ul id="todo-list"></ul>

<script src="app.js"></script>

و فایل جاوااسکریپت:

// app.js
const form = document.querySelector("#todo-form");
const input = document.querySelector("#todo-input");
const list = document.querySelector("#todo-list");

const STORAGE_KEY = "jsdev_todos";
let todos = loadTodos();
render();

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const text = input.value.trim();
  if (!text) return;

  todos.push({ id: Date.now(), text });
  input.value = "";
  saveTodos();
  render();
});

list.addEventListener("click", (e) => {
  if (!e.target.matches("button[data-id]")) return;
  const id = Number(e.target.dataset.id);
  todos = todos.filter((t) => t.id !== id);
  saveTodos();
  render();
});

function loadTodos() {
  const raw = localStorage.getItem(STORAGE_KEY);
  try {
    return raw ? JSON.parse(raw) : [];
  } catch {
    return [];
  }
}

function saveTodos() {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(todos));
}

function render() {
  list.innerHTML = "";
  todos.forEach((todo) => {
    const li = document.createElement("li");
    li.textContent = todo.text + " ";

    const btn = document.createElement("button");
    btn.textContent = "حذف";
    btn.dataset.id = todo.id;

    li.appendChild(btn);
    list.appendChild(li);
  });
}

چند نکته ریز ولی مهم 🧠
• همیشه روی داده localStorage یک try...catch بگذار که اگر خراب شد (مثلاً دستی ویرایش شده بود) اپ کرش نکند.
• از یک key ثابت مثل jsdev_todos استفاده کن تا اگر بعداً چند بخش دیگر هم اضافه شد، تداخل نداشته باشند.
• برای id ها اینجا از Date.now() استفاده شده، که برای پروژه‌های کوچک کافی است.

با همین ساختار پایه می‌شود بعدها checkbox برای completed، فیلتر، و حتی sync ساده با backend هم اضافه کرد. یک بار این نمونه را تا انتها بساز، بعد هر جای اپ‌های واقعی که state و UI sync می‌شوند خیلی قابل فهم‌تر به نظر می‌رسد ⚡️

اگر ساختی و کمی شخصی‌سازی‌اش کردی، نسخه‌ات را برای بقیه بچه‌های جاوااسکریپت هم بفرست؛ همین مثال‌های کوچک کم‌کم تبدیل به component و pattern های جدی‌تر می‌شوند.

🔖 #Javascript #JS #جاوااسکریپت #JavaScript #LocalStorage #DOM #VanillaJS #Frontend

👤 Developix

💎 Channel: @DevelopixJavascript

با Migration Boost هاست‌ایران، برای مهاجرت به سرور ابری دوباره هزینه ترافیک نده! 🚀

با خرید اولین سرور ابری غیرساعتی از **هاست‌ایران**، بسته ترافیک هدیه مهاجرت به‌صورت خودکار برای سرویس شما فعال می‌شود:

✅ حداقل ۱۰۰ گیگابایت ترافیک هدیه مهاجرت
✅ افزایش حجم هدیه متناسب با ظرفیت دیسک اولیه
✅ ترافیک آپلود رایگان
✅ بدون محدودیت زمانی

سرور ابری هاست‌ایران را راه‌اندازی کنید و بکاپ‌ها، فایل‌ها و پایگاه داده خود را بدون دغدغه هزینه‌های پنهان ترافیک منتقل کنید.

👇 مشاهده پلن‌های سرور ابری هاست‌ایران
hostiran.club/Migration
hostiran.club/Migration

💠 نسخه جدید ران‌تایم نود جی‌اس (NodeJS) منتشر شده است

🔸 ارتقا از نسخه 26.5.1 به 26.6.0

🔹 لیست تغییرات این نسخه:
- افزودن تابع جدید ffi.getCurrentEventLoop
- افزودن context.log() و رویداد test:log در test_runner
- گزارش فیلد entryFile در رویدادهای TestStream
- بهبودهای کارایی رویدادها و once()/removeListener()
- قابلیت انتقال TCP Server و Socket بین worker threads
- به‌روزرسانی وابستگی‌ها (npm 11.18.0، V8، OpenSSL، zlib و غیره)

🔖 #nodejs, #web, #js, #release

💎 @DevelopixJavascript

💠 نسخه جدید ران‌تایم نود جی‌اس (NodeJS) منتشر شده است

🔸 ارتقا از نسخه 26.6.0 به 26.7.0

🔹 لیست تغییرات این نسخه:
- پشتیبانی از بارگذاری کلید خصوصی با STORE loaderها در crypto
- به‌روزرسانی ریشه‌گواهی‌ها به NSS 3.125 در crypto
- افزودن پشتیبانی Perfetto برای پروفایلینگ کارایی
- پیاده‌سازی Symbol.dispose در ModuleHooks ماژول‌ها
- افزودن فلگ --test-coverage-include-all به test_runner
- به‌روزرسانی npm به نسخه 11.19.0 و سایر وابستگی‌ها و غیره

🔖 #nodejs, #web, #js, #release

💎 @DevelopixJavascript

🔥 پروژه: ‏DrawDB؛ طراحی بصری دیتابیس آنلاین

ویرایشگر تحت‌وب DrawDB یک ابزار رایگان برای طراحی نمودار دیتابیس و تولید خودکار SQL است 🧩

برای وقتی عالی است که قبل از نوشتن کد، اسکیمای دیتابیس پروژه جاوااسکریپتی‌تان (مثلاً با ORMهایی مثل Prisma یا TypeORM) را می‌خواهید شفاف و تمیز طراحی کنید.

رابط کاربری خیلی ساده است: جدول می‌سازی، ستون و رابطه می‌کشی و درنهایت اسکریپت SQL ساخت جداول را تحویل می‌گیری.

برای دیدن پروژه و دمو، سر بزن به: سورس DrawDB روی گیت‌هاب

⭐️ 665 stars this week

🔖 #Javascript #JS #جاوااسکریپت #جاوااسکریپت #طراحی_دیتابیس

💎 @DevelopixJavascript

اصل مهمی در Clean Code این است که هر تابع فقط یک وظیفهٔ واضح داشته باشد ✨

وقتی یک تابع چند کار مختلف انجام می‌دهد:
- تست‌نویسی سخت می‌شود
- احتمال باگ بالا می‌رود
- خواندن و تغییر کد زمان‌بر می‌شود

به این ایده در Design Principleها می‌گویند: Single Responsibility Principle (SRP).

نمونهٔ یک تابع شلوغ در Node.js 👇

const registerUser = async (req, res) => {
  const { email, password } = req.body;

  // validate
  if (!email || !password || password.length < 8) {
    return res.status(400).json({ message: 'Invalid data' });
  }

  // check duplicate
  const existing = await User.findOne({ email });
  if (existing) {
    return res.status(409).json({ message: 'Email exists' });
  }

  // hash password
  const bcrypt = await import('bcrypt');
  const hashed = await bcrypt.hash(password, 10);

  // save user
  const user = await User.create({ email, password: hashed });

  // send welcome email
  await sendWelcomeEmail(email);

  return res.status(201).json({ id: user.id, email: user.email });
};

این تابع هم اعتبارسنجی می‌کند، هم دیتابیس می‌زند، هم ایمیل می‌فرستد؛ یعنی چند مسئولیت در یک جا.

حالا همان منطق را با توابع کوچک‌تر تمیزتر می‌کنیم 🧼

const validateRegisterInput = ({ email, password }) => {
  if (!email || !password) return 'Email and password are required';
  if (password.length < 8) return 'Password too short';
  return null;
};

const ensureEmailUnique = async (email) => {
  const existing = await User.findOne({ email });
  if (existing) throw new Error('EMAIL_TAKEN');
};

const createUser = async ({ email, password }) => {
  const bcrypt = await import('bcrypt');
  const hashed = await bcrypt.hash(password, 10);
  return User.create({ email, password: hashed });
};

const registerUser = async (req, res) => {
  const { email, password } = req.body;

  const error = validateRegisterInput({ email, password });
  if (error) return res.status(400).json({ message: error });

  try {
    await ensureEmailUnique(email);
    const user = await createUser({ email, password });
    await sendWelcomeEmail(email);

    return res.status(201).json({ id: user.id, email: user.email });
  } catch (err) {
    if (err.message === 'EMAIL_TAKEN') {
      return res.status(409).json({ message: 'Email exists' });
    }
    return res.status(500).json({ message: 'Server error' });
  }
};

حالا:
- تست کردن validateRegisterInput و createUser مستقل و ساده است ✅
- تغییر قانون پسورد، فقط در یک تابع انجام می‌شود ✅
- خطاها واضح‌تر و قابل مدیریت‌تر هستند ✅

برای کدهای React، Express، Next.js و هر محیط JavaScript/TypeScript دیگر همین ایده جواب می‌دهد: توابع کوچک، با نام خوب و یک کار مشخص.

برای مطالعهٔ بیشتر می‌توان از Refactoring.Guru و MDN کمک گرفت.

قدم‌های کوچک refactor کردن همین امروز روی یکی از فانکشن‌های شلوغ پروژه، بعد از چند هفته تاثیر زیادی در خوانایی و کیفیت کد می‌گذارد 🚀

🔖 #Javascript #JS #جاوااسکریپت #JavaScript #Clean_Code #Node_js #Refactoring #SRP

👤 Developix

💎 Channel: @DevelopixJavascript

💠 نسخه جدید سوپرست تایپ‌اسکریپت (Typescript) منتشر شده است

🔸 ارتقا از نسخه 6.0.3 به 7.0.2

🔹 لیست تغییرات این نسخه:


🔖 #typescript, #web, #js, #react, #vue, #release

💎 @DevelopixJavascript

💠 نسخه جدید ران‌تایم نود جی‌اس (NodeJS) منتشر شده است

🔸 ارتقا از نسخه 26.7.0 به 26.8.1

🔹 لیست تغییرات این نسخه:
- رفع مشکل نمایش اشتباه نسخه در خروجی node --version

🔖 #nodejs, #web, #js, #release

💎 @DevelopixJavascript

یکی از ساده‌ترین تکنیک‌های Refactoring برای تمیزتر شدن کد جاوااسکریپت، استفاده از الگوی Early Return است ✨

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

نمونه کد شلوغ بدون Early Return 👇

function createOrder(user, items) {
  if (user) {
    if (user.isActive) {
      if (Array.isArray(items) && items.length > 0) {
        const total = items.reduce((sum, it) => sum + it.price, 0);
        if (total > 0) {
          return { userId: user.id, total, status: "CREATED" };
        } else {
          throw new Error("Total must be positive");
        }
      } else {
        throw new Error("Items required");
      }
    } else {
      throw new Error("User not active");
    }
  } else {
    throw new Error("User required");
  }
}

خواندن این تابع سخت است؛ منطق اصلی بین ifهای تودرتو گم شده.

همان منطق با Early Return 🧼

function createOrder(user, items) {
  if (!user) {
    throw new Error("User required");
  }

  if (!user.isActive) {
    throw new Error("User not active");
  }

  if (!Array.isArray(items) || items.length === 0) {
    throw new Error("Items required");
  }

  const total = items.reduce((sum, it) => sum + it.price, 0);

  if (total <= 0) {
    throw new Error("Total must be positive");
  }

  return { userId: user.id, total, status: "CREATED" };
}

حالا:

• تمام شرط‌های نامعتبر بالا جمع شده‌اند و سریع تابع را ترک می‌کنند ✅
• «مسیر خوشحال» وسط تابع مثل یک داستان خطی و قابل‌خواندن است ✅
• دیباگ و لاگ‌گرفتن ساده‌تر شده است ✅

نکته کاربردی در پروژه‌های React / Node.js

در هندلرهای API و کنترلرهای Express هم همین الگو کمک زیادی می‌کند تا از callback hell جدید یعنی if hell فرار شود:

export const handler = async (req, res) => {
  const { user } = req;

  if (!user) {
    return res.status(401).json({ message: "Unauthorized" });
  }

  if (!user.isActive) {
    return res.status(403).json({ message: "Inactive user" });
  }

  const data = await loadDashboardData(user.id);
  return res.json(data);
};

در مستندات MDN درباره return و جریان کنترل توضیحات بیشتری آمده که مطالعه‌اش دید خوبی می‌دهد.

هرجا تابعی دیدۀ می‌شود که تو در تو و سخت‌خوان است، یک بار با Early Return بازنویسی‌اش، هم برای خودتان هم برای تیم، خوانایی کد را چند درجه بالا می‌برد 🚀


🔖 #Javascript #JS #جاوااسکریپت #JavaScript #Clean_Code #Refactoring #Early_Return #Node_js #Express #Readability

👤 Developix

💎 Channel: @DevelopixJavascript

بررسی نوع داده Symbol در جاوا اسکریپت

در این مطلب به معرفی نوع داده Primitive و یکتای Symbol، تفاوت آن با سایر انواع داده، نحوه استفاده از Global Symbol Registry با متدهای Symbol.for و Symbol.keyFor و همچنین کاربرد Symbol در کپسوله‌سازی و تعریف کلیدهای اختصاصی در اشیا پرداخته شده است.
برای مشاهده کامل این آموزش می‌توانید به لینک زیر مراجعه کنید:

[https://gnutec.net/javascript-symbol/]

🔖 #Javascript #JS #جاوااسکریپت

👤 ابوالفضل

💎 Channel: @DevelopixJavascript

🔥 پروژه: ‎دانلودر TikTok و Douyin

ابزار متن‌باز TikTokDownloader برای دانلود و جمع‌آوری داده از ویدئوهای TikTok و نسخه چینی آن Douyin طراحی شده 🛰️

به‌درد جاوااسکریپتی‌ها برای ساخت کرالرهای شخصی، داشبوردهای آنالیتیکس، تست الگوریتم‌های پیشنهاد محتوا و بازی با متادیتای ویدئوها می‌خورد.

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

⭐️ 154 stars this week

🔖 #Javascript #JS #جاوااسکریپت #جاوااسکریپت #پروژه_متن‌باز

💎 @DevelopixJavascript

💠 نسخه جدید ران‌تایم نود جی‌اس (NodeJS) منتشر شده است

🔸 ارتقا از نسخه 26.8.2 به 26.9.0

🔹 لیست تغییرات این نسخه:
- افزودن API عمومی برای MAC در ماژول crypto
- کشف خودکار cipherها از OpenSSL providerها در crypto
- کشف خودکار hashها از OpenSSL providerها در crypto
- فعال شدن پیش‌فرض ماژول FFI برای اتصال به کتابخانه‌های بومی
- معرفی node:bench و بهبودهای perf_hooks برای بنچمارک
- پشتیبانی Web Workers و API آزمایشی DTLS و تغییرات دیگر

🔖 #nodejs, #web, #js, #release

💎 @DevelopixJavascript

💠 نسخه جدید ران‌تایم نود جی‌اس (NodeJS) منتشر شده است

🔸 ارتقا از نسخه 26.9.0 به 26.10.0

🔹 لیست تغییرات این نسخه:
- افزودن تابع جدید crypto.parsePKCS12 برای پردازش PKCS12
- قابلیت بارگذاری کتابخانه‌ها از VFS در ffi
- اضافه شدن متد fs.openAsBlobSync برای کار با فایل به صورت Blob
- امکان ارسال net.BoundSocket به Thread و فرایند فرزند
- افزودن SlidingWindowHistogram و تحلیل qrde در perf_hooks
- بهبودهای متعدد دیگر در util، sqlite و غیره

🔖 #nodejs, #web, #js, #release

💎 @DevelopixJavascript

🔥 پروژه: مدیریت خودکار یوتیوب با عامل‌های AI

برای خودکارسازی کارهای یک کانال یوتیوب، این پروژه از عامل‌های AI استفاده می‌کند؛ ساخت، بهینه‌سازی و انتشار ویدیو را به‌صورت شبانه‌روزی انجام می‌دهد.

با API رایگان Gemini یا OpenAI کار می‌کند و برای استفاده از آن نیازی به کدنویسی نیست. برای توسعه‌دهندگان جاوااسکریپتِ علاقه‌مند به اتوماسیون، نمونه‌ای کاربردی از کنار هم قرار گرفتن عامل‌های AI در یک فرایند تولید محتواست.

برای آشنایی با مسیر راه‌اندازی، مخزن پروژه را ببینید 🎬

⭐️ 275 stars this week

🔖 #Javascript #JS #جاوااسکریپت #JavaScript #YouTube

💎 @DevelopixJavascript