10 نکته جاوا اسکریپت مدرن که باید بدانید

در این مطلب نکاتی برای نوشتن کدهای کوتاه و تمیز از زبان جاوااسکریپت به شما یاد می دهیم. جاوااسکریپت ویژگی های جالب زیادی دارد که برنامه نویسان تازه کار و یا حتی intermediate از آنها بی اطلاع هستند که در اینجا به ۱۰ تای آنها اشاره می کنیم.

دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران

برای مشاهده تخفیف های ویژه امروز کلیک کنید

۱. اضافه کردن یک ویژگی(property) به یک شی به صورت شرطی

ما می توانیم از عملگر spread یا همان ... برای اضافه کردن ویژگی های جدید به یک شی استفاده کنیم. حال به روش زیر می توانیم برای اضافه کردن ویژگی ها شرط تعیین کنیم مانند کد زیر

const condition = true;
const person = {
  id: 1,
  name: 'John Doe',
  ...(condition && { age: 16 }),
};

نکته ای که کد بالا دارد عملگر && است. در جاوااسکریپت این عملگر به این شکل کار می کند که اگر شرط condition درست باشد سمت راست به خروجی بر می گردد و به شی اضافه می شود و اگر شرط درست نباشد اصلا سمت راست چک نمی شود.

2.چک کردن این که یک ویژگی(property) در یک شی وجود دارد یا خیر.

با استفاده از کلمه کلیدی in می توانیم چک کنیم که یک property در یک شی موجود هست یا خیر مانند کد زیر

const person = { name: 'John Doe', salary: 1000 };
console.log('salary' in person); // returns true
console.log('age' in person); // returns false

3.نامگذاری property ها به صورت داینامیک یا پویا

شما می توانید نام یک ویژگی را به صورت متغیر و پویا قرار دهید. برای این کار فقط باید از این شکل برای نام property استفاده کنید. ['key_name']

const dynamic = 'flavour';
var item = {
  name: 'Biscuit',
  [dynamic]: 'Chocolate'
}console.log(item); // { name: 'Biscuit', flavour: 'Chocolate' }

در کد بالا دیده می شود که یک ثابت با نام dynamic تعریف کرده ایم که مقدار آن را flavour است. حال وقتی که در داخل یک شی مقدار [dynamic] را قرار می دهیم خود جاوااسکریپت به صورت اتوماتیک مقدار dynamic را که flavour است را جایگزین آن در داخل شی می کند.
از این کار برای دسترسی به property های داخل شی نیز می توان استفاده کرد. مانند کد زیر

const keyName = 'name';console.log(item[keyName]); // returns 'Biscuit'

4.خورد کردن شی با استفاده از کلید داینامیک.

همانطور که می دانید در جاوااسکریپت می توان یک شی را به متغیر های مختلف خورد کرد یعنی مثلا در کد زیر می توان شی person را به متغیر های id, name خورد کرد مانند کد زیر

const person={id:1,name:'Mehdi Adeli'};
const {id, name}=person;
console.log(id); //returns 1
console.log(name); //returns Mehdi Adeli

حال می توان به شکل زیر نام یک property را در حالی که شی را خورد می کنیم تغییر بدهیم.( destructuring with aliases)

const person = { id: 1, name: 'John Doe' };
const { name: personName } = person;
console.log(personName); // returns 'John Doe'

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

const templates = {
  'hello': 'Hello there',
  'bye': 'Good bye'
};
const templateName = 'bye';
const { [templateName]: template } = templates;
console.log(template) // returns 'Good bye'

می بینیم که مقدار Good bye در متغیر template ریخته شده است.

5.عملگر ؟؟ و بررسی null بودن

عملگر ؟؟ برای بررسی این که یک متغیر null یا undefined است به کار می رود. اگر متغیری مقدار null, یا undefined داشته باشد این عملگر عملوند سمت راست را برمی گرداند و اگر متغیر مقدار داشته باشد عملوند سمت چپ را برمی گرداند. مانند کد زیر

const foo = null ?? 'Hello';
console.log(foo); // returns 'Hello'
const bar = 'Not null' ?? 'Hello';
console.log(bar); // returns 'Not null'
const baz = 0 ?? 'Hello';
console.log(baz); // returns 0

در کد بالا در مثال سوم مقدار 0 برگردانده می شود. دقت کنید که درست است که مقدار 0 در جاوااسکریپت یک مقدار false است ولی 0 هم یک مقدار محسوب می شود و null, یا undefined نیست. نکته دیگری که وجود دارد این است که شاید فکر کنید که به جای ؟؟ می توانید از || استفاده کنید ولی دقت داشته باشید که این دو عملگر با یکدیگر متفاوت هستند به مثال زیر دقت کنید

const cannotBeZero = 0 || 5;
console.log(cannotBeZero); // returns 5
const canBeZero = 0 ?? 5;
console.log(canBeZero); // returns 0

