در مقاله قبلی، با عنوان "آموزش مقدماتی جاوااسکریپت: شروع از پایه برای مبتدیان"، قدمهای اولیه ی کار با جاوااسکریپت رو برداشتیم. اونجا با مفاهیمی مثل نحوه تعریف متغیرها، use strict و نحوه ی کامنت گذاری آشنا شدیم و یاد گرفتیم که چطور کدهای ابتدایی بنویسیم.
در این مقاله، میخوایم بیشتر به موضوعات انواع دادهها (Data Types) در جاوااسکریپت بپردازیم. اینکه جاوااسکریپت چه نوع داده هایی داره، چرا و چطور این نوع دادهها رو مدیریت میکنه و اینکه هر نوع داده چه ویژگی هایی داره، از جمله مباحث اصلی این مقاله ست. با درک این مباحث، میتونیم پایههای قویتری برای نوشتن کدهای مؤثر و بهینه در جاوااسکریپت بسازیم. در انتها هم چند تمرین براتون در نظر گرفتیم که کمک میکنه بهتر مطالب رو درک کنید و تو ذهنتون تثبیت بشه.
هر مقداری که توی جاوااسکریپت استفاده میکنیم، یه نوع مشخص داره؛ مثلاً میتونه یه عدد باشه یا یه رشته (string).
در جاوااسکریپت، هشت نوع داده ی اصلی داریم. اینجا یه مرور کلی میکنیم و توی بخشهای بعدی، هرکدوم رو با جزئیات بیشتری بررسی میکنیم.
یه ویژگی جالب جاوااسکریپت اینه که میتونیم هر نوع داده ای رو توی یه متغیر ذخیره کنیم و هر وقت خواستیم نوعش رو تغییر بدیم؛ مثلاً متغیری که الان یه رشته نگه میداره، میتونه بعداً یه عدد توش ذخیره بشه:
let message = "hello";
message = 123456; // هیچ خطایی نمیدهبه این سبک از زبانهای برنامه نویسی که متغیرها به یه نوع خاص محدود نمیشن، میگن زبانهای پویا. این یعنی خود دادهها نوع دارن، اما متغیرها به نوع خاصی محدود نمیشن.
let n = 123;
n = 12.345;در جاوااسکریپت، عددها هم میتونن صحیح باشن (مثل 123) و هم اعشاری (مثل 12.345). عملیات ریاضی مثل ضرب (*)، تقسیم (/)، جمع (+) و تفریق (-) هم روی این اعداد قابل انجامه.
جاوااسکریپت چند مقدار عددی خاص هم داره که تو همین نوع داده ی عددی قرار میگیرن، مثل:
Infinity: اگه یه عدد رو بر صفر تقسیم کنیم، نتیجش بی نهایت میشه.
alert(1 / 0); // InfinityNaN: وقتی که یه عملیات ریاضی نادرست انجام بدیم، مثل تقسیم یه متن به عدد، نتیجه میشه NaN.
alert("not a number" / 2); // NaNNaN به اصطلاح "چسبناک" یا "پایدار" هم هست؛ یعنی اگه توی یه عبارت ریاضی، یه مقدار NaN داشته باشیم، نتیجه کل عملیات هم NaN میشه:
alert(NaN + 1); // NaN
alert(3 * NaN); // NaN
alert("not a number" / 2 - 1); // NaNتنها استثنا در این زمینه اینه که NaN ** 0 برابر با ۱ هست.
عملیات ریاضی امن در جاوااسکریپت
تو جاوااسکریپت، انجام عملیات ریاضی همیشه امنه؛ یعنی میتونیم هر کاری انجام بدیم، مثل تقسیم بر صفر یا استفاده از رشتههای غیرعددی به عنوان عدد. جاوااسکریپت تو این موارد، به جای اینکه برنامه رو با خطای جدی متوقف کنه، فقط نتیجه رو به صورت NaN (یعنی "عدد نیست") یا Infinity (بی نهایت) نشون میده و به اجرای برنامه ادامه میده.
این مقادیر خاص عددی، از نظر فنی جزو نوع داده ی عدد حساب میشن، هرچند که خب به معنای رایج کلمه "عدد" نیستن.
توی بخشهای بعدی با جزئیات بیشتری یاد میگیریم که چطور با اعداد تو جاوااسکریپت کار کنیم.
برای اینکه این مبحث رو عمیقتر و با درک بهتر یاد بگیری، بیا با مثالهای ساده و ملموستر بررسیش کنیم. اینجا قراره جاوااسکریپت رو با روش متفاوتی برای مدیریت خطاهای عددی بشناسی که معمولاً توی ریاضیات و کدنویسی سنتی مشکل سازه. بریم سراغ مفهومهای اصلی:
خب بریم سراغ یه نوع داده دیگه به اسم BigInt. چرا به BigInt نیاز داریم؟ چون جاوااسکریپت توی ذخیره سازی اعداد خیلی بزرگ (بزرگتر از 9007199254740991) یه محدودیت داره. درسته که میتونه اعداد بزرگتری هم ذخیره کنه، اما دقتش از یه حدی بیشتر جواب نمیده، یعنی ممکنه بعضی از ارقام رو درست ذخیره نکنه و نتیجه ی دقیقی نده.
تصور کن میخوای اعداد بزرگ رو به هم اضافه کنی، مثل این:
console.log(9007199254740991 + 1); // 9007199254740992
console.log(9007199254740991 + 2); // باز هم 9007199254740992!اینجا جاوااسکریپت به خاطر محدودیت دقتش نمیتونه تفاوت بین این اعداد بزرگ رو به درستی ذخیره کنه و هر دو رو یه عدد میگیره. به این خاطر، اگه توی برنامه هات به دقت کامل برای اعداد خیلی بزرگ نیاز داری (مثلاً برای رمزنگاری یا تایم استمپ هایی که دقت میکروثانیه ای میخوان)، به یه راه حل بهتر نیاز داریم.
اینجا BigInt به کمکمون میاد. این نوع داده که به تازگی به جاوااسکریپت اضافه شده، میتونه اعداد خیلی بزرگی رو ذخیره کنه و توشون هیچ خطایی نداشته باشه.
برای تعریف BigInt، کافیه بعد از عدد n بذاری:
// حرف n آخر عدد یعنی این عدد از نوع BigInt هست
const bigInt = 1234567890123456789012345678901234567890n;نکته: چون BigInt معمولاً فقط برای کارهای خاص و عددهای خیلی بزرگ به کار میاد، معمولاً در کدنویسیهای روزمره نیازی بهش نداری و میتونی به جای اون از همون عدد معمولی استفاده کنی.
پس اگه به جایی رسیدی که نیاز به کار با اعداد خیلی بزرگ داشتی، بدون که BigInt بهترین انتخابه و دقت عددی بالا رو تضمین میکنه.
توی جاوااسکریپت، هر رشته (String) باید داخل کوتیشن (علامت نقل قول) باشه. مثالش این جوریه:
let str = "Hello";
let str2 = 'Single quotes are ok too';
let phrase = `can embed another ${str}`;در واقع، سه نوع کوتیشن برای تعریف رشتهها داریم:
کوتیشنهای دوتایی و تکی به طور کلی فرقی با هم ندارن و هر دو فقط یه رشته ساده میسازن.
اما بکتیک یه تفاوت مهم داره! این نوع علامت به ما امکان میده که متغیرها و عبارات رو داخل رشته ها جا بدیم. به این ویژگی میگیم جاسازی متغیرها.
برای جاسازی متغیرها، کافیه داخل بکتیک از ${...} استفاده کنیم. هر چیزی که توی این ساختار قرار بگیره، توی رشته محاسبه و جایگزین میشه.
let name = "John";
// استفاده از متغیر داخل رشته
alert( `Hello, ${name}!` ); // Hello, John!
// یا حتی استفاده از عبارت ها
alert( `the result is ${1 + 2}` ); // the result is 3کوتیشنهای تکی و دوتایی این قابلیت رو ندارن که متغیر یا عبارت توشون قرار بدی. اگه تو کوتیشن ساده از ${...} استفاده کنی، دقیقاً همون طوری که هست، نمایش داده میشه:
alert( "the result is ${1 + 2}" ); // the result is ${1 + 2}پس برای استفاده از متغیرها یا محاسبات داخل رشته، باید از بکتیک استفاده کنی!
نکته: برخلاف بعضی زبانها مثل C یا جاوا که نوع داده ای به اسم char دارن (برای نگهداری یه کاراکتر)، جاوااسکریپت همچین چیزی نداره. توی جاوااسکریپت، فقط نوع داده ی string وجود داره که میتونه از صفر تا چندین کاراکتر رو نگه داره.
نوع Boolean در جاوااسکریپت فقط دو مقدار داره: true و false.
این نوع بیشتر برای ذخیره ی مقادیر بله/خیر استفاده میشه، به این شکل که true به معنی "بله، درسته" و false به معنی "نه، اشتباهه".
مثلاً:
let nameFieldChecked = true; // یعنی فیلد نام انتخاب شده
let ageFieldChecked = false; // یعنی فیلد سن انتخاب نشدهمقادیر Boolean همچنین نتیجه ی مقایسهها هستن. برای مثال:
let isGreater = 4 > 1;
alert( isGreater ); // true (یعنی جواب "بله" هست)در ادامه، تو فصل «عملگرهای منطقی» بیشتر درباره ی Boolean یاد میگیریم.
مقدار خاصی به اسم null تو جاوااسکریپت هست که جزو هیچ کدوم از انواع دادههای بالا نیست.
null خودش یه نوع داده ست که فقط همین مقدار null رو شامل میشه:
let age = null;توی جاوااسکریپت، null برخلاف بعضی زبانهای دیگه، به معنی "آدرس دهی به یه شیء غیروجود" یا "اشاره گر پوچ" نیست. بلکه null یه مقدار ویژه ست که مفهوم "هیچی"، "خالی" یا "نامشخص بودن مقدار" رو نشون میده.
مثلاً تو کد بالا، این یعنی هنوز نمیدونیم مقدار age چیه یا شاید هنوز تعیین نشده.
مقدار خاصی به اسم undefined هم تو جاوااسکریپت هست که مثل null، خودش یه نوع داده ی جداگانست.
undefined یعنی "مقداری به این متغیر اختصاص داده نشده". پس اگه یه متغیر رو تعریف کنیم ولی هیچ مقداری بهش ندیم، مقدارش به طور پیش فرض undefined میشه:
let age;
alert(age); // نمایش میده "undefined"البته، از نظر فنی میتونیم دستی هم مقدار undefined رو به یه متغیر بدیم:
let age = 100;
// تغییر مقدار به undefined
age = undefined;
alert(age); // "undefined"اما این کار معمولاً توصیه نمیشه. بهتره برای مقداردهی "خالی" یا "نامشخص" از null استفاده کنیم و undefined رو بذاریم به عنوان مقدار پیش فرضی که وقتی هنوز مقداری به یه متغیر اختصاص داده نشده، استفاده بشه.
نوع داده ی object یه نوع خاص تو جاوااسکریپته.
تمام انواع دیگه رو "ابتدایی" یا primitive میگیم، چون مقادیرشون فقط یه مقدار ساده دارن (مثلاً عدد، رشته و...). ولی از طرف دیگه، از object برای ذخیره ی مجموعه ای از دادهها و ساختارهای پیچیدهتر استفاده میشه.
این موضوع به اندازه ای مهمه که باید جداگانه بهش بپردازیم. بعداً تو مقاله مربوط به «اشیا» به طور کامل با آبجکتها آشنا میشیم، وقتی که با انواع داده ی ساده بیشتر آشنا شدیم.
نوع داده ی symbol هم برای ایجاد شناسههای منحصربه فرد برای اشیا استفاده میشه. فعلاً اشاره کوچیکی بهش کردیم تا کامل باشیم، اما جزئیاتش رو میذاریم برای بعد، وقتی که اشیا رو یاد گرفتیم.
تو جاوااسکریپت، عملگر typeof برای فهمیدن نوع داده ای یه مقدار استفاده میشه. این یعنی میتونیم بررسی کنیم یه مقدار از چه نوعیه و بر اساسش تصمیم بگیریم چطوری باهاش رفتار کنیم.
وقتی از typeof x استفاده کنیم، خروجی این دستور یه رشته ایه که نوع داده رو نشون میده. مثلاً:
typeof undefined // "undefined"
typeof 0 // "number"
typeof 10n // "bigint"
typeof true // "boolean"
typeof "foo" // "string"
typeof Symbol("id") // "symbol"
typeof Math // "object" // (1)
typeof null // "object" // (2)
typeof alert // "function" // (3)توی چند مورد از مثالهای بالا نکات خاصی هست که باید بدونیم:
شاید تو بعضی کدها این نوع نگارش رو ببینی: typeof(x). این روش درست مثل typeof x عمل میکنه و نتیجه همونه.
نکته اینجاست که typeof یه عملگره، نه تابع. پرانتزهایی که اینجا میبینی فقط به خاطر گروه بندی ریاضیاتی هستن، نه برای اینکه typeof یه تابع باشه. خیلیها این روش رو به خاطر ظاهر مرتب ترش دوست دارن، اما در کل روش typeof x مرسوم تره و بیشتر استفاده میشه.
جاوااسکریپت ۸ نوع داده پایه ای داره که اینها شامل هفت نوع ابتدایی و یک نوع غیرابتدایی میشن.
همون طور که گفتیم با استفاده از typeof میتونیم نوع داده ای که تو یه متغیر ذخیره شده رو بررسی کنیم. این عملگر معمولاً به شکل typeof x استفاده میشه، اما typeof(x) هم قابل قبوله. نتیجه ی typeof به شکل یه رشته برمی گرده و نام نوع داده رو به ما نشون میده، مثلاً "string".
تو این بخش چندتا تمرین بهت میدم که به درک بیشتر مباحث گفته شده کمک میکنه. لطفا قبل از این که پاسخها رو ببینی تمام تلاشت رو بکن خودت حلشون کنی، حتی به غلط! :) فکر کن، روشهای مختلف رو امتحان کن، سرچ کن و زمانی که وجدانت راحت بود تمام تلاشت رو کردی بعد پاسخ رو ببین. بهم اعتماد کن اگه همون اول کار، بدون تلاش و تمرین بری سراغ جواب نتیجه خوبی نمیگیری. 🙂
خروجی این اسکریپت چیه؟
let name = "Ilya";
alert( `hello ${1}` ); // ?
alert( `hello ${"name"}` ); // ?
alert( `hello ${name}` ); // ?پاسخ و توضیح:
وقتی از backtick و ${...} استفاده میکنیم، هر چیزی که داخل ${...} بیاد، به عنوان یه عبارت پردازش و داخل رشته جایگذاری میشه.
پس خروجیها اینطوری هستن:
hello 1
hello name
hello Ilyaیک متغیر name برای نام و یک متغیر age برای سن تعریف کن. نام باید رشته (string) باشه و سن هم باید عدد (number) باشه. بعد با استفاده از console.log هر دو متغیر رو چاپ کن.
پاسخ و توضیح:
let userName = "Ilya"; // اینجا یک رشته به اسم Ilyaتعریف کردیم
let age = 30; // اینجا یه عدد به عنوان سن تعریف کردیم
console.log("Name:", userName);
console.log("Age:", age);تو این تمرین دو تا متغیر ساختیم؛ یکی برای نام که از نوع string هست و یکی برای سن که از نوع number. بعد با console.log اونها رو چاپ کردیم. console.log باعث میشه که بتونی مقدار متغیرها رو توی کنسول ببینی.
یک متغیر isStudent ایجاد کن و مقدار اولیه اون رو true قرار بده (از نوع boolean). بعدش مقدار اون رو به "Yes" تغییر بده و دوباره چاپش کن. اینجا میخوایم ببینیم که متغیرها میتونن نوع خودشون رو تغییر بدن.
پاسخ و توضیح:
let isStudent = true; // متغیر از نوع boolean
console.log("Is student:", isStudent); // چاپ مقدار اولیه
isStudent = "Yes"; // حالا نوعش رو به string تغییر دادیم
console.log("Is student:", isStudent); // چاپ مقدار جدیداینجا با let یه متغیر ساختیم که از نوع boolean هست (مقدار true بهش دادیم). بعدش مقدارش رو به "Yes" تغییر دادیم که حالا یه string هست. جاوااسکریپت این آزادی رو میده که متغیرها بتونن نوعشون رو در طول برنامه تغییر بدن.
دو عدد num1 و num2 رو با مقادیر 10 و 5 تعریف کن. سپس حاصل جمع، تفریق، ضرب و تقسیم اونها رو با استفاده از console.log چاپ کن.
پاسخ و توضیح:
let num1 = 10;
let num2 = 5;
console.log("Sum:", num1 + num2); // جمع دو عدد
console.log("Subtraction:", num1 - num2); // تفریق
console.log("Multiplication:", num1 * num2); // ضرب
console.log("Division:", num1 / num2); // تقسیماینجا از چهار عملگر اصلی ریاضی استفاده کردیم. با + جمع، با - تفریق، با * ضرب و با / تقسیم کردیم و نتایج رو با console.log نمایش دادیم.
همون کد قبلی رو بازنویسی کن و این بار نتیجهها رو به این شکل نمایش بده:
10 + 5 = 15
10 - 5 = 5
10 * 5 = 50
10 / 5 = 2پاسخ و توضیح:
let num1 = 10;
let num2 = 5;
console.log(`${num1} + ${num2} = ${num1 + num2}`); // نمایش جمع با جزئیات
console.log(`${num1} - ${num2} = ${num1 - num2}`); // نمایش تفریق با جزئیات
console.log(`${num1} * ${num2} = ${num1 * num2}`); // نمایش ضرب با جزئیات
console.log(`${num1} / ${num2} = ${num1 / num2}`); // نمایش تقسیم با جزئیاتاینجا از Template Literals استفاده کردیم که با استفاده از علامت ` شروع و تمام میشه. داخل این رشتهها از ${} استفاده کردیم تا مقدار متغیرها و عملیات ریاضی رو مستقیماً وارد کنیم و نتیجه ی عملیات رو با فرمت دلخواه نشون بدیم.
این روش هم کد رو خواناتر میکنه و هم بهت اجازه میده متغیرها و متن رو ترکیب کنی.
یک متغیر score تعریف کن و بهش مقدار "75" بده (از نوع string). بعد این مقدار رو به عدد تبدیل کن و با عدد 25 جمع کن تا حاصلش بشه 100. نتیجه رو چاپ کن.
پاسخ و توضیح:
let score = "75"; // متغیر از نوع string
let convertedScore = Number(score); // تبدیل رشته به عدد
let total = convertedScore + 25; // جمع دو عدد
console.log("Total score:", total);متغیر score رو به صورت string تعریف کردیم. با استفاده از Number(score), اون رو به عدد تبدیل کردیم تا بشه با عدد 25 جمعش کرد. جاوااسکریپت اجازه میده که رشته ای که شامل عدد هست رو به عدد تبدیل کنی.
یک متغیر به اسم testVar تعریف کن و بهش مقدار "hello" بده. با استفاده از typeof نوع داده ی این متغیر رو چک کن و چاپ کن. بعد مقدارش رو به 42 تغییر بده و دوباره نوع داده رو بررسی کن.
پاسخ و توضیح:
let testVar = "hello"; // مقدار اولیه به صورت string
console.log("Type of testVar:", typeof testVar); // بررسی نوع داده (string)
testVar = 42; // تغییر مقدار به عدد
console.log("Type of testVar:", typeof testVar); // بررسی نوع داده جدید (number)اینجا از typeof استفاده کردیم که نوع داده ی متغیر رو بررسی و چاپ میکنه. اول نوع testVar رو که string بود چک کردیم، بعد مقدارش رو به عدد تغییر دادیم و دوباره نوع داده رو بررسی کردیم.
یک متغیر ثابت به اسم PI تعریف کن و مقدار 3.14 بهش بده. بعد سعی کن مقدارش رو تغییر بدی و نتیجه رو بررسی کن.
پاسخ و توضیح:
const PI = 3.14;
console.log("Value of PI:", PI);
PI = 3.14159; // تلاش برای تغییر مقدار ثابت
console.log("New value of PI:", PI);این کد خطا میده چون مقدار ثابت با const نمیتونه تغییر کنه.
وقتی با const متغیر تعریف میکنی، یعنی مقدارش در طول برنامه تغییر نمیکنه. تلاش برای تغییر مقدار PI باعث میشه جاوااسکریپت خطا بده.
در این مقاله با انواع مختلف دادهها در جاوااسکریپت آشنا شدیم و فهمیدیم که چطور میشه این دادهها رو ذخیره و مدیریت کرد. هر داده، مثل عدد، رشته، نوع منطقی یا حتی مقدارهای خاصی مثل null و undefined، نقش خاص خودشون رو در جاوااسکریپت دارن و به ما کمک میکنن تا اطلاعات مختلف رو به شکل بهینه در برنامه هامون مدیریت کنیم.
همچنین یاد گرفتیم که با عملگر typeof میتونیم نوع دادهها رو بررسی کنیم و با استفاده از اون، رفتار متفاوتی برای انواع دادهها تعریف کنیم. این ابزار به ما کمک میکنه تا کدهای دقیقتری بنویسیم و از خطاهای احتمالی جلوگیری کنیم.
در کنار همه ی این ها، فهمیدیم که جاوااسکریپت در مواجهه با اعداد بزرگ و محاسبات خاص، قابلیتهای ویژه ای مثل BigInt رو داره و همین طور بکتیکها به ما اجازه میدن رشتههای پویا و متغیر رو به راحتی بسازیم.
همه این اطلاعات، پایههای برنامه نویسی جاوااسکریپت رو قویتر میکنه و در مقالات بعدی، با استفاده از این مباحث اولیه، به سراغ موضوعات پیشرفتهتر میریم تا بتونیم از این زبان قدرتمند، بهترین بهره رو ببریم.
دوره الفبای برنامه نویسی با هدف انتخاب زبان برنامه نویسی مناسب برای شما و پاسخگویی به سوالات متداول در شروع یادگیری موقتا رایگان شد: