Javascript Object (Refresher)

Hampir semua hal yang bisa menjadi nilai variabel dianggap sebagai object pada pemrograman Javascript, bahkan tipe data primitif seperti string, boolean, dan number pun bisa menjadi object jika dideklarasikan dengan menggunakan operator new.

Di dalam Object javascript bisa mengandung “variabel” dan “fungsi”. Variabel yang ada di dalam Object disebut dengan properti, sedangkan fungsi yang ada di dalam Object disebut dengan method.

Glot.io IDE memudahkan kita untuk mencoba jalankan kode Javascript murni

Inisiasi Object

Inisiasi sebuah Object baru biasanya dilakukan dengan menggunakan operator new. Pada contoh di bawah ini object String dibuat dengan constructor berupa "Hello", constructor ini kemudian dimasukkan ke masing-masing Object propertinya.

1
2
3
4
5
6
7
8
const hello = new String("Hello")
hello.name = "brother"
hello.print = function () {
  console.log(`${this} ${this.name}`)
}

hello.print()
// Output: Hello brother

Membuat Object dari tipe data primitive seperti di atas tidak dianjurkan, namun tujuan adanya contoh di atas untuk membuktikan bahwa tipe data primitif seperti string bisa menjadi object jika dideklarasi dengan operator new.

Properti pada Object

Properti pada Object Javascript mirip dengan variabel dalam fungsi. Biasanya, properti object bisa diakses dengan menggunakan format namaObject.namaProperti.

Sebagai contoh properti Object :

1
2
3
4
5
const identitas = new Object()
identitas.nama = "Kak Fahru"
identitas.hobi = "baca dokumentasi"
console.log(`${identitas.nama} suka ${identitas.hobi}`)
// output: Kak Fahru hobi baca dokumentasi

Object literal biasa digunakan untuk membuat sebuah object dengan properti.

Object literal terdiri dari kurung kurawal {} yang di dalamnya diisi dengan properti Object berupa pasangan key: value.

Contoh Object literal dengan properti untuk menghasilkan output di atas:

1
2
3
4
5
6
const identitas = {
  nama: "Kak Fahru",
  hobi: "baca dokumentasi",
}
console.log(`${identitas.nama} suka ${identitas.hobi}`)
// output: Kak Fahru hobi baca dokumentasi

This pada Object Javascript

Keyword this di dalam Object Javascript menunjuk pada Object itu sendiri. Hal ini dikarenakan masing-masing anggota dalam Object tidak bisa memanggil anggota lain secara langsung. Semisal sebuah method hendak memanggil properti maka method tersebut membutuhkan this untuk itu.

Keyword this juga digunakan untuk membuat properti di dalam function Object. Function Object adalah Object yang menggunakan function untuk inisiasinya.

Contoh penggunaan this pada Object function javascript :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
function Human(firstName, lastName) {
  this.namaDepan = firstName
  this.namaBelakang = lastName
  this.panggil = function () {
    console.log(`Hello ${this.namaDepan} ${this.namaBelakang}`)
  }
}

const kafahru = new Human("Ka Fahru", "Rofi")
kafahru.panggil()
// Output: Hello Ka Fahru Rofi

Method pada Object

Method pada Object javascript adalah fungsi yang bisa dijalankan pada Object. Method tidak harus ditulis langsung di dalam Object namun bisa ditulis diluar Object dan direferensikan di dalamnya.

Contoh sebuah object dengan method yang ditulis di luar object:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
const printConsole = function () {
  console.log(`Hello ${this.first} ${this.last}`)
}

const identitas = {
  first: "Mas",
  last: "Fahru",
  print: printConsole,
}
identitas.print()
// output: Hello Mas Fahru

Operator Undefined Safety

Jika suatu properti belum diinisiasi, maka pemanggilan properti tersebut akan menghasilkan error undefined reference. Hal ini mungkin terjadi ketika kita mereferensikan suatu properti yang tidak ada pada object.

