💎 معرفی نرم افزار یا ابزار RunJS

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

💬 نکته مهم: کد های شما با موتور v8 ران خواهد شد.

💡 پیشنهاد: اگه از کد ادیتور VSCode یا IDE پی اچ پی استورم استفاده می کنید پیشنهاد می کنم از اکستنشن Quokka استفاده کنید این اکستنشن همانند RunJS عمل میکنه با این تفاوت که روی خود IDE شما نصب میشه.

#معرفی_نرم_افزار #جاوااسکریپت


🌐 @pieceJS

💎 تفاوت Shallow Copy و Deep Copy

🌐 @pieceJS

💎 تفاوت Shallow Copy و Deep Copy

یکی از مهم ترین مباحث جاوا اسکریپت که یادنگرفتن اون گاهاً موجب بروز خطا های لاجیکال خواهد شد و از اونجایی که خطا لاجیکال هست (یعنی نرم افزار بدون خطا کار میکنه ولی جوابی که میده اونی نیست که ما میخوایم) عیب یابیش نیاز به دانش عمیق جاوا اسکریپته و خلاصه کلی درد سر داره.🤯

فرض کنید یک آرایه داریم به نام myArray و قصد دارید ازش یه کپی بسازید به نام myArray2. معمولاً برای اینکه رفرنس کپی صورت نگیره، از Spread Operator استفاده می کنیم یعنی مینویسیم

 myArray2 = [...myArray] 

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

اگه قصد دارید که از یک آرایه تو در تو کپی بگیرید باید Deep Copy انجام بدید و این عمل رو با سریالایز کردن آرایه (تبدیل داده های پیچیده مثل آرایه یا آبجکت به رشته) صورت میگیره به عبارتی باید از متد های JSON استفاده کنید و ابتدا آرایه رو به رشته سپس مجدداً parseش کنید. (در تصویر بالا نمونشو گذاشتم)

🟡 نکات اضافه
———
💬 اگه از کتابخونه lodash استفاده می کنید میتونید از پکیج lodash.clonedeep استفاده کنید
💬 اگه از lodash استفاده نمی کنید میتونید از پکیج just-clone استفاده کنید.
💬 اگه از توسعه دهندگان Angular هستید میتونید از angular.copy استفاده کنید.

#جاوااسکریپت #deep_copy #shallow_copy


🌐 @pieceJS

💎 معرفی وبسایت پرکاربرد openbase

وبسایت openbase.com یکی از پرکاربرد ترین مراجع آنلاین تو انتخاب پکیج مناسب برای انجام فعالیتی خاص محسوب میشه.
⁉️ فرض کنید قصد دارید یک پکیج برای راه اندازی Date Picker نصب کنید و از طرفی، میخواید بدونید که محبوب ترین پکیج برای این کار چیه؟!

🔆 برای همین وارد این وبسایت میشید، از قسمت سرچ اسم Date Picker رو مینویسید، سمت راست فیلد سرچ، زبان مورد نظرتون رو انتخاب و سرچ رو انجام میدید. این وبسایت 10 تا از محبوب ترین پکیج ها رو از نظر تعداد نصب و بازخورد کاربران رو براتون نمایش میده و به سادگی میتونید بهترین پکیج رو برای هر کاری پیدا کنید.

💬 زبان های پشتیبانی شده : Javascript, Swift, Python, Java, Go, Rust

💬 نکته مهم: اگر گاهاً اختلالی تو این سایت مشاهده کردید از ف.ل.تر شکن استفاده کنید.

#مثبت_برنامه_نویس #معرفی_وبسایت

🌐 @pieceJS

💎 آشنایی با ابزار Browserslist برای توسعه دهندگان جاوااسکریپت

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

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

