+ جاوااسکریپت بلدی؟
- آره چطور؟
+ این کد زیر چیکار میکنه؟ تو کامنت ها بگو📣

i = i ? i < 0 ? Math.max(0, len + i) : i : 0;

💎بچه ها جوابشو حتما میزارم فقط لطف کنین کامل بررسیش کنین و تفسیرش کنین

#javascript
☕️ @CodeExplore

⚡️بیاین بریم امروز دوتا ابزاری که میشه باهاش با api های سمت بک اند ارتباط گرفت رو بررسی کنیم

‏💎‏ Fetch API چیه؟
‏fetch یه ابزار تو خود جاوااسکریپته که باهاش می‌تونی بری از سرور درخواست بدی و داده‌ها رو بگیری. این ابزار تو مرورگرهای جدید به‌طور پیش‌فرض هست، یعنی لازم نیست چیزی نصب کنی. خیلی ساده‌ست ولی یه جاهایی ممکنه اذیت کنه؛ مثلاً اگه سرور جواب بدی بهت، خودت باید بفهمی مشکل چیه، چون fetch فقط خطاهای خیلی بزرگ رو می‌گیره.

‏🔥 Axios چیه؟
حالا axios یه کتابخونه بیرونیه که باید نصبش کنی، ولی کلی امکانات باحال داره. مثلاً اگه سرور یه جواب بد بهت بده، خودش می‌فهمه و بهت میگه. این باعث می‌شه کار راحت‌تر بشه، مخصوصاً اگه پروژه پیچیده‌تر باشه. یه خوبی دیگه‌اش اینه که حتی اگه مرورگر قدیمی داشته باشی، بازم کار می‌کنه. از همه مهم‌تر، کلی قابلیت اضافه داره، مثل اینکه می‌تونی درخواست‌ها رو کنسل کنی، یا براشون تایم‌اوت بذاری، یا قبل از اینکه درخواست بره به سرور، توکن احراز هویت رو خودکار بهش اضافه کنی.

💥 خلاصه‌ی تفاوت‌ها:
- مدیریت خطاها: axios خودش خطاهای سرور رو مدیریت می‌کنه، ولی fetch نه.
- سازگاری با مرورگرها: axios حتی تو مرورگرهای قدیمی هم کار می‌کنه.
- امکانات بیشتر: axios کلی ابزار اضافه داره که کار رو راحت‌تر می‌کنه.

مثال‌ها:
- مثال ساده با `fetch`:

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('HTTP error ' + response.status);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

- مثال ساده با `axios`:

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('Axios error:', error));

⭐️ جمع‌بندی:
اگه دنبال یه راه سریع و ساده برای کارای معمولی هستی، fetch بد نیست. ولی اگه قراره پروژه‌ات بزرگ‌تر باشه و نیاز به امکانات بیشتری داری، axios کارتو خیلی راحت‌تر می‌کنه.

#fetch #axios #javascript
☕️ @CodeExplore

استفاده از کاما به عنوان اوپراتور در جاوااسکریپت ✌️

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

let x = (1, 2, 3, 4);
console.log(x); // خروجی: 4

#javascript #js #trick
☕️ @CodeExplore

لینک بی عمل در جاوااسکریپت ✌️

⚡️با این کد میتونید یک لینک درست کنید که دقیقا هیچکاری نمیکنه، نه صفحه جدیدی باز میکنه، نه هشتگی توی url میزاره و نه هیچی.

<a href="javascript:void(0);">Click Me!</a>

#html #js #javascript #trick
☕️ @CodeExplore

نتیجه اجرای این کد کدوم گزینه هست؟

(function() {
  var a = b = 5;
})();

console.log(typeof a);
console.log(typeof b);

#javascript #js #quiz
☕️ @CodeExplore

برچسب گذاری شرط ها ( Labelled Statements ) در جاوااسکریپت ✌️

💎در جاوااسکریپت می‌تونید به هر statement یک برچسب (label) اختصاص بدید و بعد از اون برچسب برای کنترل جریان برنامه استفاده کنید. این ویژگی بیشتر برای کنترل جریان در حلقه‌ها (loops) به کار می‌ره. این مثال رو ببینیم تا بهتر متوجه کاربردش بشیم:

outerLoop: for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
        if (i === 1 && j === 1) {
            break outerLoop;
        }
        console.log(`i = ${i}, j = ${j}`);
    }
}

✔️در واقع خروجی به این شکله:

i = 0, j = 0
i = 0, j = 1
i = 0, j = 2
i = 1, j = 0

✨و وقتی که i و j هر دو برابر 1 میشن، لوپ بزرگتر ما break میشه و میره خونشون.
و برنامه میره ادامه کارش(یا مثل این مثال، تموم میشه)

#javascript #js #trick
☕️ @CodeExplore

کاربرد اعداد BigInt در جاوااسکریپت ✌️

