📚کتابخانه lodash چیه و چه مزایایی داره؟

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

🔵 کاربردهای Lodash:

◀️کار با آرایه‌ها: Lodash توابع مختلفی برای پیمایش، فیلتر کردن، مرتب‌سازی و دستکاری آرایه‌ها ارائه میده.

◀️کار با اشیاء: Lodash توابعی برای دسترسی به مقادیر اشیاء، بررسی وجود خواص، ادغام اشیاء و موارد دیگر ارائه میده.

◀️توابع: Lodash توابع مختلفی برای ایجاد، ترکیب و curry کردن توابع ارائه میده.

◀️اعداد: Lodash توابعی برای انجام محاسبات ریاضی و دستکاری اعداد ارائه میده.

◀️رشته‌ها: Lodash توابعی برای دستکاری رشته‌ها مانند برش، جایگزینی و تبدیل به حروف بزرگ و کوچک ارائه میده.

◀️مجموعه‌ها: Lodash توابعی برای کار با مجموعه‌ها، مانند مجموعه‌ها و نگاشت‌ها ارائه میده.

⚡️مزایای استفاده از Lodash:

✅کاهش حجم کد: Lodash توابع زیادیو ارائه میده که می‌تونن به شما کمک کنن تا کدتونو کوتاه‌تر و خواناتر کنید.

✅افزایش کارایی: Lodash توابعیو ارائه میده که به شما کمک می‌کنن تا کدتونو کارآمدتر کنید.

✅کاهش خطا: Lodash توابعیو ارائه میده که به شما کمک می‌کنند تا از خطاهای رایج در برنامه‌نویسی جلوگیری کنید.

برای اطلاعات بیشتر و نحوه استفاده از این کتابخانه، میتونید به داکیومنتش مراجعه کنید 😎

Document 🌕

#lodash #library #js
@CodeModule

متد entries در جاوا اسکریپت ⌨️

این متد توی ES6 معرفی شده و مخصوص آرایه ها هست. با استفاده از متد ()entries میتونیم آیتم های یک آرایه در قالب یک شئ قابل تکرار یا ( Iterator ) در خروجی به نمایش در بیاریم.

📱 مثال:

var MyFriends = ["Reza","Ali","Shahin","Mani","Hesam"];
var result = document.getElementById("Result");
 
var MyIterator = MyFriends.entries();
 
for ( MyItem of MyIterator ) {
result.innerHTML = result.innerHTML + MyItem + "<br>";


در مثال بالا در خط ۶ ، اول آرایه مون رو به یک شئ قابل تکرار تبدیل کردیم، بعدش در خط ۸ و با استفاده از حلقه For/of اومدیم آیتم های همین شئ قابل تکرار رو در خروجی به نمایش درآوردیم.

پس در خروجی ۲ بخش داریم، [ کلید یا شماره ایندکس آیتم ] + [ مقدار آیتم ]
}

❗️همچنین با استفاده از این متد دیگه به ارور های شایع موقع پیمایش آرایه ها مثل ″Array is not iterable" بر نمیخوریم.


#js #debug #es6
@CodeModule

توی این پست میخوایم به فریم ورک خفن Nest.js بپردازیم 😎

🌦 اول از همه، باید بدونیم NestJS دقیقا چیه؟

در واقع NestJS یک فریمورک Node.js برای توسعه سیستم های بزرگ و چالش برانگیزه. با استفاده از این فریمورک، شما میتونید برنامه های مقیاس پذیر و آزمایش پذیر رو تو چارچوبی مشخص و ساختاری بسیار مناسب ایجاد کنید.

🏤 فریم ورک NestJS به طور قابل توجهی تحت تأثیر Angular هست و یکی از ویژگی های مهم اون، dependency injection هست؛ این ویژگی، امکان تزریق یک ماژول به ماژول دیگرو فراهم میکنه و استفاده مجدد از کد رو خیلی بهینه تر میکنه.