💬 اجازه بدید یک مثال کاملاً مهم را برایتان بزنم...
ورژن 2015 اکمااسکریپت که اکثراً به نام ES6 میشناسیم و بسیار به مراتب مورد استفاده نیز قرار می دهیم توسط Opera Mini به هیچ عنوان پشتیبانی نمیشود (اپرا مینی یکی از بروزر های محبوب برخی از سیستم عامل های اندرویدی است) اینجاست که باید قبل از اینکه پروژه کار نکند یا به ایراد های جدی برخورد کند خودمان جلوی ران شدن آن را در این بروزر ها بگیریم و از کاربر بخواهیم که از بروزر های پشتیبانی شده استفاده کند.

پ.ن: برخی آموزش ها رو نمیشه به طور کامل تو کانال قرار داد برای همین سعی می کنم کاملش رو داخل سایت قرار بدم

|مطالعه بیشتر و آموزش استفاده|

🌐 @pieceJS

💎 اجرا شدن همزمان بخش فرانت با سرور با نوشتن npm start

احتمالا شما هم وقتی می خواهید پروژه تون رو اجرا کنید اول از فولدر فرانت پروژه رو استارت میزنید سپس یه ترمینال دیگه باز می کنید و از فولدر بک اند سرور رو استارت میزنید.

🌟 با استفاده از ابزار concurretly می تونید به سادگی با یک بار نوشتن npm start توی ترمینال، بخش فرانت و بخش بک اند به صورت خودکار اجرا کنید.
❕ برای این منظور، این پکیج رو از npmjs دانلود کنید

npm i concurrently -g

سپس فایل package.json رو باز کنید تو قسمت script، مقدار پراپرتی start رو مانند تصویر بدید


🟡 توجه داشته باشید که در تصویر بالا مقادیر command1 arg و command2 arg همان دستوراتیه که شما میخواهید با یک بار npm start زدن اجرا بشه

💬 توضیح مثال درون عکس :
تو این مثال وقتی npm start میزنیم ابزار concurrently میاد ابتدا دستور react-script start رو اجرا کنه سپس به فولدر server بره (با دستور cd server) و در اون فولدر دستور npm start رو اجرا کنه و اینجوری میشه که هم فرانت و هم سرور با یک بار npm start نوشتن ران میشن :)

#جاوا_اسکریپت

🌐 @pieceJS

💎 حذف قسمت اعشاری یک عدد

جهت حذف قسمت اعشاری یک عدد بجای استفاده از متد Math.floor میتوانید از دو تا علامت مد قبل از آن عدد استفاده کنید (~~)

پ.ن: در منبعی ادعا شده بود که سرعت این روش از Math.floor بیشتر است اما بعید میبینم.


🌐 @pieceJS

💎 قابل توجه کسانی که نود جی اس خود را آپدیت کرده اند.

در صورتی که نود جی اس رو آپدیت کرده اید (مثل من از نسخه 14 به 18)

احتمالا به هنگام اتصال به دیتابیس (مانگودیبی) به خطای زیر برخورد کرده اید🧐:

MongoError: connect ECONNREFUSED 127.0.0.1:27017

🟡 جهت رفع این خطا، آدرس مانگودیبی خود را بجای نمونه ی زیر :

const uri = "mongodb://localhost:27017/";

به صورت زیر تغییر دهید

const uri = "mongodb://0.0.0.0:27017/";

یعنی بجای localhost از آدرس آی پی 0.0.0.0 استفاده کنید.

#نود_جی_اس #جاوا_اسکریپت

🌐 @pieceJS

💎 آموزش بستن پورت های از قبل اجرا شده

احتمالا شده که قصد اجرا پروژه تان روی پورت 3000 (یا هر پورت دیگه ای) داشته اید اما با خطای زیر رو برو شده باشید

Something is already running on port 3000.

جهت بستن این پورت میتونید از دستور بالا تو محیط ترمینال استفاده کنید.

💬 اگر پورت شما غیر از 3000 باشد، آن را جایگزین عدد 3000 در دستور بالا کنید.


🌐 @pieceJS

💎 معرفی کنترل ورژن NodeJS

