🤔 شی گرایی چیه ؟
🤔 مزیتش چیه ؟
🤔 چهار اصل شی گرایی ؟


لینک مقاله 👈🏻 لینک

@LearnByLearn

#concept
#javascript
#object_oriented_javascript
#oop

🤔 پروتوتایپ چیه ؟
🤔 فرق prototype با _ _ proto _ _ ؟
🤔 توی جاواسکریپت prototype inheritance چطور کار میکنه ؟


لینک مقاله 👈🏻 لینک

@LearnByLearn

#concept
#javascript
#object_oriented_javascript
#prototype

💬 این متد زمانی استفاده میشه که میخوایید ببینید یه چیزی توی اون آرایه اتون هست یا نه


📥 پارامتر های ورودی این متد:

✅ پارامتر اول searchElement :
🔹همون مقداریه که میخوایم سرچش کنیم
🔹این پارامتر الزامی هست

✅ پارامتر دوم fromIndex :
🔹با استفاده از این پارامتر تعیین میکنیم که جست و جو از چه ایندکس آرایه شروع بشه
🔹این پارامتر اختیاری هست پس اگه مقداری به این پارامتر ندین جاواسکریپت پیشفرض 0 در نظرش میگیره

📤 خروجی این متد:
🔹مقداری که برمیگردونه یک مقدار boolean هست

Example 1

const arr = ["a", "b", "c", "d"];
arr.includes("c"); //true
arr.includes("f"); //false

Example 2

const arr = ["a", "b", "c", "d"];
arr.includes("c", 1); //true
arr.includes("c", 4); //false

هرشب یه متد از جاواسکریپت رو یاد بگیر 😉

@LearnByLearn

#method_include
#javascript_method

💬 این متد زمانی استفاده میشه که میخوایید ببینید آیا تمام آیتم های اون آرایه مورد نظر دارای این شرطی که به متد every میفرستید هستن یا نه، اگر تمام آیتم های اون آرایه شرط رو پاس کردن true بر میگرده اگرنه false


📥 پارامتر های ورودی این متد:

✅ پارامتر اول callbackFn :
🔹یک تابع که دارای یک شرطی هست و برای تک تک اعضای ارایه اجرا میشه
🔹خود این تابع سه پارامتر میگیره : currentValue, index, array

✅ پارامتر دوم this :
🔹این پارامتر اختیاری هست پس اگه مقداری به این پارامتر ندین جاواسکریپت پیشفرض undefined در نظرش میگیره

📤 خروجی این متد:
🔹مقداری که برمیگردونه یک مقدار boolean هست
🔹اگه تمام اعضا شرط رو پاس کنند true بر میگردونه

Example 1

const arr = [1,20,45,18];
arr.every((value)=>value >18); //false

Example 2

const arr = [90,20,45,19];
arr.every((value)=>value >18); //true

هرشب یه متد از جاواسکریپت رو یاد بگیر 😉

@LearnByLearn

#method_every
#javascript_method

💬 این متد یک تابع میگیره که دارای یک شرطی هست و این شرط روی تک تک اعضای آرایه تست میشه اگر حتی یک دونه از اون المنت ها شرط رو پاس کنه، true بر میگرده


📥 پارامتر های ورودی این متد:

✅ پارامتر اول callbackFn :
🔹یک تابع که دارای یک شرطی هست و برای تک تک اعضای ارایه اجرا میشه
🔹خود این تابع سه پارامتر میگیره : currentValue, index, array

✅ پارامتر دوم this :
🔹این پارامتر اختیاری هست پس اگه مقداری به این پارامتر ندین جاواسکریپت پیشفرض undefined در نظرش میگیره

📤 خروجی این متد:
🔹مقداری که برمیگردونه یک مقدار boolean هست
🔹اگه فقط یک دونه از اعضا شرط رو پاس کنه true بر میگردونه

Example 1

const arr = [1,3,45,10];
arr.some((value)=>value >18); //true

Example 2

const arr = [1,3,4,10];
arr.some((value)=>value >18); //false

هرشب یه متد از جاواسکریپت رو یاد بگیر 😉

@LearnByLearn

#method_some
#javascript_method

💬 این متد یک تابع میگیره که دارای یک شرط هست و این شرط روی تک تک اعضای آرایه تست میشه و اولین(دقت کنید اولین) آیتمی که شرط رو پاس کنه، به عنوان خروجی return میشه(برعکس filter)


📥 پارامتر های ورودی این متد:

✅ پارامتر اول callbackFn :
🔹یک تابع که دارای یک شرطی هست که در صورت پاس شدن توسط اولین آیتم پاس میشه

✅ پارامتر دوم this :
🔹این پارامتر اختیاری هست پس اگه مقداری به این پارامتر ندین جاواسکریپت پیشفرض undefined در نظرش میگیره

📤 خروجی این متد:
🔹مقداری که بر میگردونه اون آیتمی هست که شرط رو پاس کرده
🔹اگر هیچ آیتمی به اون شرط نخوره مقدار برگشت داده شده undefined هست