Operator undefined safety menggunakan simbol elvis operator ?.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
// buat sebuah object dengan propertinya
const fulan = {
  nama: "fulan",
  kucing: {
    nama: "meong",
  },
}
console.log(fulan.kucing.nama)
// output: meong

console.log(fulan.anjing?.name)
// output: undefined

console.log(fulan.kambing.name)
// output: error: Uncaught TypeError: Cannot read properties of undefined (reading 'name')

Dari contoh di atas dapat diketahui bahwa properti objek yang tidak ada dapat diakses tanpa error dengan menggunakan elvis operator namun menghasilkan nilai undefined.

Object Sebagai Argumen Fungsi

Object dapat dikirimkan sebagai argument fungsi. Dan sebagai bagian dari object, maka properti dan method di dalamnya juga bisa diakses.

Contoh mengirim data properti ke fungsi:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
const identitas = {
  first: "Imam",
  last: "Fahru",
  print: () => {
    console.log("ini method print")
  },
}

const printConsole = (props) => {
  console.log("Hello " + props.first + " " + props.last)
  // kita bisa memanggil method pada object props
  props.print()
}

printConsole(identitas)

Destructuring Object

Destructuring Object Javascript adalah cara untuk mendapatkan nilai dari properti Object dengan memanggil nama propertinya secara langsung.

Perhatikan perbandingan antara pemanggilan properti object biasa dengan destructuring object berikut ini:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
// buat sebuah object dengan properti nama, status, dan pekerjaan
const identitas = {
  nama: "Ka Fahru",
  status: "sudah menikah",
  pekerjaan: "software engineer",
}

// buat sebuah fungsi dengan parameter nama dan status saja
function printConsole(props) {
  let nama = props.nama,
    status = props.status
  console.log(`${nama} ${status}`)
}

// masukkan nilai properti object sebagai argumen pemanggilan fungsi printConsole
printConsole(identitas)
// Output: Ka Fahru sudah menikah
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
const identitas = {
  nama: "Ka Fahru",
  status: "sudah menikah",
  pekerjaan: "software engineer",
}

// buat sebuah fungsi dengan parameter destucturing object,
// pada kasus ini hanya menerima properti nama dan status
function printConsole({ nama, status }) {
  console.log(`${nama} ${status}`)
}

// masukkan object sebagai argumen pemanggilan fungsi printConsole
printConsole(identitas)
// Output: Ka Fahru sudah menikah

Dengan menggunakan destructuring Object dalam parameter fungsi membuat kita lebih mudah dalam mengambil data properti Object.

Spread dan Rest Operator

Spread dan Rest operator pada javascript ditandai dengan titik tiga sebelum nama variabel (...variable). Tanda titik tiga (...) pada javascript memiliki dua fungsi, yakni spread (menyebarkan isi) variabel dan rest (menyebarkan sisa) dari isi variabel.

Perhatikan contoh penggunaan titik tiga di bawah ini:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
// buat sebuah fungsi dengan tiga parameter
function myBio(firstName, lastName, job) {
  console.log(`${firstName} ${lastName} bekerja sebagai ${job}`)
}

// buat sebuah array berisi firstName, lastName, dan job
const identitas = ["Fulan", "bin Fulan", "Programmer"]

// panggil fungsi myBio dengan argumen menggunakan spread operator dari array di atas
// ...identitas dijabarkan menjadi "Fulan", "bin Fulan",  "Programmer"
myBio(...identitas)

// Output di console log:
// "Fulan bin Fulan bekerja di Freelancer"
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
// Spread pada Object bisa digunakan untuk menggabungkan 2 Object
// buat 2 object
const obj1 = {
  firstName: "Fulan",
  lastName: "bin Fulan",
  job: "Programmer",
}
const obj2 = {
  gender: "Male",
  age: "25",
}

// gabungkan kedua object tsb
const obj3 = {
  ...obj1,
  ...obj2,
}

