بعد از ساعت ۶ عصر ، هیچ اتفاق مثبتی توی شرکت نمیفته. برو خونه دوست من.

این متن رو از روی قسمت ninja code سایت javanoscriptinfo حدود ۴ سال پیش نوشتم البته کاملا بومی سازی شده و میشه گفت تا ۵۰ درصد و بیشتر با متن اصلی فرق داره.

پیشنهاد میکنم بخونید.

چطوری یک برنامه‌نویس مزخرف باشیم؟

https://github.com/alithecodeguy/persian-javanoscript.info/blob/master/0026%20ninja%20code.pdf

اینم جالب بود

📜 قابلیت Web Worker در مرورگر چیست و چرا باید از آن استفاده کنیم؟

قابلیت Web Worker به شما اجازه می‌دهد که کدهای JavaScript را در یک thread جداگانه اجرا کنید، مستقل از thread اصلی مرورگر. این یعنی می‌توانید عملیات‌های سنگین را بدون تأثیر روی UI انجام دهید و رابط کاربری روان باقی بماند.

🔰 مزایای استفاده از Web Worker

• جلوگیری از هنگ کردن رابط کاربری در زمان انجام محاسبات سنگین
• اجرای عملیات پردازشی سنگین خارج از thread اصلی
• افزایش کارایی در اپلیکیشن‌هایی مانند:
- پردازش تصویر یا ویدیو
- تجزیه فایل‌های JSON حجیم
- مرتب‌سازی یا فیلتر داده‌ها
- انجام محاسبات بلادرنگ (Real-time)
- سینک شدن اطلاعات در پس‌زمینه

🌀 انواع Web Worker

1️⃣ نوع Dedicated Worker: مخصوص یک صفحه یا اسکریپت خاص است و فقط همان صفحه می‌تواند با آن ارتباط داشته باشد. مناسب برای پردازش تصویر و عملیات سنگین تک‌صفحه‌ای است.

- این نوع Worker برای اجرای عملیات پردازشی سنگین که نباید رابط کاربری (UI) را مختل کند، بسیار مناسب است.

- مثل یک نخ (thread) مجزاست که در پس‌زمینه اجرا می‌شود و از طریق ارسال و دریافت پیام با thread اصلی در ارتباط است.

ویژگی‌های اصلی Dedicated Worker

- فقط توسط اسکریپتی که آن را ساخته قابل دسترسی است
- در background اجرا می‌شود
- به DOM دسترسی ندارد
- با postMessage و onmessage داده رد و بدل می‌کند
- می‌توان از importScripts() برای بارگذاری اسکریپت‌های دیگر درون آن استفاده کرد
- هنگام اتمام کار می‌توان با terminate() آن را متوقف کرد
- باید از مسیر مجزا (URL) بارگذاری شود؛ نمی‌توان inline نوشت مگر با Blob
- می‌توان چند Worker همزمان ساخت
- می‌توان از structuredClone برای ارسال داده‌های پیچیده استفاده کرد

کاربردهای متداول Dedicated Worker

- پردازش سنگین ریاضی (محاسبه، شبیه‌سازی، الگوریتم‌ها)
- فیلتر کردن داده‌ها (مثلاً لیست‌های بزرگ)
- رمزنگاری یا هش کردن
- پردازش تصویر (فیلتر، بلور، resize)
- پارس کردن JSON یا فایل‌های بزرگ

‍main.js

const worker = new Worker("worker.js");

worker.postMessage("Hello Worker!");

worker.onmessage = function (e) {
  console.log("Received from worker:", e.data);
};

worker.js

onmessage = function (e) {
  console.log("Received from main:", e.data);
  postMessage("Hi Main!");
};

2️⃣ نوع Shared Worker: چندین صفحه یا تب می‌توانند به یک Shared Worker دسترسی داشته باشند. مناسب برای چت‌های همزمان بین چند تب یا مدیریت داده‌های مشترک است.

می‌تونه بین چند تب، iframe یا حتی چند اسکریپت در یک صفحه مشترک استفاده بشه.

برخلاف Dedicated Worker که فقط یک ارتباط بین یک صفحه و یک Worker برقرار می‌کنه، Shared Worker می‌تونه بین چند بخش مختلف از برنامه ارتباط مشترک ایجاد کنه.

ویژگی‌های اصلی Shared Worker

- قابلیت اشتراک‌گذاری بین چند تب یا iframe
- مدیریت داده‌ی مشترک بین چند بخش از یک یا چند صفحه
- ارتباط از طریق پورت (port) انجام می‌شه
- فقط یک نمونه در مرورگر ساخته می‌شه و همه‌ی تب‌ها از همون استفاده می‌کنن
- به DOM دسترسی نداره
- به‌درد اپلیکیشن‌های real-time یا multi-tab خیلی می‌خوره
- می‌تونی آرایه‌ای از portها رو درون Worker نگه داری و پیام‌ها رو به همه broadcast کنی
- از BroadcastChannel API هم می‌شه به‌صورت ترکیبی استفاده کرد
- فقط اولین بار که تب باز می‌شه Worker جدید ساخته می‌شه، بقیه تب‌ها به همون متصل می‌شن
- در برخی نسخه‌های قدیمی Safari و IE پشتیبانی نمی‌شه
ارتباط کمی پیچیده‌تر از Dedicated Worker داره چون از port استفاده می‌کنه
- باید حواست باشه که Worker ممکنه از قبل در حال اجرا باشه (shared lifecycle)

کاربردهای واقعی Shared Worker

- چت real-time بین تب‌ها
- هماهنگ‌سازی لاگین یا لاگ‌اوت بین تب‌ها
- نگهداری وضعیت session به‌صورت مرکزی
- اشتراک‌گذاری connection به WebSocket بین تب‌ها (صرفه‌جویی در منابع)
- اعمال throttle یا debouncing روی درخواست‌های همزمان از چند تب

shared-worker.js

onconnect = function (e) {
  const port = e.ports[0];
  port.onmessage = function (e) {
    port.postMessage("Shared: " + e.data);
  };
};

main.js

const worker = new SharedWorker("shared-worker.js");
worker.port.start();
worker.port.postMessage("Hi Shared Worker");

worker.port.onmessage = (e) => {
  console.log(e.data);
};

#worker @danceswithcode

ادامه در پست بعد

3️⃣ نوع Service Worker: مثل یک پروکسی بین مرورگر و شبکه عمل می‌کند. کاربرد آن بیشتر در PWAها، کش کردن منابع، و پشتیبانی از حالت آفلاین است.

ویژگی‌های کلیدی Service Worker

- در پس‌زمینه اجرا می‌شود
- مستقل از تب‌ها و صفحات است
- فقط از طریق HTTPS یا localhost کار می‌کند
- رویدادمحور (event-driven) است
- به DOM دسترسی ندارد
- می‌تواند حتی وقتی تب بسته است هم کار کند (مثلاً Push Notification)

Lifecycle (چرخه‌ی عمر)

۱. Install
برای اولین بار که Service Worker ثبت می‌شود، فایل آن نصب می‌شود. در این مرحله می‌توان منابع لازم را cache کرد.

۲. Activate
بعد از نصب موفق، فعال می‌شود. این مرحله برای پاک‌سازی cacheهای قدیمی هم کاربرد دارد.

۳. Fetch
هر بار که مرورگر درخواستی (مثلاً fetch یا load) ارسال می‌کند، Service Worker آن را رهگیری می‌کند و می‌تواند پاسخ را از cache یا شبکه بدهد.

استراتژی‌های caching مهم

۱. Cache First: اول از cache بخون، اگر نبود برو سراغ شبکه
۲. Network First: اول از شبکه بیار، اگر قطع بود از cache استفاده کن
۳. Stale-While-Revalidate: از cache نشون بده، در پس‌زمینه یک نسخه جدید بگیر
۴. Cache Only: فقط از cache استفاده کن
۵. Network Only: فقط از شبکه استفاده کن

معرفی ابزار حرفه‌ای: Workbox

ابزار Workbox کتابخانه‌ای از گوگل هست که ساخت و مدیریت Service Workerها را خیلی راحت‌تر و حرفه‌ای‌تر می‌کنه.

