آموزش جاوا اسکریپت – جلسه ۲ – متغیرها و انواع داده [Variables-DataTypes]

در فصل اول زبان جاوا اسکریپت را معرفی کردیم، دلیل نام گذاری آن را بیان کردیم، نحوه انتخاب ادیتور مناسب برای توسعه کدهای javascript را آموزش دادیم، زبان های جانبی که از جاوا اسکریپت سرچشمه گرفتند را معرفی کردیم و محیط developer console را جهت اجرای سریع کدهای جاوا اسکریپت و تست آنها معرفی کردیم.

در این مقاله می خواهیم مبانی جاوا اسکریپت را آموزش دهیم. مانند نحوه تعریف متغیر، تابع، انواع داده ها و تبدیل آنها به یکدیگر و غیره…

نحوه تعریف تگ script:

برای تعریف تگ script در html5 نیازی به تعریف اتریبیوت type برای آن نیست. اما در html4 باید اتریبیوت type=”text/javascript” را تعریف کنیم وگرنه ارور خواهیم داشت.

<script type="text/javascript">
</script>

اگر بخواهیم فایل خارجی را در script اجرا کنیم باید با اتریبیوت src تعریف کنیم.

<script src="/path/to/script.js"></script>

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

<script src="file.js">
  alert(1); // the content is ignored, because src is set
</script>

کد فوق را باید به شکل زیر تعریف کنیم تا خطا ندهد:

<script src="file.js"></script>
<script>
  alert(1);
</script>

ساختار تعریف دستورات جاوا اسکریپتی:

تعریف دستورات در یک خط:

دستورات جاوااسکریپت را می توان بصورت یک خطی و پشت سر هم تعریف کرد (اما پیشنهاد نمی شود)

alert('Hello'); alert('World');

عدم تعریف سمی کالن در انتهای دستور:

همچنین می توان آخر دستورات از semi-colon استفاده نکرد (در کد زیر دو پیغام alert پشت سرهم اجرا می شود):

alert('Hello')
alert('World')

تعریف دستورات در چند خط:

اگر کد زیر را تعریف کنیم خطا نیست و بدرستی اجرا می شود (یک alert با محتوای عدد 6 نمایش می یابد)

alert(3 +
1
+ 2);

دستور زیر دو پیغام پاپ آپ پشت سرهم با محتوای 1 و 2 را نمایش می دهد:

[1, 2].forEach(alert)

اما در دستور زیر، خط اول بدرستی اجرا می شود و خط دوم ارور میدهد:

alert("There will be an error")

[1, 2].forEach(alert)

مفهوم use strict در جاوا اسکریپت:

تعریف عبارت use strict باعث می شود کدهای جاوااسکریپت مدرن ما با کدهای قدیمی جاوااسکریپت تطابق و همخوانی داشته باشد. دقت کنید که این عبارت باید در بالای کدهای جاوا اسکریپت تعریف شود وگرنه نادیده گرفته می شود:

"use strict";

// this code works the modern way
...

بعنوان مثال از کاربردهای use strict می توان به مبحث تعریف متغیر اشاره کرد. در جاوااسکریپت مدرن می توان یک متغیر را بدون کلمه کلیدی let یا var تعریف کرد اما در نسخه های قدیمی javascript باید حتما کلمه var قبل از نام متغیر می بود.

// note: no "use strict" in this example

num = 5; // the variable "num" is created if it didn't exist

alert(num); // 5

کد بالا بدون هیچ مشکلی اجرا خواهد شد اما اگر از use strict استفاده کنیم (کد زیر) با خطا روبرو می شویم زیرا کامپایل جاوااسکریپت در اینصورت با قوانین ورژن قدیمی آن انجام می شود.

"use strict";

num = 5; // error: num is not defined

متغیرها در جاوا اسکریپت:

در بسیاری از مواقع یک اپلیکیشن جاوا اسکریپتی نیاز دارد با اطلاعات کار کند. بعنوان مثال:

• در یک فروشگاه اینترنتی: اطلاعات مربوط به محصولات داخل سبد خرید کاربر یا محصولات فروخته شده و…
• در یک برنامه چت آنلاین: اطلاعات مربوط به کاربران و پیفام های آنها و…