‼️چرا باید از Nest.js استفاده کنیم ؟

🔴استفاده از Typescript

🔴معماری ماژولار

🔴تزریق وابستگی (Dependency Injection)

🔴اعتبارسنجی داخلی

🔴پشتیبانی از وب سرویس های مختلف

🔴جامعه برنامه نویسان فعال

در حالی که Express.js هنوز یک فریمورک محبوب و پر کاربرد برای ساخت برنامه های وب با Node.js هست، NestJS طیف وسیعی از مزایا و ویژگی های اضافی رو ارائه میده که میتونه به شما تو ساخت برنامه های مقیاس پذیر، قابل توسعه و مطمئن تر کمک کنه.

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

برای یادگیری فریم ورک Nest.js میتونید به داکیومنتش مراجعه کنید.⚡️

Document 🌕

#nestjs #framework #nodejs #js
@CodeModule

✌️ یک کتاب جامع و خوب برای توسعه دهنده های JavaScript

📖کتاب Eloquent JavaScript یک کتاب خوب برای یادگیری مباحث پایه ای و کاربردی جاوااسکریپته که برای افرادی که میخوان دانش جاوااسکریپتیشونو تقویت کنن مناسبه.

#book #js
@CodeModule

🫒 با کتابخانه Rx.js بیشتر آشنا بشید

در اصل RxJS یک کتابخانه برای ترکیب برنامه‌های ناهمگام و مبتنی بر رویداد (events) با استفاده از دنباله‌های Observable هست. این کتابخانه یک نوع اصلی به نام Observable، core type  (Observer، Schedulers، Subjects) و اپراتورهای الهام گرفته از متدهای Array (map، filter، reduce، every و ...) رو فراهم میکنه تا بتونن تسک های asynchronous رو هندل کنن.


✅ویژگی‌های اصلی RxJS عبارتند از:

🟣ایجاد Observable ها برای داده‌ها

🟣انتقال، تبدیل و ترکیب داده‌ها با استفاده از عملیات‌های متداول مانند map، filter، reduce و ...

🟣مدیریت خطاها و مدیریت وقفه‌ها (error handling and retrying)

🟣پشتیبانی از ایجاد ایونت‌ها (events)

🟣دارای اپراتورهای مختلف جهت کنترل جریان داده‌ها

🟣امکان کنترل زمان اجرای عملیات‌ها با استفاده از تایم‌اوت

🟣پیاده‌سازی مفهوم Backpressure برای مدیریت فشار دریافت داده

‼️اگر پروژه هاتون پر از تسک های async هست استفاده از Rx.js گزینه خوبی می‌تونه باشه.


🏤 همچنین Rx.js به طور پیش‌فرض یا دیفالت با پروژه های انگولاری لود میشه.

برای یادگیری این کتابخانه میتونید به داکیومنتش مراجعه کنید 🔥


Document 🌕

#rxjs #library #js
@CodeModule

شکل های گرافیکی 3D با Three js 😍

در واقع Three.js یک کتابخانه بین مرورگر جاوا اسکریپت و رابط برنامه نویسی برنامه (API) هست که، برای ایجاد و نمایش گرافیک‌‌‌های کامپیوتری متحرک سه بعدی در یک مرورگر وب با استفاده از WebGL استفاده‌‌ میشه.
 
❓کتابخانه three js چجوری کار می‌کنه ؟

کتابخانه Three.js امکان ایجاد انیمیشن‌‌‌های سه بعدی با شتاب واحد پردازش گرافیکی (GPU) رو با استفاده از زبان جاوا اسکریپت به عنوان بخشی از یک وب سایت بدون تکیه بر افزونه‌‌‌های اختصاصی مرورگر فراهم‌‌ میکنه. این به دلیل ظهور WebGL امکان پذیره و یک API گرافیکی سطح پایین که به طور خاص برای وب ایجاد شده. کتابخانه‌های سطح بالا مثل Three.js یا GLGE ، Scene.js ، PhiloGL ، (که در آینده براشون پست خواهیم داشت) و ...

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