مزایا:
- سادگی استفاده
- پشتیبانی از استراتژی‌های caching مختلف
- تولید اتوماتیک فایل cache در زمان build
- عالی برای پروژه‌های React، Vue، Next.js و …

قابلیت‌های ویژه Service Worker

- Push Notification
دریافت پیام از سرور حتی وقتی تب بسته‌ست
- Background Sync
ارسال داده به سرور زمانی که اینترنت وصل می‌شود
- App Shell Model
مناسب برای PWAها؛ صفحات سریع و آفلاین
- Offline fallback
وقتی اینترنت قطع بود، صفحه‌ای مخصوص نشون بده

محدودیت‌ها و نکات امنیتی

- فقط در HTTPS یا localhost کار می‌کند
- به DOM دسترسی ندارد
- باید در root domain ثبت شود (مثلاً /sw.js نه /pages/sw.js)
- نسخه‌های قدیمی باید مدیریت شوند و cacheها پاک شوند
- زمان‌بندی دقیقی برای اجرای آن نیست (مرورگر تصمیم می‌گیرد)

کاربردهای واقعی Service Worker

- ساخت اپلیکیشن آفلاین (مانند Google Docs)
- ارسال اعلان بدون باز بودن تب
- کاهش مصرف داده با cache هوشمند
- نمایش fallback page هنگام قطعی اینترنت
- پشتیبانی از background sync برای فرم‌های آفلاین

⸻

Register it:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(() => console.log("SW Registered"));
}

sw.js

self.addEventListener('install', (event) => {
  console.log("Service Worker installing.");
});

self.addEventListener('fetch', (event) => {
  console.log("Intercepting fetch:", event.request.url);
});

#worker @danceswithcode

ادامه در پست بعد

4️⃣ نوع Module Worker: نوع جدیدی از Web Worker است که با type: "module" ساخته می‌شود و اجازه می‌دهد از import/export استفاده کنی. برای برنامه‌نویسی ماژولار در Web Worker بسیار مفید است.

- امکان استفاده از import/export در Worker
- سازگاری با معماری ماژولار (modular) و قابل نگهداری
- بدون نیاز به importScripts (که مخصوص اسکریپت‌های کلاسیکه)
- قابل استفاده در پروژه‌های مدرن با ابزارهایی مثل Vite، Webpack، Rollup و ESBuild
- پشتیبانی کامل در مرورگرهای مدرن (Chrome, Edge, Firefox, Safari)

math-worker.js

mport { heavySum } from './utils.js';

self.onmessage = (event) => {
  const n = event.data;
  const result = heavySum(n);
  self.postMessage(result);
};

utils.js

export function heavySum(n) {
  let sum = 0;
  for (let i = 1; i <= n; i++) {
    sum += i;
  }
  return sum;
}

main.js

const worker = new Worker('./math-worker.js', { type: 'module' });

worker.postMessage(1000000);

worker.onmessage = (e) => {
  console.log("✅ پاسخ از Module Worker:", e.data);
};

توجه: اگر type: "module" رو ننویسی، مرورگر فایل رو به‌صورت classic noscript تفسیر می‌کنه و استفاده از import/export باعث ارور syntax می‌شه.

