Lesson 4 / الدرس 4

Types: what kind of value is this / الأنواع: أي نوع من القيم هذا

Every value has a kind, and the kind decides what the operators do. Confusing a number with a string of digits is the single most common beginner bug in JavaScript.

لكل قيمة نوع، والنوع يقرر ما تفعله المعاملات. والخلط بين رقم ونص من الأرقام أشيع عيب مبتدئ في JavaScript.

Type	Example	What it is for
number	20, 3.5, -1	Anything you count or calculate with
string	'hello', "20"	Text — always in quotes
boolean	true, false	A yes-or-no answer
undefined	undefined	A box that was never filled
null	null	Deliberately empty — you set it
array	[1, 2, 3]	An ordered list — lesson 15
object	{ name: "Sara" }	Named values together — lesson 17

The difference between the fourth and fifth rows matters: undefined means nobody put anything here, and null means somebody deliberately put nothing here. One is usually a mistake; the other is a decision.

والفرق بين السطرين الرابع والخامس مهم: فـundefined تعني أن أحدًا لم يضع شيئًا هنا، وnull تعني أن أحدًا وضع لا شيء هنا عمدًا. فالأولى خطأ عادةً؛ والثانية قرار.

The + that means two things

2 + 2          ->  4        two numbers: addition
'2' + '2'      ->  '22'     two strings: joining
'2' + 2        ->  '22'     one of each: JavaScript joins
'10' - 2       ->  8        minus has no joining meaning, so it converts

This is why a form field, which always gives you a STRING,
produces 205 when you expected 25.

That last line is the bug, and every JavaScript beginner meets it. A number typed into an input arrives as text, and + joins text. Run the demonstration to see it happen and to see the fix.

وذلك السطر الأخير هو العيب، ويقابله كل مبتدئ في JavaScript. فالرقم المكتوب في حقل يصل نصًا، و+ تصل النصوص. شغّل العرض لتراه يحدث ولترى الإصلاح.

Checking and converting

To do this	Write
Ask what type something is	typeof value
Text to a number	Number(text)
Text to a whole number	parseInt(text, 10)
Anything to text	String(value)
Round to two decimals for display	value.toFixed(2)
Check a conversion failed	Number.isNaN(result)

toFixed is for showing a value, not for storing one — it returns a string, so the result of price.toFixed(2) cannot be added to anything. Format at the last moment, calculate with numbers.

وtoFixed لعرض قيمة لا لتخزينها — فهي تعيد نصًا، فناتج price.toFixed(2) لا يمكن جمعه مع شيء. نسّق في اللحظة الأخيرة، واحسب بالأرقام.

والتحويل الفاشل لا يرمي خطأً — بل ينتج NaN أي "ليس رقمًا"، ثم يسمّم بصمت كل حساب يمسّه. فـNumber("abc") هي NaN، وNaN + 5 هي NaN. والأسوأ أن NaN القيمة الوحيدة في JavaScript غير المساوية لنفسها، فـx === NaN خطأ دائمًا. استخدم Number.isNaN(x) لفحصها.

JavaScript is what is called dynamically typed: a variable can hold a number now and a string later, and nothing stops it. That is convenient and it is why the bug above exists — other languages would have refused to add a string to a number at all. The discipline has to come from you: decide what a variable holds and keep it holding that.

وحين يعطي حساب جوابًا خاطئًا، فأول ما تفحصه الأنواع لا الحساب. وconsole.log(typeof a, typeof b) قبل السطر المخطئ يجد هذا الصنف من العيوب في ثوانٍ، وهو أول ما سيسألك عنه صاحب خبرة.

Try it live / جرّب بنفسك

<h1>Adding two numbers</h1>
<input id="a" value="20"> + <input id="b" value="5">
<button id="go">Add</button>
<p id="out"></p>

<script>
  document.getElementById('go').onclick = function () {
    const a = document.getElementById('a').value;
    const b = document.getElementById('b').value;
    console.log(typeof a, typeof b);
    document.getElementById('out').textContent = '…';
  };
</script>

Preview / المعاينة

Check yourself / اختبر نفسك

1. What does "20" + 5 produce?

ماذا ينتج "20" + 5؟

2. What is NaN, and why is x === NaN useless?

ما NaN، ولماذا x === NaN عديمة الفائدة؟

3. What is the difference between undefined and null?

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

Your task / مهمتك

Build a small page with two number inputs and a button that shows their sum. Make it wrong first — read the values and add them directly — and show the result. Then fix it with Number() and show that. Finally, type letters into one of the fields and report what happens, then handle that case so the page says something useful instead of NaN.

ابنِ صفحة صغيرة بحقلي أرقام وزر يعرض مجموعهما. واجعلها خاطئة أولًا — اقرأ القيمتين واجمعهما مباشرة — وأظهر النتيجة. ثم أصلحها بـNumber() وأظهر ذلك. وأخيرًا اكتب حروفًا في أحد الحقلين وأبلغ بما يحدث، ثم عالج تلك الحالة لتقول الصفحة شيئًا نافعًا بدل NaN.

The wrong version, with its output shown الصيغة الخاطئة ومخرَجها معروض
The fixed version beside it الصيغة المصلَحة بجانبها
typeof used to prove what each value is typeof مستخدمة لإثبات نوع كل قيمة
The NaN case handled with a useful message حالة NaN معالَجة برسالة نافعة