برنامه نویسی دستوری در مقابل برنامه نویسی اعلامی

احتمالا شما راجب imperative programming در مقابل declarative programming شنیده اید یا شاید مثل من که دیروز نوی یه داکیومنت بهش برخورد کردم این دو رو سرچ کرده باشید .

""خیلی کلی بگم imperative programming در واقع شبیه این که ما بگیم چگونه یه کاری را انجام میدهیم و در مقابل declarative programming خیلی شبیه این که ما بگیم چه کاری رو انجام میدهیم ""

خوب در واقع تعریف بالا زمانی براتون منطقی که شما تفاوت imperative programming و declarative programming رو بدونید البته توی کوت بالا تقریبا یه چیزایی میشه فهمید ولی بیاییم یکم بیرون از برنامه نویسی بازش کنیم .

فکر کنید زمان خیلی زیادی رو صرف جاوااسکریپت کردین (اینو فقط دوستام میفهمن :/ )و حالا پارتنرتون حقشه که اونو یه دیت درست حسابی ببرید .شما به یه رستوران میرید و جلوی میز پذیرش میگید

به صورت imperative (چگونه):

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

به صورت declarative (چه چیزی ، چی):

((یک میز برای 2 نفر لطفا ))

رویکرد imperative به این موضوع مربوط میشه که چگونه واقعا میخوایید صندلی بگیرید، شما در این حالت مراحل رو لیست بندی میکنی و مقصودت رو ارائه میدی . ولی رویکرد declarative بیشتر به انچه میخواهید مربوط میشه . (یه میز 2 نفره)

یه مثال دیگه :

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

به صورت imperative (چگونه):

((اوکی همونجا که هستی رو در نظر بگیر 200 متر برو به سمت شمال میرسی به یه 4 راه بپیچ سمت راست 100 متر بیای میرسی به کوچه عضدی کوچه عضدی اومدی داخل ساختمان سارا پلاک 12 ))

به صورت declarative (چه چیزی ، چی):

(( آدرس من هست راه اهن - خیابان فلانی - کوچه عضدی - ساختمان سارا - پلاک 12))

جالب شد نه ...

خوب قبل این که توی کد بریم باید بگم که رویکرد های declarative در خود نوعی لایه imperative دارند

• وقتی شما میگید یک میز 2 نفره لطفا، کارمندای اون رستوران همه قدم های رسیدن به یه میز دو نفره رو در نظر دارن
• یا وقتی ادرس به شکل راه اهن - خیابان فلانی - کوچه عضدی - ساختمان سارا - پلاک 12 میدیم در واقع با این پیش فرض که یارو با gps یا خودش یه چیزایی بلده از شهر یا از مردم میپرسه میتونه ادرس رو پیدا کنه .

در واقع بسیاری از declarative (نه همه ) نوعی imperative اساسی دارن.

خیلی هم عالی بیاییم از سرزمین رویا هامون که به عنوان یه js developer پارتنرمون رو میبریم دیت بیاییم بیرون و بریم سر وقت کد

برای زیباتر کردن این پرش، اجازه بدین به برخی از «زبان‌های» برنامه‌نویسی نگاه کنیم که ذاتاً declarative هستند در مقابل زبان‌هایی که طبیعتاً imperative هستند.

Imperative:

C, C++, Java

Declarative:

SQL, HTML

(Can Be) Mix:

JavaScript, C#, Python

یه مثال معمولی از html و sql بزنیم اول :

SELECT * FROM Users WHERE Country='Mexico';

<article>
    <header>
        <h1>Declarative Programming</h1>
        <p>Sprinkle Declarative in your verbiage to sound smart</p>
    </header>
</article>

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

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

• یه تابع به اسم double بنویسید که یه آرایه از اعداد میگیره و 2 برابر اون اعداد رو توی یه ارایه جدید نشون میده .
• یه تابع دیگه بنویسید به اسم add که اعداد داخل یک ارایه رو جمع میزنه و بهمون عدد مورد نظرو خروجی میده .
• یه event (رویداد بگم؟ :/) بنویسید که وقتی روی یه دکمه کلیک شد متن مورد نظر هایلایت بشه .

خوب خوب بیاییم اول با رایج ترین رویکرد حلشون کنیم که imperative هستش :

function double(arr) {
    let results = [];
    for (let i = 0; i < arr.length; i++) {
        results.push(arr[i] * 2);
    }
    return results;
}

function add(arr) {
    let result = 0;
    for (let i = 0; i < arr.length; i++) {
    result += arr[i];
    }
    return result;
}

btn.addEventListener(&quotclick&quot,()=>{
    this.classList.toggle(&quothighlight&quot)
}

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

حالا باییم یه نگاهی به چند تا مثال declarative بزنیم

function double(arr) {
     return arr.map((item) => item * 2);
}

function add(arr) {
     return arr.reduce((prev, current) => prev + current, 0);
}

<Btn Highlight={this.handleToggleHighlight}>{this.state.buttonText}</Btn>

نکته این که، توی 2 تا مثال اول ما از متد های خود جاوااسکریپت استفاده کردیم . اگر یکم دقت کنید میبینید که راه حل های declarative تو خودشون یه نمه imperative دارن . توی هر مثال ما اونچه که میخواییم اتفاق بیفتد رو انجام میدیم بدون این که چگونه گی کار رو بفهمیم ( ما نمیدونیم در پشت صحنه برای map یا reduce چه اتفاقی میفته ) ما هیچ حالتی رو انجام نمیدیم تمامش توی خود map یا reduce انجام میشه همچنین خوانا تر. حالا مثال اخر چی در واقع من یکم خوشمزه بازی دراوردم و از ریکت استفاده کردم ولی توجه داشته باشد که برای هر سه imperative ما راه حل declarative داشتیم .

زیبایی ریکت همین که شما میتوانید این رابط های کاربری رو ایجاد کنید خیلی راحت ما یه کامپوننت btn داریم که یک سری مولفه های declarative داره

یه جورایی declarative فقط به هدف کار داره، بر خلاف imperative که مراحل دستیابی به اون هدف هستش

به عنوان نکته اخر اینم اضافه کنم که functional programming زیر مجموعه declarative programming
استفاده از map و filter و... توی جاوااسکریپت شامل میشه