Example 1

const arr = [5, 12, 8, 130, 44];
arr.find((element) => element > 10); // 12

Example 2

const arr = [5, 12, 8, 130, 44];
arr.find((element) => element < 1); //undefined 

هرشب یه متد از جاواسکریپت رو یاد بگیر 😉

@LearnByLearn

#method_find
#javascript_method

🤔 تا حالا فکر کردین وقتی ما یک method یا یک property رو روی یک object صدا میزنیم، جاواسکریپت چطور میفهمه که اون method از کجا میاد و صداش میزنه؟

توی این مقاله علتش رو میفهمی😉


لینک مقاله 👈🏻 لینک

@LearnByLearn

#concept
#javascript
#object_oriented_javascript
#prototype_chain

💬 این متد یک تابع میگیره که دارای یک شرط هست و این شرط روی تک تک اعضای آرایه تست میشه و اولین(دقت کنید اولین) ایندکس آیتمی(نه خود ایتم) که شرط رو پاس کنه، به عنوان خروجی return میشه اگرهم چیزی پیدا نشه -1 برمیگردونه


📥 پارامتر های ورودی این متد:

✅ پارامتر اول callbackFn :
🔹یک تابع که دارای یک شرطی هست که در صورت پاس شدن توسط اولین آیتم پاس میشه

✅ پارامتر دوم this :
🔹این پارامتر اختیاری هست پس اگه مقداری به این پارامتر ندین جاواسکریپت پیشفرض undefined در نظرش میگیره

📤 خروجی این متد:
🔹مقداری که بر میگردونه اون آیتمی هست که شرط رو پاس کرده
🔹اگر هیچ آیتمی به اون شرط نخوره مقدار برگشت داده شده 1- هست


Example 1

const arr = [5, 12, 8, 130, 44];
arr.findIndex((element) => element > 10);// index 1

Example 2

const arr = [5, 12, 8, 130, 44];
arr.findIndex((element) => element < 1);// index -1

هرشب یه متد از جاواسکریپت رو یاد بگیر 😉

@LearnByLearn

#method_findIndex
#javascript_method

💬 این متد نقش همون for رو بازی میکنه ولی به صورت declarative و یک تابع به عنوان ورودی میگیره که عملیات مورد نیاز رو توی اون تابع انجام میدیم
دقت کنید که در آخر یک آرایه جدید به ما میده ولی forEach همون آرایه اصلی رو دستخوش تغییر میکنه



Example 1

const array = [1, 4, 9, 16];
const array2 = array.map((x) => x * 2);
console.log(array2);
// Expected output: Array [2, 8, 18, 32]

هرشب یه متد از جاواسکریپت رو یاد بگیر 😉

@LearnByLearn

#method_map
#javascript_method

💬 این متد یک تابع که دارای یک شرط هست رو دریافت میکنه و آیتم هایی که اون شرط رو پاس میکنن توی یک آرایه میریزه و return میکنه



Example

const myArray = [12, 5, 8, 130, 44];
const filtered = myArray.filter((item)=>item > 10 );
console.log(filtered);

هرشب یه متد از جاواسکریپت رو یاد بگیر 😉

@LearnByLearn

#method_filter
#javascript_method

💬 این متد دوتا ورودی به اس start و end میگیره
در وقاقع شما با استفاده از این دو ورودی تعیین میکنید چه بخشی از آرایه مورد نظرتون رو برداره بهتون نمایش بده

💬 همچنین خروجی این متد یک آرایه از اون تیکه های جدا شده هست

💬 توجه کنید که هردوتا ورودی start و end اختیاری هستن و میتونید واردشون نکنید که در این صورت
مقدار پیشفرض start اولین عنصر آرایه و
مقدار پیشفرض end آخرین عنصر آرایه هستش
پس طبیعیه که در صورت ندادن ورودی کل آرایه رو برمیگردونه


Example 1‍

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice());
// ["ant", "bison", "camel", "duck", "elephant"]

Example 2

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(1,3));
// ["bison", "camel"]

Example 3

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2));
// ["camel", "duck", "elephant"]

هرشب یه متد از جاواسکریپت رو یاد بگیر 😉

@LearnByLearn

#method_slice
#javascript_method

☝🏻یه خرده Best Practices های javascript رو یاد بگیریم:

✅ از var استفاده نکن به جاش const و let استفاده کن

✅ متغییر هات رو پیشفرض const بنویس مگر خلافش ثابت بشه

✅ به جای if های تو در تو از guard clauses استفاده کن

✅ تا جایی که جا داره از loop استفاده نکن و به جاش از متد های آرایه مثل map و filter و... استفاده کن

✅ جهنم کالبک برای خودت درست نکن و به جاش از async استفاده کن

✅ از سینتکس های ES6 به بعد استفاده کن تا برنامه نویس بعدی اومد روی کدات فحش نده