⚠️ ممکنه به هر دلیلی با توجه به نوع پروژه نیاز داشته باشید یکبار از ورژن 14 نود جی اس استفاده کنید یکبار از ورژن 18 یا سایر ورژن ها. قطعاً اصولی نیست که هر بار نود جی اس رو حذف و ورژن قبلی یا بعدی رو نصب کنید.

🟡 نرم افزار NVM یک کنترل ورژن بسیار کاربردی برای نصب و مدیریت ورژن های مختلف نود جی اس روی ویندوز یا لینوکس می باشد با استفاده از این کنترل ورژن میتوانید هر چقدر که نیاز داشتید ورژن های مختلف نود جی اس رو نصب و هر زمان که نیاز داشتید بین آن ها سوئیچ کنید.

جهت دانلود NVM از گیت هاب اینجا کلیک کنید.

#کنترل_ورژن #معرفی #مثبت_برنامه_نویس

🌐 @pieceJS

💎 تبدیل زمان به فرمت های محلی

با استفاده از تکه کد فوق، می توانید به سادگی زمان هر زمان را به فرمت های محلی تبدیل کنید.

💬 نکته: این کد از ورژن 71 به بعد گوگل کروم، ورژن 65 به بعد فایرفاکس و همچنین ورژن 14 به بعد safari پشتیبانی کامل خواهد شد.

#زمان #جاوا_اسکریپت

🌐 @pieceJS

💎 معرفی Object.seal و تفاوت آن با Object.freeze

از متد Object.seal جهت مهر و موم کردن یک آبکت استفاده میشود اگر از این متد برای یک آبجکت استفاده کنید سه ویژگی زیر به آن آبجکت اضافه یا تغییر خواهد کرد:

1- دیگر نمی توان پراپرتی جدید به این آبجکت اضافه کرد.
2- با استفاده از دستور delete نمیتوانید هیچکدام از پراپرتی های این آبجکت را حذف کنید.
3- تنها مقدار پراپرتی های فعلی قابل تغییر هستند

🟣 و اما تفاوت آن با Object.freeze
تنها تفاوت این متد با متد freeze در مورد سوم است که آبجکتی رو در این متد قرار بدید علاوه بر مورد 1 و 2، مقدار پراپرتی های فعلی آن آبجکت نیز غیر قابل تغییر خواهند بود


#جاوا_اسکریپت

🌐 @pieceJS

💎 تغییر مقدار initialValues در فرمیک

در صورتی که از فرمیک استفاده می کنید و قصد دارید با توجه به شرایط مختلف، مقادیر درون پراپ initialValues تغییر دهید میتوانید با قرار دادن پراپ enableReinitialize به تگ Form در هر زمان که احتیاج بود مقادیر initialValues را تغییر دهید. در غیر این صورت، پس از یکبار مقدار دهی، دیگر نمیتوان مقادیر اولیه را با استفاده از useContext یا تغییر state و حتی تغییر props تغییر داد.

#فرمیک #ریکت

🌐 @pieceJS

💎 میانبری جهت استفاده از console.log

اگر شما هم زیاد از console.log استفاده می کنید و مثل من زمان تایپ console.log رو consoel.log (مثلا اگر سریع تایپ کرده باشم 😁) می نویسید پیشنهاد می کنم با استفاده از تیکه کد بالا این دستور رو کوتاه ترش کنید.
#جاوا_اسکریپت

🌐 @pieceJS

💎 تولید آی دی یونیک بدون استفاده از کتابخانه

با استفاده از متد randomUUID از آبجکت crypto می توانید بدون استفاده از کتابخانه خاصی به آسانی UUID منحصر به فرد تولید کنید.


🔶 نکته مهم: crypto یک webAPI است و در هیچ یک از آپدیت های اکما اسکریپت ارائه نشده است پس فقط در مرورگر هایی که از آن پشتیبانی می کنند قابل استفاده است و تقریباً توسط تمامی مرورگر ها از ورژن های نسبتاً قدیمی شان تا به اکنون پشتیبانی می‌شود. نکته مهم تر آن که از آن نمی توانید در محیط های Runtime جاوا اسکریپت استفاده کنید مثلاً در سرور Nodejs.

