آموزش انواع داده های جاوا اسکریپت + تمرین آنلاین

رسانیکامنبع: https://rasanika.com

مقادیر پریمیتیو یا پایه

به طور کلی داده ها در جاوا اسکریپت به دو نوع پایه و غیرپایه تقسیم می‌شوند. به ساده ترین شکل داده ها پریمیتیو یا پایه گفته می‌شود. برای مثال عدد 10 یک مقدار پایه‌ای است. در ادامه 7 نوع داده پایه‌ای در جاوا اسکریپ را بررسی می‌کنیم:

نوع Number - اعداد

let myNum = 123;
myNum = 12.34;
myNum = -50;

نوع number در جاوا اسکریپت هم اعداد صحیح و هم اعداد اعشاری را شامل می‌شود. عملگر های زیادی مثل ضرب * ، تقسیم / ، جمع + ، تفریق - و ... برای کار با اعداد وجود دارد.

const a = 2 * 2;
const b = 10;
const c = a + b; // 4 + 10 = 14

از تابع Number هم می‌توان برای تبدیل نوع و ایجاد مقادیر عددی استفاده کرد. برای مثال:

Number("100"); // 100
Number("hello"); // NaN
Number(true); // 1
Number(false); // 0

در مثال بالا از انواع دیگر داده مثل رشته ("hello") و بولین (true) استفاده شده که بررسی خواهیم کرد.

نوع number علاوه بر اعداد، شامل مقادیر خاص Infinity ، -Infinity و NaN نیز است که در ادامه بررسی می‌کنیم:

• مقدار Infinity همان بی‌نهایت ∞ ریاضی را نشان می‌دهد. این مقدار را می‌توانیم با تقسیم بر صفر به دست آوریم:

  alert( 1 / 0 ); // Infinity
  alert( 1 / -0 ); // -Infinity

  به صورت مستقیم هم می‌توانیم به آن دسترسی داشته باشیم:

  alert( Infinity ); // Infinity

• مقدار NaN یک اشتباه محاسباتی را نشان می‌دهد. این مقدار معمولا نتیجه یک عملیات ریاضی اشتباه است. در مثال زیر اگر یک رشته را بر عددی تقسیم کنیم مقدار NaN را دریافت خواهیم کرد:

  alert( "some text" / 2 ); // NaN

  عملیات بیشتر روی NaN همیشه مقدار NaN را باز می‌گرداند:

  alert( NaN + 1 ); // NaN
  alert( 3 * NaN ); // NaN
  alert( "some text" / 2 - 1 ); // NaN

  فقط یک استثنا وجود دارد آن هم عملیات NaN ** 0 است که مقدار آن برابر 1 می‌باشد. NaN تنها مقداری در جاوا اسکریپت است که با خودش برابر نیست! برای مثال:

  alert( 1 === 1 ); // true
  alert( "hello" === "hello" ); // true
  alert( null === null ); // true
  alert( Infinity === Infinity ); // true
  
  alert( NaN === NaN ); // false

  از عملگر === برای بررسی برابر بودن دو مقدار استفاده می‌شود که در پست‌های بعدی با آن آشنا خواهیم شد.

  اگر بخواهیم بدانیم که یک مقدار NaN است یا خیر می‌توانیم از تابع Number.isNaN() استفاده کنیم:

  alert( Number.isNaN(NaN) ); // true
  alert( Number.isNaN("Hello" / 2) ); // true

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

const price = 20_000_000_000; // همان 20000000000

نوع BigInt - اعداد بزرگ

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

// در آخر عدد یعنی نوع بیگ‌اینت n
const myBigNum = 1234567890123456789012345678901234567890n;

همچنین می‌توان از تابع BigInt برای تبدیل نوع و ایجاد مقادیر BigInt استفاده کرد:

BigInt(100); // 100n

نوع String - رشته‌ها

در جاوا اسکریپت داده های متنی به صورت رشته یا string ذخیره می‌شوند. رشته ها را می‌توان با دابل کوتیشن " یا کوتیشن تکی ' و یا بک‌تیک ` تعریف کرد:

const string1 = "this is a test";
const string2 = 'this is a test';
const string3 = `this is a test`;

همچنین می‌توان از تابع String برای تبدیل نوع و ایجاد مقادیر رشته ای استفاده کرد:

const string4 = String(5); // "5"

اگر موقع تعریف رشته از کاراکتر بک‌تیک یا همان ` استفاده کنید، می‌توانید داخل آن مستقیما کدی قرار دهید که اجرا شده و نتیجه اش به رشته اضافه شود. برای اینکار باید کد موردنظر را داخل ${} در رشته بنویسید:

alert( `two + two is ${2 + 2}` ); // "two + two is 4"

همچنین در تعریف ` امکان قرار دادن خط جدید (newline) داخل رشته وجود دارد ولی اگر از " یا ' استفاده کنید اینکار خطا می‌دهد:

// ✔ درست
let myText = `this is a 
test`;

// ⚠ خطا!
myText = "this is a 
test";

رشته ها دارای متد ها و ویژگی های مختلفی هستند که می‌توانیم از آنها استفاده کنیم. مثلا برای به دست آوردن طول رشته (چند کاراکتر است) می‌توانیم از ویژگی length رشته استفاده کنیم:

alert( "سلام".length ); // 4

و یا برای تبدیل به حروف بزرگ یا کوچک از متد های زیر استفاده کنیم:

alert( "Hello World".toLowerCase() ); // "hello world"
alert( "Hello World".toUpperCase() ); // "HELLO WORLD"

کاراکتر های ویژه داخل رشته

کاراکتر های ویژه یا special characters کاراکتر هایی هستند که چیز متفاوتی از آنچه تایپ می‌کنید را ایجاد می‌کنند. برای مثال عبارت \n معادل خط جدید است و درصورت قرار گرفتن داخل رشته، بجای آن یک خط جدید قرار داده می‌شود. یعنی دو رشته زیر باهم برابر هستند:

let str1 = "Hello\nWorld";
let str2 = `Hello
World`;

alert( str1 === str2 ); // true

برخی از این کاراکتر های ویژه را می‌توانید در جدول زیر مشاهده کنید:

نوع Boolean - بولین

نوع بولین فقط دو مقدار true و false دارد. مثل درست/نادرست یا بله/خیر که true به معنی درست بودن و false به معنی نادرست بودن است. مقدار بولین می‌تواند نتیجه عملیات مقایسه‌ای باشد. برای مثال:

let isGreater = 4 > 1;

alert( isGreater ); // true

در مثال بالا > یک عملگر مقایسه‌ای است و چون 4 بزرگتر از 1 است، نتیجه این عملیات true شده است. در پست های بعدی با عملگر ها بیشتر آشنا خواهیم شد.

به صورت مستقیم هم می‌توانیم مقادیر true یا false را استفاده کنیم:

let isChecked = false;

isChecked = true;

همچنین می‌توان از تابع Boolean برای تبدیل نوع و ایجاد مقادیر true و false استفاده کرد:

alert( Boolean(1) ); // true
alert( Boolean(-5) ); // true
alert( Boolean(0) ); // false

alert( Boolean("hello") ); // true
alert( Boolean("") ); // false
alert( Boolean("0") ); // true

از مقدار بولی معمولا در شروط if else هم استفاده می‌شود که در پست‌های بعدی خواهیم دید.

نوع Null - تهی

نوع داده Null فقط شامل یک مقدار یعنی null است که در هیچ یک از انواع داده‌های دیگر قرار نمی‌گیرد. مقدار null یا تهی زمانی استفاده می‌شود که بخواهیم بگوییم هیچ مقداری وجود ندارد.

let age = null;

در مثال بالا مقدار متغیر age نامشخص است به همین خاطر null داده شده است.

اگر null را تبدیل به نوع بولی کنیم مقدار false را دریافت می کنیم:

alert( Boolean(null) ); // false

نوع Undefined - تعریف‌نشده

نوع داده Undefined هم مانند Null فقط شامل یک مقدار یعنی undefined است. مقدار undefined یعنی هیچ مقداری تعریف نشده است. اگر هنگام تعریف یک متغیر، هیچ مقداری به آن ندهیم، به صورت پیش‌فرض دارای مقدار undefined خواهد بود.

let age;

alert( age === undefined ); // true

همچنین می‌توانیم بعدا به یک متغیر خودمان مقدار undefined بدهیم ولی اینکار توصیه نمی‌شود:

let age = 18;

age = undefined;

alert( age === undefined ); // true

💡 نکته:

اگر undefined را هم تبدیل به نوع بولی کنیم مقدار false را دریافت می کنیم:

alert( Boolean(undefined) ); // false

نوع Symbol

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

const sym1 = Symbol();
const sym2 = Symbol("foo");
const sym3 = Symbol("foo");

در مثال بالا متغیر های sym2 و sym3 برابر نیستند چون سیمبل همیشه یکتا و منحصر به فرد است:

alert ( sym2 === sym3 ); // false

آبجکت ها

نوع Object در جاوا اسکریپت برای ذخیره و کار با داده های پیچیده‌تر از پریمیتیو ها استفاده می‌شود. آبجکت ها معمولا حاوی گروهی از داده ها و کلید ها هستند که با استفاده از کلید ها می‌توانیم به داده ها دسترسی پیدا کنیم.

ساده ترین راه تعریف یک آبجکت در جاوا اسکریپت استفاده از {} است:

let user = {};

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

let user = {
  name: "Reza",   // کلید: name مقدار: string => "Reza"
  age: 30,        // کلید: age مقدار: number => 30
  isAdmin: false, // کلید: isAdmin مقدار: boolean => false
};

آبجکت user در مثال بالا حاوی سه ویژگی (یا پراپرتی) name و age و isAdmin است. یعنی در واقع با یک آبجکت توانستیم اطلاعات مختلف راجع به یک شئ واحد را یکجا ذخیره کنیم.

دسترسی به مقدار هر ویژگی در آبجکت با استفاده از کلید آن امکان پذیر است:

alert( user.name ); // "Reza"

پس از تعریف، امکان تغییر ویژگی وجود دارد:

user.name = "Ali";

alert( user.name ); // "Ali"

دقیقا به همین صورت می‌توانیم ویژگی جدید به آبجکت اضافه کنیم:

user.job = "developer";

alert( user.job ); // "developer"

برای حذف ویژگی هم می‌توانیم از کلیدواژه delete استفاده کنیم:

delete user.age;

alert( user.age ); // undefined

برخی نکات و ترفند ها

• هنگام دسترسی به ویژگی آبجکت اگر آن ویژگی وجود نداشته باشد مقدار undefined بازگردانده می‌شود.

• برای چک کردن اینکه آیا یک کلید در آبجکت وجود دارد یا خیر، می‌توانید از کلیدواژه in استفاده کنید:

  const car = {
    name: undefined,
  };
  
  alert ( "name" in car ); // true
  alert ( "brand" in car ); // false

• قرار دادن ویژگی هایی که در نام آنها کاراکترهای خاص مثل فاصله وجود دارد با استفاده از [] انجام می‌شود:

  const user = {
    ["first name"]: "Reza",
  };
  
  alert ( user["first name"] ); // "Reza"

• حتی اگر خود آبجکت با const تعریف شده باشد و قابل تغییر نباشد، ویژگی‌هایش قابل تغییر هستند:

  const user = { name: "Reza" };
  
  user.name = "Ali"; // درست
  
  user = { name: "Ali" }; // ⚠ خطا

• آبجکت می‌تواند حاوی آبجکت های دیگر و در کل هر نوع داده دیگری باشد:

  const article = {
    title: "آموزش جاوا اسکریپت",
    isPublished: true,
    author: {
      name: "Ali",
      age: 50,
    },
  };

