یه قُلپ java script بزن روشن شی (قُلپ اول)

خب سلام

بازم مثل همیشه از اینکه الان داری این مقاله رو میخونی و همراهمی ذوق مرگم پس تو هم باش :)

اگر نمی دونی داستان انتشارات شیرجه چیه ، برات بگم که اینجا قرار خیلی سریع و جذاب اصل مطالب رو یادبگیری انقدری که بتونی خودت تنهایی دست بکار شی و از دانشت استفاده کنی و داستان مجموعه قُلپ اینه که قرار توش خیلی اسون و پایه ای چیزای مختلف یادبگیریم و این روند قرار مثل خوردن یه قلپ اب باشه به همین سادگی به همین باحالی

این دوره بیشتر بدرد کیا میخوره ؟ خب اگر خیلی اشنایی با دنیای جذاب برنامه نویسی نداری یا اینکه js رو درست حسابی و کاربردی بلد نیستی و دوس داری بهتر یادبگیری و کلای اگر دوس داری بشینی js یادبگیری این دوره بدردت میخوره ، اگرم بلدی و خفنی باز پیشنهاد میکنم که ی مرور سریع برای محکم کاری رو مباحث پایه ای داشته باشی :)

حالا وقته javascript

چرا js ؟ خب ببین چندتا دلیل داره ، یکی اینکه خیلی ساده و اسون میشه یاد گرفتش و این یعنی تویی که داری شروع می کنی خیلی زود لذت کد زدن رو میتونی تجربه کنی ، دوم اینکه اگرچه خیلی اسون و جم و جوره اما میشه مفهوم شی گرایی یا OPP رو هم توش یاد داد که زیباست بنظرم و این یعنی بعدا اگر خواستی می تونی بری سراغ زبونای سخت تر و اونا رو هم راحت یادبگیری . موضوع بعدی و خیلی مهم اینه که در حال حاضر در دنیای کنونی مردی یه حوزه رو بگو که پای js بهش نرسیده باشه ، هرجا رو نگاه کنی هست ! ینی از فرانت و بک گرفته تا اپ برای اندروید و ios و حتی windows ! پس یه زبون یاد میگیری و بعد شونصدتا کار میتونی باهاش بکنی ، اگه جذاب نیست پس چیه ؟

متغیر ها در js

خب بیا از متغیر ها شروع کنیم ( ببین اگر نمی دونی متغیر چیه پس یه سر بزن اینجا که برات توضیح دادم ) ما توی js برای داده ها سه جنس کلی داریم (بازم هست اما برا الان همین سه تا رو داشته باش)

• عددی ( Number )
• کارکتری ( String )
• درست نادرستی ( Boolean )

اما وقتی میخوای یه متغیر تعریف کنی نیازی نیست جنسش رو مشخص کنی ، همین که بهش مقدار بدی انگاری با توجه به جنس مقدارت ، مشخص کردی که جنس متغیرت هم چیه

// declarationKeyWord     variableName  =  data ;
var fullName = " mirza taghi khan " ;

خب الان تو تیکه کد بالا با اوردن کلید واژه var مشخص کردم که اقا دارم یه متغیر میسازم بعدش هر کلمه ای که بنویسم ( یادت باشه space نزنی بین اسمت ) میشه اسم متغیرت و بعد مساوی هم هرچی بذاری میشه مقداری که میخوای توی متغییرت بریزی . ولی حالا کلید واژه چیه ؟

کلید واژه های متغیر ها

خب ببین داستان از این قرار که ما علاوه بر اینکه برامون مهم که جنس محتوای متغییرمون چیه خیلی خوبه که بتونیم از طریق یسری کلید واژه ثابت متغیرمون رو declare بکنیم . ینی اینکه بتونیم به متغیرمون یسری صفت کاربردی بدیم بیا ببینیم اینا تو js چیا هستن ( فرضم بر اینه که داریم نسخه ES2015 به بعد JS رو بررسی میکنیم )

• var
• let
• const

پیرمردی به نام var

ببین از اون اول اختراع js ما برای اینکه بخوایم یه متغیری رو تعریف کنیم باید میومدیم و از کلید واژه var استفاده می کردیم . خب این ینی var جز اینکه بگه اقا این اسمی که بعد من اومده یه متغیر کار خاص دیگه ای انجام نمی ده :)) که خب همین هم داستان شده چون var یه مشکل خیلی خیلی بد داره که باعث میشه کلی کد هامون باگ خیز بشن :/

حالا مشکلش چیه ؟ ببین اگر ما یه چنین حالتی رو تو کدمون داشته باشیم

تعریف متغیری به اسم  نام_کاربری
تعریف متغیری به اسم  شماره تلفن_کاربر

تابع {
تعریف متغیری به اسم  نام_کاربری
یسری کار ...
}

تابع {
تعریف متغیری به اسم  شماره تلفن_کاربر
یسری کار ...
}

توی این حالتا که ما یه متغیر با نام مشابه رو تو scope (ببین ما هرجا که یه {} داشته باشیم از { تا } میگیم یه scope مثل تابع ها ) های مختلف تعریف میکنیم ، برامون خیلی مهم که ببینیم وقتی یه مقداری توی یه scope به اون متغیر میدیم ، ایا مقدارش تو بقیه scope ها هم تغییر میکنه یا نه . اگر مقدارش فقط داخل scope خودش تغییر کنه ینی انگاری وقتی میرسیم به اخر scope اون متغیر می میره ! و تغییری در مقدار متغیر هم نامش تو scope های دیگه اتفاق نمی افته که میگیم ویژگی block-scope داره !