🧰 امکانات جذاب این کتابخانه:

◀️افکت‌ها

◀️پرسپکتیو و آتوگرف

◀️انیمیشن

◀️نورپردازی حرفه ای

◀️ اشیاء و آبجکت‌ها

با استفاده از این کتابخانه جذاب و حرفه ای میتونید داخل سایت هاتون از شکل های گرافیکی حرفه ای استفاده کنید که افراد زیادی رو محو خودش می‌کنه و سایت شمارو زیبا و خاص نشون میده 🚀

برای یادگیری این کتابخانه میتونید به داکیومنتش مراجعه کنید 🔥

Document 🌕

#js #library #threejs #3d
@CodeModule

💻 ران تایم Deno js چیه؟ آیا جایگزین nodeJs محسوب میشه؟

در واقع Deno.js یه محیط Runtime برای اجرای کدهای جاوااسکریپت و تایپ اسکریپت روی موتور V8 گوگل (همون موتوری که nodejs رو اجرا میکنه) هست. Denojs بهشت برنامه نویسای تایپ اسکریپته چرا که اتوماتیک کدهای Typescript رو به Javascript تبدیل میکنه و بعد اجراش میکنه

🔵ران تایم Deno js با زبان برنامه نویسی Rust نوشته شده و با هدف رفع مشکلات Nodejs ساخته شده.


🤟 این ران تایم چه مشکلاتی از Node.js رو رفت کرد ؟

باید بگیم که مشکلاتی مثل Dependecy ها، کتابخانه ها، ماژول ها، ابزار tooling و امنیت رو رفع کرد و یه جورایی رقبایی که بخاطر این مشکلات برای جاوااسکریپت شاخ شدن رو یه بار دیگه از میدون خارج کرد.


✅مزایای Deno js نسبت به Node js چیه؟

1⃣ امنیت بیشتر Deno js نسبت به nodejs

🔢 کتابخانه استاندارد کامل تر Deno به نسبت کتابخانه پیش فرض Node

🔢 در Deno js هیچ اجباری در استفاده از NPM ندارید

🔢 در deno js نیازی به Package.json نیست تا Dependencyها رو کنترل کنید

🔢 در Deno js نیازی به Node_modules نیست

🔢 استفاده از تایپ اسکریپت به صورت مستقیم.


🧐آیا Denojs جایگزین Nodejs میشه؟

چون Deno js نسبتا تازه معرفی شده و نسخه رسمیش ۴ ساله که اومده برای اثبات خودش نیاز به گذر زمان بیشتری داره تا بیشتر جواب پس بده و این مواردی که گفته شد بر اساس مستندات و گفته های توسعه دهنده هاشه.

⚠️نکته بعدی اینه که میلیون ها پکیج و کتابخانه برای Nodejs وجود داره اما هیچ کدوم برای استفاده از دینو استاندارد نشدن و شاید بیشتر زمان نیاز داره تا این اتفاق بیوفته. پس اینکه بگیم Deno.js جایگزین Node میشه شاید بیشتر زمان ببره تا همه انتظارات node در deno براورده بشه.


#denojs #runtime #js
@CodeModule

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

در حوزه انجین های جاوا اسکریپت، شیوه کامپایل Just-In-Time (JIT)، اجرای کد رو متحول کرده و عملکردی رو افزایش میده که زبان های برنامه نویسی dynamic scripting رو به سرعت زبان های کامپایل شده نزدیک میکنه.

کامپایل سازی Just-In-Time تکنیکیه که به موجب اون کد جاوا اسکریپت در runtime به جای (AOT) به کد نیتیو ماشین کامپایل میشه. این رویکرد مزایای تفسیر (flexibility و portability) و کامپایل رو برای بهینه سازی سرعت اجرای کد ترکیب میکنه.

