LearnByLearn📖

قسمت پنجم فردا منتشر میشه #پست_موقت

سلام به اعضای عزیز کانال بابت کم کار شدن کانال و خودم عذر خواهی میکنم یکسری مشکلات شخصی و کسالت برام پیش اومده که بیشتر تایمم رو گرفته و امیدوارم زودتر حل بشه ممکنه چند هفته نتونم توی کانال فعالیت داشته باشم و پستی منتشر کنم اما تلاشم رو میکنم که اینطور نباشه به محض اینکه اوضام روبراه شه بزودی بر میگردم دم همه اونایی که کانال رو همراهی میکنن گرم❤️❤️❤️❤️

💬 این متد همون طور که از اسمش معلومه ارایه رو صاف میکنه😁 فرض کنید یه آرایه دارید و باز توی اون آرایه یه آرایه دیگه ای دارید و اون آرایه داخلی رو محتواش رو بیرون بریزید اون موقع اس که باید از این متد استفاده کنید حالا این متد یه آرگومان دلخواه هم میگیره که میگه تا چند مرحله من آرایه رو برات 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

👈🏻 بررسی ES6 Class و رابطه اش با Constructor Function لینک مقاله 👈🏻 لینک @LearnByLearn #concept #javascript #object_oriented_javascript #es6_classs

💬 این متد به عنوان ورودی هرچندتا دلتون بخواد آرایه میگیره و همه رو میریزه توی یک آرایه 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

☝🏻یه خرده 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

💬 این متد دوتا ورودی به اس 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

فرض کنید توی سیستم عامل لینوکسی تون میخوایید یک پکیجی رو نصب کنید😌 مثلا توی این مثال میخواییم vpn windscribe رو نصب کنیم اما با Error عکس 1 بر میخوریم 😱 این ارور(عکس 1) داره میگه که پکیجی که داری نصب میکنی به پکیج های زیر وابسته اس و باید قبلش اینارو نصب کنی خب یه راهش اینه بیاییم دستی دونه دونه پکیج هارو نصب کنیم که خب عقلانی نیست شاید پنجاه تا وابستگی داشت تازه بیشتر اوقات خود دیپندنسی ها باز دیپندنسی دارن🥵 راه بهتر چیه ؟🤔 از دستور زیر استفاده کنیم

sudo apt install -f

این دستور میاد اتوماتیک اون وابستگی هارو شناسایی میکنه و براتون نصب میکنه ✅ حالا میتونید دوباره windscribe رو نصب کنید 🥳 @LearnByLearn #linux

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

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

هرشب یه متد از جاواسکریپت رو یاد بگیر 😉 @LearnByLearn #method_filter #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 میشه اگرهم چیزی پیدا نشه -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

پاسخ چالش: وقتی مینویسیم

const arr1 = []

در واقع پس قضیه جاواسکریپت اینطوری مینویسه

const arr1 = new Array()

و توی مقاله توضیح دادم که کلمه کلیدی new باعث میشه از constructor عه Array یه ابجکت ساخته بشه و توی arr1 ریخته بشه

const arr2 = new Array()

حالا arr2 هم مینویسیم الان دوتا شی جدا داریم به اسم arr1 و arr2 که دوتا آرایه خالی و به ظاهر یکسان هستن اما به خاطر این توی جاواسکریپت آبجکت ها ، reference by value هستن این دوتا شی کاملا جدا هستن و دوتا آبجکت کاملا جدا از هم و متفاوت داریم در نتیجه باهم مساوی نیستن چون خونه های متفاوتی از حافظه رو پر کردن پس جواب

const arr1 = new Array();
const arr2 = new Array()
console.log(arr1 === arr2);
یا
console.log([] === []);

میشه false اگه با reference by value آشنا نیستید توی یک مقاله مفصلا راجع بهش مینویسم فعلا به همین بسنده کنید🫣

با توجه به دو مقاله ای که راجع به شی گرایی نوشتم و یک سری اطلاعات ریز دیگه میتونید خروجی کد زیر رو حدس بزنید و علتش رو هم بگید؟

console.log([ ] === [ ]);

@LearnByLearn #question

🤔 تا حالا فکر کردین وقتی ما یک method یا یک property رو روی یک object صدا میزنیم، جاواسکریپت چطور میفهمه که اون method از کجا میاد و صداش میزنه؟ توی این مقاله علتش رو میفهمی😉 لینک مقاله 👈🏻 لینک @LearnByLearn #concept #javascript #object_oriented_javascript #prototype_chain

💬 این متد یک تابع میگیره که دارای یک شرط هست و این شرط روی تک تک اعضای آرایه تست میشه و اولین(دقت کنید اولین) آیتمی که شرط رو پاس کنه، به عنوان خروجی 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

💬 این متد یک تابع میگیره که دارای یک شرطی هست و این شرط روی تک تک اعضای آرایه تست میشه اگر حتی یک دونه از اون المنت ها شرط رو پاس کنه، 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

💬 این متد زمانی استفاده میشه که میخوایید ببینید آیا تمام آیتم های اون آرایه مورد نظر دارای این شرطی که به متد 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

📌 List of methods javascript : ✅ Array.prototype.include() ✅ Array.prototype.every() ✅ Array.prototype.some() ✅ Array.prototype.find() ✅ Array.prototype.findIndex() ✅ Array.prototype.map() ✅ Array.prototype.filter() ✅ Array.prototype.slice() ✅ Array.prototype.concat() ✅ Array.protoype.flat()

💬 این متد زمانی استفاده میشه که میخوایید ببینید یه چیزی توی اون آرایه اتون هست یا نه 📥 پارامتر های ورودی این متد: ✅ پارامتر اول 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

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