- مسیر فایل باید نسبی یا مطلق صحیح باشه (./worker.js یا /js/worker.js)
- فایل‌ها باید از روی سرور (یا localhost) اجرا بشن — اجرا از فایل سیستمی (file://) معمولا خطا می‌ده
- اگر از ابزارهایی مثل Webpack یا Vite استفاده می‌کنی، باید loader مخصوص Web Worker یا plugin استفاده کنی
- نمی‌تونی از CDN (مثل unpkg) مستقیم توی Worker import کنی مگر اینکه CORS اجازه بده

const worker = new Worker("module-worker.js", { type: "module" });

module-worker.js

import { helper } from './helper.js';
onmessage = e => {
  postMessage(helper(e.data));
};

5️⃣ نوع Worklet: اسکریپت‌های بسیار سبک و کوچک که برای کارهایی مثل افکت‌های بصری (CSS Houdini) یا پردازش صدا (Web Audio API) به کار می‌روند. سریع و کم‌هزینه هستند ولی محدودتر از سایر Workerها.
مثل:
- 🎨 ‌CSS Houdini (Paint Worklet)
- 🔊 Web Audio API (Audio Worklet)
- 📐 Layout Worklet (درحال توسعه)

- نه thread جداگانه داره و نه access به اغلب APIهای معمول مرورگر
- در محیطی ultra-sandboxed اجرا می‌شه
- حتی خیلی از APIهای پایه (مثل fetch, setTimeout, console.log) هم در اون‌ها وجود نداره

مثال: Paint Worklet (CSS Houdini)

paint.js

registerPaint('circle', class {
  paint(ctx, geom, properties) {
    ctx.fillStyle = 'red';
    ctx.beginPath();
    ctx.arc(geom.width / 2, geom.height / 2, 40, 0, 2 * Math.PI);
    ctx.fill();
  }
});

Register in main.js:

if ('paintWorklet' in CSS) {
  CSS.paintWorklet.addModule('paint.js');
}

css

.my-box {
  width: 100px;
  height: 100px;
  background: paint(circle);
}

مرورگر در لحظه‌ی رندر paint(circle)، تابع paint() رو از فایل paint.js اجرا می‌کنه.

مثال: Audio Worklet

processor.js

class WhiteNoiseProcessor extends AudioWorkletProcessor {
  process(inputs, outputs, parameters) {
    const output = outputs[0];
    output.forEach(channel => {
      for (let i = 0; i < channel.length; i++) {
        channel[i] = Math.random() * 2 - 1;
      }
    });
    return true;
  }
}

registerProcessor('white-noise', WhiteNoiseProcessor);

main.js

const audioContext = new AudioContext();
await audioContext.audioWorklet.addModule('processor.js');
const node = new AudioWorkletNode(audioContext, 'white-noise');
node.connect(audioContext.destination);

این کد یک نویز سفید تولید می‌کنه که مستقیماً به اسپیکر وصل می‌شه.

#worker @danceswithcode

این مطلب در قالب سه پست ، تکمیل شد

☝️☝️☝️
۳ تا پست بالا رو از دست ندید. صفر تا صد web workerها رو یاد میگیرید. پیش نیاز چیزهایی مثل PWA هستش و علاوه بر اون توی مصاحبه‌ها گاها سوال می‌پرسن ازش
☝️☝️☝️

در Next.js برای پیاده‌سازی قابلیت‌های مشترک (common functionality) بین صفحات یا کامپوننت‌ها، استراتژی‌های مختلفی وجود دارد که می‌توان بسته به نیاز، بهترین روش را انتخاب کرد:

1️⃣ HOC (Higher-Order Components)

برای اعمال یک منطق مشترک به چندین کامپوننت (مثلاً احراز هویت، theme، لاگ کردن، ردیابی و…) می‌توان از HOC استفاده کرد.

// withAuth.tsx
const withAuth = (Component) => {
  return function AuthComponent(props) {
    const isLoggedIn = useSessionCheck()
    if (!isLoggedIn) return <Login />
    return <Component {...props} />
  }
}

2️⃣ Custom Hooks

برای منطق‌های قابل استفاده مجدد مثل fetch داده، فرم‌ها، انیمیشن، ریسپانسیو بودن، و… می‌توان از هوک‌های سفارشی استفاده کرد.

// useFetchData.ts
export const useFetchData = (url: string) => {
  const [data, setData] = useState(null)
  useEffect(() => {
    fetch(url).then(res => res.json()).then(setData)
  }, [url])
  return data
}

3️⃣ Layout های مشترک

برای اشتراک یک ساختار پایه مثل هدر، سایدبار، فوتر، در تمام صفحات.

- در Next.js 13 به بعد (app router):

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Navbar />
        <Sidebar />
        <main>{children}</main>
      </body>
    </html>
  )
}

- در pages router (نسخه‌های قبل):

// _app.tsx
function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

4️⃣ Middleware (برای درخواست‌های مشترک سمت سرور)

در نسخه‌های جدید Next، از Middleware برای انجام بررسی‌های مشترک قبل از رسیدن درخواست به صفحه استفاده می‌شود.