✅ از arrow function ها به عنوان متد توی شی گرایی استفاده نکن

✅ تا جایی که امکانش هست از default parameter استفاده کن

✅ توی شی گرایی سعی کن از سینتکس ES6 استفاده کنی

✅ هیچوقت از == برای مقایسه استفاده نکن و به جاش از === استفاده کن

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

✅ طوری کامنت بنویس و اسم متغییر استفاده کن تا دوماه بعد اومدی کداتو دیدی حس نکنی از یک سیاره دیگه کد ها نوشته شدن

✅ همیشه حواست به هندل کردن error ها توی پرامیس ها باشه

✅ کد هات کمتر imprative باشه بلکه declarative باشه (بعدن راجع بهش پست میزارم)

✅ کلا پاشو برو از typescript استفاده کن😁

👈🏻 اگه شمام هم چیزی میدونی تو کامنت ها بگو

@LearnByLearn
#best_practices
#javascript

💬 این متد به عنوان ورودی هرچندتا دلتون بخواد آرایه میگیره و همه رو میریزه توی یک آرایه


Example 1‍

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
//["a", "b", "c", "d", "e", "f"]

هرشب یه متد از جاواسکریپت رو یاد بگیر 😉

@LearnByLearn

#method_concat
#javascript_method

👈🏻 بررسی ES6 Class و رابطه اش با Constructor Function


لینک مقاله 👈🏻 لینک

@LearnByLearn

#concept
#javascript
#object_oriented_javascript
#es6_classs

💬 این متد همون طور که از اسمش معلومه ارایه رو صاف میکنه😁
فرض کنید یه آرایه دارید و باز توی اون آرایه یه آرایه دیگه ای دارید
و اون آرایه داخلی رو محتواش رو بیرون بریزید
اون موقع اس که باید از این متد استفاده کنید
حالا این متد یه آرگومان دلخواه هم میگیره که میگه تا چند مرحله من آرایه رو برات flat کنم
یا حتی میتونی مقدار infinity بهش بدی بگی هرچقدر تو در تو بود بازم flat کن
Example 1‍

const arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]

Example 2

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

Example 3

const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

Example 4

const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

هرشب یه متد از جاواسکریپت رو یاد بگیر 😉

@LearnByLearn

#method_flat
#javascript_method

👈🏻 بررسی Object.create  و نحوه کار کردش


لینک مقاله 👈🏻  لینک

@LearnByLearn

#concept
#javascript
#object_oriented_javascript
#object_create

👈🏻 بررسی عمیق و کامل ارث بری (Inheritance ) در جاواسکریپت 


لینک مقاله 👈🏻  لینک
@LearnByLearn
#javascript
#object_oriented_javascript
#inheritance

توی این ویدیو یاد میگیریم :

✅ تفاوت Reference by value و primitive by value در جاواسکریپت چیه ؟

✅ تفاوت shallow copy و deep copy چیه ؟

✅ چطور یک آبجکت رو کپی کنیم ؟ و با ابزار lodash آشنا میشیم

@LearnByLearn
#javascript
#reference_value
#primitive_value

⁉️ تا حالا عبارت currying به گوشتون خورده ؟



✅ همونطور که میدونید توی جاواسکریپت توابع ما first class هستن

✅ یعنی یک تابع رو به عنوان متغیر به تابع دیگه بفرستیم یا از تابع دیگه return اش کنیم

✅ تکنیک currying به شما این امکان رو میده که توابع با آرگومان‌های متعدد رو به دنباله‌ای از توابع تبدیل کنی که این توابع هر کدام یک آرگومان را در یک زمان میگیرن.

✅ یعنی قابلیت استفاده مجدد، ترکیب بندی و انعطاف پذیری کد را ارتقا می دهد.

کد زیر رو درنظر بگیر
وقتی بخوایم از تابع total استفاده کنیم باید هربار هی بهش بگیم واحد پول ما دلاره یا ریاله و مدام اینو توی صدا زدن تکرار کنیم که خب خیلی خوب نیست

function total(sign, amount) {
  return `${sign}${amount}`;
}

total("Dolar", 200);
total("Rial", 200);

اما به لطف وجود first class function ها میتونیم از مفهوم currying استفاده کنیم
اینطوری دیگه فقط یکبار واحد پول رو تعیین میکنیم و هزار بار ازش استفاده میکنیم

function total(sign) {
  return (amount) => {
    return `${sign}${amount}`;
  };
}

const totalDolar = total("Dolar");
const totalRial = total("Rial");

totalDolar(200);
totalDolar(200);

به یه روش دیگه هم میشه حرکت currying رو زد اونم استفاده از bind هستش :

function multipleByNumber(y, x) {
  return y * x;
}
const multipleByTwo = multipleByNumber.bind(this, 2);

const multipleByThree = multipleByNumber.bind(this, 3);

multipleByTwo(200);
multipleByThree(200);

@LearnByLearn

#currying
#tips
#javascript