پرش به مطلب اصلی

Js Fundamental

مقدمه​

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

  • چرا برای تعریف متغیر می‌توان از سه عبارت var و let و const استفاده کرد؟
  • تفاوت Function با Arrow Function چیست؟
  • مفهوم و کاربرد this چیست؟
  • Event Loop چیست؟

یادگیری​

متغیرها​

قبل از سال 2015 میلادی، برای تعریف متغیر در JavaScript تنها می‌توانستیم از var استفاده کنیم. اما با معرفی ES6 عبارت‌های let و const نیز به این زبان اضافه شدند که در اینجا توضیحات مختصری در مورد هر کدام ارائه می‌کنیم.

var​

زمانی که یک متغیر را با عبارت var تعریف می‌کنید، آن متغیر در Global Scope یا نزدیک‌ترین Function Scope تعریف می‌شود.

به عنون مثال خروجی کد زیر:

function defineAndPrintName() {
    if (true) {
        var name = 'Codestar';
        console.log(`inner scope -> name: ${name}`);
    }

    console.log(`outer scope -> name: ${name}`);
}

defineAndPrintName();

به شکل زیر خواهد بود:

inner scope -> name: Codestar
outer scope -> name: Codestar

چرا که متغیر name داخل اسکوپِ تابعِ defineAndPrintName قرار می‌گیرد.

لازم به ذکر است که Scope ها در JavaScript با آکلاد مشخص می‌شوند بنابراین نیازی به if (true) نداریم.

let​

برخلاف var ، زمانی که از let برای تعریف یک متغیر استفاده کنیم، آن متغیر در Scope فعلی محدود می‌شود.

به‌عنوان مثال خروجی کد زیر:

function defineAndPrintName() {
    {
        let name = 'Codestar';
        console.log(`inner scope -> name: ${name}`);
    }

    console.log(`outer scope -> name: ${name}`);
}

defineAndPrintName();

به شکل زیر خواهد بود:

inner scope -> name: Codestar
ReferenceError: name is not defined

const​

const دقیقاً مانند let عمل می‌کند با این تفاوت که فقط یک بار می‌توان آن را مقداردهی کرد. زمانی که احتیاج داشته باشیم مقداری را ذخیره کنیم که هیچ‌وقت نباید تغییر کند، استفاده از const باعث جلوگیری از خطاهای احتمالی می‌شود؛ همچنین زمانی که شخص دیگری کد را می‌خواند، با دیدن const مطمئن می‌شود که مقدار آن تغییر نخواهد کرد. ما پیشنهاد می‌کنیم همیشه به صورت پیش‌فرض برای تعریف متغیرها از const استفاده کنید و تنها در صورت نیاز به let مراجعه کنید.

برای آشنایی بیشتر با این مفاهیم می‌توانید از لینک‌های زیر استفاده کنید:

‌

برای آشنایی بهتر با تفاوت این سه نوع متغییر می‌توانید ویدئوی زیر را مشاهده کنید:

JavaScript Let vs Var vs Constant

‌

برای آشنایی با مفهوم Hoisting لینک‌ زیر را مطالعه کنید:

JavaScript Hoisting

Regular Function vs Arrow Function​

در JavaScript به دو شکل می‌توان یک تابع را تعریف کرد:

function sayHello(name) {
    console.log(`hello, ${name}!`);
}

// or

const sayHello = (name) => {
    console.log(`hello, ${name}!`);
};

که به نوع اول Regular Function و به نوع دوم Arrow Function گفته می‌شود. در اینجا به تفاوت این دو روش می‌پردازدیم.

this​

زمانی که از Regular Function استفاده می‌کنیم مقدار this با توجه به مکانی که تابع از آنجا صدا زده می‌شود، متفاوت است. اما اگر از Arrow Function استفاده کنیم، این مقدار همواره برابر با شیئی است که تابع در آن تعریف شده.

const regularFunctionWrapper = {
    whatIsThis: function () {
        console.log(this); // regularFunctionWrapper
    },
};

const arrowFunctionWrapper = {
    whatIsThis: () => {
        console.log(this); // globalThis
    },
};

regularFunctionWrapper.whatIsThis();
arrowFunctionWrapper.whatIsThis();
‌

