آشنایی با مفهوم Mutable و Immutable در JavaScript

اگر مقالات Redux و یا بقیه state container ها و یا بعضی سوال و جواب های Stackoverflow رو دیده باشید قطعا دو کلمه Mutable یا Immutable به چشمتون خورده و شاید براتون سوال پیش اومده که اصلا قضیه چیه و منظور از تغییر پذیر و تغییر ناپذیر در خصوص متغیرها و یا object ها چی هستش ؟!؟!

تو این مقاله خیلی کوتاه و مختصر می خوام با یک نمونه کد این قضیه رو خیلی ساده توضیح بدم و البته این مفهوم چیز جدیدی نیست و در زبان های دیگه مثل Python و Java و ... وجود داره و هر جایی با یک روش متفاوت این قضیه رو پیاده سازی می کنن.

متغیر و آبجکت Mutable

به معنی هم توجه کنید یعنی تغییر پذیر و در اینجا رفرنس رو بصورتی منتقل می کنیم که امکان داره روش تغییر انجام بشه و یا به اصطلاح Altered یا Override باشه. به این کد توجه کنید :

https://gist.github.com/buglessir/a4e2c2080cf08f262517b62596e103f5

در اینجا یک تابع به نام mutation داریم که یک ورودی از جنس آرایه رو در پایین بهش پاس میدیم و قراره یک آیتم به ایندکس صفر متغیر array اضافه کنه. وقتی در این حالت آرایه array رو بهش پاس میدیم مقدار new value رو به آرایه سورس اضافه می کنه و در حقیقت some value از بین میره و در دو حالت که مقدار آرایه رو alert می کنیم با همچین خروجی مواجه میشیم :

Alert (1) :
    Return from mutation new value,another value
Alert (2) :
    Array: new value,another value (original array has been altered).

این یعنی روی آرایه کلا ویرایش انجام شده و سورس هم تغییر کرد و Mutable بود.

متغیر و آبجکت Immutable

با توجه به معنی یعنی تغییر ناپذیر است. حالا همینکه مثال قبل رو در نظر دارید و خروجی کد رو دیدین به این کد هم توجه کنید تا ببینیم خروجی چی میشه :

https://gist.github.com/buglessir/cfed9d06a0459fdefcf9d5eaccb8d5f0

حالا اینجا هم یک تابع به اسم immutable داریم که باز قراره به ایندکس شماره صفر array ورودی مقدار new value رو اضافه کنه ولی قضیه فرق کرده !!!

تو این تابع دیگه مثل قبل با روش ساده مقدار جدید رو return نمی کنیم بلکه از قابلیت spread استفاده می کنیم و یک نمونه دیگه و کپی شده رو از آرایه قبل return می کنیم که باعث میشه سورس اصلی تغییری نداشته باشه و بصورت تغییر ناپذیر بصورت رفرنس جابجاش کنیم.

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

Alert (1) :
    Return from immutable new value,another value
Alert (2) :
    Array: some value,another value (original array stay unchanged).

همانطورکه می بینید آرایه سورس هیچ تغییری نداشته و در تابع فقط یک نمونه کپی شده رو تغییر داده بودیم و این روش مزایایی داره , مثلا در Redux که خروجی های Reducer بصورت Immutable برگشت داده میشه باعث میشه اصل State هیچ تغییری نکنه و روی Reducer های دیگه تغییری بوجود نیاد و دیتا جدید و تغییر یافته نسبت به Action خودتون رو داشته باشید.

من قبلا در گیت هاب یک سورس برای مدیریت درخواست های Async برای Redux رو منتشر کردم :

لینک پروژه : https://github.com/buglessir/async-react-redux

بنظرم برای درک بهتر قضیه یکبار خودتون این پروژه رو روی لوکال اجرا کنید و داخل فایل Reducer از حالت Immutable به Mutable تغییر بدید تا ببینید در عمل چه اتفاقی می افته و قضیه رو درک کنید.

امیدوارم تونسته باشم با این مثال ساده این مفهوم رو بهتون توضیح بدم ...

موفق باشید