مثال: redirect کاربران مهمان، یا بررسی locale:

// middleware.ts
export function middleware(request: NextRequest) {
  const token = request.cookies.get('token')
  if (!token) {
    return NextResponse.redirect('/login')
  }
}

5️⃣ API Handler های مشترک

 js
// lib/api.ts
export const fetchUser = async () => {
  return await fetch('/api/user').then(res => res.json())
}

6️⃣ Context API / Zustand / Redux

برای اشتراک state بین صفحات و کامپوننت‌ها. مثلاً برای مدیریت session، theme، زبان و…

// app/provider.tsx
export const GlobalContext = createContext()

export function GlobalProvider({ children }) {
  const [user, setUser] = useState(null)
  return (
    <GlobalContext.Provider value={{ user, setUser }}>
      {children}
    </GlobalContext.Provider>
  )
}

7️⃣ Server Actions (در App Router)

در Next 13+ می‌توان logicهای server-side قابل اشتراک را به صورت تابع در فایل‌ها نوشت.

// app/actions/login.ts
export async function login(formData: FormData) {
  const res = await fetch('/api/login', { method: 'POST', body: formData })
  return res.json()
}

8️⃣ Utility Functions / Helpers

توابع کمکی مثل formatDate، validateEmail، calculateTotal و… را در پوشه‌ی lib/ یا utils/ تعریف کرده و در کل پروژه استفاده کنید.

// utils/format.ts
export const formatDate = (date: Date) =>
  new Intl.DateTimeFormat('fa-IR').format(date)

9️⃣ Shared Components

کامپوننت‌هایی مثل دکمه، مودال، فرم، toast notification و… را در یک پوشه components/shared/ نگه دارید.

🔟 Monorepo / Shared Packages (در پروژه‌های بزرگ یا microfrontend)

با استفاده از Turborepo یا Nx می‌توانید ماژول‌های مشترک بین چند پروژه را به شکل بسته مجزا نگه دارید.

#nextjs #commonfunctionality

کانال رقصنده با کد
@danceswithcode

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

ممنون میشم اگر دوره جاوااسکریپتی میشناسید که به نظرتون خیلی جامع و کامله ، همینجا معرفیش کنید تا برم سرفصل‌هاش رو بررسی کنم.

فقط خود pure javanoscript

پاورقی: دوره فارسی


سرفصل‌های مدنظرم خودم:

Session 1: Introduction to JavaScript
Session 2: Language Fundamentals
Session 3: Control Flow and Error Handling
Session 4: Functions (Basics)
Session 5: Advanced Functions (Context & Closures)
Session 6: Data Structures (Objects & Arrays)
Session 7: Prototypes and OOP in JS
Session 8: Built-in Objects & Advanced Types
Session 9: Asynchronous JS Part 1 – Event Loop & Callbacks
Session 10: Asynchronous JS Part 2 – Promises & Async/Await
Session 11: Iterators and Generators
Session 12: Metaprogramming (Proxies & Reflect)
Session 13: Modules (ES6 Modules and Old Modules)
Session 14: Advanced Topics & Best Practices
Session 15: JavaScript in the Browser – The DOM
Session 16: JavaScript on the Server – Node.js

چندتا تایم خالی در هفته برای بحث آموزش و منتورینگ وجود داره.
در صورت تمایل ، هستم در خدمتتون.

@alithecodeguy

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

آدم‌هایی که کار واقعی انجام نمیدن ، دنبال اینجور چیزان. (معمولا)

یه مدت دارم خودخوری می‌کنم که آیا خدا رو خوش میاد ۱۰ تومن بگیرم برای ۱۶ جلسه یا ظلمه. برای دوره‌ای که کل جاوااسکریپت رو پوشش میده ( به معنای واقعی کلمه ، کل جاوااسکریپت رو) ، البته هم وقتی میگم ۱۶ جلسه احتمالا یعنی ۲۵ جلسه اینقدر باب‌های جدید برای صحبت باز میشه 😅

اونوقت برای ریکت با کمی خرده ریز از تایپ و اسکریپت و اینجور چیزا ، ۱۸ تومن میگیرن!

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

