#Promise
#Javascript
کاربرد Promise در جاوا اسکریپت یا React Native
کاری که Promise برای ما در جاوا اسکریپت انجام می دهد و ری اکت نیتیو دقیقا بطور مشابه است. یعنی زمان هایی که لازم باشد ما را از وقوع رویدادهایی مطلع می کند تا در صورت وقوع رویداد مورد نظرمان ، قطعه کد مربوطه اجرا شود.
خب حالا این به چه درد میخورد؟ برخی از کارها هست در برنامه ما که نمی دانیم دقیقا کی اجرایش به اتمام می رسد. این کارها مثل سایر خطوط کد ما خطی اجرا نمی شوند. مثلا یک در خواست Ajax یا fetch . شبکه دارای تاخیر است. ارسال درخواست و دریافت پاسخ از سمت سرور اندکی طول میکشد. خب ما که نمی توانیم کل برنامه را معطل رسیدن پاسخ سرور کنیم. اگر اینکار کنیم برنامه کند میشود. اصطلاحا دارای لگ می شود و برای کاربر مشهود است.
پس برای جلوگیری از این مشکل جاوااسکریپت این نوع از کدها را بصورت موازی با سایر کدها اجرا می کند و منتظر رسیدن پاسخ سرور نمی ماند. اصطلاحا می گوییم بصورت غیر همزمان یا async اجرا می کند. در حالت نرمال که پس از اجرای هر خط کد به خط بعدی می رود می گوییم sync اجرا می شود.
پس promise برای دستورات async است. پس سناریو کلی اینگونه می شود:
شما یک درخواست مثلا ajax ایجاده کرده و برای سرور می فرستید.نمی دانید پاسخ دقیقا کی می رسد. توابعی را که بعد از رسیدن پاسخ باید اجرا شود به promise می دهید.می روید سراغ اجرای خطوط بعدی کد Promise هم به شما قول می دهد وقتی پاسخ از سرور رسید توابع مورد نظر شما را اجرا کند.
در مثال زیر به نحوه ایجاد یک Promise دقت کنید:
ورودی constructor آبجکت promise دو تابع به نام resolve و reject است. هنگام اجرای موفقت آمیز درخواست async ما تابع resolve و هنگام اجرای ناموفق آن تابع reject را فراخوانی می کنیم.
به یک مثال دیگر که کاربرد Promise در XMLHttpRequest را نشان می دهد دقت کنید:
به کاربرد این دوتابع در fetch دقت کنید. این مثال می تواند در ری اکت نیتیو هم کاربرد داشته باشد.
تابع fetch کارش ارسال درخواست http است و خود promise بر می گرداند.
@ABlueDeveloper
#Javascript
کاربرد Promise در جاوا اسکریپت یا React Native
کاری که Promise برای ما در جاوا اسکریپت انجام می دهد و ری اکت نیتیو دقیقا بطور مشابه است. یعنی زمان هایی که لازم باشد ما را از وقوع رویدادهایی مطلع می کند تا در صورت وقوع رویداد مورد نظرمان ، قطعه کد مربوطه اجرا شود.
خب حالا این به چه درد میخورد؟ برخی از کارها هست در برنامه ما که نمی دانیم دقیقا کی اجرایش به اتمام می رسد. این کارها مثل سایر خطوط کد ما خطی اجرا نمی شوند. مثلا یک در خواست Ajax یا fetch . شبکه دارای تاخیر است. ارسال درخواست و دریافت پاسخ از سمت سرور اندکی طول میکشد. خب ما که نمی توانیم کل برنامه را معطل رسیدن پاسخ سرور کنیم. اگر اینکار کنیم برنامه کند میشود. اصطلاحا دارای لگ می شود و برای کاربر مشهود است.
پس برای جلوگیری از این مشکل جاوااسکریپت این نوع از کدها را بصورت موازی با سایر کدها اجرا می کند و منتظر رسیدن پاسخ سرور نمی ماند. اصطلاحا می گوییم بصورت غیر همزمان یا async اجرا می کند. در حالت نرمال که پس از اجرای هر خط کد به خط بعدی می رود می گوییم sync اجرا می شود.
پس promise برای دستورات async است. پس سناریو کلی اینگونه می شود:
شما یک درخواست مثلا ajax ایجاده کرده و برای سرور می فرستید.نمی دانید پاسخ دقیقا کی می رسد. توابعی را که بعد از رسیدن پاسخ باید اجرا شود به promise می دهید.می روید سراغ اجرای خطوط بعدی کد Promise هم به شما قول می دهد وقتی پاسخ از سرور رسید توابع مورد نظر شما را اجرا کند.
در مثال زیر به نحوه ایجاد یک Promise دقت کنید:
let myFirstPromise = new Promise((resolve, reject) => {@ABlueDeveloper
// We call resolve(...) when what we were doing asynchronously was successful, and reject(...) when it failed.
// In this example, we use setTimeout(...) to simulate async code.
// In reality, you will probably be using something like XHR or an HTML5 API.
setTimeout(function(){
resolve("Success!"); // Yay! Everything went well!
}, 250);
});
ورودی constructor آبجکت promise دو تابع به نام resolve و reject است. هنگام اجرای موفقت آمیز درخواست async ما تابع resolve و هنگام اجرای ناموفق آن تابع reject را فراخوانی می کنیم.
به یک مثال دیگر که کاربرد Promise در XMLHttpRequest را نشان می دهد دقت کنید:
function myAsyncFunction(url) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.onload = () => resolve(xhr.responseText); xhr.onerror = () => reject(xhr.statusText); xhr.send(); });}طور دیگری هم می تواند از promise استفاده کرد. آبجکت Promise دارای دو تابع به نام then و catch است که ترتیب در زمان اجرای موفقیت آمیز و غیر موفقیت آمیز کد async ، تابع ورودی خود را اجرا می کنند. خود then و catch نیز آبجکت promise بر می گردانند. بنابراین می توان چندیدن تا از آنها را بصورت زنجیر یا chain پشت هم بکار برد.
به کاربرد این دوتابع در fetch دقت کنید. این مثال می تواند در ری اکت نیتیو هم کاربرد داشته باشد.
تابع fetch کارش ارسال درخواست http است و خود promise بر می گرداند.
function getMoviesFromApiAsync() {برگرفته از سایت جعبه آبی
return fetch('https://facebook.github.io/react-native/movies.json')
.then((response) => response.json())
.then((responseJson) => {
return responseJson.movies;
})
.catch((error) => {
console.error(error);
});
}
@ABlueDeveloper
#Javascript
#js
JavaScript Standard Style
این خلاصه ای از قوانین جاوا اسکریپت استاندارد است.
بهترین روش برای یادگیری در مورد استاندارد این است که فقط آن را در کد خود امتحان کنید.
لینک های زیر را مطالعه کنید بسیار ساده توضیح داده برای دوستانی که علاقهمند به رعایت استانداردها در نوشتن کدهای JavaScript و یا Framework های مرتبط دارند
https://standardjs.com/rules.html
https://github.com/standard/standard
@ABlueDeveloper
#js
JavaScript Standard Style
این خلاصه ای از قوانین جاوا اسکریپت استاندارد است.
بهترین روش برای یادگیری در مورد استاندارد این است که فقط آن را در کد خود امتحان کنید.
لینک های زیر را مطالعه کنید بسیار ساده توضیح داده برای دوستانی که علاقهمند به رعایت استانداردها در نوشتن کدهای JavaScript و یا Framework های مرتبط دارند
https://standardjs.com/rules.html
https://github.com/standard/standard
@ABlueDeveloper
GitHub
GitHub - standard/standard: 🌟 JavaScript Style Guide, with linter & automatic code fixer
🌟 JavaScript Style Guide, with linter & automatic code fixer - standard/standard
#Javascript
#Java
Chris Heilmann:
ارتباط Java با JavaScript مانند ارتباط Car با Carpet است.
@ABlueDeveloper
#Java
Chris Heilmann:
ارتباط Java با JavaScript مانند ارتباط Car با Carpet است.
@ABlueDeveloper
#RequireJS
#Javascript
معرفی لایبرری RequireJS
لایبرری RequireJS یک فایل JavaScript و ماژول لودر است.این ابزار برای استفاده در مرورگر بهینه شده است و میتواند در محیط های دیگر JavaScript مانند Rhino و Node نیز استفاده شود.
استفاده از یک اسکریپت لودر مژولار (modular script loader) مانند RequireJS میتواند باعث افزایش سرعت و کیفیت کد شما شود.
دارای یک ابزار بهینه شده است که شما میتوانید آن را به عنوان قسمتی از پکیج هایتان برای اجرای کدهایتان اجرا کنید.
ابزار بهینه سازی می تواند فایل های جاوا اسکریپت شما را برای کارایی بهتر ترکیب و کم حجم کنند.
https://requirejs.org/
📌 لینک کانال
@ABlueDeveloper
#Javascript
معرفی لایبرری RequireJS
لایبرری RequireJS یک فایل JavaScript و ماژول لودر است.این ابزار برای استفاده در مرورگر بهینه شده است و میتواند در محیط های دیگر JavaScript مانند Rhino و Node نیز استفاده شود.
استفاده از یک اسکریپت لودر مژولار (modular script loader) مانند RequireJS میتواند باعث افزایش سرعت و کیفیت کد شما شود.
دارای یک ابزار بهینه شده است که شما میتوانید آن را به عنوان قسمتی از پکیج هایتان برای اجرای کدهایتان اجرا کنید.
ابزار بهینه سازی می تواند فایل های جاوا اسکریپت شما را برای کارایی بهتر ترکیب و کم حجم کنند.
https://requirejs.org/
📌 لینک کانال
@ABlueDeveloper
requirejs.org
RequireJS
/* ---
#React
#JavaScript
#VSCode
The Ultimate VSCode Setup for Front End/JS/React
https://goo.gl/wB7X5p
@fullStackDevs
#JavaScript
#VSCode
The Ultimate VSCode Setup for Front End/JS/React
https://goo.gl/wB7X5p
@fullStackDevs
#FAQ
What is this ?
مجموعه ای کامل از سوالات مصاحبه ، همراه با پاسخ و برخی از نکات کد که به شما کمک می کند تا برای مصاحبه های فنی آماده شوید . بسیاری از این سؤالات از مصاحبه های واقعی هستند و برای اکثرمفاهیم وب سوال وجود دارد
توجه داشته باشید که بسیاری از این سوالات باز هستند و می توانند منجر به بحث های جالبی شوند
مطالب مورد پوشش :
#JavaScript #React #VueJs #Angular #NodeJs #AngularJS #Bootstrap #CSS #HTML5 #Sass #Webpack #MongoDB #SQL #GraphQL #CSharp #Golang #Java #ASPNET #ASPNETMVC #NETFramework #Ruby #RubyOnRails #TypeScript #PHP #Android #RESTAPI #DataStructures #DesignPattern #Swift #Agile #Scrum
📌📌 لینک : https://goo.gl/KaMsmK
@fullStackDevs
What is this ?
مجموعه ای کامل از سوالات مصاحبه ، همراه با پاسخ و برخی از نکات کد که به شما کمک می کند تا برای مصاحبه های فنی آماده شوید . بسیاری از این سؤالات از مصاحبه های واقعی هستند و برای اکثرمفاهیم وب سوال وجود دارد
توجه داشته باشید که بسیاری از این سوالات باز هستند و می توانند منجر به بحث های جالبی شوند
مطالب مورد پوشش :
#JavaScript #React #VueJs #Angular #NodeJs #AngularJS #Bootstrap #CSS #HTML5 #Sass #Webpack #MongoDB #SQL #GraphQL #CSharp #Golang #Java #ASPNET #ASPNETMVC #NETFramework #Ruby #RubyOnRails #TypeScript #PHP #Android #RESTAPI #DataStructures #DesignPattern #Swift #Agile #Scrum
📌📌 لینک : https://goo.gl/KaMsmK
@fullStackDevs
#Javascript
الگوریتم و ساختار داده در جاوا اسکریپت با توضیحات کامل
https://goo.gl/VZyRwo
@fullStackDevs
الگوریتم و ساختار داده در جاوا اسکریپت با توضیحات کامل
https://goo.gl/VZyRwo
@fullStackDevs
GitHub
trekhleb/javascript-algorithms
📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings - trekhleb/javascript-algorithms
Forwarded from Web Devs
#Javascript
الگوریتم و ساختار داده در جاوا اسکریپت با توضیحات کامل
https://goo.gl/VZyRwo
@fullStackDevs
الگوریتم و ساختار داده در جاوا اسکریپت با توضیحات کامل
https://goo.gl/VZyRwo
@fullStackDevs
GitHub
trekhleb/javascript-algorithms
📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings - trekhleb/javascript-algorithms
#javascript
#VSCode
ویژوال استودیو کد , تجربه ای عالی در ویرایشگر متن درست مثل IDE ارائه می دهد ، در اینجا برخی از extentions هایی در ویژوال استودیو کد موجود هست که برای توسعه وب با استفاده از جاوا اسکریپت، HTML و CSS مفید است.
این مجموعه شامل extentions ,git tools و تم های پیشنهادی میباشد که شما بستگی به نیازهایتان می توانید برخی از آنها را انتخاب کنید و یا غیر فعال کنید
🔹️ Download and try:
https://marketplace.visualstudio.com/items?itemName=GulajavaMinistudio.javascript-complete-packs
🔸️ List of extensions , Github Sources and release notes can be seen here:
https://github.com/GulajavaMinistudio/FullJSExtensionPackCode
#Code #Extensions #Pack
@fullStackDevs
#VSCode
ویژوال استودیو کد , تجربه ای عالی در ویرایشگر متن درست مثل IDE ارائه می دهد ، در اینجا برخی از extentions هایی در ویژوال استودیو کد موجود هست که برای توسعه وب با استفاده از جاوا اسکریپت، HTML و CSS مفید است.
این مجموعه شامل extentions ,git tools و تم های پیشنهادی میباشد که شما بستگی به نیازهایتان می توانید برخی از آنها را انتخاب کنید و یا غیر فعال کنید
🔹️ Download and try:
https://marketplace.visualstudio.com/items?itemName=GulajavaMinistudio.javascript-complete-packs
🔸️ List of extensions , Github Sources and release notes can be seen here:
https://github.com/GulajavaMinistudio/FullJSExtensionPackCode
#Code #Extensions #Pack
@fullStackDevs
Visualstudio
Full JavaScript Complete Pack - Visual Studio Marketplace
Extension for Visual Studio Code - All essential extension and theme that useful for web development with JavaScript and Node JS in front end and back end.
#Chain_posts
#JavaScript_code_snippets
"نرم افزار ها در حال بلعیدن جهان هستند و جاوا اسکریپت در حال بلعیدن نرم افزارها. هر ساله جاوا اسکریپت در حال چیره شدن برنرم افزار ها میباشد و هیچ کسی نمیداند که در نهایت چه چیزی می تواند جایگزین آن شود."
🔸در این پست به معرفی چند code snippet در زبان جاوا اسکریپت می پردازیم که به صورت زنجیروار ادامه خواهد داشت.
🔹.all
▫️خروجی این قطعه کد true خواهد بود اگر شرط مورد نظر برای تمام عناصر آرایه true باشد و بلعکس.
const all = (arr, fn = Boolean) => arr.every(fn);
all([4, 2, 3], x => x > 1); // true
all([1, 2, 3]); // true
🔻متد every() یک تابع را بروی تمام عناصر ارایه برای مطمئن شدن از برقرار بودن شرط مورد نظر چک میکند. اگر عنصری در این آرایه نتواند شرط مورد نظر را پاس کند ، دیگر عناصر ارایه (باقیمانده) چک نخواهند شد.
🔹.allEqual
▫️خروجی قطعه کد زیر در صورت برابر بودن تمام عناصر آرایه با یکدیگر true خواهد بود
const allEqual = arr => arr.every(val => val === arr[0]);
allEqual([1, 2, 3, 4, 5, 6]); // false
allEqual([1, 1, 1, 1]); // true
🔻عملگر === در جاوا اسکریپت دو متغیر را براساس نوع و مقدار با هم مقایسه میکند.
11 === 11
▫️این قطعه کد چک خواهد کرد که دو عدد به طور تقریبی با هم برابر هستند یا خیر.
🔻در این کد کلمه کلیدی const به این معنی میباشد که متغیر تعریف شده ثابت بوده و غیر قابل تغییر در سراسر کد میباشد.
const approximatelyEqual = (v1, v2, epsilon = 0.001) => Math.abs(v1 - v2) < epsilon;
approximatelyEqual(Math.PI / 2.0, 1.5708); // true
🔻متد math.abs معادل قدر مطلق در ریاضی میباشد. خروجی یک قدر مطلق همواره عددی مثبت است.
🔹.arrayToHtmlList
▫️این قطعه کد هر عنصر از آرایه را به یک تگ <li> تبدیل کرده و انها را به یک لیست با یک ID میچسباند.
const arrayToHtmlList = (arr, listID) =>
(el => (
(el = document.querySelector('#' + listID)),
(el.innerHTML += arr.map(item => `<li>${item}</li>`).join(''))
))();
arrayToHtmlList(['item 1', 'item 2'], 'myListID');
🔻متد arr.map() یک non-mutating متد بوده (یعنی باعث تغییر آرایه پدر نمیشود) و کار آن ساخت ارایه جدید به وسیله صدا زدن یک تابع بروی هریک از عناصر آرایه پدرمیباشد.
@FullStackDevs
#JavaScript_code_snippets
"نرم افزار ها در حال بلعیدن جهان هستند و جاوا اسکریپت در حال بلعیدن نرم افزارها. هر ساله جاوا اسکریپت در حال چیره شدن برنرم افزار ها میباشد و هیچ کسی نمیداند که در نهایت چه چیزی می تواند جایگزین آن شود."
🔸در این پست به معرفی چند code snippet در زبان جاوا اسکریپت می پردازیم که به صورت زنجیروار ادامه خواهد داشت.
🔹.all
▫️خروجی این قطعه کد true خواهد بود اگر شرط مورد نظر برای تمام عناصر آرایه true باشد و بلعکس.
const all = (arr, fn = Boolean) => arr.every(fn);
all([4, 2, 3], x => x > 1); // true
all([1, 2, 3]); // true
🔻متد every() یک تابع را بروی تمام عناصر ارایه برای مطمئن شدن از برقرار بودن شرط مورد نظر چک میکند. اگر عنصری در این آرایه نتواند شرط مورد نظر را پاس کند ، دیگر عناصر ارایه (باقیمانده) چک نخواهند شد.
🔹.allEqual
▫️خروجی قطعه کد زیر در صورت برابر بودن تمام عناصر آرایه با یکدیگر true خواهد بود
const allEqual = arr => arr.every(val => val === arr[0]);
allEqual([1, 2, 3, 4, 5, 6]); // false
allEqual([1, 1, 1, 1]); // true
🔻عملگر === در جاوا اسکریپت دو متغیر را براساس نوع و مقدار با هم مقایسه میکند.
11 === 11
// => true
11=== '11' // => false
🔹. approximatelyEqual▫️این قطعه کد چک خواهد کرد که دو عدد به طور تقریبی با هم برابر هستند یا خیر.
🔻در این کد کلمه کلیدی const به این معنی میباشد که متغیر تعریف شده ثابت بوده و غیر قابل تغییر در سراسر کد میباشد.
const approximatelyEqual = (v1, v2, epsilon = 0.001) => Math.abs(v1 - v2) < epsilon;
approximatelyEqual(Math.PI / 2.0, 1.5708); // true
🔻متد math.abs معادل قدر مطلق در ریاضی میباشد. خروجی یک قدر مطلق همواره عددی مثبت است.
🔹.arrayToHtmlList
▫️این قطعه کد هر عنصر از آرایه را به یک تگ <li> تبدیل کرده و انها را به یک لیست با یک ID میچسباند.
const arrayToHtmlList = (arr, listID) =>
(el => (
(el = document.querySelector('#' + listID)),
(el.innerHTML += arr.map(item => `<li>${item}</li>`).join(''))
))();
arrayToHtmlList(['item 1', 'item 2'], 'myListID');
🔻متد arr.map() یک non-mutating متد بوده (یعنی باعث تغییر آرایه پدر نمیشود) و کار آن ساخت ارایه جدید به وسیله صدا زدن یک تابع بروی هریک از عناصر آرایه پدرمیباشد.
@FullStackDevs
#CoronaVirus
#Covid_19
#javascript
#java
#fun
The different between java and javascript is the same as corona beer and Corona virus ! 😷
@fullStackDevs
#Covid_19
#javascript
#java
#fun
The different between java and javascript is the same as corona beer and Corona virus ! 😷
@fullStackDevs
#javascript
#Immediately_Invoked_Function_Expression
#IIFE
❇️ Immediately-Invoked Function Expression (IIFE)
▫️در ابتدا باید بدانید که تفاوت بین expression و statement چیست⁉️
🔹اصلی ترین تفاوت میان statement و expression این است که یک expression را میتوانید به یک متغیر assign کنید.
✳️ در این پست به معرفی و تعریف نوعی از فانکشن های جاوا اسکریپ میپردازیم که به آنها "فانکشن های فوری صدا شونده" می گویند .به اختصار IIFE.
🔸 دو دلیل عمده برای استفاده از این نوع توابع وجود دارد.
🔻 محدود کردن scope متغیر ها
🔻 اجرای فوری و بلافاصله فانکشن بعد تعریف شدن آن.
▫️در ادامه به شرح هریک از دو علت خواهیم پرداخت.
🔹معمول ترین syntax تعریف این نوع فانکشن ها بدین صورت است :
(
//output "Hello!"
🔸 در مثال بالا پرانتز های بیرونی () که (function IIFE(){ .. }) را احاطه کرده است باعث میشوند که فانکشن داخلی آنها برای جاوا اسکریپت به عنوان یک expression در نظر گرفته شود و به مانند یک statement و یک تابع معمولی رفتار نکند.
🔸 پرانتز نهایی () در انتهای expression بالا برای آن است که فانکشن تعریف شده را بلافاصه بعد تعریف شدن صدا زده و اجرا کند.
❇️ تعریف کردن فانکشن ها باعث به وجود آمدن scope های جدید میشود و از آنجایی که IIFE یک فانکشن است تعریف کردن یک IIFE جدید باعث به وجود امدن یک scope جدید میشود اما scope به وجود امده قوانین محصور کننده ای دارد یعنی متغیر های تعریف شده در این scope بروی سایر کد های خارج از آن تاثیری ندارد و خارج از آن قابل دسترس نیستند.
▫️ حال که از ماهیت یک IIFE اگاه شدیم بیایید به syntax های مختلف تعریف یک IIFE بپردازیم.
🔸 پیشتر با معمول ترین روش تعریف آن آشنا شدیم . روش دیگری که برای تعریف یک IIFE وجود دارد به صورت زیر است
!
🔻نکته قابل توجه در مثال بالا پیشوند '!' در ابتدای تعریف فانکشن است .به طور کلی '!' در ابتدای فانکشن مثال قبل جاوا اسکریپت را مجبور میکند که هر چیزی که بعد آن بیاید را به عنوان یک expression در نظر بگیرد.
🔹 در نتیجه در مثال بالا یک IIFE جدید تعریف کردیم که بلافاصله بعد تعریف شدن صدا زده شده و اجرا میشود.
🔻 همچنین میتوانید به جای '!' از '+' , '-' , '~' و یا هر unary operator دیگری استفاده کنید.
🔻یک unary operator عملگری است که تنها یک عملوند دریافت میکند و روی آن عملیاتی انجام میدهد.
▫️ همچنین روشی دیگر برای تعریف IIFE وجود دارد.
void
🔸 در این مثال ' void ' برای مجبور کردن جاوا اسکریت برای در نظر گرفتن فانکشن بعد از آن به عنوان یک expression است.
🔻 نکته خیلی مهم در مورد این نوع syntax های تعریف IIFE این است که فانکشن نمیتواند مقدار خروجی داشته باشد❕❕
❇️ برای اینکه یک IIFE بتواند یک مقدار خروجی را بازگرداند باید به صورت اولین مثال که پیشتر تعریف شد یا به صورت زیر تعریف شود.
(
(
🔹 همچنین میتوانید به یک IIFE پارامتر پاس دهید
(
console.log(msg);
}
✳️ در این پست به معرفی IIFE پرداختیم که کاربر های فروانی دارد.
✳️ لطفا این پست را با دوستان خود به اشتراک بگذارید
▫️Happy Js Coding😉
@FullStackDevs
#Immediately_Invoked_Function_Expression
#IIFE
❇️ Immediately-Invoked Function Expression (IIFE)
▫️در ابتدا باید بدانید که تفاوت بین expression و statement چیست⁉️
🔹اصلی ترین تفاوت میان statement و expression این است که یک expression را میتوانید به یک متغیر assign کنید.
✳️ در این پست به معرفی و تعریف نوعی از فانکشن های جاوا اسکریپ میپردازیم که به آنها "فانکشن های فوری صدا شونده" می گویند .به اختصار IIFE.
🔸 دو دلیل عمده برای استفاده از این نوع توابع وجود دارد.
🔻 محدود کردن scope متغیر ها
🔻 اجرای فوری و بلافاصله فانکشن بعد تعریف شدن آن.
▫️در ادامه به شرح هریک از دو علت خواهیم پرداخت.
🔹معمول ترین syntax تعریف این نوع فانکشن ها بدین صورت است :
(
function
IIFE(){
console.log( "Hello!" );}
)();//output "Hello!"
🔸 در مثال بالا پرانتز های بیرونی () که (function IIFE(){ .. }) را احاطه کرده است باعث میشوند که فانکشن داخلی آنها برای جاوا اسکریپت به عنوان یک expression در نظر گرفته شود و به مانند یک statement و یک تابع معمولی رفتار نکند.
🔸 پرانتز نهایی () در انتهای expression بالا برای آن است که فانکشن تعریف شده را بلافاصه بعد تعریف شدن صدا زده و اجرا کند.
❇️ تعریف کردن فانکشن ها باعث به وجود آمدن scope های جدید میشود و از آنجایی که IIFE یک فانکشن است تعریف کردن یک IIFE جدید باعث به وجود امدن یک scope جدید میشود اما scope به وجود امده قوانین محصور کننده ای دارد یعنی متغیر های تعریف شده در این scope بروی سایر کد های خارج از آن تاثیری ندارد و خارج از آن قابل دسترس نیستند.
▫️ حال که از ماهیت یک IIFE اگاه شدیم بیایید به syntax های مختلف تعریف یک IIFE بپردازیم.
🔸 پیشتر با معمول ترین روش تعریف آن آشنا شدیم . روش دیگری که برای تعریف یک IIFE وجود دارد به صورت زیر است
!
function
() {
alert("Hello from IIFE!");}
();🔻نکته قابل توجه در مثال بالا پیشوند '!' در ابتدای تعریف فانکشن است .به طور کلی '!' در ابتدای فانکشن مثال قبل جاوا اسکریپت را مجبور میکند که هر چیزی که بعد آن بیاید را به عنوان یک expression در نظر بگیرد.
🔹 در نتیجه در مثال بالا یک IIFE جدید تعریف کردیم که بلافاصله بعد تعریف شدن صدا زده شده و اجرا میشود.
🔻 همچنین میتوانید به جای '!' از '+' , '-' , '~' و یا هر unary operator دیگری استفاده کنید.
🔻یک unary operator عملگری است که تنها یک عملوند دریافت میکند و روی آن عملیاتی انجام میدهد.
▫️ همچنین روشی دیگر برای تعریف IIFE وجود دارد.
void
function
() {
alert("Hello from IIFE!");}
();🔸 در این مثال ' void ' برای مجبور کردن جاوا اسکریت برای در نظر گرفتن فانکشن بعد از آن به عنوان یک expression است.
🔻 نکته خیلی مهم در مورد این نوع syntax های تعریف IIFE این است که فانکشن نمیتواند مقدار خروجی داشته باشد❕❕
❇️ برای اینکه یک IIFE بتواند یک مقدار خروجی را بازگرداند باید به صورت اولین مثال که پیشتر تعریف شد یا به صورت زیر تعریف شود.
(
function
() {
return "From IIFE";}
() ); (
function
() {
return "From IIFE";}
) () ;🔹 همچنین میتوانید به یک IIFE پارامتر پاس دهید
(
function
IIFE(msg, times) {
for (var i = 1; i <= times; i++) {console.log(msg);
}
}
("Hello!", 5));✳️ در این پست به معرفی IIFE پرداختیم که کاربر های فروانی دارد.
✳️ لطفا این پست را با دوستان خود به اشتراک بگذارید
▫️Happy Js Coding😉
@FullStackDevs
Forwarded from Web Devs
#Chain_posts
#JavaScript_code_snippets
"نرم افزار ها در حال بلعیدن جهان هستند و جاوا اسکریپت در حال بلعیدن نرم افزارها. هر ساله جاوا اسکریپت در حال چیره شدن برنرم افزار ها میباشد و هیچ کسی نمیداند که در نهایت چه چیزی می تواند جایگزین آن شود."
🔸در این پست به معرفی چند code snippet در زبان جاوا اسکریپت می پردازیم که به صورت زنجیروار ادامه خواهد داشت.
🔹.all
▫️خروجی این قطعه کد true خواهد بود اگر شرط مورد نظر برای تمام عناصر آرایه true باشد و بلعکس.
const all = (arr, fn = Boolean) => arr.every(fn);
all([4, 2, 3], x => x > 1); // true
all([1, 2, 3]); // true
🔻متد every() یک تابع را بروی تمام عناصر ارایه برای مطمئن شدن از برقرار بودن شرط مورد نظر چک میکند. اگر عنصری در این آرایه نتواند شرط مورد نظر را پاس کند ، دیگر عناصر ارایه (باقیمانده) چک نخواهند شد.
🔹.allEqual
▫️خروجی قطعه کد زیر در صورت برابر بودن تمام عناصر آرایه با یکدیگر true خواهد بود
const allEqual = arr => arr.every(val => val === arr[0]);
allEqual([1, 2, 3, 4, 5, 6]); // false
allEqual([1, 1, 1, 1]); // true
🔻عملگر === در جاوا اسکریپت دو متغیر را براساس نوع و مقدار با هم مقایسه میکند.
11 === 11
▫️این قطعه کد چک خواهد کرد که دو عدد به طور تقریبی با هم برابر هستند یا خیر.
🔻در این کد کلمه کلیدی const به این معنی میباشد که متغیر تعریف شده ثابت بوده و غیر قابل تغییر در سراسر کد میباشد.
const approximatelyEqual = (v1, v2, epsilon = 0.001) => Math.abs(v1 - v2) < epsilon;
approximatelyEqual(Math.PI / 2.0, 1.5708); // true
🔻متد math.abs معادل قدر مطلق در ریاضی میباشد. خروجی یک قدر مطلق همواره عددی مثبت است.
🔹.arrayToHtmlList
▫️این قطعه کد هر عنصر از آرایه را به یک تگ <li> تبدیل کرده و انها را به یک لیست با یک ID میچسباند.
const arrayToHtmlList = (arr, listID) =>
(el => (
(el = document.querySelector('#' + listID)),
(el.innerHTML += arr.map(item => `<li>${item}</li>`).join(''))
))();
arrayToHtmlList(['item 1', 'item 2'], 'myListID');
🔻متد arr.map() یک non-mutating متد بوده (یعنی باعث تغییر آرایه پدر نمیشود) و کار آن ساخت ارایه جدید به وسیله صدا زدن یک تابع بروی هریک از عناصر آرایه پدرمیباشد.
@FullStackDevs
#JavaScript_code_snippets
"نرم افزار ها در حال بلعیدن جهان هستند و جاوا اسکریپت در حال بلعیدن نرم افزارها. هر ساله جاوا اسکریپت در حال چیره شدن برنرم افزار ها میباشد و هیچ کسی نمیداند که در نهایت چه چیزی می تواند جایگزین آن شود."
🔸در این پست به معرفی چند code snippet در زبان جاوا اسکریپت می پردازیم که به صورت زنجیروار ادامه خواهد داشت.
🔹.all
▫️خروجی این قطعه کد true خواهد بود اگر شرط مورد نظر برای تمام عناصر آرایه true باشد و بلعکس.
const all = (arr, fn = Boolean) => arr.every(fn);
all([4, 2, 3], x => x > 1); // true
all([1, 2, 3]); // true
🔻متد every() یک تابع را بروی تمام عناصر ارایه برای مطمئن شدن از برقرار بودن شرط مورد نظر چک میکند. اگر عنصری در این آرایه نتواند شرط مورد نظر را پاس کند ، دیگر عناصر ارایه (باقیمانده) چک نخواهند شد.
🔹.allEqual
▫️خروجی قطعه کد زیر در صورت برابر بودن تمام عناصر آرایه با یکدیگر true خواهد بود
const allEqual = arr => arr.every(val => val === arr[0]);
allEqual([1, 2, 3, 4, 5, 6]); // false
allEqual([1, 1, 1, 1]); // true
🔻عملگر === در جاوا اسکریپت دو متغیر را براساس نوع و مقدار با هم مقایسه میکند.
11 === 11
// => true
11=== '11' // => false
🔹. approximatelyEqual▫️این قطعه کد چک خواهد کرد که دو عدد به طور تقریبی با هم برابر هستند یا خیر.
🔻در این کد کلمه کلیدی const به این معنی میباشد که متغیر تعریف شده ثابت بوده و غیر قابل تغییر در سراسر کد میباشد.
const approximatelyEqual = (v1, v2, epsilon = 0.001) => Math.abs(v1 - v2) < epsilon;
approximatelyEqual(Math.PI / 2.0, 1.5708); // true
🔻متد math.abs معادل قدر مطلق در ریاضی میباشد. خروجی یک قدر مطلق همواره عددی مثبت است.
🔹.arrayToHtmlList
▫️این قطعه کد هر عنصر از آرایه را به یک تگ <li> تبدیل کرده و انها را به یک لیست با یک ID میچسباند.
const arrayToHtmlList = (arr, listID) =>
(el => (
(el = document.querySelector('#' + listID)),
(el.innerHTML += arr.map(item => `<li>${item}</li>`).join(''))
))();
arrayToHtmlList(['item 1', 'item 2'], 'myListID');
🔻متد arr.map() یک non-mutating متد بوده (یعنی باعث تغییر آرایه پدر نمیشود) و کار آن ساخت ارایه جدید به وسیله صدا زدن یک تابع بروی هریک از عناصر آرایه پدرمیباشد.
@FullStackDevs
Forwarded from Web Devs
#javascript
#Immediately_Invoked_Function_Expression
#IIFE
❇️ Immediately-Invoked Function Expression (IIFE)
▫️در ابتدا باید بدانید که تفاوت بین expression و statement چیست⁉️
🔹اصلی ترین تفاوت میان statement و expression این است که یک expression را میتوانید به یک متغیر assign کنید.
✳️ در این پست به معرفی و تعریف نوعی از فانکشن های جاوا اسکریپ میپردازیم که به آنها "فانکشن های فوری صدا شونده" می گویند .به اختصار IIFE.
🔸 دو دلیل عمده برای استفاده از این نوع توابع وجود دارد.
🔻 محدود کردن scope متغیر ها
🔻 اجرای فوری و بلافاصله فانکشن بعد تعریف شدن آن.
▫️در ادامه به شرح هریک از دو علت خواهیم پرداخت.
🔹معمول ترین syntax تعریف این نوع فانکشن ها بدین صورت است :
(
//output "Hello!"
🔸 در مثال بالا پرانتز های بیرونی () که (function IIFE(){ .. }) را احاطه کرده است باعث میشوند که فانکشن داخلی آنها برای جاوا اسکریپت به عنوان یک expression در نظر گرفته شود و به مانند یک statement و یک تابع معمولی رفتار نکند.
🔸 پرانتز نهایی () در انتهای expression بالا برای آن است که فانکشن تعریف شده را بلافاصه بعد تعریف شدن صدا زده و اجرا کند.
❇️ تعریف کردن فانکشن ها باعث به وجود آمدن scope های جدید میشود و از آنجایی که IIFE یک فانکشن است تعریف کردن یک IIFE جدید باعث به وجود امدن یک scope جدید میشود اما scope به وجود امده قوانین محصور کننده ای دارد یعنی متغیر های تعریف شده در این scope بروی سایر کد های خارج از آن تاثیری ندارد و خارج از آن قابل دسترس نیستند.
▫️ حال که از ماهیت یک IIFE اگاه شدیم بیایید به syntax های مختلف تعریف یک IIFE بپردازیم.
🔸 پیشتر با معمول ترین روش تعریف آن آشنا شدیم . روش دیگری که برای تعریف یک IIFE وجود دارد به صورت زیر است
!
🔻نکته قابل توجه در مثال بالا پیشوند '!' در ابتدای تعریف فانکشن است .به طور کلی '!' در ابتدای فانکشن مثال قبل جاوا اسکریپت را مجبور میکند که هر چیزی که بعد آن بیاید را به عنوان یک expression در نظر بگیرد.
🔹 در نتیجه در مثال بالا یک IIFE جدید تعریف کردیم که بلافاصله بعد تعریف شدن صدا زده شده و اجرا میشود.
🔻 همچنین میتوانید به جای '!' از '+' , '-' , '~' و یا هر unary operator دیگری استفاده کنید.
🔻یک unary operator عملگری است که تنها یک عملوند دریافت میکند و روی آن عملیاتی انجام میدهد.
▫️ همچنین روشی دیگر برای تعریف IIFE وجود دارد.
void
🔸 در این مثال ' void ' برای مجبور کردن جاوا اسکریت برای در نظر گرفتن فانکشن بعد از آن به عنوان یک expression است.
🔻 نکته خیلی مهم در مورد این نوع syntax های تعریف IIFE این است که فانکشن نمیتواند مقدار خروجی داشته باشد❕❕
❇️ برای اینکه یک IIFE بتواند یک مقدار خروجی را بازگرداند باید به صورت اولین مثال که پیشتر تعریف شد یا به صورت زیر تعریف شود.
(
(
🔹 همچنین میتوانید به یک IIFE پارامتر پاس دهید
(
console.log(msg);
}
✳️ در این پست به معرفی IIFE پرداختیم که کاربر های فروانی دارد.
✳️ لطفا این پست را با دوستان خود به اشتراک بگذارید
▫️Happy Js Coding😉
@FullStackDevs
#Immediately_Invoked_Function_Expression
#IIFE
❇️ Immediately-Invoked Function Expression (IIFE)
▫️در ابتدا باید بدانید که تفاوت بین expression و statement چیست⁉️
🔹اصلی ترین تفاوت میان statement و expression این است که یک expression را میتوانید به یک متغیر assign کنید.
✳️ در این پست به معرفی و تعریف نوعی از فانکشن های جاوا اسکریپ میپردازیم که به آنها "فانکشن های فوری صدا شونده" می گویند .به اختصار IIFE.
🔸 دو دلیل عمده برای استفاده از این نوع توابع وجود دارد.
🔻 محدود کردن scope متغیر ها
🔻 اجرای فوری و بلافاصله فانکشن بعد تعریف شدن آن.
▫️در ادامه به شرح هریک از دو علت خواهیم پرداخت.
🔹معمول ترین syntax تعریف این نوع فانکشن ها بدین صورت است :
(
function
IIFE(){
console.log( "Hello!" );}
)();//output "Hello!"
🔸 در مثال بالا پرانتز های بیرونی () که (function IIFE(){ .. }) را احاطه کرده است باعث میشوند که فانکشن داخلی آنها برای جاوا اسکریپت به عنوان یک expression در نظر گرفته شود و به مانند یک statement و یک تابع معمولی رفتار نکند.
🔸 پرانتز نهایی () در انتهای expression بالا برای آن است که فانکشن تعریف شده را بلافاصه بعد تعریف شدن صدا زده و اجرا کند.
❇️ تعریف کردن فانکشن ها باعث به وجود آمدن scope های جدید میشود و از آنجایی که IIFE یک فانکشن است تعریف کردن یک IIFE جدید باعث به وجود امدن یک scope جدید میشود اما scope به وجود امده قوانین محصور کننده ای دارد یعنی متغیر های تعریف شده در این scope بروی سایر کد های خارج از آن تاثیری ندارد و خارج از آن قابل دسترس نیستند.
▫️ حال که از ماهیت یک IIFE اگاه شدیم بیایید به syntax های مختلف تعریف یک IIFE بپردازیم.
🔸 پیشتر با معمول ترین روش تعریف آن آشنا شدیم . روش دیگری که برای تعریف یک IIFE وجود دارد به صورت زیر است
!
function
() {
alert("Hello from IIFE!");}
();🔻نکته قابل توجه در مثال بالا پیشوند '!' در ابتدای تعریف فانکشن است .به طور کلی '!' در ابتدای فانکشن مثال قبل جاوا اسکریپت را مجبور میکند که هر چیزی که بعد آن بیاید را به عنوان یک expression در نظر بگیرد.
🔹 در نتیجه در مثال بالا یک IIFE جدید تعریف کردیم که بلافاصله بعد تعریف شدن صدا زده شده و اجرا میشود.
🔻 همچنین میتوانید به جای '!' از '+' , '-' , '~' و یا هر unary operator دیگری استفاده کنید.
🔻یک unary operator عملگری است که تنها یک عملوند دریافت میکند و روی آن عملیاتی انجام میدهد.
▫️ همچنین روشی دیگر برای تعریف IIFE وجود دارد.
void
function
() {
alert("Hello from IIFE!");}
();🔸 در این مثال ' void ' برای مجبور کردن جاوا اسکریت برای در نظر گرفتن فانکشن بعد از آن به عنوان یک expression است.
🔻 نکته خیلی مهم در مورد این نوع syntax های تعریف IIFE این است که فانکشن نمیتواند مقدار خروجی داشته باشد❕❕
❇️ برای اینکه یک IIFE بتواند یک مقدار خروجی را بازگرداند باید به صورت اولین مثال که پیشتر تعریف شد یا به صورت زیر تعریف شود.
(
function
() {
return "From IIFE";}
() ); (
function
() {
return "From IIFE";}
) () ;🔹 همچنین میتوانید به یک IIFE پارامتر پاس دهید
(
function
IIFE(msg, times) {
for (var i = 1; i <= times; i++) {console.log(msg);
}
}
("Hello!", 5));✳️ در این پست به معرفی IIFE پرداختیم که کاربر های فروانی دارد.
✳️ لطفا این پست را با دوستان خود به اشتراک بگذارید
▫️Happy Js Coding😉
@FullStackDevs
#JavaScript
❇️ Given a number of elements that need to stay in order, would you use an Object or an Array⁉️
❇️ Given a number of elements that need to stay in order, would you use an Object or an Array⁉️
Anonymous Quiz
37%
Object
63%
Array
#javaScript_tricks
#js
❇️ در این پست چندتا تکنیک جاوا اسکریپتی معرفی میکنیم که امیداوریم براتون مفید واقع بشه.
🔹لاگ سریع در console به کمک object literal میتونید متغیرهاتون رو خیلی سریع و خوانا لاگ بزنید.
به این ترتیب یه آبجکت میسازین و مقدار هر پراپرتیش به همراه نامش در کنسول لاگ میشه.
🔹نمایش نام پارامترهای تابع به همراه تایپ شون.
به کمک object destructuring در جاوا اسکریپت و مشخص کردن مقدار پیشفرض برای پارامتر های تابع میتونید موقع صدا زدن تابع نام پارامتر ها به همراه تایپ اونها رو داشته باشید و از آنجایی که به پارامترتون مقدار پیشفرض دادید به صورت optional هست و به شکل های متفاوت میتونید تابع تون رو صدا بزنید.
از اونجایی که ارایه ها با رفرنسشون پاس داده میشن به کمک spread operator میتونید یک آرایه رو به راحتی کلون کنید.
به کمک مقدار دهی پیشفرض برای پارامترهای تابع و به کمک این تکنیک میتونید پارامترهای توابع تون رو درصورتی که مقداری براشون پاس داده نشده اجباری کنید.
دیگر لایبری های رایج جاوااسکریپتی مثل jquery ajax و axios این امکان رو بهتون میدن تا برای درخواستتون یک timeout تنظیم کنین و درصورتی که در زمان مشخص شده رکوئست انجام نشد، خودکار fail بشه.
متد fetch در مرورگر های جدید به صورت توکار چنین قابلیتی رو نداره اما به کمک این تکنیک میتونید اینکار رو انجام بدید.
.then((response) => {
// successful response before the 1 s timeout
console.log('successful response', response)
})
.catch((e) => {
// Either the timeout occurred or some other error.
// Would need to check the method or use a custom
//
})
🔹تبدیل رشته به عدد .
برای تبدیل رشته های عددی به معادل number ای شون از این تکنیک استفاده کنید.
@fullStackDevs
#js
❇️ در این پست چندتا تکنیک جاوا اسکریپتی معرفی میکنیم که امیداوریم براتون مفید واقع بشه.
🔹لاگ سریع در console به کمک object literal میتونید متغیرهاتون رو خیلی سریع و خوانا لاگ بزنید.
const myVar = 'foo'
const otherVar = 2
// output:
// {myVar: "foo", otherVar: 2}
console.log({ myVar, otherVar })به این ترتیب یه آبجکت میسازین و مقدار هر پراپرتیش به همراه نامش در کنسول لاگ میشه.
🔹نمایش نام پارامترهای تابع به همراه تایپ شون.
به کمک object destructuring در جاوا اسکریپت و مشخص کردن مقدار پیشفرض برای پارامتر های تابع میتونید موقع صدا زدن تابع نام پارامتر ها به همراه تایپ اونها رو داشته باشید و از آنجایی که به پارامترتون مقدار پیشفرض دادید به صورت optional هست و به شکل های متفاوت میتونید تابع تون رو صدا بزنید.
const notify = (msg, { type = 'info', timeout, close = true } = {}) => {🔹کلون کردن آرایه.
// display notification
}
notify('Hi!')
notify('Hi!', { type: 'error' })
notify('Hi!', { type: 'warn', close: false })
از اونجایی که ارایه ها با رفرنسشون پاس داده میشن به کمک spread operator میتونید یک آرایه رو به راحتی کلون کنید.
const manipulateList = (list) => {
// defensively copy list
const copiedList = [
...list]
// do something with copiedList
}
🔹 اجباری کردن پارامترهای تابعبه کمک مقدار دهی پیشفرض برای پارامترهای تابع و به کمک این تکنیک میتونید پارامترهای توابع تون رو درصورتی که مقداری براشون پاس داده نشده اجباری کنید.
const throwIfMissing = () => {
throw new Error('Missing parameter')
}
const func = (requiredParam = throwIfMissing()) => {
// some implementation
}
🔹رکوئست های زماندار (برای fetch api)دیگر لایبری های رایج جاوااسکریپتی مثل jquery ajax و axios این امکان رو بهتون میدن تا برای درخواستتون یک timeout تنظیم کنین و درصورتی که در زمان مشخص شده رکوئست انجام نشد، خودکار fail بشه.
متد fetch در مرورگر های جدید به صورت توکار چنین قابلیتی رو نداره اما به کمک این تکنیک میتونید اینکار رو انجام بدید.
const timeout = (delay = 30000) => {
return new Promise((resolve, reject) => {
const rejectWithError = () => {
reject(new Error('Timed out!'))
}
setTimeout(
rejectWithError, delay)
})
}
const fetchWithTimeout = (url, delay = 3000) => {
// construct an array to pass to `Promise.race`
return Promise.race([fetch(url),
timeout(delay)])
}
fetchWithTimeout('/json/data.json', 1000).then((response) => {
// successful response before the 1 s timeout
console.log('successful response', response)
})
.catch((e) => {
// Either the timeout occurred or some other error.
// Would need to check the method or use a custom
//
Error
subclass in timeout
console.error('request error', e)})
🔹تبدیل رشته به عدد .
برای تبدیل رشته های عددی به معادل number ای شون از این تکنیک استفاده کنید.
let int = "15";
int =
+int;
اگر جایی امکان استفاده از عملگر + نداشتید از دوتا عملگر ~~ استفاده کنید.@fullStackDevs
Forwarded from Web Devs
#javaScript_tricks
#js
❇️ در این پست چندتا تکنیک جاوا اسکریپتی معرفی میکنیم که امیداوریم براتون مفید واقع بشه.
🔹لاگ سریع در console به کمک object literal میتونید متغیرهاتون رو خیلی سریع و خوانا لاگ بزنید.
به این ترتیب یه آبجکت میسازین و مقدار هر پراپرتیش به همراه نامش در کنسول لاگ میشه.
🔹نمایش نام پارامترهای تابع به همراه تایپ شون.
به کمک object destructuring در جاوا اسکریپت و مشخص کردن مقدار پیشفرض برای پارامتر های تابع میتونید موقع صدا زدن تابع نام پارامتر ها به همراه تایپ اونها رو داشته باشید و از آنجایی که به پارامترتون مقدار پیشفرض دادید به صورت optional هست و به شکل های متفاوت میتونید تابع تون رو صدا بزنید.
از اونجایی که ارایه ها با رفرنسشون پاس داده میشن به کمک spread operator میتونید یک آرایه رو به راحتی کلون کنید.
به کمک مقدار دهی پیشفرض برای پارامترهای تابع و به کمک این تکنیک میتونید پارامترهای توابع تون رو درصورتی که مقداری براشون پاس داده نشده اجباری کنید.
دیگر لایبری های رایج جاوااسکریپتی مثل jquery ajax و axios این امکان رو بهتون میدن تا برای درخواستتون یک timeout تنظیم کنین و درصورتی که در زمان مشخص شده رکوئست انجام نشد، خودکار fail بشه.
متد fetch در مرورگر های جدید به صورت توکار چنین قابلیتی رو نداره اما به کمک این تکنیک میتونید اینکار رو انجام بدید.
.then((response) => {
// successful response before the 1 s timeout
console.log('successful response', response)
})
.catch((e) => {
// Either the timeout occurred or some other error.
// Would need to check the method or use a custom
//
})
🔹تبدیل رشته به عدد .
برای تبدیل رشته های عددی به معادل number ای شون از این تکنیک استفاده کنید.
@fullStackDevs
#js
❇️ در این پست چندتا تکنیک جاوا اسکریپتی معرفی میکنیم که امیداوریم براتون مفید واقع بشه.
🔹لاگ سریع در console به کمک object literal میتونید متغیرهاتون رو خیلی سریع و خوانا لاگ بزنید.
const myVar = 'foo'
const otherVar = 2
// output:
// {myVar: "foo", otherVar: 2}
console.log({ myVar, otherVar })به این ترتیب یه آبجکت میسازین و مقدار هر پراپرتیش به همراه نامش در کنسول لاگ میشه.
🔹نمایش نام پارامترهای تابع به همراه تایپ شون.
به کمک object destructuring در جاوا اسکریپت و مشخص کردن مقدار پیشفرض برای پارامتر های تابع میتونید موقع صدا زدن تابع نام پارامتر ها به همراه تایپ اونها رو داشته باشید و از آنجایی که به پارامترتون مقدار پیشفرض دادید به صورت optional هست و به شکل های متفاوت میتونید تابع تون رو صدا بزنید.
const notify = (msg, { type = 'info', timeout, close = true } = {}) => {🔹کلون کردن آرایه.
// display notification
}
notify('Hi!')
notify('Hi!', { type: 'error' })
notify('Hi!', { type: 'warn', close: false })
از اونجایی که ارایه ها با رفرنسشون پاس داده میشن به کمک spread operator میتونید یک آرایه رو به راحتی کلون کنید.
const manipulateList = (list) => {
// defensively copy list
const copiedList = [
...list]
// do something with copiedList
}
🔹 اجباری کردن پارامترهای تابعبه کمک مقدار دهی پیشفرض برای پارامترهای تابع و به کمک این تکنیک میتونید پارامترهای توابع تون رو درصورتی که مقداری براشون پاس داده نشده اجباری کنید.
const throwIfMissing = () => {
throw new Error('Missing parameter')
}
const func = (requiredParam = throwIfMissing()) => {
// some implementation
}
🔹رکوئست های زماندار (برای fetch api)دیگر لایبری های رایج جاوااسکریپتی مثل jquery ajax و axios این امکان رو بهتون میدن تا برای درخواستتون یک timeout تنظیم کنین و درصورتی که در زمان مشخص شده رکوئست انجام نشد، خودکار fail بشه.
متد fetch در مرورگر های جدید به صورت توکار چنین قابلیتی رو نداره اما به کمک این تکنیک میتونید اینکار رو انجام بدید.
const timeout = (delay = 30000) => {
return new Promise((resolve, reject) => {
const rejectWithError = () => {
reject(new Error('Timed out!'))
}
setTimeout(
rejectWithError, delay)
})
}
const fetchWithTimeout = (url, delay = 3000) => {
// construct an array to pass to `Promise.race`
return Promise.race([fetch(url),
timeout(delay)])
}
fetchWithTimeout('/json/data.json', 1000).then((response) => {
// successful response before the 1 s timeout
console.log('successful response', response)
})
.catch((e) => {
// Either the timeout occurred or some other error.
// Would need to check the method or use a custom
//
Error
subclass in timeout
console.error('request error', e)})
🔹تبدیل رشته به عدد .
برای تبدیل رشته های عددی به معادل number ای شون از این تکنیک استفاده کنید.
let int = "15";
int =
+int;
اگر جایی امکان استفاده از عملگر + نداشتید از دوتا عملگر ~~ استفاده کنید.@fullStackDevs
#Js
#javascript
#Trick
Object.keys, values, entries
These methods are generic, there is a common agreement to use them for data structures. If we ever create a data structure of our own, we should implement them too.
They are supported for:
Map
Set
Array
https://javascript.info/keys-values-entries
@fullStackDevs
#javascript
#Trick
Object.keys, values, entries
These methods are generic, there is a common agreement to use them for data structures. If we ever create a data structure of our own, we should implement them too.
They are supported for:
Map
Set
Array
Object.keys(obj) – returns an array of keys.
Object.values(obj) – returns an array of values.
Object.entries(obj) – returns an array of [key, value] pairs.
https://javascript.info/keys-values-entries
@fullStackDevs
👍1