console.log(obj3)
// output:
// {firstName: 'Fulan', lastName: 'bin Fulan', job: 'Programmer', gender: 'Male', age: '25'}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
// Rest pada Array bisa digunakan untuk membuat array baru
// buat fungsi dengan rest operator
function myBio(firstName, lastName, ...otherInfo) {
console.log(firstName)
console.log(lastName)
console.log(otherInfo) // otherInfo menjadi sebuah array
}

// panggil fungsi myBio
myBio("Fulan", "bin Fulan", "Programmer", "Male", "25")
// output console:
// Fulan
// bin Fulan
// ["Programmer", "Male", "25"]
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Rest pada Object bisa digunakan untuk Destructuring Object
function myBio({ firstName, lastName, ...otherInfo }) {
console.log(firstName)
console.log(lastName)
console.log(otherInfo) // otherInfo menjadi sebuah object
console.log(otherInfo.age)
}

// buat sebuah object:
const identitas = {
firstName: "Fulan",
lastName: "bin Fulan",
job: "Programmer",
gender: "Male",
age: "25",
}
// panggil fungsi myBio dengan argument object di atas
myBio(identitas)
// output console:
// Fulan
// bin Fulan
// {  job: "Programmer",  gender: "Male",  age: "25"}
// 25

Array Method

Array methods adalah method yang bisa digunakan untuk mengolah data array, hasil dari pengolahan data ini bisa ditampung dalam sebuah variabel, perhatikan contoh berikut :

1
2
3
4
5
6
7
8
9
// buat sebuah array
const array1 = [5, 12, 8, 130, 44]
// gunakan array method filter untuk menyaring data
// masukkan data hasil filter ke dalam variabel found
const found = array1.filter((element) => element > 10)
// print variabel found
console.log(found)

// output : Array [12, 130, 44]

Beberapa array methods yang biasa digunakan pada pemrograman React:

  • find
  • some
  • every
  • includes
  • map
  • reduce
  • filter
  • sort

Method find

Metode find pada array Javascript menghasilkan nilai elemen pertama dalam array dengan syarat yang ditentukan dalam callback function. Jika tidak ada nilai yang memenuhi callback function, maka hasilnya undefined.

Contoh penggunaan method find pada array javascript:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
// buat sebuah array
const array1 = [5, 12, 8, 130, 44]

// buat sebuah callback function yang me-return nilai lebih besar dari 10
function biggerThanTen(value) {
  return value > 10
}

// panggil method find pada array1, dengan parameter nama fungsi di atas
// masukkan hasilnya ke variabel found
const found = array1.find(biggerThanTen)

console.log(found) // output: 12
1
2
3
4
5
6
7
8
9
// buat sebuah array
const array1 = [5, 12, 8, 130, 44]

// panggil method find pada array1, dengan parameter arrow function
// masukkan hasilnya ke variabel found
const found = array1.find((value) => value > 10)

console.log(found)
// output: 12

Method some

some adalah method pada array Javascript yang digunakan untuk mengecek apakah ada nilai yang sesuai dengan kriteria callback function, sehingga hasilnya hanya berupa true jika nilai ditemukan dan false jika nilai tidak ditemukan.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
// buat callback function
function isBiggerThan10(element) {
  return element > 10
}

// panggil method some dengan callback function
const a = [2, 5, 8, 1, 4].some(isBiggerThan10)
console.log(a) // output: false
const b = [12, 5, 8, 1, 4].some(isBiggerThan10)
console.log(b) // output: true
1
2
3
4
5
// Sebuah array bisa memanggil method some
const a = [2, 5, 8, 1, 4].some((element) => element > 10)
console.log(a) // output: false
const b = [12, 5, 8, 1, 4].some((element) => element > 10)
console.log(b) // output: true

Method every

every adalah method pada array Javascript yang digunakan untuk melakukan pengecekan dari suatu kriteria fungsi pada setiap anggota array, jika setiap anggota array memenuhi kriteria tersebut maka return valuenya berupa true sedangkan jika ada salah satu anggota array yang tidak memenuhi kriteria maka return valuenya berupa false.

