Object در جاوا اسکریپت چیست؟ – از صفر تا صد + مثال

اعلان چندین «متغیر» (Variable) برای ذخیره‌سازی مقادیر مختلف می‌تواند برنامه جاوا اسکریپت را نامرتب و خوانایی آن را کاهش دهد. برای رفع این مشکل، در جاوا اسکریپت و بسیاری از انواع زبان‌های برنامه نویسی، مفهومی به نام «شی» (Object) ارائه شده است که به کاربر امکان می‌دهد مقادیر مرتبط را با هم گروه‌بندی کند. Object در جاوا اسکریپت انواع داده‌های قدرتمندی به حساب می‌آید که می‌توانند مقادیر پیچیده را ذخیره کند و کاربر را قادر می‌سازد کدهای سازمان‌یافته و خواناتری ایجاد کند. در این مطلب به اصول اولیه اشیا در جاوا اسکریپت، نحوه ایجاد آن‌ها، کپی کردن آن‌ها، پیمایش آن‌ها و سایر موارد مرتبط پرداخته می‌شود. قبل از پرداختن به مفهوم Object در جاوا اسکریپت، داشتن درک اولیه‌ای از جاوا اسکریپت، از جمله متغیرها، توابع و انواع داده‌ها بسیار مهم است.

Object در جاوا اسکریپت چیست؟

در جاوا اسکریپت، شی یا همان Object نوعی داده است که می‌تواند مجموعه‌هایی از جفت‌های «کلید-مقدار» را در خود جای دهد. برخلاف انواع داده‌های اولیه مانند اعداد و رشته‌ها، اشیا می‌توانند انواع مختلفی از داده‌ها را به‌عنوان مقادیر در خود ذخیره کنند.

فیلم آموزش جاوا اسکریپت JavaScript – جامع و کاربردی در فرادرس

کلیک کنید

کلید یا نام ویژگی معمولاً از نوع رشته است، اگرچه هر نوع داده دیگری را می‌توان به رشته تبدیل کرد. شی را می‌توان به عنوان یک قفسه یا کمد چندمنظوره با فضایی برای وسایلی مانند: کتاب‌ها، فایل‌ها و غیره در نظر گرفت.

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

1const emptyObject = {};
2console.log(typeof emptyObject); //'object'

اشیا می‌توانند دارای متغیرها و توابع باشند. متغیرهای موجود در شی به عنوان ویژگی‌ و متغیرهای موجود در توابع به عنوان متد شناخته می‌شوند. متدها به شی اجازه می‌دهند تا از خصوصیات درون خود برای انجام کاری استفاده کند. به عنوان مثال، در کد زیر: object1.user،object1.nationality وobject1.professionهمگی ویژگی‌های object1 هستند، در حالی که object1.myBio()‎یک متد است. هنگامی که متد فراخوانی می‌شود، از ویژگی‌ها برای خروجی یک جمله استفاده می‌کند.

1const object1 = {
2    user: "alex",
3    nationality: "Nigeria",
4    profession: "Software Enginneer",
5    myBio() {
6        console.log(`My name is ${this.user}. I'm a               ${this.profession} from ${this.nationality}`)
7    }
8}
9console.log(object1.user); //Alex 
10console.log(object1.nationality); //Nigeria 
11console.log(object1.profession); //Software Engineer 
12console.log(object1.myBio()); //My name is alex. I'm a Software Engineer from Nigeria

کلیدهای موجود در نمونه کد بالا «user » ،«Nationity» و «profession » هستند و مقادیر مربوط به آن‌ها مقادیر رشته‌ای محسوب می‌شوند که بعد از علامت دونقطه قرار می‌گیرند. علاوه بر این، کلمه کلیدی This در جاوا اسکریپت که در کدها استفاده می‌شود، به خود شی اشاره دارد. همان‌طور که قبلاً بیان شد، مقدار ویژگی می‌تواند هر نوع داده‌ای باشد. در این حالت، مقادیر هم آرایه و هم شی هستند.

1const object2 = { 
2        users: ["Alex", "James", "Mohammed"], 
3        professions: { 
4            alex: "software engineer", 
5            james: "lawyer", 
6            mohammed: "technical writer" 
7        } 
8    }; 
9    console.log(object2.users); //['Alex', 'James', 'Mohammed'] 
10    console.log(object2.professions); //{alex: 'software engineer', james: 'lawyer', mohammed: 'technical writer'

سینتکس Object در جاوا اسکریپت

ایجاد Object در جاوا اسکریپت بسیار آسان است.

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

شی و ویژگی‌های آن را در داخل مجموعه‌ای از براکت‌ها تعریف می‌شوند که مثال زیر این موضوع را بیان می‌کند.

1let myCup = new Object();
2myCup.color = "transparent";
3myCup.volume = 1;
4myCup.weight = 0.5;

با این کار جسمی به نام myCup با سه ویژگی (color، volumeو weight) ساخته شد که هرکدام مقدار خاص خود را دارند.

سینتکس کوتاه تر شی در جاوا اسکریپت

شی نمونه کد بالا را می‌توان با «سینتکسی» (Sytnat) مختصرتر به صورت زیر نیز بازنویسی کرد:

1let myCup = {
2 color: "transparent",
3 volume: 1,
4 weight: 0.5
5}

