💎 مقادیر Truthy و Falsy

به مقادیری که به منزله ی FALSE ارزیابی میشه رو مقادیر Falsy میگیم.
🟡 در #جاوااسکریپت 6 مقدار زیر رو به عنوان مقدار Falsy در نظر میگیره

undefined, null, NaN, 0, "" و false

به مقادیری که به منزله ی TURE ارزیابی میشه رو مقادیر Truthy میگیم.
🟡 مقادیر غیر از مقادیر بالا Truthy تفسیر خواهد شد.

💬 نکته: مقدار 0 به عنوان Falsy شناخته میشود اما رشته ی "0" به عنوان Truthy تفیسر میشه.

💬 نکته 2: آرایه خالی یا آبجکت خالی به عنوان Truthy در نظر گرفته میشه.

🌐 @pieceJS

💎 تبدیل تاریخ میلادی به شمسی

برای تبدیل تاریخ میلادی به شمسی از متد toLocaleDateString متعلق به کلاس Date استفاده کنید.
#آبجکت #تاریخ

🌐 @pieceJS

💎 نحوه ایجاد Self-calling Function در جاوا اسکریپت
همه میدونیم که توابع به صورت پیشفرض تا صدا زده نشوند اجرا نخواهند شد، جاوا اسکریپت قابلیتی داره که به وسیله اون میتونید تابعی را تعریف کنید که به صورت خودکار، علاوه بر اینکه تعریف خواهد شد، اجرا هم بشود به این توابع میگیم Self Calling Fucntion.

🟣 به این توابع Self-Invoking Functions هم میگن.

#تابع
🌐 @pieceJS

💎 نکته مهم در جمع اعداد اعشاری
دلیل این اتفاق آن است که حاصل جمع این دو عدد 0.3 نیست بلکه 0.30000000000000004 است چرا که اعداد اعشاری در جاوا اسکریپت به صورت باینری 64 بیتی و از استاندار IEEE 754 پیروری می کنند.

#اعداد

🌐 @pieceJS

💎 یافتن Max و Min عدد درون یک آرایه
برای یافتن بزرگترین و کوچکترین عدد درون یک آرایه، بجای اینکه از for loop استفاده کنید میتوانید به سادگی با استفاده از دستور های بالا (خط دوم و سوم) Max و Min عدد را پیدا کنید.

#آرایه

🌐 @pieceJS

💎 بررسی مقدار عددی یک ورودی
برای اینکه بررسی کنید آیا ورودی کاربر عدد است یا خیر، میتونید از تابع بالا استفاده کنید.
#utils

🌐 @pieceJS

💎 دو عامل باعث ایجاد رندر مجدد در ریکت میشود

1️⃣ تغییر State
2️⃣ تغییر Props

هیچ وقت نباید مقدار دو را مستقیماً داد چون در این صورت ریکت نمیتواند تغییر آن ها را پیگیری کند در نتیجه رندر مجدد صورت نمیگیرد و این باعث شروع فصل جدیدی از باگ ها در پروژه شما خواهد شد.
#reactjs

🌐 @pieceJS

💎 تفاوت import با require چیست؟

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

🟣 یکی از تفاوت های آنها این است که import به صورت نامتقارن (بدون اینکه صبر کند تا import های قبلی کامل اجرا شود) پردازش میشود اما require به صورت متقارن (گام به گام) اجرا می شود.

🟣 با require باید کتابخانه را به طور کامل به پروژه اضافه کنید اما با استفاده از import می توانید در صورت نیاز فقط قسمت مورد استفاده از کتابخانه مورد نظر را به پروژه اضافه کنید و باعث افزایش پرفورمنس و کاهش حجم باندل پروژه می شود.

🟣 متد require به طور خودکار فولدر node_modules را اسکن می کند ولی import که از ES6 به بعد به جاوااسکریپت اضافه شده است خودکار این فولدر را اسکن نمی کند.

