Skip to Sidebar Skip to Content
اقرأ-تك اقرأ-تك
ضيفنا الكريم

  • قائمة القراءة
  • تسجيل الدخول
  • الرئيسية
  • المقالات
  • خطط الاشتراك
  • - اصدارتنا
  • ورقة وقلم
  • مدونات فطين
  • شنطة مبرمج
  • النشرة الأسبوعية
  • كنوز
  • - تعرف علينا
  • من نحن
  • الشراكات
  • كتاب المحتوى
  • اكتب معنا
  • تواصل معنا
  • - بنود الخدمة
  • سياسة الخصوصية
  • الشروط والأحكام
الوسوم
  • Backend
  • Distributed Systems
  • System Design
  • Databases
  • LinkedIn
  • X
  • Facebook
  • Telegram
  • GitHub
جميع الحقوق محفوظة لمنصة اقرأ-تِك 2024©

Primitives vs objects in JavaScript

  • Ahmed Anwar by Ahmed Anwar
    Ahmed Anwar Ahmed Anwar
    Software Technical Writer
    • Website
  • •
  • 4 Feb, 2024
  • •
  • 4 min read
  • Share on X
  • Share on Facebook
  • Share on LinkedIn
  • Share on Pinterest
  • Email
Primitives vs objects in JavaScript
  • Frontend
  • Programming Language
  • Web Development
  • JavaScript

هنتكلم في المقال دا عن الـ primitive and object types in Javascript وهنقارن بينهم من حيث 3 حاجات وهم:

  1. Mutability 
  2. Copying
  3. As a function arguments

المقال هدفه إننا نفهم طبيعة الأنواع دي وازاي الكود ممكن يختلف على حسب أنواع المتغيرات اللي بنتعامل معاها في البرنامج، دي حاجة هتخلينا فاهمين الكود بيشتغل إزاي وبالتالي لو لقينا البرنامج بيعمل حاجة غير المتوقع منه نبقى عارفين ايه اللي محتاجين نغيره عشان نخيله يشتغل صح ونقدر نعمل Debugging بسهولة.

تعالوا نتكلم عن أول وجه مقارنة بين الـ  primitive and object types وهو الـ mutability بس قبل ما نتكلم عن الـ mutability خلينا نعرف ايه هي الـ  primitive type وايه الـ  object types.

  • Primitive types: String,Number, Boolean,Undefined, Symbol
  •  Object types: objects, arrays.

Mutability ( القابلية للتغير )

هنبدأ بمثال عشان نفهم يعني ايه mutability وازاي بتختلف على حسب احنا شغالين مع primitive ولا مع object، في المثال ده هنعرف string و array :


let s = "eqraa";
let arr = [1 , 2 , 3 , 4 , 5];

وهنبدأ نجرب شوية حاجات على كل متغير، في الـ string هنجرب نغير أول حرف نخليه E بدل e وفي الـ array هنجرب نغير أول رقم نخليه صفر، وهنشوف هل هيتغيروا فعلاََ ولا لأ

 
s[0] = 'E;
arr[0] = 0;
console.log("s = " + s);
console.log("arr = " + arr);

لما نيجي نعمل run النتيجة دي اللي هتطلع:

هنلاحظ إن الـ string متغيرش بس الـ array اتغير. 

هنجرب حاجة كمان وهي إننا نغير الـ length للـ string والـ array: 

console.log("The length of the string s is originally",s.length);
console.log("The length of the array arr is originally",arr.length );

// updating the length
s.length = 100;
arr.length = 100;

// results
console.log("The length of the string sis now " , s.length);
console.log("The length of the array arr is now", arr.length);

ودي النتيجة اللي هتطلع لما نعمل run: 

هذا المقال مخصص للأعضاء المنتسبين لخطط الاشتراك المدفوعة فقط

اشترك الآن وتصفح كافة المقالات المميزة واستمتع بمحتوى حصري وابق على اطلاع دائم بالتحديثات المستمرة.

