کلمه کلیدی let در جاوا اسکریپت و کاربردهای آن

در جاوا اسکریپت، کلمه کلیدی «let» برای اعلام متغیرهایی با محدوده بلاک (Block Scope) استفاده می‌شود. این کلمه کلیدی در نسخه ES2015/ES6 جاوا اسکریپت به همراه کلمه کلیدی «const» معرفی شد. در این مطلب از مجله مکتوب می‌خواهیم در رابطه با کلمه کلیدی let در جاوا اسکریپت و رسالت آن توضیحاتی کامل و جامع ارائه کنیم. پس با ما همراه باشید.

Let در جاوا اسکریپت چیست؟

قبل از ES2015/ES6، تنها دو نوع دامنه متغیر در جاوا اسکریپت، محدوده سراسری یا جهانی (Global Scope) و محدوده یا دامنه تابعی (Functions Scope) وجود داشتند. متغیرهایی که با کلمه کلیدی «var» اعلام می‌شوند، محدوده تابعی دارند، به این معنی که در تابعی که در آن اعلان شده‌اند، یا اگر خارج از هر تابعی اعلام شود، در سراسر دامنه جهانی قابل‌دسترسی هستند. در زیر سینتکس کلمه کلیدی Let در جاوا اسکریپت برای اعلام یک متغیر آمده است:

let variable_name;

کلمه کلیدی let محدوده بلوک را معرفی کرد، به این معنی که متغیرهای اعلام شده با let به بلوکی که در آن تعریف شده‌اند محدود می‌شوند. بلوک هر کدی است که در پرانتزهای «{}» نوشته شده باشد. مثال زیر محدوه بلوکی را نشان می‌دهد:

{

  let x = 10;

  console.log(x); // 10

}

console.log(x); // ReferenceError: x is not defined

در مثال بالا، متغیر «x» با «let» در داخل یک بلوک اعلام شده و فقط در آن بلوک قابل‌دسترسی است. در خارج از بلوک، تلاش برای دسترسی به “x” منجر به «خطای مرجع ReferenceError» می‌شود. کلمه کلیدی «let» اجازه می‌دهد تا کنترل دقیق‌تری بر محدوده متغیر داشته باشد و به جلوگیری از مشکلات رایج مرتبط با متغیرهای اعلام شده با استفاده از «var»، مانند بالا بردن تصادفی متغیر (Hiosting کردن) یا نشت متغیرها به دامنه جهانی کمک می‌کند. در کل کلمه کلیدی let در جاوا اسکریپت برای اعلام متغیرها با محدوده بلوک استفاده می‌شود و با استفاده از آن اطمینان حاصل خواهد شد که آن‌ها به بلوکی که در آن تعریف شده‌اند محدود می‌شوند.

مثال‌ هایی برای Let در جاوا اسکریپت

در این بخش چند مثال از کلمه کلیدی Let در جاوا اسکریپت به‌منظور درک بهتر این مفهوم آورده شده است. مثال‌های آورده شده هرکدام مرتبط با مفهوم خاصی حول کلمه کلیدی Let در Javascript هستند و اهمیت زیادی در درک آن دارند.

مثال ١. محدوده سراسری

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

<script>

let x = 20;

document.write("Outside the function x = " + x);


function show() {

    document.write("<br> Inside the function x = " + x);

}

show();

</script>

خروجی مثال فوق در داخل کنسول به صورت زیر است:

در این مثال، یک متغیر x را با استفاده از کلمه کلیدی let در محدوده جهانی اعلام می‌کنیم. متغیر x از هر جایی در اسکریپت قابل‌دسترسی است. وقتی تابع show()‎ را فراخوانی می‌کنیم، مقدار x را هم در خارج و هم در داخل تابع با استفاده از متد document.write()‎ نمایش می‌دهد. از آنجایی که x در دامنه جهانی تعریف شده است، می‌توان از خارج و داخل تابع بدون هیچ مشکلی به آن دسترسی داشت.

مثال ٢. محدوده تابعی

فانکشن اسکوپ یا محدوده Function در جاوا اسکریپت نیز یکی از مفاهیم مربوطه به کلمه کلیدی let در جاوا اسکریپت است که مثال زیر و توضیحات آن برای درک این مفهوم آورده شده است:

<script>

function show() {

    let num = 15;

    document.write("Inside the function num = " + num);

}

show();

document.write("<br> Outside the function num = " + num);

</script>

