🟧 مفاهیم پایه جاوااسکریپت — راهنمای جامع و مفهومی
جاوااسکریپت، زبانی است که تقریباً در همه جا ردپایش را میبینیم: در صفحات وب، اپلیکیشنهای موبایل، بازیهای آنلاین، و حتی برنامههای سروری. اما پیش از آنکه بتوانیم کارهای شگفتانگیز با آن انجام دهیم، باید مفاهیم پایهاش را خوب درک کنیم. این مفاهیم مثل ریشههای یک درختاند که اگر محکم باشند، شاخههای پیشرفتهتر هم درست رشد میکنند.
بیاییم قدمبهقدم این مفاهیم را با هم مرور کنیم.
✅ ۱.۱ Syntax و مفاهیم اصلی
هر زبان برنامهنویسی، قواعد نوشتاری خودش را دارد. جاوااسکریپت هم از این قاعده مستثنا نیست. تصور کن داری با یک آدم حرف میزنی؛ اگر جملاتت نصفهنیمه یا بههمریخته باشد، طرف مقابل نمیفهمد چه میخواهی بگویی. همین موضوع در کدنویسی هم صادق است.
🔹 قوانین نوشتاری (Syntax)
در جاوااسکریپت، دستورها (Statements) را معمولاً با ;
تمام میکنیم. البته مرورگر خودش خیلی وقتها حدس میزند که منظورت کجاست (Automatic Semicolon Insertion)، اما همیشه هم دقیق حدس نمیزند. بههمیندلیل برنامهنویسان حرفهای معمولاً خودشان ;
را میگذارند تا خیالشان راحت باشد.
بلوکهای کد را با { }
مشخص میکنیم. مثلاً:
if (x > 10) {
console.log("Big number");
}
زبان حساس به بزرگی و کوچکی حروف (Case Sensitive) است. یعنی Name
با name
دو چیز کاملاً متفاوت است.
🔹 کامنتگذاری
کامنتها توضیحاتی هستند که برای خودمان یا دیگر برنامهنویسان مینویسیم تا بعداً بفهمیم کد چه میکند. مرورگر این متنها را نادیده میگیرد و اجرا نمیکند.
دو نوع کامنت داریم:
- تکخطی:
// این یک کامنت است
- چندخطی:
/* این یک کامنت چندخطی است */
کامنتگذاری یکی از بهترین عادتهای یک برنامهنویس حرفهای است.
🔹 Statement vs Expression
یکی از مفاهیمی که خیلیها در ابتدا قاطی میکنند، تفاوت بین Statement و Expression است.
- Statement مثل یک جمله مستقل است که کار خاصی انجام میدهد ولی ارزش یا مقدار مستقیمی برنمیگرداند. مثلاً:
let x = 10; if (x > 5) { console.log("ok"); }
اینها فقط کار انجام میدهند: چیزی را تعریف میکنند، شرطی را بررسی میکنند، حلقهای اجرا میکنند. - Expression عبارتی است که همیشه یک مقدار تولید میکند. حتی اگر کوچک:
2 + 3 myFunction() x * y
هرکجا جاوااسکریپت انتظار یک مقدار دارد، میتوانیم Expression بنویسیم.
مثلاً:
let total = 2 + 3;
اینجا 2 + 3
یک Expression است که نتیجهاش 5
است و در total
ذخیره میشود.
✅ ۱.۲ متغیرها (Variables)
متغیرها محفظههایی هستند که دادهها را در آنها نگه میداریم. درست مثل جعبهای که روی آن برچسب زدهایم «قند» یا «چای»، متغیر هم یک اسم دارد و میتواند مقداری را در خود نگه دارد.
🔹 var
در گذشته، تنها راه تعریف متغیر استفاده از var
بود. اما دو مشکل بزرگ داشت:
- محدودهاش تابع است (Function Scope) یعنی اگر درون یک بلوک کد تعریفش کنی، باز هم از بیرون بلوک به آن دسترسی داری. این باعث خطاهای عجیب میشود.
- قابلیت Hoisting دارد. یعنی بالا کشیده میشود ولی مقدارش
undefined
است. مثلاً:console.log(a); // undefined var a = 10;
به همین دلیل امروزه کمتر از var
استفاده میشود.
🔹 let
در ES6 معرفی شد و بسیاری از مشکلات var را حل کرد:
- Block Scope دارد. یعنی فقط داخل همان
{ }
معتبر است. - قابلیت Hoisting دارد اما قبل از مقداردهی نمیشود استفادهاش کرد. استفاده کنی خطا میدهد (TDZ → Temporal Dead Zone).
مثلاً:
let x = 5;
if (true) {
let x = 10;
console.log(x); // 10
}
console.log(x); // 5
دو متغیر متفاوت هستند!
🔹 const
وقتی نمیخواهیم مقدار یک متغیر تغییر کند، از const
استفاده میکنیم.
- Block Scope دارد.
- اگر Primitive باشد (مثل عدد یا رشته)، تغییر نمیکند.
- اما اگر Object یا Array باشد، خود آبجکت یا آرایه تغییرپذیر است. تنها چیزی که تغییر نمیکند آدرسش در حافظه است.
مثلاً:
const colors = ["red", "blue"];
colors.push("green"); // مجاز است
colors = ["yellow"]; // خطا میدهد
✅ ۱.۳ انواع دادهها (Data Types)
جاوااسکریپت دادهها را به دو دسته تقسیم میکند: Primitive و Reference.
🔹 Primitive Types
اینها مقادیر سادهای هستند که مستقیماً در متغیر ذخیره میشوند.
- String: برای متن. مثلاً
"Hello"
- Number: هم اعداد صحیح و هم اعشاری. مثلاً
5
یا3.14
- Boolean: درست یا غلط. مثلاً
true
یاfalse
- Null: یعنی «هیچ». مثلاً وقتی میخواهی یک متغیر را خالی کنی.
- Undefined: متغیری که تعریف شده اما مقداری نگرفته.
- Symbol: برای شناسههای یکتا (ES6).
- BigInt: برای اعداد خیلی بزرگ.
🔹 Reference Types
اینها مقادیر پیچیدهتری هستند که آدرسشان در متغیر ذخیره میشود. نه خودشان.
- Object: ترکیبی از key و value. مثلاً:
let person = { name: "Ali", age: 30 };
- Array: لیستی از مقادیر مرتب:
let colors = ["red", "blue"];
- Function: خود تابع هم یک داده است که میتوان آن را در متغیر ذخیره کرد:
function greet() { console.log("Hello!"); }
تفاوت مهم:
اگر یک Primitive را به متغیر دیگر بدهیم، کپی میشود. ولی Reference Type را اگر به متغیر دیگر بدهیم، هر دو به یک آدرس اشاره میکنند.
✅ ۱.۴ عملگرها (Operators)
عملگرها مثل ابزارهایی هستند که دادهها را تغییر میدهند یا با هم مقایسه میکنند.
🔹 Arithmetic Operators
برای محاسبات:
- جمع:
+
- تفریق:
-
- ضرب:
*
- تقسیم:
/
- باقیمانده تقسیم:
%
🔹 Assignment Operators
مقدار به متغیر اختصاص میدهند یا آن را تغییر میدهند:
=
→ اختصاص مقدار+=
→ افزایش مقدار-=
→ کاهش مقدار
مثلاً:
let a = 5;
a += 2; // حالا a برابر 7 است
🔹 Comparison Operators
دو مقدار را مقایسه میکنند و جواب true یا false برمیگردانند:
==
→ فقط مقدار را مقایسه میکند.===
→ هم مقدار و هم نوع داده را مقایسه میکند.!=
,!==
→ نابرابری>
,<
,>=
,<=
→ مقایسه ریاضی
🔹 Logical Operators
شرطهای منطقی میسازند:
&&
→ هر دو شرط باید true باشند.||
→ یکی از شرطها true کافی است.!
→ نتیجه را برعکس میکند.
🔹 Unary Operators
روی یک عملوند کار میکنند:
typeof
→ نوع داده را نشان میدهد.delete
→ خاصیت آبجکت را حذف میکند.
🔹 Ternary Operator
شرط را کوتاهنویسی میکند:
let result = (age > 18) ? "adult" : "child";
✅ ۱.۵ توابع (Functions)
توابع باعث میشوند بتوانیم کدمان را قابل استفاده مجدد کنیم. مثل یک دستور آشپزی که هربار بخواهیم غذا درست کنیم، از همان دستور استفاده میکنیم.
🔹 Function Declaration
روش کلاسیک تعریف تابع:
function sayHi() {
console.log("Hi!");
}
🔹 Function Expression
تابع را در متغیر ذخیره میکنیم:
let greet = function() {
console.log("Hello!");
};
🔹 Arrow Functions
روش مدرنتر (ES6):
let greet = () => {
console.log("Hello!");
};
🔹 پارامترها و آرگومانها
- پارامتر → داخل تعریف تابع
- آرگومان → هنگام فراخوانی تابع
مثلاً:
function add(a, b) {
console.log(a + b);
}
add(2, 3); // a=2, b=3
🔹 Default Parameters
مقدار پیشفرض به پارامترها میدهیم:
function greet(name = "Guest") {
console.log("Hello " + name);
}
🔹 Return Statement
تابع مقداری را برمیگرداند:
function sum(a, b) {
return a + b;
}
🔹 Scope در توابع
هر تابع محیط خودش را دارد. متغیرهای داخل تابع بیرونش قابل دسترسی نیستند.
🔹 Hoisting
توابع Declaration قبل از اجرا بالا کشیده میشوند:
sayHi();
function sayHi() {
console.log("Hi");
}
✅ ۱.۶ شرطها (Conditionals)
برنامهنویسی پر است از تصمیمگیری. مثل زندگی واقعی که بسته به شرایط رفتار میکنیم.
🔹 if / else if / else
مثلاً:
if (score > 90) {
console.log("Excellent!");
} else if (score > 50) {
console.log("Good!");
} else {
console.log("Fail!");
}
🔹 switch
برای بررسی چند حالت خاص:
switch (fruit) {
case "apple":
console.log("Red");
break;
case "banana":
console.log("Yellow");
break;
default:
console.log("Unknown");
}
✅ ۱.۷ حلقهها (Loops)
وقتی بخواهیم یک کار را چندبار انجام دهیم، از حلقه استفاده میکنیم. مثلاً چاپ اعداد ۱ تا ۵.
🔹 for
کلاسیکترین حلقه:
for (let i = 0; i < 5; i++) {
console.log(i);
}
🔹 while
تا زمانی که شرط برقرار است، اجرا میشود:
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
🔹 do…while
حداقل یکبار اجرا میشود:
let i = 0;
do {
console.log(i);
i++;
} while (i < 5);
🔹 for…of
برای پیمایش آرایهها:
for (let color of ["red", "blue", "green"]) {
console.log(color);
}
🔹 forEach
متد آرایه برای پیمایش سریع:
["red", "blue"].forEach(color => {
console.log(color);
});
🔹 break و continue
- break → حلقه را متوقف میکند.
- continue → به تکرار بعدی میرود.
🎯 نتیجهگیری
این مقاله سعی داشت مفاهیم پایه جاوااسکریپت را کمی مفصلتر و توضیحیتر از حالت ساده مرور کند. اگر این مفاهیم را خوب بفهمید، در قدمهای بعدی مثل DOM، رویدادها، AJAX و … احساس سردرگمی نخواهید داشت.
در مقالات فرزند، هر یک از این موضوعات را با جزئیات تخصصی، مثالهای فراوان، و تمرینهای کاربردی بررسی خواهیم کرد. دنیای جاوااسکریپت پر از ماجراهای جذاب است!