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

بیاییم قدم‌به‌قدم این مفاهیم را با هم مرور کنیم.


۱.۱ 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 و … احساس سردرگمی نخواهید داشت.

در مقالات فرزند، هر یک از این موضوعات را با جزئیات تخصصی، مثال‌های فراوان، و تمرین‌های کاربردی بررسی خواهیم کرد. دنیای جاوااسکریپت پر از ماجراهای جذاب است!