#جاوا_اسکریپت

🌐 @pieceJS

💎 معرفی یک Benchmarking برای جاوا اسکریپت

فرض کنید دو تیکه کد دارید و میخواید بدونید کدام یک از دیگری سرعت اجرا شدن بیشتری داره.
به عنوان مثال، میخواید بررسی کنید کدام یک از حلقه های for و while یا map تو شرایط یکسان از سرعت و پرفرمنس بالاتری برخوردار است.

با استفاده از وبسایت jsben.ch می تونید بنچ مارک کد های جاوا اسکریپتی تون رو با هم مقایسه کنید.

#مثبت_برنامه_نویس #جاوا_اسکریپت

🌐 @pieceJS

💎 معرفی اکستنشن Thunder Client برای VS Code

تاندر کلاینت، یکی از اکستنشن های بی نظیر VS Code هست که به وسیله اون میتونید API هاتون رو تو نرم افزار تست کنید.
ناگفته نماند که خیلی از قابلیت های Postman رو داره و رابط کاربری اش هم خیلی جمع جور و عالی هست.

#مثبت_برنامه_نویس #جاوا_اسکریپت

🌐 @pieceJS

💎 تکنیکی برای تبدیل آریه ای از رشته ها به عدد

برای تبدیل آرایه ای از رشته ها به عدد کافیست از تابع map استفاده کنید و کالبک آن را نوع داده ای که میخواهید برگشت داده بشود رو بنویسید.

🔸 در مثالی که در تصویر آوردم، به دلیل اینکه میخواستم دیتای برگشتی از نوع عدد باشه، کالبک map رو Number نوشتم.

💬 نکته : شما میتونید Boolean هم نویسید در این صورت تماماً به صورت true و false برگشت داده میشود

#جاوا_اسکریپت #تکنیک #datacasting

🌐 @pieceJS

💎 گذاشتن Semicolon قبل از نوشتن کد!!!!

تاحالا دیدید جایی Semicolon رو بجای آخر کد، اول کد گذاشته باشند؟ 🤔

🔶 احتمالاً اسم توابع self-invoking یا self-executing یا همان توابع خود اجرا رو شنیده باشید تابعی که بعد از تعریف شدن به طور خودکار اجرا می شود. این توابع به دلیل ساختار خاصی که دارند و همچنین غیر ضروری بودن Semicolon در جاوا اسکریپت باعث اشتباه در تفسیر کدها توسط مفسر های جاوا اسکریپت میشوند و چون با پرانتز شروع می شوند مفسر اینگونه برداشت میکند که قصد نوشتن تابعی را دارید که نام آن تابع را در خط بالایی نوشته اید (البته در صورتی که بالای این تابع کدی نوشته باشید) و اینگونست که یک خطای درشت در محیط کنسول دریافت می کنید 😁
برای حل این موضوع میتونید قبل از پرانتز این توابع، یک سمیکالمن قرار دهید (یا انتهای خط قبلی یک سمیکالمن بزارید)

#مثبت_برنامه_نویس #جاوا_اسکریپت
🌐 @pieceJS

💎 معرفی وبسایت Component Party مناسب توسعه دهنگان JS

با استفاده از وبسایت Component Party می تونید سینتکس فریم ورک و کتابخونه های مختلف جاوا اسکریپت رو با هم مقایسه کنید.

🟡 این ابزار در زمان هایی که به چند فریم ورک/کتابخونه مسلطید یا در حال یادگیری هستید خیلی بکارتون میاد.

💬 این وبسایت از موارد زیر پشتیبانی خواهد کرد:
Svelte, React, Vue 3, SolidJS, Qwik, Angular, Lit, Vue 2, Ember, Alpine, Aurelia 1

🌐 برای ورود به این وبسایت اینجا کلیک کنید.

#مثبت_برنامه_نویس #جاوا_اسکریپت

🌐 @pieceJS