متغیرها برای ذخیره اطلاعات بکار می روند.

متغیرهای ثابت یا const:

متغیرهای ثابت یا const برای تعریف مقادیر ثابت (و بدون تغییر) بکار می روند. مانند کد زیر:

const myBirthday = '18.04.1982';

برای مقادیر ثابت رنگی (بجای کد رنگی) توصیه می شود از کاراکترهای انگلیسی با حروف بزرگ استفاده شود:

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

// ...when we need to pick a color
let color = COLOR_ORANGE;
alert(color); // #FF7F00

فواید نام گذاری کدهای رنگی به این شکل: خوانا بودن آنها، عدم بروز خطای تایپی در کد رنگی، بخاطر سپاری راحت تر

قوانین نام گذاری متغیرهای جاوا اسکریپتی:

در نام گذاری متغیرهای جاوا اسکریپتی به موارد زیر دقت کنید:

• نام متغیر می تواند شامل حرف یا letter، سمبل های $ و _ ، اعداد باشد.
• نباید با عدد شروع شود.

let userName;
let test123;

• نام های بیش از یک بخشی بصورت camelCase باشد. مانند myLongVarName
• نام متغیر می تواند علامت دلار یا underline باشد.

let $ = 1; // declared a variable with the name "$"
let _ = 2; // and now a variable with the name "_"

alert($ + _); // 3

موارد زیر نادرست هستند:

let 1a; // cannot start with a digit

let my-name; // hyphens '-' aren't allowed in the name

تفاوت تعریف متغیر توسط var و let:

در فصل های ابتدایی این سری آموزشی نحوه تعریف متغیرها به سه روش زیر را بیان کردیم:

Var

Const

Let

Let و const شبیه یکدیگر کار می کنند اما var متفاوت است و از زمان های قدیم در زبان های برنامه نویسی وجود داشته است.

در نگاه اول بنظر می رسد let و var یکسان هستند چون کار هر دوی آنها تعریف یک متغیر در جاوا اسکریپت است:

function sayHi() {  
    var phrase = "Hello"; // local variable, "var" instead of "let"   
    alert(phrase); // Hello
} 
sayHi(); 
alert(phrase); // Error, phrase is not defined

اما تعریف متغیر توسط let با var تفاوت هایی دارد:

تفاوت اول let با var:

Var هیچ بلاک تعریفی ندارد: متغیرهایی که بوسیله var تعریف می شوند بطور سراسری (global) تعریف شده اند یا در داخل بدنه تابع قابل شناسایی هستند.

if (true) {
    var test = true; // use "var" instead of "let" 
}
alert(test); // true, the variable lives after if

همانطور که می بینید متغیر test بدلیل اینکه با var تعریف شده است هیچ بلاک کدی ندارد و در خارج از if نیز شناخته شده است.

اما اگر همین مثال را با let اجرا کنیم خطا خواهد داشت:

if (true) {  
    let test = true; // use "let"
} 
alert(test); // Error: test is not defined

زیرا در این حالت test فقط در بلاک if قابل مشاهده است.

در مثالی دیگر داریم:

for (var i = 0; i < 10; i++) {  
    // ...
} 
alert(i); // 10, "i" is visible after loop, it's a global variable

متغیر i در خارج از بلاک حلقه for نیز تعریف  شده و برابر آخرین مقدار یعنی 10 می باشد.

در مثال بعدی می خواهیم یک متغیر را توسط var در داخل بلاک یک تابع تعریف کنیم:

function sayHi() {  
    if (true) {    
        var phrase = "Hello";  
    }   
    alert(phrase); // works
} 
sayHi();
alert(phrase); // Error: phrase is not defined (Check the Developer Console)

در این مثال متغیر phrase در بدنه تابع sayHi تعریف شده است اما در خارج از آن undefined خواهد بود.

تفاوت دوم let با var:

Var در ابتدای فانکشن پردازش می شود. به بیان دیگر اهمیتی ندارد شما متغیر را توسط var در کجای بدنه تابع تعریف کرده اید. جاوا اسکریپت آن را در ابتدای بدنه تابع تعریف و پردازش می کند. به مثال زیر توجه کنید:

function sayHi() { 
     phrase = "Hello";   
     alert(phrase);   
     var phrase;
}
sayHi();

در این مثال با اینکه متغیر phrase در انتهای بلاک تابع تعریف شده است اما در عمل کدها بصورت زیر اجرا می شوند:

function sayHi() {  
    var phrase;   
    phrase = "Hello";  
    alert(phrase);
}
sayHi();

در واقع عبارت var phrase به ابتدای بدنه تابع منتقل می شود.

یا حتی در مثال زیر، بلاک کد if نادیده گرفته می شود و متغیر phrase بصورت گلوبال در بدنه تابع تعریف خواهد شد:

function sayHi() {  
    phrase = "Hello"; // (*)   
    if (false) {    
        var phrase;  
    }   
    alert(phrase);
}
sayHi();

به این قضیه hoisting گفته می شود. یعنی انتقال متغیر var به بلاک بالاترین parent خود.

بنابراین در مثال فوق با اینکه var phrase در بلاک if تعریف شده است، دستور * خطا ندارد زیرا بهنگام تفسیر کد و اجرا، دستور var phrase به اولین دستور بعد از شروع بدنه تابع منتقل می شود و قبل از دستور * قرار می گیرد.

انواع داده یا Data Types:

یک متغیر در جاوا اسکریپت می تواند در یک خط مقداری از نوع رشته ای داشته باشد و در خط بعدی از نوع عدد باشد.

// no error
let message = "hello";
message = 123456;

نوع داده عددی (Number):

در انواع عددی اگر یک عدد مشخص بر عدد صفر تقسیم شود مقدار خروجی بی نهایت یا infinity خواهد شد.

alert( 1 / 0 ); // Infinity

در صورتی که با خطای محاسباتی یعنی computational error مواجه شویم عبارت NAN را در خروجی خواهیم دید:

alert( "not a number" / 2 ); // NaN, such division is erroneous

نوع داده رشته ای(String):

نوع داده ای رشته ای یا string در جاوااسکریپت باید با کوتیشن تعریف شود. سه نوع کوتیشن داریم:

• دابل کوتیشن: “Hello”
• تک کوتیشن: ‘Hello’
• بک تیک: `Hello`

مثال های زیر را برای تعریف رشته در نظر بگیرید:

let str = "Hello";
let str2 = 'Single quotes are ok too';
let phrase = `can embed another ${str}`;

بین دابل کوتیشن و تک کوتیشن در جاوا اسکریپت تفاوتی وجود ندارد.

از بک تیک (back tick) در تعریف رشته هایی استفاده می شود که بخواهیم مقدار یک متغیر داینامیک را درون آن درج کنیم (توسط عبارت ${…}) مانند:

let name = "John";

// embed a variable
alert( `Hello, ${name}!` ); // Hello, John!

// embed an expression
alert( `the result is ${1 + 2}` ); // the result is 3

دقت کنید که این عملکرد فقط با استفاده از بک تیک امکان پذیر است و با دابل کوتیشن جواب نمی دهد:

alert( "the result is ${1 + 2}" ); // the result is ${1 + 2} (double quotes do nothing)

نوع داده بولین (Boolean):

متغیرهای بولین (boolean) دو مقدار true و false دارند. مثال زیر:

let nameFieldChecked = true; // yes, name field is checked
let ageFieldChecked = false; // no, age field is not checked

دقت کنید که می توان نتیجه یک عبارت ریاضی را در یک متغیر بولین تعریف کرد. مانند زیر:

let isGreater = 4 > 1;

alert( isGreater ); // true (the comparison result is "yes")

در کد بالا به این دلیل که عدد 4 از 1 بزرگتر است مقدار معادله 4>1 برابر true خواهد بود.

نوع داده تهی (Null):

نوع داده ای تهی یا null بیان کننده مقدار “هیچ” یا “خالی” است و مثلا در کد زیر گفتیم متغیر age هیچ مقداری ندارد و نامعلوم است:

let age = null;