میدونستین توی جاوااسکریپت این شرط برقراره؟

console.log(9999999999999999 === 10000000000000000);
 // true

اما چرا؟ چون توی جاوااسکریپت، بزرگترین عدد صحیحی که می‌تونین با دقت کامل توی متغیرها ذخیره کنید، Number.MAX_SAFE_INTEGER هست که برابر با 9007199254740991 است. اگه عددی بزرگتر از این باشه، جاوااسکریپت دیگه نمی‌تونه به درستی اون رو مدیریت کنه و مقایسه‌اش دقیق نیست.

راه حلش چیه؟ باید اعدادتون رو BigInt تعریف کنید. چطوری؟ اینطوری:

let bigNumber = 1234567890123456789012345678901234567890n;
console.log(bigNumber); 

//1234567890123456789012345678901234567890n

البته میتونید اینکار رو هم بکنید:

let number= 42
let bignumber = BigInt(number)

#javascript #js #trick
☕️ @CodeExplore

جاوااسکریپت چطوری خلق شد؟ ✌️

📌یه نکته جالب درباره جاوااسکریپت که خیلی‌ها نمی‌دونن اینه که جاوااسکریپت در اصل در ۱۰ روز توسط یک برنامه‌نویس به نام برندان آیک ساخته شد! اون زمان شرکت Netscape به سرعت به یه زبان اسکریپت‌نویسی برای وب نیاز داشت تا بتونه با رقبا رقابت کنه. این زبان اول به نام Mocha معرفی شد، بعد اسمش شد LiveScript و نهایتاً برای استفاده از شهرت جاوا، اسمش رو به جاوااسکریپت تغییر دادن، با اینکه ارتباط زیادی با جاوا نداره.

💥در واقع، جاوااسکریپت خیلی سریع طراحی شد و انتظار نمی‌رفت که تبدیل به یکی از مهم‌ترین زبان‌های وب بشه!

#javascript #js
☕️ @CodeExplore

تناقض عجیب در جاوااسکریپت ✌️

🙂خب میدونین که از typeof برای تشخیص دادن جنس مقادیر استفاده میشه، مثلا اگر بنویسیم

console.log(typeof 1);

بهتون خروجی number رو برمیگردونه. حالا، بیاین ببینیم اگر بهش null بدیم چی میشه؟

console.log(typeof null)
//خروجی: object

🤯چرا؟ در واقع null توی جاوااسکریپت به عنوان آبجکت شناخته میشه، این داستان یه باگ تاریخیه توی جاوااسکریپت، که از نسخه های ابتداییش مونده و به دلایلی برای سازگاری عقب رو نگه داشتنش و هنوزم وجود داره.

خلاصش که توی جاوااسکریپت null به عنوان یه آبجکت شناخته میشه در حالی که واقعا شئ نیست و به عنوان "هیچی" میشناسیمش 🥲

#javascript #js
☕️ @CodeExplore

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

🔗 JavaScript.info

#site #javascript #js
☕️ @CodeExplore

خروجی این کد چیه؟

(function() {
  var a = b = 5;
})();

console.log(b);

#js #javascript #quiz
☕️ @CodeExplore

چرا نباید از setTimeout در جاوااسکریپت استفاده کنیم؟ مرهم این موضوع 👀

❗️ در جاوااسکریپت، setTimeout یک تابع پرکاربرد برای اجرای کد بعد از گذشت زمانی مشخص است. اما استفاده از این تابع می‌تواند مشکلاتی ایجاد کند که به مرور باعث کاهش کارایی و افزایش پیچیدگی کدها می‌شود. در این مقاله، به دلایل اصلی عدم استفاده از setTimeout و جایگزین‌های بهتر مانند Promise و async/await می‌پردازیم.

🌕 برای مشاهده کامل مقاله کلیک کنید.

#js #javascript #settimeout #promise #async #await #tricks #tips #programming
☕️ @CodeExplore

‏WebAssembly در فرانت‌اند: تحولی برای عملکرد بالاتر 🔥

📣‏WebAssembly (Wasm) یکی از جدیدترین تکنولوژی‌ها در دنیای وب هست که به توسعه‌ دهندگان امکان می‌ده تا کدهای سطح پایین و بهینه‌ای رو روی مرورگرهای وب اجرا کنن. این تکنولوژی برای برنامه‌هایی که به سرعت و عملکرد بالایی نیاز دارن، مثل بازی‌های وب و برنامه‌های محاسباتی سنگین، بسیار کاربردی هست. در این مقاله، به بررسی WebAssembly، مزایای آن در فرانت‌اند، و چگونگی استفاده از آن خواهیم پرداخت.

🌕 برای مشاهده کامل مقاله کلیک کنید.

#webassembelly #frontend #js #html #css #javascript #programming
☕️ @CodeExplore