اشترك الآن 🚀

هل لديك حساب؟ تسجيل الدخول

في هذا المقال
اشترك الآن واكمل قراءة المقال
قناة اقرأ-تِك على التليجرام قناة اقرأ-تِك على التليجرام

اشترك الآن بنشرة اقرأ‑تِك الأسبوعية

لا تدع أي شيء يفوتك. واحصل على أحدث المقالات المميزة مباشرة إلى بريدك الإلكتروني وبشكل مجاني!

مقالات ذات صلة

  • Critical Rendering Path 2 min read

    Critical Rendering Path

    Saeed Khaled Saeed Khaled • 19 Aug, 2025
    Saeed Khaled Saeed Khaled
    Frontend Developer
    • Website
  • Thoughts on CORS Policy 3 min read

    Thoughts on CORS Policy

    Mohammed Lashein Mohammed Lashein • 1 Jul, 2025
    Mohammed Lashein Mohammed Lashein
    Full stack developer
    • Website
  • Idempotency in APIs 2 min read

    Idempotency in APIs

    Oussama Djaidri Oussama Djaidri • 16 Jun, 2025
    Oussama Djaidri Oussama Djaidri
    Front-End Engineer
    • Website
  • Browser & Server Negotiation Behind The Scene 2 min read

    Browser & Server Negotiation Behind The Scene

    Saeed Khaled Saeed Khaled • 22 Apr, 2025
    Saeed Khaled Saeed Khaled
    Frontend Developer
    • Website
  • Introduction Into Robots.txt 1 min read

    Introduction Into Robots.txt

    Saeed Khaled Saeed Khaled • 5 Apr, 2025
    Saeed Khaled Saeed Khaled
    Frontend Developer
    • Website
  • Tailwindcss 1 min read

    Tailwindcss

    Alaa Elkzaz Alaa Elkzaz • 31 Mar, 2025
    Alaa Elkzaz Alaa Elkzaz
    Co-Founder & Software Engineer
    • Website
  • Cross-Tab Communication with Broadcast Channel API 1 min read

    Cross-Tab Communication with Broadcast Channel API

    Ahmed Saber Ahmed Saber • 27 Feb, 2025
    Ahmed Saber Ahmed Saber
    Front-End Engineer
    • Facebook
    • Website
  • Introduction Into Cascade in CSS Part 2 2 min read

    Introduction Into Cascade in CSS Part 2

    Ibrahim Harchiche Ibrahim Harchiche • 11 Feb, 2025
    Ibrahim Harchiche Ibrahim Harchiche
    Frontend Developer
    • Website
  • NextJS Caching Mechanisms 1 min read

    NextJS Caching Mechanisms

    Ali Alaa El-Din Ali Alaa El-Din • 11 Feb, 2025
    Ali Alaa El-Din Ali Alaa El-Din
    Front End Developer
    • Website
  • HTTP Caching 2 min read

    HTTP Caching

    Saeed Khaled Saeed Khaled • 29 Jan, 2025
    Saeed Khaled Saeed Khaled
    Frontend Developer
    • Website
اقرأ-تك اقرأ-تك
  • الرئيسية
  • المقالات
  • خطط الاشتراك
  • - اصدارتنا
  • ورقة وقلم
  • مدونات فطين
  • شنطة مبرمج
  • النشرة الأسبوعية
  • كنوز
  • - تعرف علينا
  • من نحن
  • الشراكات
  • كتاب المحتوى
  • اكتب معنا
  • تواصل معنا
  • - بنود الخدمة
  • سياسة الخصوصية
  • الشروط والأحكام
الوسوم
  • Backend
  • Distributed Systems
  • System Design
  • Databases
  • LinkedIn
  • X
  • Facebook
  • Telegram
  • GitHub
جميع الحقوق محفوظة لمنصة اقرأ-تِك 2024©