6.عملگر (?.) یا زنجیره اختیاری

اگر شما هم مثل من از خطاهایی مانند TypeError: Cannot read property ‘foo’ of null در جاوااسکریپت متنفر هستید من به شما استفاده از زنجیره اختیاری را توصیه می کنم که با این کار اگر متغیری مقدار null و یا undefined داشته باشد دیگر خطا دریافت نمی کنید. به کد زیر دقت کنید.

const book = { id:1, title: 'Title', author: null };
// normally, you would do this
console.log(book.author.age) // throws error
console.log(book.author && book.author.age); // returns null (no error)
// with optional chaining
console.log(book.author?.age); // returns undefined
// or deep optional chaining
console.log(book.author?.address?.city); // returns undefined

در کد بالا اگر بدون چک کردن مقدار book.author.age را بخوانیم خطا خواهیم گرفت واگر هم چک کنیم مقدار null برگردانده خواهد شد. ولی اگر از عملگر .؟ استفاده کنیم خطایی رخ نمی دهد و نتیجه undefined خواهد بود. از این عملگر به شکل زیر هم می توانید استفاده کنید.

const person = {
  firstName: 'Mehdi',
  lastName: 'Adeli',
  printName: function () {
    return `${this.firstName} ${this.lastName}`;
  },
};
console.log(person.printName()); // returns 'Mehdi Adeli'
console.log(person.doesNotExist?.()); // returns undefined

در کد بالا متد doesNotExist وجود ندارد به همین دلیل undefined برگردانده می شود.

7.تبدیل به boolean با استفاده از عملگر !!

با استفاده از عملگر !! می توان به طور سریع مقدار یک عبارت را به مقدار boolean یعنی true, false تبدیل کرد. به کد زیر دقت کنید.

const greeting = 'Hello there!';
console.log(!!greeting) // returns true
const noGreeting = '';
console.log(!!noGreeting); // returns false

8.تبدیل رشته به عدد و بالعکس

برای تبدیل سریع رشته به عدد از عملگر + مانند کد زیر استفاده می کنیم.

const stringNumer = '123';
console.log(+stringNumer); // returns integer 123
console.log(typeof +stringNumer); // returns 'number'

و برای این که یک عدد را تبدیل به رشته بکنیم از علامت + و بعد از آن '' استفاده می کنیم مانند کد زیر

const myString = 25 + '';
console.log(myString); // returns '25'
console.log(typeof myString); // returns 'string'

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

9.چک کردن مقادیر false در آرایه.

مقادیری مانند null, false , undefined, 0 مقادیری هستند که مقدار false دارند پس اگر از این مقادیر در آرایه استفاده شود هنگام استفاده از توابعی مانند filter و some, every باید مواظب باشید. برای مثال به کد زیر توجه کنید.

const myArray = [null, false, 'Hello', undefined, 0];
// filter falsy values
const filtered = myArray.filter(Boolean);
console.log(filtered); // returns ['Hello']
// check if at least one value is truthy
const anyTruthy = myArray.some(Boolean);
console.log(anyTruthy); // returns true
// check if all values are truthy
const allTruthy = myArray.every(Boolean);
console.log(allTruthy); // returns false

دقت داشته باشید که Boolean یک متد است که یک مقدار را میگیرد و اگر آن مقدار درست باشد true و در غیر این صورت مقدار false برمی گرداند. در اصل کد های بالا را می توان به شکل زیر و به صورت arrow function نوشت

myArray.filter(val => Boolean(val));

که این نوع نوشتن با شکل زیر معادل هم هستند.

myArray.filter(Boolean);

10 فلت کردن و یا تبدیل آرایه ای از آرایه ها به یک آرایه

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

const myArray = [{ id: 1 }, [{ id: 2 }], [{ id: 3 }]];
const flattedArray = myArray.flat(); 
// returns [ { id: 1 }, { id: 2 }, { id: 3 } ]

حتی می توانید برای فلت کردن سطح تعیین کنید که این فلت کردن تا چه عمقی پیش برود برای مثال به کد زیر دقت کنید.

const arr = [0, 1, 2, [[[3, 4]]]];
console.log(arr.flat(2)); // returns [0, 1, 2, [3,4]]

امیدوارم نکات گفته شده برای شما مفید باشد و از آنها در پروژه های خودتان استفاده کنید
با وب سایت tosinso همراه باشید
نویسنده: مهدی عادلی فر

مهدی عادلی فر

بنیانگذار توسینسو و برنامه نویس

مهدی عادلی، بنیان گذار TOSINSO. کارشناس ارشد نرم افزار کامپیوتر از دانشگاه صنعتی امیرکبیر و #C و جاوا و اندروید کار می کنم. در زمینه های موبایل و وب و ویندوز فعالیت دارم و به طراحی نرم افزار و اصول مهندسی نرم افزار علاقه مندم.