• برای قرار دادن متغیر ها در یک آبجکت، اگر متغیر ها با ویژگی ها هم اسم باشند می‌توان به این صورت کوتاه شده نوشت:

  const name = "Reza";
  const age = 20;
  
  // کوتاه شده
  const user = { name, age };
  
  // عادی
  // const user = { name: name, age: age }
  
  // ولی اگر ویژگی ها هم اسم نباشند مجبوریم
  // const user = { theName: name, theAge: age }

• نسخه کوتاه شده برای استخراج ویژگی های یک آبجکت به درون متغیر ها نیز به این شکل است:

  const user = {
    name: "Reza",
    age: 50,
    isAdmin: true,
  };
  
  // کوتاه شده
  const { name, isAdmin } = user
  
  // عادی
  // const name = user.name;
  // const isAdmin = user.isAdmin;
  
  alert ( name ); // "Reza"
  alert ( isAdmin ); // true

• برای به دست آوردن همه مقادیر و کلید های یک آبجکت می‌توانید از یک حلقه for..in استفاده کنید:

  const user = {
    name: "Reza",
    age: 50,
    isAdmin: true,
  };
  
  // کد آلرت به ازای هر ویژگی یعنی در کل سه بار اجر ا می‌شود
  for (const key in user) {
    alert( user[key] );
  }

  توجه کنید که ترتیب ممکن است متفاوت باشد. یعنی شاید حلقه بالا به همان ترتیبی که ویژگی ها را تعریف کردیم اول name سپس age و بعد isAdmin نباشد و ترتیب متفاوت باشد. در پست های بعدی به طور مفصل حلقه ها را بررسی خواهیم کرد.

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

  const user1 = { name: "Reza" };
  const user2 = user1;
  
  alert( user1 === user2 ); // true
  
  user1.name = "Ali";
  
  alert( user1.name ); // "Ali"
  alert( user2.name ); // "Ali" !!!

  توجه کنید که در مثال زیر با وجود برابر بودن مقادیر، دقیقا همان آبجکت داده نشده:

  const user1 = { name: "Reza" };
  const user2 = { name: "Reza" };
  
  alert( user1 === user2 ); // false
  
  user1.name = "Ali";
  
  alert( user1.name ); // "Ali"
  alert( user2.name ); // "Reza" همچنان

آرایه ها

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

const emptyArray = []; // یک آرایه خالی

const names = ["Sara", "Ali", "Hamed"];

دسترسی به مقادیر آرایه با استفاده از شماره ایندکس (همان نمایه یا اندیس) امکان پذیر است:

alert( names[0] ); // "Sara"
alert( names[1] ); // "Ali"
alert( names[2] ); // "Hamed"

alert( names[15] ); // undefined

امکان تغییر مقدار یک ایندکس وجود دارد:

names[1] = "Diana";

alert( names[1] ); // "Diana"

برای دانستن اینکه آرایه چند آیتم دارد می‌توانید از ویژگی length آن استفاده کنید:

alert( names.length ); // 3

برای اضافه کردن یک آیتم جدید به آرایه از متد push آرایه استفاده کنید:

names.push("Hesam");

alert( names.length ); // 4

یک آرایه می‌تواند از ترکیب هر نوع مقادیری تشکیل شده باشد:

let values = ["Reza", 10, true, { age: 24 }, [1,2,3], null];

alert( values[3].age ); // 24
alert( values[4][1] ); // 2

برای به دست آوردن همه مقادیر یک آرایه می‌توانید از یک حلقه for..of استفاده کنید:

// کد آلرت به ازای هر آیتم یعنی در کل شش بار اجر ا می‌شود
for (const value in values) {
  alert( value );
}

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

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

const one = [1, 1, 1, 1];
const two = one;

one[3] = 99;

alert( two[3] ); // 99 !!!

توابع

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

تعریف تابع به روش های مختلفی امکان پذیر است:

// روش اول
function sayHi () {
  alert( "Hello" );
}