نوع داده تعریف نشده (Undefined):

نوع داده ای undefined بیانگر “تعریف نشدن مقدار برای متغیر” می باشد. مثلا اگر یک متغیر تعریف شده باشد اما مقداری برای آن تعریف نشود undefined خواهد بود:

let x;

alert(x); // shows "undefined"

معمولا می توان مقدار undefined را برای متغیرهای خود تعریف کنید (اما توصیه نمی شود)

let x = 123;

x = undefined;

alert(x); // "undefined"

نوع داده آبجکت (Object):

نوع داده ای آبجکت یا object با سایر انواع داده ای متفاوت است. انواع داده هایی که تابحال دیدیم به اصطلاح primitive type بودند. یعنی فقط یک مقدار واحد می توانند داشته باشند (مثلا یک رشته یا یک عدد) اما نوع آبجکت یا شی می تواند چند نوع داده ای را در خود جای دهد و نوع داده ای پیچیده تری می باشد. (می تواند مثلا شامل رشته-عدد و… باشد).

در فصل های آینده درباره نوع داده ای اشیاء بیشتر صحبت خواهیم کرد.

کاربرد عملگر typeof:

عملگر typeof نوع آرگومان ورودی خود را مشخص می کند. به دو شکل می توان از آن استفاده کرد.

• بعنوان اپراتور: typeof x
• بعنوان تابع: typeof(x)

بعنوان مثال:

typeof undefined // "undefined"

typeof 0 // "number"

typeof 10n // "bigint"

typeof true // "boolean"

typeof "foo" // "string"

typeof Symbol("id") // "symbol"

typeof Math // "object"  (1)

typeof null // "object"  (2)

typeof alert // "function"  (3)

تبدیل انواع داده (Type Conversion):

معمولا توابع و عملگرها آرگومان ورودی خود را به نوع داده ای مناسب خود تبدیل می کنند. بعنوان مثال alert نوع داده ورودی خودش را به رشته یا string تبدیل می کند و تابع Math مقادیر ورودی خود را به عدد تبدیل می کند.

در کد زیر ابتدا متغیر value از نوع بولین است و سپس توسط تابع String آنرا به رشته تبدیل کرده ایم:

let value = true;
alert(typeof value); // boolean

value = String(value); // now value is a string "true"
alert(typeof value); // string

تبدیل اعداد (Numeric Conversion): این نوع تبدیل در توابع ریاضی یا Math انجام می گیرد.

مثلا وقتی عمل تقسیم را برای رشته ها انجام می دهیم تابع Math رشته ها را به عدد تبدیل می کند:

alert( "6" / "2" ); // 3, strings are converted to numbers

اما می توان توسط تابع Number رشته را به عدد تبدیل کرد:

let str = "123";
alert(typeof str); // string

let num = Number(str); // becomes a number 123

alert(typeof num); // number

دقت کنید که اگر یک رشته متنی را بخواهیم به عدد تبدیل کنیم با خروجی NAN مواجه می شویم:

let age = Number("an arbitrary string instead of a number");

alert(age); // NaN, conversion failed

بعنوان مثال:

alert( Number("   123   ") ); // 123
alert( Number("123z") );      // NaN (error reading a number at "z")
alert( Number(true) );        // 1
alert( Number(false) );       // 0

نکته: نوع داده ای NULL پس از تبدیل به عدد برابر صفر خواهد شد اما نوع undefined برابر NaN

تبدیل بولین (Boolean Conversion): این تبدیل ساده ترین نوع تبدیل داده های می باشد. قوانین تبدیل بولین به این شکل است که داده های خالی مانند صفر، null، undefined، رشته خالی پس از تبدیل به Boolean برابر false می شوند. انواع دیگر هم پس از تبدیل برابر true خواهند شد:

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

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

نکته: رشته “0” پس از تبدیل به بولین برابر true می شود.

alert( Boolean("0") ); // true
alert( Boolean(" ") ); // spaces, also true (any non-empty string is true)

در فصل سوم، درباره انواع عملگرها در js و نیز حلقه های for و while و do..while توضیح خواهیم داد. لطفا با ما بمانید…!