مبارزات جاوا اسکریپت – قسمت 7 | کارکرد

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

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

بیا شروع کنیم!!

توابع نوشتن در جاوا اسکریپت

در جاوا اسکریپت از کلمه کلیدی استفاده می کنیم function برای ایجاد یک تابع جدید (بله ما کل تابع کلمه را می نویسیم).

همانطور که قبلاً در مقالات گذشته در مورد متغیرها اشاره کردم، ما به چند کلمه کلیدی (مانند var، let یا const) تعریف کنید که این یک متغیر و نوع آن است که var آن را به یک متغیر جهانی تبدیل کنید.

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

function greetUser(username) {
    console.log(`Hello there, ${username}`);
}

نحوه عملکرد توابع در پشت صحنه

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

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

دقیقا چطوری کار می کند؟ فرض کنید این قطعه کد را داریم:

let user = {
    firstName: "Abdelrahman",
    lastName: "Dwedar",
    age: 17
}

function printUserInfo(user) {
    user.age++;
    console.log(`This user name is {user.firstName} {user.lastName}, and they are {user.age} years old.`);
}

printUserInfo(user);

همانطور که ممکن است از نمودار متوجه شوید توابع فرآیند خاص خود را دارند، چیز دیگری که ممکن است مجبور به درک آن باشید این است آنها همچنین فرآیند اعلان متغیر خود را دارند. بنابراین هر متغیری که در داخل تابع تعریف شده است، پس از فراخوانی آن تابع تعریف می شود، حتی اگر یک متغیر سراسری باشد (با استفاده از var کلمه کلیدی).

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

توابع پیکان چیست؟

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

همچنین، شما نمی توانید از آن استفاده کنید this کلمه کلیدی در هر تابع فلش. که در برخی موارد می تواند بد باشد (با فکر کردن به مشاهده 2 مثالی که بعداً در این مقاله ذکر خواهد شد)

نحو:

(num) => {return num1 < 100}; // You can use it like this

(num) => {num1 < 100}; // you don't need to have the return

(num) => num1 < 100; // if it's just one action there's no need for the brances

مثال:

let firstNumber = 10;
let secondNumber = 29;

function lessOrMoreThan50(num) {
    console.log(num < 50);
}

lessOrMoreThan50((firstNumber, secondNumber) => Math.abs(firstNumber - secondNumber));

همانطور که می بینید ما از تابع arrow به عنوان آرگومان استفاده کردیم lessOrMoreThan50 تابع (این فقط یک مثال برای نشان دادن مورد استفاده از تابع فلش است).

بهترین مورد استفاده آن انجام برخی رویدادها برای ارسال مستقیم به چیز دیگری مانند یک تابع یا حتی یک حلقه است.

همچنین می توانید تابع فلش را در متغیری مانند زیر ذخیره کنید:

const numbersList = [1, 4, 5, 22, 31, 11, 23];

const oddNumbersInList = (numbersList) => {
    oddNumbersList = [];
    for (let num in numbersList) {
        if ((num % 2) === 1) {
            oddNumbersList.append(num);
        }
    }

    return oddNumbersList;
}

oddNumbersInList(numbersList);

تفاوت بین عملکردهای معمولی و پیکان

با این شروع می‌کنم که در بیشتر موارد استفاده از توابع عادی را ترجیح می‌دهم، و توضیح می‌دهم که چرا آن را بیشتر دوست دارم، و همچنین برخی از تفاوت‌های اصلی بین این دو روش را اضافه می‌کنم.

ظاهر تابع

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

بنابراین وقتی یک تابع عادی را می‌بینم، می‌دانم که قرار است در جای دیگری استفاده شود، بر خلاف زمانی که متغیری حاوی یک تابع فلش را می‌بینم، با دیدن آن بیشتر شبیه یک متغیر به نظر می‌رسد. var، let، و const کلید واژه ها.

function buildArch1() {
    ...
}

const buildArch2 = () => {
    ...
}

همچنین با دیدن آخرین نمونه کد بالا، می بینید که تابع فلش در مقایسه با تابع معمولی بیشتر قابل تایپ است.

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

جایی که می توان آن را نامید

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

وقتی یک تابع فلش می سازیم و در یک متغیر ذخیره می کنیم به عنوان یک متغیر در نظر گرفته می شود به طور عمده.

توضیح فرآیند تابع و دانشی که به طور کلی در مورد متغیرها می دانید (آنها باید قبل از فراخوانی اعلام شوند).

شما باید تابع arrow را قبل از فراخوانی آن اعلام کنید! شما نمی توانید تابع تماس گیرنده را بعد از تابع تماس گیرنده (که تمرین در نظر گرفته شده برای کد پاک است) داشته باشید.

بیایید چند نمونه کد داشته باشیم.

// this code will work 
function createNewProfile(user, username, age) {
    user.name = username;
    user.age = age;
    createId(username); // This will work
}

function createId(username) {
    ...
}

// this will now work
const createNewProfile = (user, username, age) => {
    user.name = username;
    user.age = age;
    createId(username); // This will give you an error
}

const createId = (username) => {
    ...
}

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

استفاده در یک شی

یکی از پرکاربردترین الگوهای داده در ES6 هست هدف – شی، می توانید دریابید که بلوک اصلی ساخت آن بود مشاهده 2 و ما از آن به طرق مختلف برای انجام کارها استفاده می کردیم.

مثال از Vue سند:

<script>
export default {
    methods: {
        increment() {
            this.count++;
        }
    }
}
</script>

در سند به آن اشاره کردند شما نمی توانید استفاده کنید this کلمه کلیدی در هر تابع پیکانی که باعث شده آنها استفاده از نحو بالا را توصیه کنند.

همچنین روش غیرمحبوب دیگری برای انجام همین کار وجود دارد:

<script>
export default {
    methods: {
        increment: function() {
            this.count++;
        }
    }
}
</script>

فقط دیدن این باعث می شود اولی را ترجیح دهید، اما هر دوی آنها یکسان هستند.

در حالی که توابع فلش به این شکل خواهد بود (آن کار نخواهد کرد):

<script>
export default {
    methods: {
        increment: () => {
            this.count++; // This will not work as the this keyword doesn't work in arrow functions
        }
    }
}
</script>

نتیجه

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

اگر هیچ بخشی را متوجه نشدید (و این خوب است) می توانید از طریق توییتر با من تماس بگیرید و من سعی خواهم کرد مثال های ساده تری به شما ارائه دهم یا ایده هایی را به شما ارائه دهم تا خودتان امتحان کنید.

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

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

امیدوارم از مقاله لذت برده باشید و تا دفعه بعد چیزی از آن به دست آورید! 😉