💬 برای اکثر برنامه نویس ها که با استفاده از babel پروژه خودشون رو کامپایل می کنند تفاوت چندانی میان import و require احساس نمی کنند. چون babel تا حدزیادی این تفاوت ها را کاهش داده است

🌐 @pieceJS

💎 چگونه پروژه ام را فایل بندی کنم؟

سوال یکی از دوستان که به نظرم سوال خیلی از برنامه نویسان جوان هم هست، اینکه مثلا من میخوام صفحه ای به نام سبد خرید رو کدنویسی کنم، چطور باید فایل بندیش رو انجام بدم؟
💬 نکته مهم اینکه، این مورد بسیار سلیقه ای هست اما تلاش کنید تا جایی که مقدوره برای اینکه خوانا تر بنویسید، هر اسکریپت (یا هر کامپوننت در ریکت و یا هر ماژول در نود جی اس) را طوری قرار دهید که فقط یک عمل را انجام بدهد مثلا یک فایل فقط عمل حذف محصول رو انجام بدهد یک فایل فقط اضافه کردن محصول و... .
و ابتدا اصلا فکر این نباشید که فایل بندی عالی ای را انجام دهید، تمام کد ها را در یک فایل بنویسید پس از آنکه به پایان رسید، ری فکتورش کنید.

پ.ن: منظور کل پروژه نیست مثلا قسمت سبد خرید رو کامل در یک فایل بنویسید بعد از اتمام، اجزای مختلف آن را ریفکتور کنید.

💬 ممنون میشوم دوستان هم تجارب خودشون رو در خصوص نحوه صحیح فایل بندی پروژه بنویسند.

🌐 @pieceJS

💎 آموزش آرایه ها به زبان ساده اما مفهومی

🎬 https://www.youtube.com/watch?v=q3Sw3DflxAA
——————
⏱ 8 min
——————
🗣 MohammadReza Azimi Fard


🌐 @pieceJS

#موقت
چون این پست به محتوای کانال مربوط نمیشه، پیشاپیش از تمامی دوستان عذرخواهی میکنم.
خواستم دو کلام در خصوص حق ناشر یا تولید کننده نرم افزار ها یا کانتنت های غیررایگان فارسی صحبتی با هم داشته باشیم.
به وفور عزیزانی رو می بینیم که تو گروه های تلگرامی به دنبال دریافت رایگان دوره های آکادمی x یا y هستند و رایجاً سه توجیه برای این موضوع دارند

⭕️ اول اینکه چرا ناشر میاد این دوره رو به صورت نامحدود میفروشه
⭕️ دوم اینکه دوره های فارسی بدرد نمی خوره (درواقع اگه تونستم از این دوره کسب درآمد کنم یعنی بدردم خورده و برمیگردم پولش رو هم میدم)
⭕️ و سوم اینکه این دوره خیلی گرونه!!! اینقدر نمیرزه!

به طور کلی خواستم عرض کنم هر مولف یا ناشر مختاره که برای دوره ای که منتشر می کنه شرایطی را تعیین کنه همانطور که منِ مشتری مختارم که آن شرایط را بپذیرم و دوره را خریداری کنم یا اینکه کلاً منصرف بشوم!
تصورش رو بکنید ناشری دوره اش رو به صورت محدود بفروشه! بعد از مدتی تعداد خرید به سقف میرسه و نیازه که برای اون دوره تصمیم گیری ای صورت بگیره، اگر کلاً فروشش رو متوقف کنیم که بعد از مدتی کانتنت فارسی برای موضوعی خاص رو به انقراض میره یا کیفیت دوره های جدید فوق العاده پایین میاد... یا شایدم نیاز باشه مدرس دوره رو مجدداً ضبط کنه (که اصلا عقلانی نیست) و قطعاً اگر بنده بودم با یه ترفند دوره قبلی رو مجدداً منتشر می کردم تا اینکه بیام دوباره حرفمو تو دوره ضبطی جدید تکرار کنم... اگرم دوره رو رایگان بزاریم، تکلیف کسانی که با قیمت بالا دوره رو تهیه کردند چیه؟؟؟ فرض کنید بعد یک هفته سقف تعیین شده پر شد شما هم تو همین یک هفته دوره رو خریداری کردید و بنده در هفته آینده این دوره خیلی گرون رو رایگان دانلود میکنم دیگه خود حدیث مفصل بخوان از این مجمل.