میتونم به جرات بگم ، این مجموعه سوالات ، حداقل ۹۰ درصد سوالات یک مصاحبه معقول رو کاور میکنه 👌

جا داره حداقل نیم ساعت یک ساعت روی هر کدوم وقت بذارید.

اصلاً انتظار نداشتم اینطوری تموم بشه :)))))


@SixtyNinePercent

میپرسن کجا بریم کارآموزی؟

والا هندونه در بسته‌اس.

همونجور که کسی رو به کسی نباید معرفی کرد برای ازدواج ، شرکتی هم نباید به کارآموزی پیشنهاد داد.

وقتی میگیم بدونید دارید چیکار می‌کنید و مفاهیم رو از پایه یاد بگیرید ، در مورد همچین چیزی صحبت می‌کنیم!

اومده کی‌وردهاش رو گذاشته روی لینکدین ، آقا مهندس بلاکچین هم هستن. همین الان درجا میشه حسابشو خالی کرد.

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

پاورقی: دوستان اشاره کردن که کی‌وردها متن یه آهنگه

تمام متدهای آرایه در جاوااسکریپت

// — Mutable (in‑place) methods —

// push: adds to end
let arr = [1,2];
arr.push(3);              // [1,2,3]

// pop: removes from end
arr.pop();                // [1,2]

// shift: removes from front
arr.shift();              // [2]

// unshift: adds to front
arr.unshift(1);           // [1,2]

// splice: remove/insert in‑place
arr = [1,2,3,4];
arr.splice(1,2,'a','b');  // [1,'a','b',4]

// fill: replace all values
arr = [0,0,0];
arr.fill(7);              // [7,7,7]

// copyWithin: copy elements within array
arr = [1,2,3,4];
arr.copyWithin(1,2);      // [1,3,4,4]

// reverse: reverse in‑place
arr = [1,2,3];
arr.reverse();            // [3,2,1]

// sort: sorts in‑place
arr = [3,1,2];
arr.sort();               // [1,2,3]

// — Non‑mutating accessors —

// concat: merge arrays
[1,2].concat([3,4]);      // [1,2,3,4]

// slice: shallow sub‑array
[1,2,3].slice(1,3);       // [2,3]

// includes: check for value
[1,2,3].includes(2);      // true

// indexOf: first index
[1,2,3,2].indexOf(2);     // 1

// lastIndexOf: last index
[1,2,3,2].lastIndexOf(2); // 3

// join: to string
[1,2,3].join('-');        // "1-2-3"

// toString/toLocaleString: string form
[1,2,3].toString();       // "1,2,3"

// flat: flatten one level
[ [1,2], [3,4] ].flat();  // [1,2,3,4]

// flatMap: map then flatten
[1,2,3].flatMap(x => [x, x * 2]); // [1,2,2,4,3,6]

// — Iterative methods —

// forEach: loop with side-effects
[1,2,3].forEach(x => console.log(x));

// map: produce new array
[1,2,3].map(x => x * 2);  // [2,4,6]

// filter: select elements
[1,2,3,4].filter(x => x % 2 === 0); // [2,4]

// reduce: accumulate, left-to-right
[1,2,3,4].reduce((a, b) => a + b, 0); // 10

// reduceRight: accumulate, right-to-left
[1,2,3,4].reduceRight((a, b) => '' + a + b, ''); // "4321"

// every: all pass?
[1,2,3].every(x => x > 0); // true

// some: any pass?
[1,2,3].some(x => x > 2);  // true

// find: first matching value
[1,2,3,4].find(x => x > 2);      // 3

// findIndex: index of first match
[1,2,3,4].findIndex(x => x > 2); // 2

// findLast: last matching value (ES2023+)
[1,2,3,4].findLast(x => x > 2);      // 4

// findLastIndex: index of last match (ES2023+)
[1,2,3,4].findLastIndex(x => x > 2); // 3

// — Iterator methods —

// entries: [index, value] iterator
for (let [i, v] of [‘a’,’b’].entries()) console.log(i, v);

// keys: index iterator
for (let k of ['x','y'].keys()) console.log(k);

// values: value iterator
for (let v of ['x','y'].values()) console.log(v);