‼️چجوری JIT تو جاوا اسکریپت کار میکنه؟

در حالی که مفسرهای سنتی کد منبع رو مستقیماً (و نسبتاً آهسته) میخونن و اجرا می کنن، موتورهای دارای JIT یک لایه اضافی ایجاد می کنن. موتورهای جاوا اسکریپت مثل V8 (Chrome)، SpiderMonkey (Firefox) و JavaScriptCore (Safari) کد بایت تفسیر شده رو دریافت میکنن و اون رو به سرعت در یک کد ماشینی سریع‌تر و بهینه‌سازی کامپایل می‌کنن که پردازنده می‌تونه کارآمدتر اجرا کنه.

✅مزایای کامپایل به شیوه JIT چیه ؟

🟡Performance Improvements

🟡Platform Independence

🟡On-the-Fly Optimization


کامپایل Just-In-Time یک تغییر بزرگ برای جاوا اسکریپت بوده و به دولوپرا این امکانو میده تا برنامه های کاربردی با کارایی بالا رو بدون از دست دادن راحتی و انعطاف زبان بنویسن. با کامپایل کردن کد در زمان اجرا، کامپایلرهای JIT مانند V8 و SpiderMonkey اطمینان حاصل می کنن که جاوا اسکریپت در دنیای پر سرعت توسعه وب رقابتی باقی میمونه، بدون اینکه دسترسی و تطبیق پذیری اون به خطر بیوفته. با پیشرفت‌های مداوم در فناوری JIT، میشه انتظار داشت که موتورهای جاوا اسکریپت زمان‌های اجرای سریع‌تریو ارائه بدن و همگام با منظره وب در حال تحول باشن.


#js #engine #jit
@CodeModule

✌️ 100 سوال مصاحبه ای جاوا اسکریپت

ریپازیتوری های زیر، هر کدوم 100 سوال متداول جاوا اسکریپتی، همراه با پاسخ دارن که بهتون پیشنهاد میکنم حتما یه سر بزنید

🐱 https://github.com/sudheerj

🐱 https://github.com/ganqqwerty

🐱 https://github.com/lydiahallie


#js #interview
@CodeModule

✌️ در جاوا اسکریپت بدون استفاده از کتابخانه، متن رو به گفتار تبدیل کن !

✅با پراپرتی speechSynthesis این کار به راحتی امکان پذیره!

وظیفه speechSynthesis، ایجاد و کنترل صدای گفتاری (تبدیل متن به گفتار) هست.
برای استفاده از speechSynthesis، میتونید از متدهای مختلفی استفاده کنید تا متن مورد نظر و به گفتار تبدیل، و کنترل کنید (جلوتر ازشون نام میبریم).

برای شروع ابتدا باید یک آبجکت از جنس SpeechSynthesisUtterance بسازیم تا امکان استفاده از پراپرتی speechSynthesis رو داشته باشیم:

let to_speak = new SpeechSynthesisUtterance('this is a test'); 
 
speechSynthesis.speak(to_speak); 

🔵در خط اول کد بالا، یک شئ از جنس SpeechSynthesisUtterance ساختیم و نیازه که یک پارامتر بهش پاس بدیم که اون پارامتر، باید یک string باشه که بتونه اون string رو تلفظ کنه.

🔵در مرحله بعد ما برای اینکه بتونیم متن رو تلفظ کنیم، باید speechSynthesis رو صدا کنیم که خودش شامل چندین متد از جمله speak ، pause ، resume و ... میشه که جهت کنترل صدا هست. اینجا برای تبدیل متن به گفتار نیازه که از متد speak استفاده کنیم.

👨‍💻متد speak جهت تلفظ متن استفاده میشه، بنابراین این متد رو به speechSynthesis اضافه میکنیم و آبجکتی که اول ساختیم و به عنوان پارامتر بهش پاس میدیم و کار تمام.

⚠️این پراپرتی در تمام بروزر ها ساپورت میشه و با مشکل مواجه نخواهید شد.