برای آشنایی بهتر با this در Arrow و Regular Function لینک‌های زیر را مطالعه کنید:

Behavior of Arrow functions and regular functions for 'this' keyword

‌

برای آشنایی با روش‌های Binding لینک‌های زیر را مطالعه کنید:

How to Use the Call, Apply, and Bind Functions in JavaScript – with Code Examples

Constructor​

قبل از اینکه کلاس‌ها به JavaScript بیایند، از Regular Function به‌عنوان Constructor استفاده می‌شد:

function Circle(radius) {
    this.radius = radius;

    this.printArea = function () {
        console.log('area', Math.PI * Math.pow(this.radius, 2));
    };
}

const small = new Circle(10);
const large = new Circle(100);

small.printArea();
large.printArea();

arguments & args​

در Regular Function یک کلیدواژه به نام arguments وجود دارد که درواقع آرایه‌ای از پارامترهای ورودی می‌باشد؛ در Arrow Function هم می‌توانیم به این پارامترها دسترسی داشته باشیم اما باید صراحتاً در ورودی‌های تابع به آن اشاره کنیم:

function regularFunctionSum() {
    let result = 0;

    for (const n of arguments) {
        if (!isNaN(n)) result += n;
    }

    return result;
}

const arrowFunctionSum = (...args) => {
    let result = 0;

    for (const n of args) {
        if (!isNaN(n)) result += n;
    }

    return result;
};

console.log('Regular Function', regularFunctionSum(4, 8, 15, 16, 23, 42)); // 108
console.log('Arrow Function', arrowFunctionSum(4, 8, 15, 16, 23, 42)); // 108

return​

در Arrow Function اگر بدنۀ تابع فقط شامل یک Expression باشد، می‌توان آن را بدونِ استفاده از آکلاد و return نوشت:

const rand = (min, max) => Math.floor(Math.random() * (max - min) + min);

console.log(rand(4, 42));

برای آشنایی بیشتر با این مفاهیم می‌توانید از لینک‌های زیر استفاده کنید:

Event Loop​

حلقه رویداد، جزء اصلی موتور جاوا اسکریپت است که وظایف مختلف را به ترتیب صحیح و بدون ایجاد وقفه در رابط کاربری، مدیریت می‌کند. این حلقه، نقش یک ناظر را ایفا می‌کند و صف وظایف را که شامل رویدادها، درخواست‌های شبکه و کدهای جاوا اسکریپت است، رصد می‌کند.

وظایف موجود در صف به دو دسته اصلی تقسیم می‌شوند:

  • 1. وظایف ماکرو: این وظایف شامل کدهای اصلی جاوا اسکریپت مانند کلیک کاربر، اجرای اسکریپت‌ها و پاسخ به درخواست‌های DOM است. وظایف ماکرو به ترتیب دریافت در صف قرار می‌گیرند و تا زمانی که به طور کامل اجرا نشوند، سایر وظایف منتظر می‌مانند.

  • 2. وظایف میکرو: وظایف میکرو، وظایف کم‌اهمیت‌تری هستند که به طور همزمان با وظایف ماکرو انجام می‌شوند. وعده‌ها (promises) و callbacks مربوط به رویدادهای async/await نمونه‌هایی از وظایف میکرو هستند. این وظایف نقش مهمی در عملکرد و پاسخگویی درست رابط کاربری ایفا می‌کنند.

حلقه رویداد به طور مداوم در حال گردش است و وظایف را از صف به ترتیب زیر پردازش می‌کند:

  • بررسی صف وظایف ماکرو: اگر وظیفه‌ای در صف وجود داشته باشد، آن را اجرا می‌کند.
  • پردازش وظایف میکرو: تا زمانی که صف ماکرو خالی شود، به پردازش وظایف میکرو می‌پردازد.
  • تکرار فرآیند: مراحل 1 و 2 را به طور مداوم تکرار می‌کند تا زمانی که صف وظایف خالی شود.

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

برای آشنایی بیشتر با این مفاهیم می‌توانید از لینک‌های زیر استفاده کنید:

‌

برای آشنایی بهتر با Event Loop پیشنهاد می‌کنیم ویدئوی زیر را مشاهده کنید:

In The Loop