// [Symbol.iterator](): default iterator = values()
for (let v of [1,2]) console.log(v);

// — Generic & static methods —

// Array.of: make array from args
Array.of(1,2,3);           // [1,2,3]

// Array.from: from iterable or array‑like
Array.from('abc');         // ['a','b','c']

// — New immutable methods (ES2023+) —

// toReversed: reverse without mutating
[1,2,3].toReversed();      // [3,2,1]

// toSorted: sort without mutating
[3,1,2].toSorted();        // [1,2,3]

// toSpliced: splice immutably
[1,2,3,4].toSpliced(1,2,'a','b'); // [1,'a','b',4]

// with: replace element immutably
[1,2,3].with(1, 99);       // [1,99,3]

// — Properties —

// length: number of elements
[1,2,3].length;            // 3

#js #javanoscript

کانال رقصنده با کد
@danceswithcode

نمیدونم دقیق چطور توضیح بدم پس خواهشا توضیح نخواهید.

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

قطعا که نمیتونید کامل یاد بگیرید ولی تا جایی که می‌تونید تلاش خودتون رو کنید.

در حد اینکه شبی ۲ ساعت بخوابید و مثلا به مدت ۳ ماه آینده.

پاورقی: این صرفا پیشنهاد دوستانه‌اس. چالش‌اش نکنید.

طرف خیلی وضعش خراب بوده هی میگفته خداروشکر. میگن تو وضعت داغونه ، چی رو شکر می‌کنی؟
میگه من میگم شکر ولی اون خودش میدونه دارم چی میگم

لینک خبر توی کامنتا هستش

دوره جامع جاوااسکریپت
(با تمرکز فقط روی جاوااسکریپت مدرن)

پیش‌نیاز: ندارد

مخاطب : همه نفرات علاقه مند ( با سابقه یا بدون سابقه )

کاربرد : فرانت ‌اند ، بک‌اند ، موبایل و ...

تاریخ شروع :
۱۷ مرداد

تعداد جلسات : ۱۶ جلسه ۲ ساعته ( هر جمعه ۲ جلسه )

ساعت برگزاری : ۹ الی ۱۱ و ۱۱:۳۰ الی ۱۳:۳۰

رکورد : نخواهد شد.

جزوه : دارد (به زبان انگلیسی)

پشتیبانی بعد از دوره : ۱ ماه

هزینه دوره : ۵ میلیون تومان در صورت پرداخت ریالی و ۴.۵ میلیون تومان در صورت پرداخت رمزارز (دوج‌کوین)

سرفصل :

Session 1: Introduction to JavaScript
Session 2: Language Fundamentals
Session 3: Control Flow and Error Handling
Session 4: Functions (Basics)
Session 5: Advanced Functions (Context & Closures)
Session 6: Data Structures (Objects & Arrays)
Session 7: Prototypes and OOP in JS
Session 8: Built-in Objects & Advanced Types
Session 9: Asynchronous JS Part 1 – Event Loop & Callbacks
Session 10: Asynchronous JS Part 2 – Promises & Async/Await
Session 11: Iterators and Generators
Session 12: Metaprogramming (Proxies & Reflect)
Session 13: Modules (ES6 Modules and Old Modules)
Session 14: Advanced Topics & Best Practices
Session 15: JavaScript in the Browser – The DOM
Session 16: JavaScript on the Server – Node.js

پاورقی ۱ : تمرکز این دوره فقط روی جاوااسکریپت هست و تنها بخش کوچکی از دوره به دام و نود‌جی‌اس (صرفا به خاطر آشنایی) اختصاص پیدا می‌کنه

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

پاورقی ۳ : در صورت بروز شراط جنگی مثل همین جریان اخیر (متاسفانه) ، ۲۰ روز صبر می‌کنیم و اگر شرایط عادی نشد ، هزینه عودت داده میشه.

پاورقی ۴ : ممکنه تا ۲ جلسه ، جلسات جا به جا بشه ولی روز و ساعت برگزاری ثابته.

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

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

راه مستقیم ارتباطی :

@alithecodeguy

کانال رقصنده با کد:

@danceswithcode