#js #web
@CodeModule

🤯متد های کاربردی Console که نمیدونستی!

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


⚡️انواع متد ها و کاربردهاشون:

1️⃣متد log: برای چاپ کردن اطلاعات دلخواه اعم از متن ، عدد ، آبجکت ، آرایه ، ‌و ... در کنسول مرورگر

console.log("CodeModule")

2️⃣متد info: برای خروجی اطلاعات آموزنده روی کنسول‌ (درباره موضوعی میخواید اطلاعات کمک کننده بدید)

console.info("CodeModule is the best")

3️⃣متد error: برای خروجی خطا روی کنسول که متن دلخواه شما رو به شکل ارور در کنسول چاپ میکنه

console.error("this is a error")

4️⃣متد warn: برای خروجی اخطار روی کنسول که متن دلخواه شما رو به صورت هشدار (با رنگ زرد) در کنسول چاپ میکنه

console.warn("this is a warn")

5️⃣متد clear: برای پاک کردن کنسول از همه لاگ ها و ارور ها و ...

console.clear()

6️⃣متد time و timeEnd : برای نشان دادن طول مدت اجرای یک تکه کد استفاده میشه

   console.time("myTimer is start");
   // some code here
   console.timeEnd("myTimer is end");
  

7️⃣متد table: برای نمایش داده‌ها به‌صورت جدول روی کنسول، که خیلی کاربردیه!

   const names = ["mahan", "shahin", "ghasem"];
   console.table(names); 

با یادگیری این متد ها، میتونید خیلی حرفه ای تر و راحت تر با کنسول کار کنید و خروجی ها و مشکلات کد هارو، دقیق تر بررسی کنید 🏖️


#console #js
@CodeModule

😎دیتابیس لوکال در مرورگر، با indexed DB !

در این پست به بررسی API IndexedDB و کاربرد اون خواهیم پرداخت. اما آیا تا حالا اسم دیتابیس NoSQL به گوشتون خورده؟ 🧐

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

⚠️تنها عیبی که که این سیستم داره، یادگیری پیچیده تر و سخت تر نسبت به باقی سیستم های ذخیره سازیه.

🔵 ویژگی های indexedDB

⚡️قدرتمند

⚡️ذخیره حجم بیشتری از داده، به نسبت سایر سیستم های ذخیره سازی

⚡️انعطاف ذخیره برای انواع داده ها

⚡️قابلیت استفاده به صورت آنلاین و آفلاین


✅سیستم ذخیره سازی indexedDB چه قابلیت هایی داره ؟

عملیات بسیاری وجود داره که میتونه در IndexedDB انجام بشه. برخی از عملیات ها عبارتند از :

🟢خوندن / سرچ داده‌های موجود در object store بر اساس key

🟢خوندن / سرچ داده‌های موجود در object store بر اساس index

🟢به روزرسانی داده‌های یک رکورد

🟢حذف یک رکورد

🟢اضافه کردن یک رکورد


❌محدودیت های indexedDB چیه ؟

🔴برخی مرورگرها مثل IE پشتیبانی کاملی ازش ندارن.

🔴مرورگر Firefox در حالت Private Browsing، به طور کامل IndexedDB رو غیر فعال می‌کنه.


در نهایت اگه پروژتون نیاز به ذخیره سازی داده‌های پیچیده و ساختاری داره، و همچنین نیاز به حجم بیشتری برای ذخیره سازی داده دارید، indexed DB گزینه مناسبی هست 🏖️


#js #indexeddb #nosql
@CodeModule

📊 با کتابخانه D3.js بیشتر آشنا بشید

در واقع D3.js که مخفف شده (Data-Driven Documents) هست، یک کتابخانه جاوااسکریپتی برای ایجاد data visualization های تعاملی بر اساس داده ها هست. این کتابخانه به عنوان یک ابزار قدرتمند برای ایجاد نمودارها، نقشه‌ها، چارت‌ها و دیگر data visualization ها با استفاده از HTML، SVG و CSS شناخته میشه.

