جاوااسکریپت را حرفه ای کد بزن!

جاوااسکریپت رو حرفه ای کد بزن! همیشه زمانی که برای اولین بار شروع به کدنویسی می کنید، فرقی نمی کند چه زبان برنامه نویسی چون آشنایی چندانی با جزئیات کلیدی آن ندارید برنامه ای که با آن توسعه میدهید هم به همان نسبت خوانایی لازم را ندارد ممکن است از متودها و ویژگی هایی استفاده کنید که منسوخ شده اند و اینکه به شکل راحت تری هم قابل استفاده هستند.

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

جاوااسکریپت را حرفه ای کد بزن!

در این مقاله راهکارهایی را ارائه میدهیم که که باعث بهبود عملکرد و کارایی شما در روند توسعه پروژه های جاوااسکریپت خواهد شد و در عین حال کدهای شما تمیزتر خواهد بود.

1.Arrow Function

ES6 توابع Arrow را معرفی کرد تا تمیزی بیشتر کد و عملکرد به نسبت بهتر نسبت به گذشته را تجربه کنید.

به جای استفاده از توابع مانند زیر :

const multiply = function(x, y) {
  return x * y;
};

const multiply = function(x, y) {

return x * y;

};

با کد کمتر همان نتیجه را انتظار داشته باشید

const multiply = (x, y) => {
  return x * y;
};

const multiply = (x, y) => {

return x * y;

};

همچنین این حالت را به شکل عجیبی میتوانید ساده تر کنید اگر تنها یک عبارت داشته باشید.

const multiply = (x, y) => x * y;

1	const multiply = (x, y) => x * y;

2.Spread Operator

Spread ها این امکان را برای ما فرآهم می کنند تا گسترش پذیری بهتری را تجربه کنیم و بیش از یک آرگومان به آرایه ها و یا توابع خود ارسال کنیم.

const parts = ['shoulders', 'knees']; 
const lyrics = ['head', ...parts, 'and', 'toes']; 
console.log(lyrics);
// Result: ["head", "shoulders", "knees", "and", "toes"]

const parts = ['shoulders', 'knees'];

const lyrics = ['head', ...parts, 'and', 'toes'];

console.log(lyrics);

// Result: ["head", "shoulders", "knees", "and", "toes"]

ایجاد آرایه جدید با استفاده از آرایه موجود به عنوان بخشی از آن.

let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];

arr1 = [...arr1, ...arr2];
console.log(arr1) // Result: [0, 1, 2, 3, 4, 5]

let arr1 = [, 1, 2];

let arr2 = [3, 4, 5];

arr1 = [...arr1, ...arr2];

console.log(arr1) // Result: [0, 1, 2, 3, 4, 5]

یک روش بهتر و حتی کاربردی تر برای ادغام آرایه ها.

const add = (a, b, c) => a + b + c;
let array = [1,2,3];
console.log(add(...array)); // Result: 6

const add = (a, b, c) => a + b + c;

let array = [1,2,3];

console.log(add(...array)); // Result: 6

استفاده از آرایه ها به عنوان آرگومان های یک تابع

3.Rest Operator

در ظاهر Rest کاملا شبیه به spread می باشد اما با عملکردی کاملا متفاوت و عکس. Spread یک المان را اضافه می کند در حالی که Rest چندین المان را جمع و یک واحد متراکم شده را ایجاد می نماید.

const blend = (ice, liquid, ...theRest) => {
  console.log(theRest);
};
blend('ice', 'milk', 'banana', 'strawberry');  
// Result: ['banana', 'strawberry']

const blend = (ice, liquid, ...theRest) => {

console.log(theRest);

};

blend('ice', 'milk', 'banana', 'strawberry');

// Result: ['banana', 'strawberry']

آخرین پارامتر تابع را می توان با پیشوند … قرار داد که باعث می شود تمام آرگومان های باقی مانده در یک آرایه JavaScript قرار بگیرند.

4.Fill Arrays

برای مثال یک آرایه ساده ایجاد کنید.

آرایه ای با 5 رشته خالی

let array = Array(5).fill(''); // Result: ['', '', '', '', '']

1	let array = Array(5).fill(''); // Result: ['', '', '', '', '']

آرایه ای متشکل از اعداد 0 تا 4

let array = Array.from(Array(5).keys()); // Result: [0, 1, 2, 3, 4]
// Using the spread operator
let array = [...Array(5).keys()] // Result: [0, 1, 2, 3, 4]

let array = Array.from(Array(5).keys()); // Result: [0, 1, 2, 3, 4]

// Using the spread operator

let array = [...Array(5).keys()] // Result: [0, 1, 2, 3, 4]

5.Object property names

ES6 امکان دسترسی به خصوصیات یک شی را فرآهم می کند تنها کافی است از […] استفاده کنید و خصوصیت مورد نظر خود را درون آن قرار دهید تا بر روی object اعمال شود.

let key = 'A_DYNAMIC_KEY';
let obj = {
  [key]: 'A_VALUE',
};
console.log(obj) // Result: { A_DYNAMIC_KEY: 'A_VALUE' }