در مورد اینکه کانتنت فارسی بدرد نمیخوره که باید بگم برادر جان، پس دلیل استفادت از کانتنتی که بدرد نمی خوره چیه؟ میخوای بعد از گذروندن 100 ساعت دوره به خودت اثبات کنی که دیدی بدرد نمی خورده؟!

و در مورد فلسفه آخر عزیزانی که میگن گرونه و اینقدر نمیرزه! و حالا که نمیرزه میرم رایگان پیدا و دانلودش میکنم!!! سوالی پیش میاد، تصورش رو بکنید رفتید یه لپ تاپ بخرید فروشنده میگن 40 میلیون قیمتشه! آیا برمیگردید به خودتون بگید نه بابا این لپتاپ اینقدر نمیرزه بجاش امشب میام میدزدمش؟؟؟ (البته دور از جون همتون)

ببخشید دل پری داشتم خوشحال میشم نظر شما دوستان رو هم در این مورد بدونم

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

🌐 @pieceJs

💎 حذف دیتا از آرایه
برای حذف دیتا از #آرایه در جاوا اسکریپت میتونید از متد splice استفاده کنید این متد با حذف دیتا از آرایه باعث ایجاد تغییر در آرایه میشه.
بدین منظور با استفاده از متد indexOf، شماره ایندکس دیتای مورد نظر رو در آرایه پیدا کنید سپس با استفاده از splice آن را از آرایه حذف کنید.

💬 این متد دو تا ورودی میگیره، ورودی اول، شماره ایندکس دیتای مورد نظر است و ورودی دوم تعداد عنصر هایی که مایلید از شماره ایندکس مورد نظر به بعد حذف بشود خواهد بود.

🌐 @pieceJS

💎 استفاده از Async و Await در هوک useEffect در ریکت

جهت استفاده از async و await درون هوک useEffect می بایست درون تابعی که به عنوان Effect در این هوک تعریف می کنید یک تابع دیگر تعریف کنید و آن تابع را از نوع async قرار دهید. سپس مجدداً آن تابع را صدا بزنید

💬 نکته مهم این است که شما نمی توانید تابعی که به عنوان افکت تعریف می کنید را از نوع async قرار بدهید چراکه ریکت به شما خطا می دهد.

🟡 علت: هوک useEffect پس از Unmount شدن کامپوننت، به صورت خودکار عملیات پاک سازی توابع صدا زده شده را انجام می دهد در صورتی که تابعی که به عنوان افکت قرار داده اید را از نوع async قرار بدهید باعث ایجاد باگ در عملکرد Cleanup Function این هوک شده و ریکت به شما خطا نمایش میدهد.

#ریکت #هوک_ها #useEffect

🌐 @pieceJS

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

حتماً شما هم برای اینکه بررسی کنید آیا یک آرایه دارای مقدار هست یا خیر از پراپرتی length استفاده می کنید.
برای بررسی مقدار یک آبجکت، میتونید از متد Object.keys استفاده کنید این متد آرایه ای از نام پراپرتی های آبجکت مورد نظر را return می کند در این صورت میتوانید از پراپرتی length استفاده و طول آن را برگردانید.

#آبجکت

🌐 @pieceJS

💎 روشی دیگر جهت استفاده از state ها در کامپوننت های نوع تابعی در ریکت

در تصویر بالا روشی دیگه جهت تعریف state ها در کامپوننت های نوع تابعی ریکت معرفی کردیم که در برخی موارد بسیار باعث افزایش خوانایی و همچنین کاهش شلوغی کد ها خواهد شد.

🟡 نکته ای که باید در این روش رعایت کنید آن است که هنگام setState حواستان به state هایی که تغییر نمی کنند باشد. به عنوان مثال قصد دارید مقدار firstname رو از milad به hasan تغییر دهید بدین منظور میتونید به صورت زیر setState تان را تعریف کنید:

setState({...state, firstname:'hasan'})

🌐 @pieceJS

💎 تعریف مقدار پیشفرض props در کامپوننت های ریکت

با استفاده از استاتیک پراپرتی defaultProps میتونید مقادیر پیشفرض را برای پراپ های ورودی یک کامپیوننت تعیین کنید.

🟣 نکته: defaultProps برای هر دو کامپوننت های تابعی و کلاسی قابل استفاده می باشد

🌐 @pieceJS

💎 در مورد useRef در ریکت

از این هوک جهت دسترسی به المنت های درون صفحه JSX استفاده می شود مشابه این موضوع در وانیلا جاوااسکریپت (getElementByID و...) نیز داریم.
از دیگر استفاده هایی که این هوک دارد، توانایی ذخیره سازی State های قبلی می باشد بدین ترتیب می توانید یک useRef بسازید و مقدار قبلی استیت مورد را در هوک useEffect در useRef خود ذخیره سازی کنید.

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

⁉️ یکی از سوالات مصاحبه استخدامی دولوپر ریکت می تواند این باشد که چطور تعداد رندر های مجدد صفحه را شمارش کنیم. که در اینجا می توانید از useRef استفاده کنید و مقدار آن را در useEffect بدون وابستگی تغییر بدید.

#هوک #ریکت

🌐 @pieceJS

💎 در مورد useMemo در ریکت

از این هوک جهت جلوگیری از رندر های مجدد و افزایش پرفورمنس اپ استفاده می شود. یکی از عواملی که باعث رندر مجدد یک کامپوننت در اپ ریکتی میشود آپدیت state ها هست که موجب رندر کامل کامپوننت شما میشود اما در اکثر مواقع ما نیاز نداریم که کل اپ مجدداً رندر شود و فقط نیازه که بخش های وابسه به اون state رو رندر کنیم در اینجا از useMemo استفاده می کنیم.
این هوک، سینتکسی دقیقاً شبیه useEffect رو داره که یک کالبک میگیره و یک دیپندنسی.

useMemo( ()=>{

 }
,[ ])

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

🌐 @pieceJS

💎 پشت پرده رندر مجدد یک کامپوننت در ریکت

⁉️ یکی از سوالات مهم مصاحبه استخدامی دوولوپر ریکت این است که چگونه ریکت متوجه می شود که باید کامپوننت رو مجدد رندر کنه؟!

همانطور که میدونید با تغییر props یا state یه کامپوننت مجدداً رندر میشه در هر بار تغییر یکی از این دو پارامتر، در پشت پرده متد object.is اجرا و مقدار قبلی و جدید state یا props با هم مقایسه میشود در صورتی که یکی از شروط زیر برقرار نبود، کامپوننت مجدداً رندر میشه.

🔸هر دو مقدار undefined یا null باشد
🔸هر دو مقدار true یا false باشد
🔸هر دو مقدار از نوع String و دارای کاراکتر های یکسان، طول برابر و ترتیتب یکسان باشد
🔸هر دو مقدار از نوع Number و دارای مقدار یکسان یا NaN باشد
🔸هر دو مقدار از نوع Object و دارای خانه یکسان در مموری باشد

بدین ترتیب اگر مقدار یک state یا props تغییر پیدا کرد ولی با مقدار قبلیش همچنان برابر بود رندر مجددی صورت نمیگیرد چون مقدار زیر true خواهد بود
Object.is(newState,PrevState) === true
اما نکته مهم اینه که اگر یک state یا props از نوع آبجکت باشد و مقدار آن تغییر پیدا کند، ولو با مقدار قبلیش برابر باشد، کامپوننت شما مجدداً رندر میشود چرا که مقدار جدید اون آبجکت در خانه جدیدی از حافظه ایجاد شده پس آخرین شرط از شروط بالا رو نقض و رندر مجدد صورت میگیره.

#ریکت #سوال_استخدامی

🌐 @pieceJS