✅مزایای استفاده از D3.js چیه ?

🟢قابلیت کاستومایز سازی

🟢امکان تعامل با کاربر

🟢امکان ادغام با داده‌های مختلف

🟢پشتیبانی از مجموعه وسیعی از نوع‌های visualization و امکانات بسیار قدرتمند، برای کنترل دقیق و نمایش داده‌ها.

❌معایب کتابخانه D3.js چیه ?

🔴یادگیری زمان بر

🔴نیازمند دانش قوی جاوااسکریپتی

🔴پیچیدگی بیش از حد برای پروژه های کوچیک


به طور کلی، D3.js یک ابزار قدرتمند برای ایجاد visualization های تعاملی بر اساس داده هست که با دانش مناسب میتونه به خوبی در پروژه‌های حرفه ای مورد استفاده قرار بگیره🔥

برای یادگیری این کتابخانه خفن و کاربردی میتونید به داکیومنتش مراجعه کنید.

Document 🌕

#d3js #library #js
@CodeModule

با تکنیکی به نام Memoization آشنا بشید ✌️

در برنامه نویسی، Memoization یک تکنیک بهینه سازیه که برنامه ها رو کارآمدتر و در نتیجه سریعتر می کنه. در اصل این کار رو با ذخیره نتایج محاسباتی در حافظه پنهان انجام میده و در درخواست های بعد به جای محاسبه مجدد، همون اطلاعات رو از حافظه نهان بازیابی می‌کنه.

به عبارت ساده‌ تر، شامل ذخیره کردن خروجی یک تابع در حافظه نهان و بررسی اینکه، آیا در هر اجرا محاسبات مورد نیاز از قبل در حافظه پنهان(کش) موجوده یا نه. کش صرفاً یک ذخیره‌سازی موقت داده هست که داده‌ها رو برای درخواست‌های آینده، نگه می‌داره تا عملکرد پروژه سریع تر باشه.

ممورازیشن در جاوا اسکریپت بر دو مفهوم متکی هست:

🔵Closures
🔵Higher Order Functions

برای روشن تر شدن موضوع، مثال کلاسیک دنباله فیبوناچی رو با ممورازیشن پیاده سازی میکنیم⬇️

const fib = (n, memo) => { 
    memo = memo || {} 
  
    if (memo[n]) {
        return memo[n];
    }
  
    if (n <= 1) {
        return n;
    }
  
    memo[n] = fib(n - 1, memo) + fib(n - 2, memo);
    return memo[n];
}
      

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

memo = memo || {} 
  

سپس بررسی می کنیم که آیا memo حاوی مقداریه که به عنوان پارامتر در کلیدهای خود دریافت کردیم؟ اگر این چنین باشه، مقدار اون رو برمی گردونیم و اینجا جاییه که جادو اتفاق میوفته. وقتی که مقدار مد نظر رو در memo ذخیره کردیم، دیگه نیازی به بازگشت بیشتر نیست.

if (memo[n]) {
return memo[n] 
}

اما اگه مقدار رو در memo نداشته باشیم، دوباره fib رو فراخوانی میکنیم، اما ایندفعه memo رو به‌عنوان پارامتر ارسال می‌کنیم، بنابراین توابعی که ما فراخوانی میکنیم همون مقادیر حافظه‌گذاری‌شده‌ای رو که در تابع “اصلی” داریم به اشتراک خواهند گذاشت. دقت کنید که نتیجه نهایی رو قبل از برگرداندن کش به حافظه پنهان اضافه می کنیم.

memo[n] = fib(n - 1, memo) + fib(n - 2, memo);  
return memo[n];
 

و تمام، با دو خط کد memoization رو پیاده سازی کرده ایم و عملکرد پروژه رو به طور قابل توجهی بهبود بخشیدیم.