ما تمام گیرمون با var سر اینه که block-scope نیست !

الان تو مثال زیر ببین

var username= "ali";

if (true) {
    var username= "majid";
 }

console.log(username);   // majid

خط اول اومدیم یه متغیر تعریف کردیم بنام username و توش هم استرینگ ali رو ریختیم بعد رسیدیم به if ( بین اگر نمی دونی if چیه پس یه سر بزن اینجا که برات توضیح دادم ) بعد که داخل اسکوپش شدیم دوباره یه متغیر دیگه بنام username تعریف کردیم و اینبار مقدار majid رو توش ریختیم . حالا با دستور (console.log(username میخوایم ببینیم چه مقداری توی متغیر username هست که
میبینیم اع ! توش majid

این باعث میشه کللی باگ از گوشه و کنار کدمون بزنه بیرون !

ناجی ای بنام let

خب حالا اگر بیایم بجای var از let استفاده کنیم دیگه دوشواری نداریم چون let خاصیت block-scope داره و این به زبون ساده ینی اینکه متغیر ها فقط توی scope خودشون زنده ان و اگر از اون scope بیایم بیرون انگاری که اصن وجود نداشتن

let username= "ali";
if (true) {
    let username= "majid";
}
console.log(username);   // ali

همونطور که میبینی خارج از scope مقدار متغرمون همون ali باقیمونده اما مقدار متغیر داخل اسکوپ if مقدار majid هست که بهش دادیم

مورد بعدی اینکه داخل یه scope نمی تونی دوتا متغیر هم نام از نوع let داشته باشی ( که با var میشه )

let temp = 1 ;
let temp = 9 ;   // SyntaxError

مفهوم global variable

خب ببین داستانای بالا برا زمانی بود که ما هربار بخوایم یه متغیر بسازیم ! اما یه زمانی هست که که تو اون بالای کدت یه متغیری رو ساختی و حالا میخوای ازش تو ادامه کدت استفاده کنی که خب دیگه نباید از کلید واژه ها استفاده کنی ، ( چون اگه بیارشون ینی اینکه داری یه متغیر جدید درست میکنی ) تو این حالت یه چیزی رو باید حواست باشه . ببین

{ 
....
scope1
...

    {
        scope1.1
    }
    
    {        
       scope1.2     
    } 
    
    {
        ...
        scope1.3
        ...
        {
            scope1.3.1
        }
}

ما اینجا یه اسکوپ اصلی داریم که همه ی اسکوپ های دیگه تو دلشن

من به این اسکوپ پیش خودم میگم " کَف کد " چون کف تر از اینجا ، جای دیگه ای نیست :)

تو هر متغیری رو که تو کف کدت بسازی بهش میگن global variable ، تو همه ی اسکوپ های داخلی تر هم زنده است و میتونی بهش مقدار جدید بدی و ازش مقدارش رو بخونی ، فقط یادت باشه که دیگه از کلید واژه ها غیر از اون بار اولی که متغیر رو ساختیم دیگه استفاده نمی کنیم و فرقی هم نمی کنه var باشه یا let

 {  
     let name = "ali" ;
     var number = 1 ;
     
     if(true){
         name = "majid" ;
         number = 0 ;
      }
      
      console.log(name); // majid
      console.log(number): // 0

فقط const و دیگر هیچ !

خب ببین const همون let خودمونه با یسری تفاوت اساسی :)) ببین اول اینکه حتما موقع تعریف یه متغیر از نوع const باید بهش مقدار اولیه بدی و اینکه بعد از مقدار دهی اولیه دیگه مقدار یه متغیر از نوع const تغیر نمیکنه ! و اینکه مث let خاصیت block-scope رو داره و بین خودمون بمونه که خاصیت mutation رو هم داره (الان وقت توضیحش نیست ، گیج میشی ) مورد بعدی اینکه داخل یه scope نمی تونی دوتا متغیر هم نام از نوع const داشته باشی

در اخر بذار بهت یه جمله گوهر بار بگم =)

هر جا تونستی از const استفاده کن اگر نمی شد برو سراغ let . اما var رو بریز تو -> ? (سطل اشغال)

بیا از همین الان زیبا کد بزن

ببین از همین اول یه نکته ای رو جون مادرت رعایت کن ، اسم معنا دار برای متغیر هات بذار !

پس قرارمون یادت باشه میخوای برا متغیرات اسم بذاری ، با توجه به کاری که میخوان انجام بدن قشنگ و درست حسابی اسم بذار و اصلا هم اشکال نداره که طول اسمشون زیاد بشه ، عوضش خودت که داری کدت رو مرور میکنی یا یکی دیگه که میخواد بیاد کدت رو بخونه خیلی راحت تر میفهمه که چی به چیه

اینطوری موقع دیباگ کمتر زجر میکشی :)))

قسمت اول رو همینجا تموم میکنیم

خیلی خوش حال شدم که نشستی و این مقاله رو خوندی ، لطفا هر سوالی داشتی حتی بدیهی ترین هارو هم بپرس اینجا و اینکه حالا به مرور میریم سراغ قُلُپ های بعدی و همینطور خفن تر میشیم و دوز لذتمون از برنامه نویسی میره بالا و بالا و بالاتر تر ^-^

اگر با این مقاله حال کردی میتوی با لایک کردن بهم بگی :)

تا قلپ بعد شاد باش و بِکُد !!!