9 ترفند جاوااسکریپت که هیچ کس درباره آنها صحبت نمی‌کند

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

با چنین مجموعه عظیمی از برنامه‌ها و موارد استفاده گوناگون، پیچیدگی کد نیز افزایش می‌یابد و دانستن این نکات و ترفندها مطمئنا می‌تواند در وقت شما صرفه جویی کند.

بنابراین من لیستی از 9 ترفند جاوااسکریپت را تهیه کرده‌ام که کمتر کسی در مورد آنها صحبت می‌کند:

1. تغییر سریع و خالی کردن آرایه‌ها

ما اغلب هنگام برنامه نویسی نیاز به تغییر یا خالی کردن یک آرایه داریم.

کارآمدترین روش برای انجام این کار استفاده از متد Array.length است.

const array = [1, 2, 3, 4, 5];
console.log(array); // 5array.length--;
console.log(array); // 4array.length += 15;
console.log(array); // 19

خروجی قطعه کد به صورت زیر خواهد بود:

[1, 2, 3, 4, 5]
[1, 2, 3, 4]
[1, 2, 3, 4, ..15 empty]
undefined

همچنین می‌توانید تمام عناصر آرایه را با تنظیم length روی عدد 0 حذف کنید.

let arr= ['a', 'b', 'c'];arr.length = 0;console.log(arr.length); // Ouput=> 0

console.log(arr); // Output=> []

2. میانبر برای شرط‌ها

در حین برنامه نویسی ممکن است وقتی درستی یک شرط بررسی می‌شود، به یک قطعه کد خاص نیاز پیدا کنید.

به عنوان مثال ممکن است بخواهید صفحه لاگین را به کاربری که هنوز وارد سیستم نشده است نشان دهید و هنگامی که کاربر به سیستم لاگین کرد، صفحه اصلی را نمایش دهید.

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

var x=1;if(x==1){

    console.log(x)

  }

else{

    console.log("Error")

  }

به این صورت به راحتی با استفاده از عملگرهای سه گانه (؟ و :) قابل انجام است.

بدین منظور به سه عملوند نیاز داریم: شرطی که قبل از علامت ؟ بیاید، عبارتی که درستی شرط را بررسی کند همراه با علامت : و متنی که در صورت غلط بودن شرط نمایش داده شود.

بیایید قطعه کدی را برای درک بهتر آن ببینیم.

var x=1;
console.log( x==1? x: "Error"); //Output: 1

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

روش استاندارد ایمپورت کردن ماژول‌ها ساده است، اما در مواقعی که نیاز به ایمپورت کردن توابع به صورت داینامیک را داشته باشیم، چه باید کرد؟