🔵تکنیک Memoization تنها در مورد تابع‌های محض(pure functions) قابل اجرا هست.

درکل Memoization یک ترفند ساده اما قدرتمنده که میتونه به سرعت بخشیدن به کد ما کمک زیادی کنه، مخصوصاً وقتی با عملکردهای محاسباتی تکراری و سنگین سروکار داریم.

#memoization #js
@CodeModule

✌️ با پراپرتی Once در جاوا اسکریپت آشنا بشید!

🟡پراپرتی once در جاوا اسکریپت یک ویژگیه که در تنظیمات (options) های مربوط به متد addEventListener، استفاده میشه. این پراپرتی تعیین می‌کنه که یک event listener، فقط یک بار اجرا بشه و پس از اجرای اولیه به صورت خودکار حذف بشه. این ویژگی بهتون کمک می‌کنه تا از اجرای چندباره‌ی توابع مرتبط با رویدادها جلوگیری کنید.

سینتکس دستور Once در Event listener ها به صورت یک پارامتر درون یک آبجکت پاس داده میشه و مقدار true رو به خودش میگیره :

document.body.addEventListener('click', () => {
    console.log('CodeModule run only once :)) ');
  }, { once: true });

🟡در کد بالا زمانی که ما روی body کلیک میکنیم، فقط و فقط بار اول CodeModule run only once :)) رو لاگ میگیره و بعد از اون، هرچقدر که کلیک کنیم لاگی گرفته نمیشه. برای مثال از این پراپرتی میتونیم برای مدیریت فرم ها، کلیک روی یک دکمه برای نمایش پیام خاص، یا اجرای یک انیمیشن استفاده کنیم.

به طور کلی پراپرتی once یکی از قابلیت‌های مفید و کارآمد در مدیریت رویدادها در جاوا اسکریپته، که کدنویسی رو ساده‌تر و موثرتر می‌کنه 🔒

#js #trick
@CodeModule

✌️ با مفهموم ASI در جاوااسکریپت آشنا بشید!

‼️در زبان برنامه نویسی جاوااسکریپت، گذاشتن semicolon (;) در پایان دستورات و یا کد هامون اختیاریه، اما این اختیاری بودنش چه دلیلی داره؟

🟡درواقع ویژگی ASI یا Automatic Semicolon Insertion، یک ویژگی داخل زبان جاوااسکریپت هست که گذاشتن semicolon رو در پایان دستورات و یا کد های جاوااسکریپتی اختیاری می‌کنه، به طوری که parser جاوااسکریپت میاد موقع خوندن کد ها،خودش اتوماتیک semicolon رو در پایان کد ها و جاهایی که نیازه میزاره، تا دیگه مشکلی نباشه و کد به درستی خونده بشه.

🤨برای همین شما دیگه نیازی به گذاشتن semicolon در خط به خط کد ندارید.

🟡ولی این هم چند مزایا داره و هم چند معایب، مزایاش اینه که سرعت کد نویسی بالاتر میره و حتی از یکسری باگ هایی که بر اثر فراموشی گذاشتن semicolon بوجود میاد جلوگیری می‌کنه.

❌اما معایبش چیه؟ همونطوری که می‌تونه از به وجود اومدن باگ های ریز جلوگیری کنه، ممکنه خودش هم عامل به وجود اومدن باگ بشه، به طوری که با گذاشتن فضای خالی (Enter) بین کد ها میاد اخرشون semicolon میزاره که موجب بوجود اومدن SyntaxError یا مشکلاتی از این قبیل میشه.

🧐بهتره خودمون Semicolon بزاریم، یا به ASI بسپریم؟

راه حل عاقلانه اینه که تا جایی که میتونید به گذاشتن semicolon در پایان کد هاتون عادت کنید، تا وقتی که با یک زبان دیگه کد میزنید، دستتون عادت کرده باشه و هم از به وجود اومدن ارور های عجیب در کدهاتون، جلوگیری کنید 😉


