أنواع البيانات في JavaScript للمبتدئين: افهم String وNumber وBoolean وNull وUndefined بأمثلة كثيرة

تخيّل أن لديك قيمتين تبدوان متشابهتين: 10 و"10". الأولى رقم، والثانية نص. الفرق صغير شكلاً لكنه يغيّر النتيجة بالكامل في JavaScript. لهذا فهم Data Types خطوة أساسية لكل مبتدئ.

إذا كنت تبحث عن شرح أنواع البيانات في JavaScript أو الفرق بين String و Number أو ما معنى null و undefined، فهذا الدرس يشرحها بأمثلة كثيرة وواضحة.

ما هي Data Types في JavaScript؟

كل قيمة في JavaScript لها نوع (Type)، والنوع يحدد كيف سيتعامل المحرك معها: هل يجمعها كأرقام؟ هل يدمجها كنص؟ هل يعتبرها true أو false؟

قاعدة ذهبية: عند أي نتيجة غريبة، اسأل أولاً: "ما نوع هذه القيمة؟"

الأنواع الأساسية التي يجب أن تبدأ بها

1) مثال مهم جداً: String vs Number

let a = 10;
let b = "5";

console.log(a + b); // "105" (String concatenation)
console.log(a + Number(b)); // 15 (Math)

ماذا يفعل هذا الكود؟ يوضح الفرق بين الجمع النصي والجمع الحسابي.

النتيجة المتوقعة: السطر الأول يعطي "105"، والثاني يعطي 15.

خطأ شائع: افتراض أن أي قيمة فيها أرقام هي Number حتى لو كانت String.

2) أمثلة مركزة لكل نوع أساسي

String (النصوص)

let firstName = 'Rachid';
let welcome = "Hello " + firstName;
console.log(welcome); // Hello Rachid

ماذا يفعل هذا الكود؟ يخزّن نصاً ويكوّن رسالة بدمج نصين.

النتيجة المتوقعة: طباعة رسالة نصية كاملة.

خطأ شائع: نسيان إغلاق علامات الاقتباس.

Number (الأرقام)

let price = 120;
let tax = 30;
let total = price + tax;
console.log(total); // 150

ماذا يفعل هذا الكود؟ يجري عملية حسابية رقمية عادية.

النتيجة المتوقعة: 150.

خطأ شائع: جعل أحد القيم نصاً مثل "30" ثم استغراب النتيجة.

Boolean (true / false)

let isLoggedIn = true;

if (isLoggedIn) {
  console.log('Welcome back!');
}

ماذا يفعل هذا الكود؟ يستخدم قيمة منطقية لاتخاذ قرار.

النتيجة المتوقعة: طباعة Welcome back! عندما تكون القيمة true.

خطأ شائع: تخزين "true" كنص بدل true كقيمة منطقية.

Undefined vs Null

let x;
let y = null;

console.log(x); // undefined
console.log(y); // null

ماذا يفعل هذا الكود؟ يوضح الفرق بين متغير بدون قيمة وقيمة فارغة مقصودة.

النتيجة المتوقعة: x = undefined وy = null.

خطأ شائع: اعتبار null وundefined نفس المعنى تماماً.

3) كيف أعرف نوع القيمة بسرعة؟ (typeof)

استخدم typeof أثناء الـ Debug لتفادي التخمين.

console.log(typeof "Hello");   // string
console.log(typeof 42);        // number
console.log(typeof true);      // boolean
console.log(typeof undefined); // undefined
console.log(typeof null);      // object (JS quirk)

ماذا يفعل هذا الكود؟ يفحص نوع كل قيمة بشكل مباشر.

النتيجة المتوقعة: تظهر الأنواع في Console كما في التعليقات.

خطأ شائع: الارتباك من نتيجة typeof null التي تساوي object تاريخياً.

4) مثال عملي: تحويل الأنواع قبل الحساب

let inputPrice = "200";   // جاءت كنص من input
let inputDiscount = "50"; // جاءت كنص من input

let finalPrice = Number(inputPrice) - Number(inputDiscount);
console.log(finalPrice); // 150

ماذا يفعل هذا الكود؟ يحوّل قيم الإدخال من String إلى Number قبل الطرح.

النتيجة المتوقعة: عملية حسابية صحيحة بدل نتائج غير متوقعة.

خطأ شائع: إجراء عمليات على نصوص بدون تحويل النوع أولاً.

5) ملاحظة مهمة: Arrays و Objects أيضاً أنواع بيانات

let colors = ['red', 'green', 'blue']; // Array
let user = { name: 'Sara', age: 22 };  // Object

console.log(typeof colors); // object
console.log(typeof user);   // object

ماذا يفعل هذا الكود؟ يبين أن المصفوفات والكائنات موجودة أيضاً ضمن أنواع JavaScript.

النتيجة المتوقعة: كلاهما يعطي object مع typeof.

خطأ شائع: توقع أن typeof array تعطي array مباشرة.

Story قصيرة: لماذا خرجت النتيجة "105"؟

مبتدئ جمع قيمتين من حقلين input: "10" و"5". توقع النتيجة 15، لكن ظهرت 105. السبب: القيم القادمة من input نصوص افتراضياً. بعد استخدام Number() قبل الجمع، اشتغل الحساب كما يجب.

let value = "25";
console.log(typeof value);         // string
console.log(typeof Number(value)); // number

Checklist سريعة قبل كتابة أي منطق

• هل القيمة Number فعلاً أم String تحتوي أرقاماً؟
• هل استخدمت typeof عندما شككت في نوع المتغير؟
• هل تحتاج تحويل نوع عبر Number() أو String()؟
• هل فرّقت بين null (مقصود) وundefined (غير معرّف)؟

روابط المتابعة بعد هذا الدرس

الخطوة التالية مباشرة: الفرق بين var و let و const ثم العمليات الحسابية في JavaScript.

الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)

ما هي Data Types في JavaScript؟

هي أنواع القيم التي يتعامل معها JavaScript مثل string وnumber وboolean وnull وundefined.

ما الفرق بين null و undefined في JavaScript؟

undefined يعني أن المتغير لم يأخذ قيمة بعد، بينما null قيمة فارغة يتم تعيينها بشكل مقصود.

كيف أعرف نوع المتغير في JavaScript؟

استخدم typeof مثل: typeof myVar لمعرفة النوع بسرعة أثناء الـ Debug.

لماذا typeof null ترجع object؟

هذا سلوك تاريخي معروف في JavaScript منذ بداياتها، وليس لأن null كائن حقيقي.

كيف أتجنب أخطاء String و Number؟

تأكد من نوع القيم دائماً، وحوّلها صراحةً إلى Number قبل العمليات الحسابية عند الحاجة.

للمتابعة مباشرة: ابدأ بدرس الفرق بين var و let و const ثم انتقل إلى العمليات الحسابية في JavaScript.