Back to campField Journalby Zin
All entries

winechanz · barry

Mutability & Immutability

There's something that sometimes trips up JavaScript Developers. Today I'm going to talk about Mutability and Immutability.

2 min read0 likes

Mutability & Immutability

ဒီနေ့မှာ JavaScript Developer တွေအနေနဲ့ တစ်ခါတလေမှာ အခက်တွေ့စေမဲ့ကိစ္စတစ်ခုရှိပါတယ်။ ဒီနေ့မှာတော့ ကျွန်တော်က Mutability နဲ့ Immutabilityတွေရဲ့ အကြောင်းကို မျှဝေပြောပြပေးမှာဖြစ်ပါတယ်။

ဖတ်ချိန် 2 မိနစ်0 likes

Hi everyone 👋

There's something that sometimes trips up JavaScript Developers. Even when you've used the right Variable type (var, let, const), when you pass Variable Values along a step or two, you've probably seen the original Variable's value change sometimes, and other times stay the same. So why does that happen? 🤔

To understand why that happens, Learners need to know two concepts: Mutability and Immutability. Today I'm going to talk about Mutability and Immutability. So let's dig in.

Before talking about Mutability and Immutability, you first need to know how many DataTypes there are in JavaScript.

There are (2) kinds of DataType in JavaScript.

  • Primitive Data Type
  • Non-Primitive Data Type (or) Reference Data Type

Primitive Data Type

  • Number
  • String
  • Boolean
  • Null
  • Undefined, etc

Non-Primitive Data Type (or) Reference Data Type

  • Object
  • Array
  • Map
  • Set
  • Function
  • Date
  • Regx, etc

What is Mutability?

A mutable value is one that can be changed without creating an entirely new value.

Put simply, you can think of it as "changing the original Variable's value to something new." Mutable Data Types are the Non-Primitive Data Types (or) Reference Data Types.

Workflow of Mutability

Example :

js
var person = {name:'John', gender:18};console.log("Step1",person);var newPerson = person;console.log("Step2",newPerson);

Output :

output
Step1 {name:'John', age:18}Step2 {name:'John', age:18}

Changing Object Value :

js
var person = {name:'John', gender:18};console.log("Step1",person);var newPerson = person;console.log("Step2",person);newPerson.name = 'Hellen';console.log("Step3",newPerson);

Output :

output
Step1 {name:'Hellen', age:18}Step2 {name:'Hellen', age:18}Step3 {name:'Hellen', age:18}

When you do Changing Object Value (newPerson.name = 'Hellen'), you'll see that the original person Object changes too. This idea, where the original obj value gets affected and changed, is what we call Mutability.

What is Immutability?

An immutable value is one whose content cannot be changed without creating an entirely new value.

Put simply, you can think of it as "the original Variable keeping its original value." Immutable Data Types are the Primitive Data Types.

Workflow of Immutability

Example :

js
var name = "John";console.log("step1", name);var newName = name;console.log("step2", newName);

Output :

output
Step1 JohnStep2 John

Changing Variable Value

js
var name = "John";console.log("step1", name);var newName = name;console.log("step2", name);newName = "Hellen";console.log("Step3", newName);

Output :

output
Step1 JohnStep2 JohnStep3 Hellen

When you do Changing Variable Value (newName = "Hellen"), you'll see that the Value of the original Variable Name doesn't change. This idea, where the original Variable value stays unchanged, is what we call Immutability.

You need a solid grasp of Mutability & Immutability while you're still at the Fundamentals stage. On the Framework side you'll run into a lot of Mutability, especially with Objects and Arrays, so it's important to really understand how Mutability works.

I believe this will help you in some way 🤍

အားလုံးပဲမင်္ဂလာပါ 👋

ဒီနေ့မှာ JavaScript Developer တွေအနေနဲ့ တစ်ခါတလေမှာ အခက်တွေ့စေမဲ့ကိစ္စတစ်ခုရှိပါတယ်။ Variable ကိုလည်း Variable type (var, let, const) မှန်မှန်သုံးထားပေမဲ့လဲ Variable Value တွေကို တစ်ဆင့်နှစ်ဆင့် ဆင့်ပွားထည့်တဲ့အခါ ပင်မ Variable တန်ဖိုးတွေကို ပြောင်းလဲသက်ရောက်သွားတာရှိသလို၊ မပြောင်းလဲတာတွေလဲကြုံဖူးကြမှာပါ။ အဲ့ဒါကြောင့် ဘာကြောင့်ပါလိမ်. 🤔