let key = 'A_DYNAMIC_KEY';

let obj = {

[key]: 'A_VALUE',

};

console.log(obj) // Result: { A_DYNAMIC_KEY: 'A_VALUE' }

6.ways for console

زمانی که آرایه ای از آبجکت ها دارید می توانید برای log گرفتن از دستور console.table() استفاده کنید.

طرح تخفیف تابستان 1401 | مدت زمان محدود

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]);

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]);

با استفاده از % خروجی log های خود را سفارشی سازی کنید و css را در آن ها مورد استفاده قرار دهید.

console.log('%cStyled log', 'color: orange; font-weight: bold;');
console.log('Normal log');

1 2	console.log('%cStyled log', 'color: orange; font-weight: bold;'); console.log('Normal log');

برای 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 });

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.Object Destructuring

در صورتی که می خواهد تکرار کد کمتری داشته باشید می توانید تنها خصوصیاتی که در یک آبجکت به آن نیاز دارید را مورد استفاده قرار دهید.

const dog = {
  name: 'Nala',
  gender: 'female',
  age: 10
};

const dog = {

name: 'Nala',

gender: 'female',

age: 10

};

آرگومان یک تابع را یک آبجکن در نظر بگیرید و هر کدام از خصوصیاتی که به آن نیاز دارید را درون آن قرار دهید.

const func = ({ name, age }) => {
  return `${name} is ${age} years old.`;
};
console.log(func(dog)); // Result: Nala is 10 years old.

const func = ({ name, age }) => {

return `${name} is ${age} years old.`;

};

console.log(func(dog)); // Result: Nala is 10 years old.

ممکن است آرایه ای از object ها داشته باشید در چنین شرایطی یه آرگومان در نظر بگیرید و با استفاده از آن آرگومان خصوصیات مورد نظرتان را درون یک آبجکن فرآخوانی کنید.

const func = (animal) => {
  const { name, age } = animal;
  return `${name} is ${age} years old.`;
};
console.log(func(dog)); // Result: Nala is 10 years old.

const func = (animal) => {

const { name, age } = animal;

return `${name} is ${age} years old.`;

};

console.log(func(dog)); // Result: Nala is 10 years old.

8.map() و reduce() و filter()

از Reduce برای تبدیل یک آرایه به یک مقدار واحد استفاده کنید.

let orders = [1, 2, 3, 4, 5];
const total = orders.reduce((acc, cur) => acc + cur);
console.log(total); // Result: 15

let orders = [1, 2, 3, 4, 5];

const total = orders.reduce((acc, cur) => acc + cur);

console.log(total); // Result: 15

از map برای ایجاد یک آرایه جدید با فرآخوانی یک تابع برای هر المان آرایه استفاده کنید.

let orders = [1, 2, 3, 4, 5];
const total = orders.map((item) => item * 2);
console.log(total); // Result: [2, 4, 6, 8, 10]

let orders = [1, 2, 3, 4, 5];

const total = orders.map((item) => item * 2);

console.log(total); // Result: [2, 4, 6, 8, 10]

ایجاد آرایه ای جدید بر اساس المان های آرایه قبلی با استفاده از بررسی شرایطی خاص بر روی آن آرایه که از طریق یک تابع انجام می شود.

let orders = [1, 2, 3, 4, 5];
const total = orders.filter((item) => item > 3);
console.log(total); // Result: [4, 5]

let orders = [1, 2, 3, 4, 5];

const total = orders.filter((item) => item > 3);

console.log(total); // Result: [4, 5]

9.Conditional Operator

هر دسنور if..else را می توان به یک دستور شرطی مشابه مثال زیر تبدیل کرد.

مثال یک :

condition ? (expression if true) : (expression if false)

1	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;

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

const hour = 5;

hour < 18 ? console.log(‘Good day’) : console.log(‘Good evening’);

// Result: Good day

اگر قصد یادگیری جاوا اسکریپت(javascript) به صورت تخصصی و حرفه ای را دارید، پیشنهاد می کنم آموزش مقدماتی تا پیشرفته جاوا اسکریپت (javascript) را مشاهده کنید

[منبع]

جاوااسکریپت را حرفه ای کد بزن!

جاوااسکریپت را حرفه ای کد بزن!

1.Arrow Function

2.Spread Operator

3.Rest Operator

4.Fill Arrays

5.Object property names

6.ways for console

7.Object Destructuring

8.map() و reduce() و filter()

9.Conditional Operator

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

جاوااسکریپت را حرفه ای کد بزن!

1.Arrow Function

2.Spread Operator

3.Rest Operator

4.Fill Arrays

5.Object property names

6.ways for console

7.Object Destructuring

8.map() و reduce() و filter()

9.Conditional Operator

مطالب زیر را حتما مطالعه کنید

آموزش کار با timing event ها

معرفی DOM به زبان ساده

constructor function در جاوااسکریپت

factory function در جاوا اسکریپت

this در جاوا اسکریپت (JavaScript)

تفاوت for in و for of

دیدگاهتان را بنویسید لغو پاسخ