در این مثال، یک متغیر num را با استفاده از کلمه کلیدی let در تابع show()‎ اعلام می‌کنیم. متغیر num دارای محدوده تابع است، به این معنی که فقط در داخل تابع قابل‌دسترسی خواهد بود. وقتی تابع show()‎ را فراخوانی می‌کنیم، مقدار num را با استفاده از متد document.write()‎ نمایش می‌دهد. با این حال، زمانی که سعی می‌کنیم به متغیر num در خارج از تابع دسترسی پیدا کنیم، یک خطا ایجاد می‌کند زیرا num در محدوده بیرونی تعریف نشده است. خروجی این مثال به صورت زیر خواهد بود:

همچنین در این مثال، اگر کد را اجرا و خروجی کنسول را بررسی کنید، با خطای زیر مواجه خواهید شد:

Uncaught ReferenceError: num is not defined

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

خط document.write(“<br> Outside the function num = ” + num);‎ در حال تلاش برای دسترسی به متغیر num در خارج از تابع show()‎ است، اما از آنجایی که num با کلمه کلیدی let در داخل تابع اعلان می‌شود، تنها در محدوده تابع قابل‌دسترسی است. در نتیجه، هنگام تلاش برای دسترسی به num در خارج از تابع، خطا رخ می‌دهد و عبارت دوم چاپ نمی‌شود.

لطفاً توجه داشته باشید که معمولاً استفاده از document.write()‎ برای نمایش خروجی توصیه نمی‌شود، زیرا در صورت استفاده پس از بارگیری سند می‌تواند کل سند را بازنویسی کند. در سناریوهای دنیای واقعی، معمولاً از روش‌های دیگری مانند دستکاری DOM یا ورود به کنسول برای نمایش خروجی استفاده می‌کنیم.

پیشنهاد مطالعه: آموزش class در جاوا اسکریپت به زبان ساده

مثال ٣. محدوده بلوکی

محدوه دیگری که در رابطه با مفهوم کلمه کلیدی let در جاوا اسکریپت اهمیت زیادی دارد محدوده بلوکی  یا همان بلوک اسکوپ است که در قالب مثال زیر توضیح داده خواهد شد.

<script>

{

    let num = 30;

    document.write("Inside the block num = " + num);

}

document.write("<br> Outside the block num = " + num);

</script>

در این مثال، ما یک متغیر num را با استفاده از کلمه کلیدی let در جاوا اسکریپت در داخل یک بلوک اعلام می‌کنیم. متغیر num دارای محدوده بلوکی است، به این معنی که فقط در بلوکی که در آن تعریف شده است قابل‌دسترسی است. در داخل بلوک، از document.write()‎ برای نمایش مقدار num به صورت “Inside the block num = 30” استفاده می‌کنیم. با این حال، هنگامی که ما سعی می‌کنیم به num در خارج از بلوک دسترسی پیدا کنیم، یک خطا ایجاد می‌کند زیرا num در محدوده بیرونی تعریف نشده است.

دستور دوم document.write()‎ خارج از بلوک مقدار num را نمایش نمی‌دهد زیرا در آن محدوده قابل‌دسترسی نیست و خطای زیر را می‌دهد:

UncaughtReferenceError: num is not defined

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

پیشنهاد مطالعه: آموزش متد append در جاوا اسکریپت به زبان ساده

مثال ٤. اعلان مجدد متغیر در بلوک‌های مختلف

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

<script>

let num = 23;

{

    let num = 15;

    document.write("num inside the block = " + num);

}

let num = 89;

document.write("<br> num outside the block = " + num);

</script>

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

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

SyntaxError: redeclaration of let x

note: Previously declared at line 2, column 5

پیام خطا نشان می‌دهد که یک SyntaxError وجود دارد زیرا متغیر num در حال اعلام مجدد است. کلمه کلیدی let در جاوا اسکریپت به ما اجازه می‌دهد که یک متغیر را با محدوده بلوک اعلام کنیم، اما اجازه نمی‌دهد که نام متغیر مشابه در همان محدوده اعلام شود. در کد ارائه شده دو اعلان num با استفاده از کلمه کلیدی let داریم. اعلان اول خارج از بلوک و اعلان دوم داخل بلوک است. با این حال، از آنجایی که هر دو اعلان نام متغیر یکسانی دارند، منجر به یک خطای نحوی می‌شود.

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

پیشنهاد مطالعه: توابع سازنده در جاوا اسکریپت

تفاوت کلمات کلیدی Var و Let در جاوا اسکریپت

تفاوت اصلی بین کلمات کلیدی let و var در دامنه آن‌ها نهفته است. کلمه کلیدی var دارای یک دامنه جهانی بوده درحالی‌که کلمه کلیدی let دارای یک محدوده بلوکی است. برای درک این تفاوت مثال‌های زیر را در نظر می‌گیریم:

مثال 1: محدوده جهانی یا سراسری:

var x = 10;

let y = 20;

function example() {

  console.log(x); // 10

  console.log(y); // 20

}

example();

console.log(x); // 10

console.log(y); // ReferenceError: y is not defined

در این مثال، یک متغیر x را با استفاده از کلمه کلیدی var و یک متغیر y را با استفاده از کلمه کلیدی let اعلام می‌کنیم. متغیر var x دارای یک دامنه جهانی است، بنابراین می‌توان از هر نقطه در اسکریپت به آن دسترسی داشت. با این حال، متغیر let y دارای محدوده بلوکی است و فقط در بلوکی که در آن تعریف شده است قابل‌دسترسی است؛ بنابراین، تلاش برای دسترسی به y در خارج از بلوک منجر به یک ReferenceError می‌شود.

مثال 2: Block Scope یا محدوده بلوکی:

function example() {

  var x = 10;

  let y = 20;

  if (true) {

    var x = 30;

    let y = 40;

    console.log(x); // 30

    console.log(y); // 40

  }

  console.log(x); // 30

  console.log(y); // 20

}

example();

در این مثال، یک متغیر x را با استفاده از کلمه کلیدی var و یک متغیر y را با استفاده از کلمه کلیدی let در تابع example() اعلام می‌کنیم. در داخل بلوک دستور if، x را با استفاده از var و y را با استفاده از let دوباره اعلام می‌کنیم. از آنجایی که var یک محدوده تابعی دارد، اعلام مجدد x در داخل بلوک بر مقدار x در خارج از بلوک نیز تأثیر می‌گذارد. از طرف دیگر، متغیر let y دارای محدوده بلوکی است، بنابراین اعلام مجدد آن در داخل بلوک بر مقدار y در خارج از بلوک تأثیر نمی‌گذارد. به‌طور خلاصه، تفاوت‌های اصلی بین let و var عبارت‌اند از:

• let در جاوا اسکریپت دارای محدوده بلوکی بوده و از طرفی دیگر var دارای محدوده تابع است.
• متغیرهای var را می‌توان در همان محدوده مجدداً اعلام کرد، درحالی‌که متغیرهای let را نمی‌توان در یک بلوک مجدداً اعلام کرد.

درک این تفاوت‌ها می‌تواند به شما کمک کند تا با انتخاب کلمه کلیدی مناسب بر اساس محدوده و رفتار متغیرهای خود کد قوی‌تر و قابل پیش‌بینی بیشتری بنویسید.

پیشنهاد مطالعه: صفر تا صد متغیرها در جاوا اسکریپت

تفاوت var let const

به‌طور خلاصه، تفاوت‌های var، let و const در جاوا اسکریپت عبارت‌اند از:

• var دارای دامنه عملکردی است و می‌توان آن را مجدداً اعلام و تخصیص داد.
• let دارای محدوده بلوک است، نمی‌توان آن را در همان بلوک مجدداً اعلام کرد اما می‌توان آن را مجدداً اختصاص داد.
• const دارای محدوده بلوکی است، نمی‌تواند مجدداً اعلام یا تخصیص داده شود. یک متغیر فقط خواندنی ایجاد می‌کند.
• متغیرهای var قابلیت HIosting کردن دارند، درحالی‌که متغیرهای let و const نیستند.
• متغیرهای var را می‌توان قبل از اعلام شدن (که در نتیجه تعریف نشده است) در دسترس قرارداد، درحالی‌که متغیرهای let و const دارای یک منطقه مرده زمانی هستند.
• var اگر خارج از یک تابع اعلان شود به صورت سراسری دارای دامنه است، درحالی‌که let و const نیستند.
• let و const به دلیل قوانین محدوده دقیق‌تر و خوانایی کد بهتر بر var ارجحیت دارند.
• برای مقادیری که نباید دوباره تخصیص داده شوند از const استفاده کنید و برای مقادیری که نیاز به تخصیص مجدد دارند اجازه دهید.

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

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

سخن پایانی

کلمه کلیدی let در جاوا اسکریپت محدوده بلوک را معرفی می‌کند که به متغیرها اجازه می‌دهد تا محدوده را به بلوکی که در آن تعریف شده‌اند محدود کنند. این کنترل دقیق‌تری بر طول عمر متغیر ارائه می‌دهد و خطر تداخل نام‌گذاری یا تغییرات ناخواسته را کاهش می‌دهد. نکات کلیدی که باید در مورد کلمه کلیدی let به خاطر بسپارید عبارت‌اند از:

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

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

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

منبع مورد استفاده: javatpoint