در این مثال متغیر با استفاده از سینتکس let myCup = {}‎ اعلان می‌شود. در خط جدید، این سینتکس اولین ویژگی به صورت color: "transparent" نوشته خواهد شد. همچنین چون این ویژگی آخرین ویژگی شی مذکور نیست پس به یک کاما یا ویرگول در آخر خط نیاز است.

در خط بعد، ویژگی حجم به صورت ‎volume: 1, نوشته می‌شود و اینجا هم به کاما نیاز است. آخرین ویژگی این شی که weight باشد، بدون علامت کاما در آخر نوشته خواهد شد. بعد در آخر سر علامت براکت بسته و به این صورت Object در جاوا اسکریپت با سینتکسی مختصرتر و خواناتر تعریف می‌شود.

چه زمانی در انتهای خط باید از کاما استفاده کرد؟

هنگامی که هر یک از مقادیر ویژگی فهرست می‌شوند، باید در انتهای خطوط از کاما استفاده شود، ولی علامت کاما برای ویژگی آخر نوشته نخواهد شد. همچنین برخی از «کد ادیتورها» (Code Editors) ممکن است اجازه استفاده از کاما را برای آخرین ویژگی نیز بدهند، اما معمولاً بهتر است آخرین ویژگی بدون کاما نوشته شود.

نحوه دسترسی به Object و ایجاد ویژگی ها یا متدهای شی جدید

دو روش برای دسترسی به Object در جاوا اسکریپت وجود دارد که در پایین بحث خواهند شد.

فیلم آموزش پروژه محور جاوا اسکریپت، CSS و HTML – طراحی صفحه فرود واکنشگرا در فرادرس

کلیک کنید

روش اول با استفاده از ذکر نام شی و ویژگی آن پشت سرم هم با علامت نقطه (.) در بین آن‌ها به صورت زیر است:

1object2.property3 = "value3";

روش دوم استفاده از علامت کروشه باز وبسته «[]» است. در این روش به دنبال نام شی، ویژگی مدنظر در درون براکت به منظور ایجاد دسترسی به آن قرار می‌گیرد. سینتکس زیر این موضوع را بیان می‌کند.

1object2["property4"] = "value4";

هر دو خط کد بالا ویژگی‌های جدیدی را به object2 اضافه می‌کنند. خط اول از نماد نقطه استفاده می‌کند، در حالی که خط دوم از نماد براکت استفاده خواهد کرد. مثال زیر برای درک بهتر این موضوع بسیار حائز اهمیت است:

1object2.ages = [30, 32, 40];
2object2["summary"] = `Object2 has ${object2.users.length} users`;
3console.log(object2);
4/*
5{
6    "users": [
7        "Alex",
8        "James",
9        "Mohammed"
10    ],
11    "professions": {
12        "alex": "software engineer",
13        "james": "lawyer",
14        "mohammed": "technical writer"
15    },
16    "ages": [
17        30,
18        32,
19        40
20    ],
21    "summary": "Object2 has 3 users"
22}
23*/

به صورت مشابه اشیا می‌توانند مقادیرشان را با استفاده از هر یک از نمادها تغییر دهند که مثال زیر این موضوع را نشان می‌دهد.

1object2.users = ["jane", "Williams", "John"];
2object2["age"] = [20, 25, 29]
3console.log(object2.users); //['jane', 'Williams', 'John']
4console.log(object2.ages) //[20, 25, 29

نشانه‌گذاری نقطه‌ای (استفاده از علامت یا نماد نقطه) پرکاربردترین روش برای دسترسی به ویژگی‌ها و عملکردهای یک شی است، با این حال، محدودیت‌هایی نیز دارد که در ادامه این محدودیت‌ها مورد بررسی قرار خواهند گرفت.

محدودیت در ویژگی‌ های چندکلمه‌ای

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

فیلم آموزش جاوا اسکریپت JavaScript – جامع و کاربردی در فرادرس

کلیک کنید

مثال زیر در رابطه با این موضوع است:

1object3.users height = [5.6, 5.4, 6.0];
2Console.log(object3.users height); //SyntaxError

برای قطعه کد بالا، همان‌طور که معلوم است، نوعی خطای نحوی اتفاق می‌افتد، زیرا جاوا اسکریپت دستور را به عنوان object3.users می‌خواند و در این مورد طول رشته را شناسایی نمی‌کند. هنگامی که کاربر از نماد نقطه برای دسترسی به Object در زبان جاوا اسکریپت استفاده می‌کند، قوانین اعلان متغیر در جاوا اسکریپت برای آن لحاظ می‌شوند. این یعنی اگر کاربر از نماد نقطه برای دسترسی به شی و یا برای ایجاد ویژگی استفاده کند، باید قوانینی مانند عدم استفاده از اعداد برای نام‌گذاری نام ویژگی و عدم استفاده از فضای خالی در آن پیروی کند.

در این موارد کاربر مجاز است از آندرلاین (_) و کاراکتر خاص ($) در نام‌گذاری استفاده کند. برای اطمینان از عدم بروز چنین اشکالاتی، بهتر است از علامت براکت استفاده شود. مثال بالا با علامت براکت به صورت زیر بازنویسی می‌شود و هیچ‌گونه خطایی ایجاد نخواهد شد.

1object3["users height"] = [5.6, 5.4, 6.0];  
2console.log(object3["users height"]); //[5.6, 5.4, 6]

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