#js #asi
@CodeModule

تفاوت immutable | mutable در ✌️

در ابتدا برای اینکه تفاوت mutable و immutable رو درک کنیم، نیازه که یک دانش کلی از primitive type ها و reference type ها داشته باشیم. پس بریم که اول یک یادآوری راجب این دو تا داشته باشیم 😉

🟡‏Primitive type ها چی هستن؟

در جاوا اسکریپت، primitive types شامل string ، Boolean و number و undefined میشه. این نوع دیتا ها در حافظه به صورت مستقل از هم ذخیره میشن و تغییرات بر روی یکی از این داده‌ها، تاثیری بر روی داده‌های دیگه نمیذاره که جلوتر با مثال بهتر درکشون میکنید.

🟡‏Refrence type ها چی هستن؟

در واقع reference types شامل array ،object و function میشه. در این حالت، داده‌ها به صورت cursor در حافظه ذخیره میشن و تغییرات بر روی یک متغیر، میتونه تاثیر گذار بر داده‌های دیگه باشه.

⚡️اما تفاوت mutable و immutable

در جاوا اسکریپت، immutable ها primitive types هستن، یعنی یکبار ایجاد میشن و قابل تغییر نیستن، به عنوان مثال:

let name = 'john';
let name2 = name;

console.log(name); //john
console.log(name2); //john

let name2 = 'doe';

console.log(name); //john
console.log(name2); //doe

در مثال بالا مشاهده کردیم، که در صورت اختصاص دادن مقدار name به متغیر name2، و تغییر دادن مقدار متغیر name2، هیچ تغییری در متغیر name ایجاد نمیشه و همون مقدار اولیه log گرفته میشه.


‼️اما mutable ها reference types هستن، یعنی مقدار اونا قابل تغییره، به عنوان مثال:

let person = {
    name: 'john',
    age: 22,
};

let person2 = person; 

console.log(person); //{name:'john' , age:22}

console.log(person2); //{name:'john' , age:22}

let person2.name = 'doe';

console.log(person); // { name: 'doe', age: 22 }

onsole.log(person2); // { name: 'doe', age: 22 }

در مثال بالا با اختصاص دادن مقدار آبجکت person به متغیر person2، و تغییر دادن پراپرتی ها و مقادیر person2، آبجکت prerson هم تغییر میکنه و یک مقدار مساوی log گرفته میشه.

✅بنابراین تفاوت اصلی بین mutable و immutable در قابلیت تغییر مقادیر هست. این تفاوت میتونه در مدیریت داده‌ها و پیاده سازی الگوریتم‌های مختلف تاثیرگذار باشه.

به طور کلی، استفاده از immutable types برای پایداری و پیچیدگی کمتر در پروژه مناسبه، در حالی که mutable types برای عملکردهای پویا و تغییرپذیر مناسبه که نسبت به نیازتون، میتونید ازشون استفاده کنید 🏖️

#js #refrence #primitive
@CodeModule

✌️ معرفی 6 کتاب برای یادگیری عمیق‌تر جاوا اسکریپت

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

⚡️️You Don't Know JS (6 part)

⚡️JavaScript: The Definitive Guide

⚡️Learning JavaScript Design Patterns

⚡️High-Performance JavaScript

⚡️JavaScript: The Missing Manual

⚡️How JavaScript Works


#js #book
@CodeModule

5 کتابخانه کاربردی CSS-in-JS 🚀

کتابخانه‌های موسوم به CSS-in-Javascript، اخیرا به شدت روند رو به رشدی داشتن و در حال محبوب شدن هستن. در این پست ۵ کتابخانه مطرح و مرتبط با این موضوع رو براتون جمع آوری کردم⬇️

1️⃣STYLED COMPONENTS

2️⃣JSS

3️⃣EMOTION

4️⃣RADIUM

5️⃣STYLETRON

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

#css #js
@CodeModule