به نام خدا

آبجکت global و کار با کنسول:

علاوه بر دستور console.log دستورات دیگری هم هستند که دانستن آن منجر به کدنویسی حرفه ای و بهینه تر مییشود.

مثلا همین دستور console.log را درنظر بگیرید و کد زیر را خودتان بررسی نمائید.

var person1 = {name:"Mokhtar",age:34,favorite:"javascript"};
var person2 = {name:"Afshin",age:42,favorite:"phone"};
var person3 = {name:"Amirhosien",age:12,favorite:"game"};

console.log(person1)
console.log(person2)
console.log(person3)

// ------------------  نتیجه  -------------------------------
{ name: 'Mokhtar', age: 34, favorite: 'javascript' }
{ name: 'Afshin', age: 42, favorite: 'phone' }
{ name: 'Amirhosien', age: 12, favorite: 'game' }

حالا میخواهیم به شکل کوتاهتر و کامل تری به همین نتیجه + نام متغیرهای مربوط آبجکت ها دست پیدا کنیم. بنابراین از دستور تک خطی زیر استفاده میکنیم:

console.log({person1,person2,person3})

// ------------------  نتیجه  -------------------------------
{ person1: { name: 'Mokhtar', age: 34, favorite: 'javascript' },
  person2: { name: 'Afshin', age: 42, favorite: 'phone' },
  person3: { name: 'Amirhosien', age: 12, favorite: 'game' } }

با روش بعدی میتوانیم اطلاعات فوق را به صورت یک جدول گرافیکی دریافت کنیم. روش بعدی استفاده از دستور console.table است.

     1- در حالت اول، متغیرها را درون آرایه[ ] قرار میدهیم و به متود table پاس میدهیم:

console.table([person1,person2,person3]);

// ------------------  نتیجه  -------------------------------
┌─────────┬──────────────┬─────┬──────────────┐
│ (index) │     name     │ age │   favorite   │
├─────────┼──────────────┼─────┼──────────────┤
│    0    │  'Mokhtar'   │ 34  │ 'javascript' │
│    1    │   'Afshin'   │ 42  │   'phone'    │
│    2    │ 'Amirhosien' │ 12  │    'game'    │
└─────────┴──────────────┴─────┴──────────────┘

    2- در حالت دوم، متغیرها را درون یک آبجکت { } قرار میدهیم و به متود table پاس میدهیم:

console.table({person1,person2,person3});

// ------------------ نتیجه -------------------------------
┌─────────┬──────────────┬─────┬──────────────┐
│ (index) │     name     │ age │   favorite   │
├─────────┼──────────────┼─────┼──────────────┤
│ person1 │  'Mokhtar'   │ 34  │ 'javascript' │
│ person2 │   'Afshin'   │ 42  │   'phone'    │
│ person3 │ 'Amirhosien' │ 12  │    'game'    │
└─────────┴──────────────┴─────┴──────────────┘

فرقش هم که متوجه شدید. 

وقتی با آرایه جدول میسازیم، شناسه هر ردیف همان ایندکس آرایه است و وقتی هم که با آبجکت جدول میسازیم، شناسه هر ردیف نام متغیری است که آبجکت در آن ذخیره شده است.

نکته: موارد بالا فقط نمونه بودند، مقدار و نوع هر متغیر میتواند متفاوت باشد. اما در هر صورت جدول ساخته میشود. 

اگر خواستیم بدونیم که مثلاً سرعت اجرای برنامه ما یا یک تابعی که نوشتیم چقدره. چکار کنیم؟ 

از دستور console.time برای این هدف میتونیم استفاده کنیم. یعنی در جایی از کُد که میخوایم محاسبه زمان شروع بشه دستور console.time رو استفاده میکنیم و یک نام دلخواه مثلا timer  رو به عنوان متغیری که زمان رو داخل خودش نگه میداره به عنوان پارامتر به تابع time میدیم. و

console.time('timer');
var person1 = {name:"Mokhtar",age:34,favorite:"javascript"};
var person2 = {name:"Afshin",age:42,favorite:"phone"};
var person3 = {name:"Amirhosien",age:12,favorite:"game"};

console.table({person1,person2,person3})
console.timeEnd('timer')

// ------------------ نتیجه -------------------------------
┌─────────┬──────────────┬─────┬──────────────┐
│ (index) │     name     │ age │   favorite   │
├─────────┼──────────────┼─────┼──────────────┤
│ person1 │  'Mokhtar'   │ 34  │ 'javascript' │
│ person2 │   'Afshin'   │ 42  │   'phone'    │
│ person3 │ 'Amirhosien' │ 12  │    'game'    │
└─────────┴──────────────┴─────┴──────────────┘
timer: 14.346ms

بنابراین توابع فوق موقع دیباگ کردن پروژه میتونن کارگشا باشند. البته یه تابع دیگه هم هست به نام console.trace که اطلاعات خوبی رو میتونه واسمون لاگ کنه. مثلا میخواهیم بدونیم که تابع ما در چه خطوطی در برنامه اجرا شده چه ماژول هایی باعث اجرای اون شدن و ... 

در مثال زیر من نام trace رو xxxx گذاشتم. هر نام دیگه ای میتونیم بزاریم تا وقتی تعداد لاگ ها زیاد شد بفهمیم مربوط به کدوم trace هست.

const mok = ()=>{
    let mokname = "mokhtar";
    console.log(mokname);
    console.trace('xxxx');
}

mok()

// ------------------ نتیجه -------------------------------
Trace: xxxx
    at mok (C:\Users\Mohammadiyan\Desktop\mynode\index.js:9:13)
    at Object.<anonymous> (C:\Users\Mohammadiyan\Desktop\mynode\index.js:13:1)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)

در ضمن با دستور console.clear میتونیم صفحه کنسول رو پاک کنیم.

console.clear()

console.count و console.countReset هم توابع کارآمدی هستند در زمان خودش. console.count اگر بدون پارامتر اجرا شه، خودش رو در هر بار اجرا میشماره. ولی درسته که خودش رو میشماره اما اگر ما اون رو درون یک تابع به کار ببریم و یک متغیر رشته ای یا اصلا نام همون تابع خودمون رو بهش بدیم با اینکه باز هم داره خودش رو میشماره ولی ما کاری کردیم که نتیجه ای که در آخر روی کنسول چاپ میشه، تعداد اجرای تابع خودمون باشه. خیلی جاها میشه ازش استفاده کرد ولی من مثال زیر رو تمرین کردم:

const mok = ()=>{
    let funcName = "mok";
    console.count(funcName);
}

mok();
mok();
mok();

// ------------------ نتیجه -------------------------------
mok: 1
mok: 2
mok: 3

هر کجا هم که از console.countReset استفاده کنیم. مقدار شمارش 0 میشه. از اسمشم معلومه.

یه دستوری که به نظر من خیلی کاربردی هست و خودم هم تا الان با اینکه بهش احتیاج داشتم،ولی ازش خبر نداشتم دستور console.dir هست. 

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

توی صفحه مرور کلی جاوااسکریپت گفتم که همه چیز در جاوااسکریپت شی هستند و کلا جاوااسکریپت بر پایه شی گرایی نوشته شده. حتی خود دستور console هم یک شی هست. بنابراین میتونیم خود console رو به عنوان پارامتر به دستور console.dir بدیم تا لیستی از خواص و متودهای قابل استفاده از شی کنسول رو به ما بده:

console.dir(console);

// ------------------ نتیجه -------------------------------
Console {
  log: [Function: bound consoleCall],
  debug: [Function: bound consoleCall],
  info: [Function: bound consoleCall],
  dirxml: [Function: bound consoleCall],
  warn: [Function: bound consoleCall],
  error: [Function: bound consoleCall],
  dir: [Function: bound consoleCall],
  time: [Function: bound consoleCall],
  timeEnd: [Function: bound consoleCall],
  timeLog: [Function: bound timeLog],
  trace: [Function: bound consoleCall],
  assert: [Function: bound consoleCall],
  clear: [Function: bound consoleCall],
  count: [Function: bound consoleCall],
  countReset: [Function: bound consoleCall],
  group: [Function: bound consoleCall],
  groupCollapsed: [Function: bound consoleCall],
  groupEnd: [Function: bound consoleCall],
  table: [Function: bound consoleCall],
  Console: [Function: Console],
  markTimeline: [Function: markTimeline],
  profile: [Function: profile],
  profileEnd: [Function: profileEnd],
  timeline: [Function: timeline],
  timelineEnd: [Function: timelineEnd],
  timeStamp: [Function: timeStamp],
  context: [Function: context],
  [Symbol(counts)]: Map {},
  [Symbol(kColorMode)]: 'auto' }

تعدادی از دستورات فوق رو توی همین صفحه باهاش آشنا شدیم. توابع warn و error و info برای خوانایی بهتر اون چیزی لاگ میکنیم استفاده میشه. در کنسول مروگر و کنسول نود جی اس نتایج متفاوتی خواهید دید. یک متن رو به این توابع به عنوان پارامتر بدید و خروجی اونها رو بررسی کنید. (هم در کنسول مرورگر و هم در کنسول نود)

با دستور console.group میتونیم لاگ های خودمون رو گروه بندی کنیم،و حتی بهشون برچسب بدیم تا مواردی که در کنسول چاپ میشه منظم تر و قابل شناسایی و خواناتر باشن:

console.group('primary group')
console.log('This is primary log for primary group.');
console.group('secondary group')
console.log('This is secondary log for secondary group.');
console.group('third group')
console.log('This is third log for third group.');

// ------------------ نتیجه -------------------------------
primary group
  This is primary log for primary group.
  secondary group
    This is secondary log for secondary group.
    third group
      This is third log for third group.

در کنسول مرورگر، هر گروه یه کلیپس داره و میتونید گروه را باز و بسته کنید.

NodeMon

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

وقتی از این پکیج در پروژه خودمون استفاده میکنیم. صفحه کنسول ما بعد از هر اجرا، شلوغ و شلوغ تر میشه. حتی واسه من پیش اومده که خطای دید باعث اتلاف وقتم شده. خوب حالا چکار کنیم؟

پکیج nodemon، فایلی به نام nodemon.json رو در همون مسیری که فایل package.json قرار داره میشناسه و ما میتونیم تنظیمات خودمون رو درون اون فایل قرار بدیم تا nodemon به شکل دلخواه ما فعالیت کنه. 

در مثال زیر من فقط میخوام در هر بار اجرای nodemon، صفحه کنسول من تمیز بشه و لاگ های قبلی رو نشون نده. بنابراین داخل فایل nodemon.json که از قبل ایجاد کردیم. دستورات زیر رو قرار میدیم.

{
    "events":{
        "start": "cls || clear"
    }
}

با این تنظیمات گفتیم که در رویداد شروع، اول از همه از دستور cls استفاده کن یا اگر cls کار نکرد از دستور clear برای پاک کردن محتوای قبلی استفاده کن. 

برای مطالعه بیشتر میتونید به راهنمای تنظیمات nodemon مراجعه کنید.

ادامه دارد ...