1
2
3
4
5
6
7
8
let a = [12, 5, 8, 130, 44]
// cek apakah semua anggota array a bernilai > 10
const resultA = a.every((elemen) => elemen > 10)
console.log(resultA) // output: false

let b = [12, 54, 18, 130, 44]
const resultB = b.every((elemen) => elemen > 10)
console.log(resultB) // output: true

Method includes

includes adalah method pada array Javascript untuk mengetahui adanya nilai dalam sebuah array. Jika terdapat nilai sesuai kriteria maka hasilnya adalah true, vice-versa.

1
2
3
4
let a = [12, 54, 18, 130, 44]

let resultA = a.includes(12)
console.log(resultA) //output: true

Method map

map adalah method pada array Javascript untuk menjalankan callback function pada setiap anggota array. Nilai yang dihasilkan berupa array yang telah dirubah nilainya sesuai callback function.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
let a = [1, 2, 3, 4, 5, 6, 7, 8, 9]

// buat callback function kali 3
function kaliTiga(element) {
  return element * 3
}

let resultA = a.map(kaliTiga)
console.log(resultA)
// output: [3, 6, 9, 12, 15, 18, 21, 24, 27]

Method reduce

reduce adalah method pada array Javascript untuk menjalankan callback function pada setiap anggota array sehingga mirip dengan method map. Namun bedanya, reduce menggunakan 2 parameter pada callback function-nya, yang pertama adalah parameter result dan yang kedua adalah parameter elemen. Parameter result ini lah yang nantinya akan di-assign ke variabel.

Contoh penggunaan method reduce pada array javascript:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
let a = [1, 2, 3, 4, 5, 6, 7, 8, 9]

// buat callback function dengan parameter result dan element
function kaliDua(result, element) {
  // hasilnya adalah jumlah dari anggota setelah dikali 2
  return result + element * 2
}

// untuk mendapatkan jumlah dari semua anggota array a setelah dikali 2
// maka kita perlu memasukkan nama callback function ke dalam argumen reduce
let resultA = a.reduce(kaliDua)
console.log(resultA)
// output: 89
1
2
3
4
5
6
7
let a = [1, 2, 3, 4, 5, 6, 7, 8, 9]

// method reduce membutuhkan callback function dengan parameter result dan elemen
// maka kita buat arrow function dengan parameter result dan elemen
let resultA = a.reduce((result, element) => result + element * 2)
console.log(resultA)
// output: 89

Method filter

filter adalah method pada array Javascript yang digunakan untuk menyaring data sesuai dengan callback function. Method ini menghasilkan array yeng berisi data sesuai kriteria dalam callback function.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
// buat sebuah array
const array1 = [5, 12, 8, 130, 44]

// gunakan array method filter untuk menyaring data
// masukkan data hasil filter ke dalam variabel found
const found = array1.filter((element) => element > 10)

// print variabel found
console.log(found)
// output : Array [12, 130, 44]

Method sort

sort adalah method pada array Javascript untuk menghasilkan nilai yang telah diurutkan sesuai dengan kriteria dalam callback function. Callback function dalam method sort menggunakan 2 parameter, yakni currentItem dan nextItem.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
let a = [5, 12, 8, 130, 44]

// membuat fungsi mengurutkan dari yang terkecil ke yang terbesar
function sorting(current, next) {
  // jika nilai current > next
  if (current > next) {
    // return 1 agar posisi current diletakkan setelah next
    return 1
  }

  // jika nilai current kurang dari nilai next
  if (current < next) {
    // return -1 maka posisi current diletakkan sebelum next
    return -1
  }

  // jika nilai current = next maka return 0
  if (current === next) {
    // return 0 maka posisi tidak diubah
    return 0
  }
}

// panggil method sort dengan parameter fungsi sorting
let result = a.sort(sorting)
console.log(result)

©2021, All Rights Reserved

Privacy Policy | DMCA | Telegram