اجتناب از خطای ReferenceError با درک مفهوم Scope در جاوا اسکریپت
این مقاله به بررسی یکی از دلایل رایج خطای ReferenceError در جاوااسکریپت میپردازد. این خطا زمانی رخ میدهد که سعی بر دسترسی به متغیری داشته باشید که در محدوده (اسکوپ) قابل دید (دسترس) نباشد.
اسکوپ چیست؟
اسکوپ در جاوااسکریپت به فضایی اشاره دارد که متغیر در آن تعریف شده است. به عبارت سادهتر، اسکوپ را میتوان مانند یک کوله پشتی در نظر گرفت که حاوی وسایل مختلفی مانند کتاب، خودکار و غیره است. کوله پشتی، محیط (اسکوپ) را نشان میدهد و وسایلی که داخل آن قرار دارند مانند متغیرها و توابع هستند.
انواع اسکوپ
در جاوااسکریپت سه نوع اسکوپ وجود دارد:
-
اسکوپ سراسری (Global Scope):
متغیرهای تعریفشده در اسکوپ سراسری از هر جای کد قابل دسترسی هستند. این متغیرها در بالاترین سطح کد در پشتهی فراخوانی (Call Stack) قرار دارند.
const role = "برنامهنویس";
console.log(role); // خروجی: "برنامهنویس"
کد بالا نمونهای از اسکوپ سراسری است. این کد بدون مشکل اجرا میشود زیرا متغیر role
درون اسکوپ سراسری تعریف شده است.
-
اسکوپ تابع (Function Scope):
در جاوااسکریپت، هر تابع یک اسکوپ ایجاد میکند و متغیرهای تعریفشده درون آن تابع فقط از داخل همان تابع قابل دسترسی هستند و از بیرون تابع در دسترس نیستند. این موضوع باعث ایجاد خطای ReferenceError میشود. برای درک بهتر این موضوع، به کد زیر توجه کنید:
const jobDesc = (exp) => {
const yearExp = 7;
let skill = "Node.js";
const remote = true;
if (yearExp !== exp) {
return `سابقه شما ${exp} سال است و برای این موقعیت مناسب نیستید`;
} else {
return "تبریک میگوییم! شما مناسب این موقعیت هستید";
}
};
console.log(skill); // Uncaught ReferenceError: skill is not defined
در اینجا زمانی که سعی میکنیم به متغیر skill
خارج از تابع jobDesc
دسترسی پیدا کنیم، خطای ReferenceError رخ میدهد.
-
اسکوپ بلوکی (Block Scope):
این نوع اسکوپ تنها در نسخه ES6 جاوااسکریپت به بعد وجود دارد. در اسکوپ بلوکی، متغیرها فقط داخل بلوکی که تعریف شدهاند قابل دسترسی هستند. این بلوکها معمولا با آکولاد ({}) مشخص میشوند و میتوانند شامل دستورات شرطی (if) یا حلقههای تکرار (for) باشند.
if (age >= 19 && age <= 21) {
const party = true;
}
console.log(party); // Uncaught ReferenceError: party is not defined
در ES6، تمام توابع در حالت سختگیر (strict mode) دارای اسکوپ بلوکی هستند.
نتیجهگیری
در این مقاله با مفهوم اسکوپ در جاوااسکریپت آشنا شدیم. اسکوپ به فضایی اشاره دارد که متغیر در آن تعریف شده است. سه نوع اسکوپ وجود دارد: سراسری، تابع و بلوکی. متغیرهای تعریفشده در اسکوپ سراسری از هر جای کد قابل دسترسی هستند. اسکوپ تابع، اسکوپ خاص خود را ایجاد میکند و متغیرهای تعریفشده در آن اسکوپ فقط داخل همان تابع قابل دسترسی هستند. در نهایت، اسکوپ بلوکی که از ES6 به بعد معرفی شد، این امکان را میدهد تا متغیرها فقط داخل بلوک تعریفشدهی خود قابل دسترسی باشند.
Getting Out Of ReferenceError Because of Scope in Javascript
This article explores one of the common causes of the ReferenceError in Javascript. This error occurs when you try to access a variable that is not within its scope (accessible area).
What is Scope?
Scope in Javascript refers to the space or environment where a variable is declared. In simpler terms, think of scope as a backpack that contains various items like books, pens, etc. The backpack represents the environment (scope), and the items inside it are like variables and functions.
Types of Scope
There are three types of scope in Javascript:
-
Global Scope:
Variables defined in the global scope can be accessed from anywhere in the code. These variables reside at the top level of the call stack.
const role = "developer";
console.log(role); // Output: "developer"
The code above is an example of global scope. This code runs without any issues because the variable role
is defined within the global scope.
-
Function Scope:
In Javascript, every function creates a scope, and the variables defined within that function can only be accessed from within the function scope and not from outside the function. This will result in a ReferenceError. To understand this better, consider the following code snippet:
const jobDesc = (exp) => {
const yearExp = 7;
let skill = "Node.js";
const remote = true;
if (yearExp !== exp) {
return `your experience is ${exp}, and you are not a fit`;
} else {
return "congratulations your a fit";
}
};
console.log(skill); // Uncaught ReferenceError: skill is not defined
Here, when we try to access the variable skill
outside the jobDesc
function, a ReferenceError occurs.
-
Block Scope:
This scope applies to ES6 and later versions only. In ES6, blocks also create scope, and variables are only accessible within the block they are declared in. This includes everything inside curly braces (e.g., if statements, for loops).
if (age >= 19 && age <= 21) {
const party = true;
}
console.log(party); // Uncaught ReferenceError: party is not defined
In ES6, all functions are now block-scoped in strict mode.
Conclusion
This article introduced the concept of scope in Javascript. Scope refers to the space where a variable is declared. There are three types of scope: global, function, and block. Variables defined in the global scope can be accessed from anywhere in the code. Function scope creates its own scope, and variables declared in function scope are only accessible within the function scope. Finally, block scope, introduced in ES6 and later, allows variables to be accessible only within their defined block.