javascript functional programming

Manipulasi Array di Javascript Dengan Paradigma Functional Programming

Akhir-akhir ini sering berurusan dengan javascript dan kebetulan belajar paradigma baru yang selama ini hampir tidak pernah dipake, yaitu functional programming atau biasa disingkat FP.

Salah satu konsep paling umum di FP adalah menghindari proses mutate atau melakukan perubahan state dari suatu data (immutable)

Contoh proses mutate adalah seperti berikut.

let names = ['alex', 'mike', 'carl', 'james']
console.log(names)
names.push('adam') // proses mutate
console.log(names)

Bisa dilihat contoh di atas bahwa terjadi perubahan state dari variable “names”, dimana semula berisi 4 item kemudian terjadi manipulasi state sehingga menjadi 5 item.

Sebagai dokumentasi pembelajaran saya, maka akan saya catat pada blog ini beberapa cara manipulasi array menggunakan paradigma FP dengan bantun fungsi spread pada javascript.

Add item baru pada array.

// Sebagai contoh kita ingin menambahkan `adam` ke dalam array.
let names = ['alex', 'mike', 'carl', 'james']
let newNames = [
  ...names,
  'adam'
]

Delete item pada array.

// Sebagai contoh kita ingin menghapus carl dari array.
// Ada 2 cara dengan cara filter dan menggunakan spread.
let names = ['alex', 'mike', 'carl', 'james']
let index = names.findIndex(item => item === 'carl')

let namesMethod1 = names.filter(item => item !== 'carl')
let namesMethod2 = [
...names.slice(0, index),
...names.slice(index + 1),
]

Edit item pada array.

// Sebagai contoh dengan data structure yang lebih komplex, kita ingin
// melakukan perubahan status pada order004 menjadi paid.
let orders = [
  {id: 'order001', status: 'unpaid'},
  {id: 'order002', status: 'unpaid'},
  {id: 'order003', status: 'unpaid'},
  {id: 'order004', status: 'unpaid'},
  {id: 'order005', status: 'unpaid'},
  {id: 'order006', status: 'unpaid'},
]
let index = orders.findIndex(order => order.id === 'order004')

let newOrders = [
  ...orders.slice(0, index),
  {
    ...orders[index],
    status: 'paid',
  },
  ...orders.slice(index + 1)
]

Contoh diatas adalah hal yang umum dalam manipulasi array di javascript, semoga bisa bermanfaat bagi pembaca.

Referensi:
https://jaketrent.com/post/remove-array-element-without-mutating/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax