7 نکته و ترفند جاوااسکریپت برای اینکه مثل یه حرفه ای کد بزنی

امروز می خوام 7 نکته و ترفند جاوااسکریپتی رو بهت بگم که کیفیت کدهات رو بهتر می کنه و می تونی از این به بعد برای پروژه های بعدیت استفاده کنی ازشون.9 نکته و ترفند جاوااسکریپت برای اینکه مثل یه حرفه ای کد بزنیبرای دیدن نکات و ترفندهای جاوااسکریپت یه نگاهی به لینک زیر بنداز:آموزش ویدیویی نکات و ترفندهای جاوااسکریپت1. استفاده از Arrow functionsاکمااسکریپت 6 این روش جدید نوشتن فانکشن ها (arrow functions) رو معرفی کرد که باعث میشه کد فانکشن ها خیلی تمیزتر باشن و درکل خیلی هم سریعتر می تونی بنویسیشون.به جای اینکه فانکشن ها رو این جوری تعریف کنیم:const multiply = function(x, y) { return x * y; };می تونی با کد کمتر به نتیجه مشابهی برسی:const multiply = (x, y) => { return x * y; };این حتی می تونه ساده تر هم بشه:const multiply = (x, y) => x * y;2. عملگر اسپرد(Spread Operators) این سینتکس اجازه میده که یه دیتای تکرارپذیر(مثل آرایه) به عناصر واحد بست داده بشه، معمولا برای گرفتن یه کپی کم عمق(Shallow Copy) از اشیاء جاوااسکریپت هم بکار برده میشه استفاده از این عملگر باعث میشه خوانایی کدها بالاتر بره و مختصرتر هم میشه.ساخت یه آرایه جدید از روی یه آرایه دیگه به عنوان بخشی از آرایه جدید:const parts = ['shoulders', 'knees']; const lyrics = ['head', ...parts, 'and', 'toes']; console.log(lyrics); // نتیجه ===> [&quothead&quot, &quotshoulders&quot, &quotknees&quot, &quotand&quot, &quottoes&quot]یه راه بهتر برای اتصال(concat) آرایه ها به همدیگهlet arr1 = [0, 1, 2]; let arr2 = [3, 4, 5]; arr1 = [...arr1, ...arr2]; console.log(arr1) // نتیجه ===> [0, 1, 2, 3, 4, 5]استفاده از عناصر یه آرایه به عنوان آرگومان های یه فانکشنconst add = (a, b, c) => a + b + c; let array = [1,2,3]; console.log(add(...array)); // نتیجه==> 63. عملگر رست(Rest Operator)خیلی شبیه عملگر اسپرد(spread operator) به نظر میاد ولی برای در کنار هم قراردادن یکسری از عناصر به عنوان یه آرایه استفاده میشه یعنی یه جورایی برعکس عملگر اسپرد عمل میکنه یعنی چنتا ایتم رو میگیره تبدیلشون میکنه به یه ایتم از نوع آرایه.const blend = (ice, liquid, ...theRest) => { console.log(theRest); }; blend('ice', 'milk', 'banana', 'strawberry'); // نتیجه ===> ['banana', 'strawberry']آخرین پارامتر فانکشن میتونه به صورت رست باشه یعنی عملگر سه نقطه ( ... ) قبلش بیاد، اینجوری بقیه آرگومان ها رو تو خودش به عنوان یه آرایه نگه داره.4. پرکردن آرایهساخت یه آرایه ساده تو یه خطیه آرایه ای از 5 رشته خالیlet array = Array(5).fill(''); // نتیجه ===>: ['', '', '', '', '']یه آرایه ای از عددهای 0 تا 4let array = Array.from(Array(5).keys()); // نتیجه ===>: [0, 1, 2, 3, 4] // Using the spread operator let array = [...Array(5).keys()] // نتیجه ===>: [0, 1, 2, 3, 4]5. اسامی محاسبه شده ویژگی های یه شئاین قابلیت هم تو اکمااسکریپت 6 به جاوااسکریپت اضافه شد که بهت اجازه میده یه عبارت دستوری (expression) رو داخل کروشه [ ] قرار بدی، که محاسبه میشه و به عنوان اسم یا همون کلید ویژگی های یه شئ استفاده میشه.let key = 'A_DYNAMIC_KEY'; let obj = { [key]: 'A_VALUE', }; console.log(obj) // Result: { A_DYNAMIC_KEY: 'A_VALUE' }6. روش درست لاگ گرفتن با ()console.logوقتی یه آرایه ای از اشیاء داری شاید بهتر باشه که از ()console.table استفاده کنیconst foo = { name: 'Suibin', age: 30, coder: true }; const bar = { name: 'Borja', age: 40, coder: true }; const baz = { name: 'Paul', age: 50, coder: false }; console.table([foo, bar, baz]);نتیجه:از طریق استایل دهی سفارشی با استفاده از علامت "%" لاگ هات رو متمایز و برجسته کن:console.log('%cStyled log', 'color: orange; font-weight: bold;'); console.log('Normal log');نتیجه:می تونی از چندین شئ تو یه console log لاگ بگیری اینطوری راحتتر متوجه میشی که هر شئ واسه کدوم متغیره:const foo = { name: 'Suibin', age: 30, coder: true }; const bar = { name: 'Borja', age: 40, coder: true }; const baz = { name: 'Paul', age: 50, coder: false }; console.log({ foo, bar, baz });نتیجهبرای یادگیری روش های مختلف دیباگ کردن و لاگ گرفتن پیشنهاد میکنم حتما این ویدیو رو ببینی:نکات و ترفند های دیباگ کردن7. عملگر شرطیهر عملگر شرطی که با if - else می نوشتی رو می تونی به راحتی تو یه خط دستور بنویسیش اینجوری:condition ? (expression if true) : (expression if false)به عنوان نمونه:const hour = 5; if (hour < 18) { console.log('Good day'); } else { console.log('Good evening'); }// Result: Good dayمیشه اینجوری کوتاه بشه:const hour = 5; hour < 18 ? console.log(‘Good day’) : console.log(‘Good evening’); // Result: Good dayتا حالا از این نکات و ترفندها استفاده کرده بودید؟ از کدوماش؟ مرسی بابت وقتی که گذاشتید امیدوارم که مفید بوده باشه لطفا این مطلب رو لایک کنید و به اشتراک بزارید ممنون درضمن نظر هم یادتون نره، برای یادگیری بیشتر کانال های زیر رو فالو کنید:اینستاگرام: yasharhabibimediaتلگرام: yasharhabibimediaیوتیوب: yasharhabibimedia