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

امروز می خوام 7 نکته و ترفند جاوااسکریپتی رو بهت بگم که کیفیت کدهات رو بهتر می کنه و می تونی از این به بعد برای پروژه های بعدیت استفاده کنی ازشون.

برای دیدن نکات و ترفندهای جاوااسکریپت یه نگاهی به لینک زیر بنداز:

آموزش ویدیویی نکات و ترفندهای جاوااسکریپت

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)); // نتیجه==> 6

3. عملگر رست(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 تا 4

let 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