#CoronaVirus
#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 تعریف این نوع فانکشن ها بدین صورت است :
(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

#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 // => 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

#javascript
#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

#QUIZ
#JavaScript


📢 @FullStackDevs

#javaScript_tricks
#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

#javaScript_tricks
#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

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