Belajar Coding: Manipulasi Array pada JavaScript

Penggunaan Method .filter() dan .map()

Photo by Markus Spiske on Unsplash

Saat kita sedang belajar JavaScript, pasti sering menemukan yang nama-nya loop / pengulangan. Mulai dari pengulangan dasar menggunakan for, while, dan juga method Array yang disediakan JavaScript seperti .forEach() dan .map()

Pada kesempatan ini saya akan membahas method .map() dan contoh penggunaannya. .map() sangat berguna dalam manipulasi data, karena method ini akan membuat Array baru dari fungsi yang kita masukkan pada method ini, tanpa merubah Array awalnya. Beberapa hari yang lalu ada teman dari komunitas Zero To Mastery yang bertanya melalui DM di Discord, dia memberikan sebuah Array berisi object yang di dalamnya terdapat data tanggal, serta suhu pada tanggal tersebut, kemudian dia bertanya bagaimana cara mem-filter Array tersebut agar menampilkan tanggal saat suhu berada di kondisi tertentu.

const weatherData = [{
date: '2021-02-07',
lowestTemperature: -4,
highestTemperature: 2,
}, {
date: '2021-02-08',
lowestTemperature: -1,
highestTemperature: 2,
}, {
date: '2021-02-09',
lowestTemperature: -1,
highestTemperature: 9,
}, {
date: '2021-02-10',
lowestTemperature: 6,
highestTemperature: 10,
}, {
date: '2021-02-11',
lowestTemperature: 3,
highestTemperature: 9,
}, {
date: '2021-02-12',
lowestTemperature: 5,
highestTemperature: 9,
}, {
date: '2021-02-13',
lowestTemperature: -1,
highestTemperature: 6,
}, {
date: '2021-02-14',
lowestTemperature: -5,
highestTemperature: -1,
}, {
date: '2021-02-15',
lowestTemperature: -5,
highestTemperature: -3,
}, {
date: '2021-02-16',
lowestTemperature: -2,
highestTemperature: -6,
}, {
date: '2021-02-17',
lowestTemperature: -1,
highestTemperature: -7,
}, {
date: '2021-02-19',
lowestTemperature: -11,
highestTemperature: 0,
}, {
date: '2021-02-20',
lowestTemperature: -8,
highestTemperature: -3,
}, {
date: '2021-02-21',
lowestTemperature: -1,
highestTemperature: -9,
}];

Setelah mempelajari data yang diberikan ternyata maksud dari pertanyaan teman saya tersebut adalah menampilkan date pada kondisi lowestTemperature dan highestTemperature yang berada pada nilai minus (-). Sekarang kita mulai coding di Code Editor favorite kita.

const answer = weatherData.filter(data => {
  if(data.lowestTemperature < 0 && data.highestTemperature < 0) {
    return data
  }
})
console.log(answer)

Pertama kita declare variable baru bernama answer untuk menyimpan Array baru yang akan kita buat. Selanjutnya kita gunakan method .filter() untuk mem-filter weatherData menjadi Array data baru, sesuai dengan kondisi yang kita tentukan, dalam hal ini kondisi lowestTemperature dan highestTemperature pada nilai minus (-).

Filter Result by Antonius Harry

Dengan method .filter() kita sudah bisa mendapatkan data yang kita inginkan, namun karena data yang diminta hanya tanggal, disini lah method .map() kita gunakan untuk membuat Array baru.

const answer = weatherData.filter(data => {
  if(data.lowestTemperature < 0 && data.highestTemperature < 0) {
    return data
  }
}).map(data => data.date)
console.log(answer)

Pada method .map() ini kita masukkan fungsi untuk menampilkan tanggal dari data yang sudah di filter.

Map Result by Antonius Harry

Demikian contoh penggunaan method .map() pada JavaScript. Method ini merupakan salah satu yang paling sering saya gunakan dalam Project dan pembelajaran JavaScript.