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

جاوااسکریپت یکی از زبان‌های برنامه‌نویسی پرکاربرد و قدرتمند در دنیای وب است. یکی از ویژگی‌های مهم اکثر زبان‌های برنامه‌نویسی این است که در پایان هر خط از دستورات نیاز به نوشتن کاراکتر سمی‌کالن یا همان نقطه‌ویرگول است. جاوااسکریپت اما به شما این امکان را می‌دهد که سمی‌کالن را در پایان دستورات ننویسید و به نوعی در بسیاری از موارد نوشتن آن اختیاری است. یکی از ویژگی‌های جالب این زبان، توانایی آن در درج خودکار سمی‌کالن‌ها (Semicolon) است که به آن Automatic Semicolon Insertion (ASI) می‌گویند. با این حال، گاهی اوقات ننوشتن سمی‌کالن‌ها می‌تواند باعث بروز مشکلات و رفتارهای غیرمنتظره در کد شما شود. در این مقاله، به بررسی مواردی می‌پردازیم که در آن‌ها نبودن سمی‌کالن می‌تواند مشکلاتی ایجاد کند و یاد می‌گیریم چه جاهایی نیاز است که از سمی‌کالن استفاده کنیم.

شروع خطوط با براکت مربع ([)

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

مثال:

let x = 5
[1, 2, 3].forEach(n => console.log(n))

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

let x = 5[1, 2, 3].forEach(n => console.log(n))

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

let x = 5; // اینجا
[1, 2, 3].forEach(n => console.log(n));

شروع خطوط با پرانتز (()

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

مثال:

let x = function() {}
(function() { console.log('Hello!') })()

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

let x = function() {}(function() { console.log('Hello!') })()

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

let x = function() {};
(function() { console.log('Hello!') })();

دستورات return، throw، continue و break

عدم استفاده از سمی‌کالن بعد از این دستورات می‌تواند منجر به رفتارهای غیرمنتظره شود.

مثال:

function getObject() {
    return
    {
        key: 'value'
    }
}

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

function getObject() {
    return;
    {
        key: 'value'
    }
}

در واقع return دستوری که بلافاصله بعد از آن آمده است را برمی‌گرداند. با دانستن این موضوع که ASI به صورت خودکار یک سمی‌کالن در پایان هر خط از دستورات می‌گذارد باید از نوشتن چنین کدی پرهیز کنیم و برای دریافت نتیجه مورد نظر، چیزی شبیه به کد زیر را بنویسیم:

function getObject() {
    return {
        key: 'value'
    }; // اینجا حتی میشه سمی‌کالن رو ننوشت. مهم اینه که نقطه شروع مقدار برگشتی،‌ روبروی ریترن نوشته شود نه زیر آن
}

جایی که ASI ممکن است به اشتباه عمل کند

گاهی اوقات جاوااسکریپت نمی‌تواند به درستی پایان دستورات را تشخیص دهد و درج سمی‌کالن به صورت صریح ضروری است.

مثال:

let a = b + c
(d + e).print()

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

let a = b + c(d + e).print()

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

let a = b + c;
(d + e).print();

نتیجه‌گیری

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

به شخصه هنگام کدنویسی علاقه‌ای به نوشتن سمی‌کالن در انتهای دستورات ندارم. به نظرم نبودش کد رو قشنگ‌تر میکنه. اما دونستن مطلبی که ذکر شد می‌تونه کمک بکنه در صورتی که داخل کدمون خطایی داشتیم، احتمال بدیم که به دلیل عدم وجود سمی‌کالن در یک جای ضروری بوده. خوشحال میشم نظرتون رو در این مورد ارسال کنید.