import defaultExport from "module-name";
import { export1 as alias1 } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export1 [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";

شما ممکن است به ایمپورت کردن برخی از ماژول‌ها تنها در مواقعی که شرایط خاصی وجود داشته باشد، نیاز پیدا کنید و اینجاست که Dynamic Imports وارد عمل می‌شود.

می‌توانید از تابع import برای ایمپورت کردن ماژول‌ها به صورت داینامیک استفاده کنید.

بدین منظور از کلمه کلیدی import به عنوان یک تابع استفاده کرده و در نام ماژول وارد نمایید.

import('some-module')
.then(obj => ...)
.catch(err => console.log(err))

همانطور که می‌بینید، یک promise را برمی‌گرداند و به یک شی ماژول تبدیل می‌شود.

با اینکه از ایمپورت استاتیک نیز می‌توان برای وارد کردن ماژول‌های ضروری استفاده کرد، اما چند عیب جزیی دارد که عبارتند از:

1. ایمپورت استاتیک می‌تواند زمان بارگذاری کد شما را افزایش داده و همچنین منجر به استفاده نکردن از ماژول‌ها شود.
2. رشته‌های ایمپورت استاتیک را نمی‌توان به صورت پویا تولید کرد.
3. ایمپورت استاتیک ممکن است منجر به استفاده غیر ضروری از حافظه شود.

4. عملگر Nullish Coalescing

اگر می‌خواهید بررسی کنید که آیا مقدار یک متغیر تهی است و اصلا آن متغیر وجود دارد یا نه، سپس یک مقدار پیش فرض را برای آن اختصاص دهید، این عملگر (؟؟) می‌تواند در زمانتان واقعا صرفه جویی کند.

به این صورت که از خطاهای پیش بینی نشده و رفتارهای غیرمنتظره در برنامه شما جلوگیری می‌کند.

const name = null ?? 'Anonymous';console.log(name); // Output=> 'Anonymous'const age= undefined?? 18;

console.log(bar); // Output=> 18

به عبارت دیگر این عملگر عملوند سمت راستش را هنگامی که عملوند سمت چپ تعریف نشده (یا تهی) باشد، برمی‌گرداند.

مزیت بزرگی که این روش ارائه می‌دهد این است که بلافاصله نتیجه را مشخص می‌کند.

این امر نه تنها منجر به نوشتن کد بدون خطا می‌شود، بلکه از اجرای فعالیت‌های ناخواسته که ممکن است منجر به تداخل در کد شود نیز جلوگیری می‌نماید.

شایان ذکر است که برای دستیابی به نتیجه‌ای مشابه می‌توان از عملگر OR (||) هم استفاده کرد.

let firstName = null;
let lastName = null;
let nickName = "Guest"; // shows the first truthy value: alert(firstName || lastName || nickName || "Anonymous"); //Guest

عملگر OR (||) و عملگر nullish coalescing (؟؟) تفاوت کوچکی با هم دارند: عملگر || اولین مقدار true را باز می‌گرداند در حالی که عملگر ؟؟ اولین مقدار مشخص شده را برمی‌گرداند.

5. ادغام آرایه‌ها

هرچه مجموعه داده بزرگتر باشد، هنگام ادغام دو آرایه قدرت محاسباتی بیشتری هم می‌طلبد.

ساده‌ترین و رایج‌ترین روش استفاده از متد ()Array.prototype.concat است.

const array1 = ['a', 'b', 'c'];
const array2 = ['a', 'e', 'f'];
const array3 = array1.concat(array2);console.log(array3); 

// Output=> Array ["a", "b", "c", "a", "e", "f"]const array1 = ['a', 'b', 'c'];

const array2 = ['a', 'e', 'f'];
const array3 = array1.concat(array2);console.log(array3); 

// Output=> Array ["a", "b", "c", "a", "e", "f"]

با این حال هنگام کار با مجموعه داده‌های بزرگ، متد ()Array.prototype.concat کارآمدترین انتخاب نیست، به این دلیل که یک کار سنگین برای حافظه است و آرایه‌های جدید ایجاد می‌کند.

در چنین مواردی استفاده از متد Array.push.apply(arr1, arr2) انتخاب بهتری است، چرا که این متد هر دو آرایه را بدون ایجاد یک ترکیب جدید ادغام می‌کند.

let list1 = ['a', 'b', 'c'];

let list2 = ['a', 'e', 'f'];list1.push.apply(list1, list2);

console.log(list1);

//Output=> Array ["a", "b", "c", "a", "e", "f"]

 6. ارزیابی حداقل

اگر می‌خواهید مقدار متغیری را در متغیر دیگری بریزید، ممکن است بخواهید بررسی کنید که آیا مقدار متغیر اول تهی یا تعریف نشده هست یا نه.

این عملیات را می‌توان به سادگی با استفاده از دستور if انجام داد، اما نوشتن دستور if با ارزیابی شرط‌های متعدد می‌تواند دست و پا گیر باشد و حتی ممکن است منجر به خطا شود.

if (var1 !== null || var1 !== undefined || var1 !=='') {
var2 = var1;
}

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

var2 = var1 || 'Some value';

7. مقادیر پیش فرض پارامتر

ممکن است برنامه شما به کاربر این امکان را بدهد که یک مقدار سفارشی وارد کند یا از مقدار پیش فرض استفاده نماید.

این امر معمولا در برنامه ماشین حساب مشاهده می‌شود که در آن از نرخ بهره پیش فرض مثلا 6.5 درصد استفاده می‌گردد، مگر اینکه نرخ دیگری توسط کاربر وارد شود.

این منطق می‌تواند به سادگی با استفاده از دستور if پیاده سازی شود.

function calculator(principle,rate,time) {
if (principle === undefined)
principle = 5000;
if (rate === undefined)
rate = 6;
if (time===undefined)
time = 3;
....
}

اما روش مختصر آن در واقع بسیار ساده‌تر است که در زیر مثال زده شده:

function calculator(principle=5000, rate=6, time=3){
...
}

اصولا باید مقدار پیش فرض را در خود تابع اختصاص دهید.

8. عملگر in

اگر می‌خواهید بررسی کنید که آیا یک ویژگی مشخص در یک شی یا نمونه اولیه آن وجود دارد، عملگر in این کار را برای شما آسان می‌کند.

به عبارت دیگر، عملگر in می‌تواند بررسی کند که آیا یک ویژگی تعریف شده در یک شی یا نمونه اولیه آن وجود دارد یا خیر.

const car = { make: 'Honda', model: 'Accord', year: 1998 };console.log('make' in car);

// expected output: truedelete car.make;if ('make' in car === false) {

  car.make = 'Suzuki';

}