အဲ့အကြောင်းအရာဘာကြောင့်ဖြစ်စေတာလဲဆိုတာကိုသိစေဖို့ Learner တွေအနေနဲ့ Mutability နဲ့ Immutability ဆိုတဲ့ သဘောတရားနှစ်ခုကို သိထားဖို့လိုအပ်လာပါတယ်။ ဒီနေ့မှာတော့ ကျွန်တော်က Mutability နဲ့ Immutabilityတွေရဲ့ အကြောင်းကို မျှဝေပြောပြပေးမှာဖြစ်ပါတယ်။ ဆိုတော့ လေ့လာကြရအောင်။

Mutablity နဲ့ Immutability အကြောင်းမပြောပြခင်မှာ အရင်ဦးဆုံး JavaScript မှာ DataTypes ဘယ်နှစ်မျိုးရှိလဲဆိုတာသိထားဖို့လိုအပ်ပါတယ်။

JavaScript မှာ DataType (၂) မျိုးရှိပါတယ်။

  • Primitive Data Type
  • Non-Primitive Data Type (or) Reference Data Type

Primitive Data Type

  • Number
  • String
  • Boolean
  • Null
  • Undefined, etc

Non-Primitive Data Type (or) Reference Data Type

  • Object
  • Array
  • Map
  • Set
  • Function
  • Date
  • Regx, etc

What is Mutability?

A mutable value is one that can be changed without creating an entirely new value.

မြန်မာလို နားလည်လွယ်အောင် ဘာသာပြန်ရရင်တော့ "ပင်မမူရင်း Variable တန်ဖိုးကို အသစ်ပြောင်းလဲလိုက်ခြင်း" လို့ မှတ်ယူလို့ရပါတယ်။Mutable Data Type တွေက Non-Primitive Data Type (or) Reference Data Type တွေပဲဖြစ်ပါတယ်။

Workflow of Mutability

Example :

js
var person = {name:'John', gender:18};console.log("Step1",person);var newPerson = person;console.log("Step2",newPerson);

Output :

output
Step1 {name:'John', age:18}Step2 {name:'John', age:18}

Changing Object Value :

js
var person = {name:'John', gender:18};console.log("Step1",person);var newPerson = person;console.log("Step2",person);newPerson.name = 'Hellen';console.log("Step3",newPerson);

Output :

output
Step1 {name:'Hellen', age:18}Step2 {name:'Hellen', age:18}Step3 {name:'Hellen', age:18}

Changing Object Value (newPerson.name = 'Hellen') လုပ်လိုက်တဲ့အခါ ပင်မ person ရဲ့ Object က ပြောင်းလဲသွားတာကိုတွေ့ရမှာဖြစ်ပါတယ်။မူရင်း obj တန်ဖိုးထိခိုက်ပြောင်းလဲသွားတဲ့သဘာတရားလို့ Mutability လို့ခေါ်ဆိုရမှာပဲဖြစ်ပါတယ်။

What is Immutability?

An immutable value is one whose content cannot be changed without creating an entirely new value.

မြန်မာလို နားလည်လွယ်အောင် ဘာသာပြန်ရရင်တော့ "ပင်မမူရင်း Variable တန်ဖိုးမူရင်းတိုင်းရှိခြင်း" လို့ မှတ်ယူလို့ရပါတယ်။Immutable Data Type တွေက Primitive Data Type တွေပဲဖြစ်ပါတယ်။

Workflow of Immutability

Example :

js
var name = "John";console.log("step1", name);var newName = name;console.log("step2", newName);

Output :

output
Step1 JohnStep2 John

Changing Variable Value

js
var name = "John";console.log("step1", name);var newName = name;console.log("step2", name);newName = "Hellen";console.log("Step3", newName);

Output :

output
Step1 JohnStep2 JohnStep3 Hellen

Changing Variable Value (newName = "Hellen") လုပ်လိုက်တဲ့အခါ ပင်မ Variable Name ရဲ့ Value က မပြောင်းလဲသွားတာကိုတွေ့ရမှာဖြစ်ပါတယ်။ မူရင်း Variable တန်ဖိုးမပြောင်းလဲသွားတဲ့သဘာတရားလို့ Immutability လို့ခေါ်ဆိုရမှာပဲဖြစ်ပါတယ်။

Mutability & Immutability သဘောတရားကို Fundamental လေ့လာတဲ့အဆင့်မှာတင် ပိုင်ပိုင်နိုင်နိုင်သိထားဖို့ လိုအပ်ပါတယ်။ Framework ဘက်အပိုင်းမှာလဲ အထူးသဖြင့် Object, Array ဆိုင်ရာ Mutability တွေအများကြီးတွေ့နိုင်တာမို့ Mutability သဘော ပိုင်နိုင်ထားဖို့လိုအပ်ပါတယ်။

တစ်စုံတစ်ခုအထောက်အကူပြုမယ်လို့ယုံကြည်ပါတယ် 🤍

Filed underwinechanzbarry

Written byZin Min Htun (Wine Chanz)Senior Full-Stack Developer · Da Nang, VietnamSay hello at campMore entries