// روش دوم
const sayHi = function () {
  alert( "Hello" );
}

// روش سوم
const sayHi = () => {
  alert( "Hello" );
}

برای استفاده از یک تابع (یعنی فراخوانی و اجرای کد های داخل آن) می‌توانیم اسم تابع را همراه با پرانتز بنویسیم:

sayHi()

در مثال بالا کد داخل تابع یعنی alert( "Hello" ) اجرا خواهد شد.

ورودی و خروجی تابع

توابع می‌توانند یک یا چند ورودی بگیرند و پس از اجرا، یک خروجی بازگردانند:

function sum (numOne, numTwo) {
  const result = numOne + numTwo;
  return result;
}

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

const value = sum(3, 7);

alert( value ); // 10

ورودی ها می‌توانند مقدار پیشفرض داشته باشند که در این‌صورت وارد کردنشان اختیاری می‌شود. برای مثال:

function divide (num, divideBy = 2) {
  return num / divideBy;
}

divide(12); // 6
divide(12, 3); // 4

توابع نیز مانند هر مقدار دیگری می‌توانند به عنوان ویژگی آبجکت ها یا داخل آرایه ها قرار بگیرند:

const myObj = {
  div: function (a, b) {
    return a / b;
  },

  sum (a, b) {           // function اینجا بدون کلمه
    return a + b;
  },

  sub: (a, b) => a - b,  // return کوتاه شده، حتی بدون نیاز به کلمه
};

const myArr = [1, 3, () => { alert('hi') }, 5, 7];

تشخیص نوع با typeof

عملگر typeof نوع یک مقدار را نشان می‌دهد. این عملگر یک رشته حاوی اسم نوع موردنظر را برمی‌گرداند.

let myNum = Infinity;
alert( typeof myNum ); // "number"

alert( typeof "hello" ); // "string"

alert( typeof true ); // "boolean"

در جدول زیر تمام مقادیری که typeof می‌تواند برگرداند، قرار داده شده است:

برای مثال:

typeof undefined // "undefined"

typeof 0 // "number"

typeof 10n // "bigint"

typeof true // "boolean"

typeof "hello" // "string"

typeof Symbol("hi") // "symbol"

typeof { age: 25 } // "object"

typeof [1, 2, 3] // "object"

typeof null // "object"  توضیح علت در زیر 

typeof alert // "function"

👈 توجه:

let myVar;

// ...

if (typeof myVar === "object" && myVar !== null) {
  alert( "حتما یک آبجکت است" )
}

هنگام استفاده از typeof باید دقت کنید که اولویت عملیاتی آن بالا است یعنی اول آن محاسبه می‌شود و سپس عملیات دیگر. برای مثال:

alert ( typeof 1 + 999 ); // => "number" + 999 => "number999"

اگر بخواهید typeof بعد از عملیات محاسبه شود می‌توانید از پرانتز استفاده کنید:

alert ( typeof (1 + 999) ); // => typeof 1000 => "number"

💡 نکته:

alert( Array.isArray([1, 2, 3]) ); // true

نوع‌دهی پویا و ضعیف

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

let foo = 42; // نوع عددی
foo = "bar"; // نوع رشته‌ای
foo = true; // نوع بولی

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

alert( "5" < 6 ); // true

یک نکته مهم این است که عملگر + برای به هم پیوستن دو رشته هم استفاده می‌شود:

alert ( "Hello" + "World" ); // "HelloWorld"

👈 اگر یک طرف این عملگر رشته باشد، همه مقادیر را تبدیل به رشته کرده و سپس محاسبه می‌کند. یعنی باید حواستان باشد که نتیجه کد "2" + 2 می‌شود "22" در حالی که نتیجه کد 2 + 2 می‌شود 4

تمرین آنلاین

در کدباکس زیر می‌توانید به صورت آنلاین تمرین کنید. نوع و مقدار متغیر های a و b را تغییر دهید و نتیجه را ببینید: (ابتدا تب نتیجه کد را باز کنید)