console.log(car.make);

// expected output: "Suzuki"

این عملگر در نتیجه true یا false را برمی‌گرداند.

توجه داشته باشید که هنگام کار با DOM این ویژگی می‌تواند بسیار مفید باشد.

var q= "onrender" in document.createElement("div");
if(q){
...
}
else{
...
}

در اینجا می‌توانید اطلاعات بیشتری در مورد این عملگر کسب کنید.

9. بررسی پارامترهای اجباری

گاهی اوقات برای انجام موفقیت آمیز یک کار باید مقادیر خاصی داشته باشید. به عنوان مثال هنگام ورود به حساب ایمیل خود باید آدرس ایمیل را وارد کنید. به طور مشابه هنگام ثبت نام در برخی از شبکه‌های اجتماعی ممکن است لازم باشد نام، سن، آدرس ایمیل و شماره تلفن خود را ثبت کنید. در این صورت پلتفرم مورد نظر نمی‌تواند نوع خاصی از مقدار پیش فرض را ارائه دهد.

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

function submitName(name) {
if(name=== undefined) {
throw new Error('Missing parameter');
}
return name;
}

خوشبختانه ترفند سریع اینکه مقدار پارامتر خالی است یا خیر با پیاده سازی مورد شماره 7 ما در این لیست یعنی مقادیر پیش فرض پارامتر انجام می‌شود.

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

پس از ایجاد این تابع، باید آن را به عنوان مقدار پیش فرض پارامتر اجباری تعیین کنید.

mandatory = () => {
throw new Error('Missing parameter');
}

submitName= (name= mandatory()) => {
return name;
}

بنابراین اگر پارامتر پیش فرض - در مثال ما "name" - مشخص نشده باشد، تابع mandatory() که خطا را نشان می‌دهد، برگردانده و اجرا می‌شود.

این تکنیک در واقع بیانگر اصل DRY (Don't Repeat Yourself) است.

جمع بندی

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

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

در نظر داشته باشید به دست آوردن تسلط کامل بر آنها اگر غیرممکن نباشد، بسیار دشوار است.

بنابراین با یادگیری مداوم چنین ترفندها و تکنیک‌های جدید مطمئنا می‌توانید در جاواسکریپت به تخصص بالایی برسید.

برای یادگیری زبان محبوب جاوااسکریپت می‌توانید این دوره مفید و کاربردی را در وب سایت راکت دنبال کنید.

امیدوارم این مقاله برایتان سودمند باشد. در صورت تمایل می‌توانید سوالات و نظرات خود را در بخش زیر با ما در میان بگذارید.

منبع