<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Ramadhanty Sadewi</title>
    <description>The latest articles on DEV Community by Ramadhanty Sadewi (@rantidhanty).</description>
    <link>https://dev.to/rantidhanty</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1181772%2Fb47e18d3-b837-4c41-882a-5a706e0b093f.png</url>
      <title>DEV Community: Ramadhanty Sadewi</title>
      <link>https://dev.to/rantidhanty</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/rantidhanty"/>
    <language>en</language>
    <item>
      <title>Memahami Perbedaan `apt` vs `apt-get` di Linux dan cara membuat script automation Linux</title>
      <dc:creator>Ramadhanty Sadewi</dc:creator>
      <pubDate>Sat, 14 Jun 2025 15:50:56 +0000</pubDate>
      <link>https://dev.to/rantidhanty/memahami-perbedaan-apt-vs-apt-get-di-linux-dan-cara-membuat-script-automation-linux-jgd</link>
      <guid>https://dev.to/rantidhanty/memahami-perbedaan-apt-vs-apt-get-di-linux-dan-cara-membuat-script-automation-linux-jgd</guid>
      <description>&lt;p&gt;Postingan ini saya buat ketika saya mencari tau kenapa setiap saya mengecek apa saya yang telah di install dan memfilter menggunakan grep dan outputnya keluar dengan tulisan&lt;br&gt;
&lt;code&gt;WARNING: apt does not have a stable CLI interface. Use with caution in scripts.&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;saya menggunakan command&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2iz05wjeeyao8awpry3b.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2iz05wjeeyao8awpry3b.png" alt="Image description" width="491" height="43"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;dan outputnya&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2adku6xmvnwe3azwa95l.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2adku6xmvnwe3azwa95l.png" alt="Image description" width="800" height="122"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;atau bisa juga menggunakan command&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff5wckdcwstxh7lm83xwy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff5wckdcwstxh7lm83xwy.png" alt="Image description" width="281" height="20"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;dan outputnya&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj9hhlrn4fs4vxusx7uef.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj9hhlrn4fs4vxusx7uef.png" alt="Image description" width="800" height="48"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;bedanya command &lt;code&gt;apt list --installed | grep docker&lt;/code&gt; atau &lt;code&gt;dpkg -l | grep docker&lt;/code&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;apt list --installed = perintah dari APT (modern frontend) sumber datanya dari metadata database APT&lt;br&gt;
dpkg -l = perintah dari DPKG (backend system package manager) sumber datanya dari database dpkg langsung&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Maksud gampangnya:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;apt itu adalah alat buat install, update, hapus software di Linux (Ubuntu).&lt;br&gt;
Tapi, tampilan perintah apt ini belum dijamin stabil.&lt;br&gt;
Maksud belum stabil itu:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Di masa depan, cara apt menampilkan hasil, atau opsi-opsinya bisa berubah.&lt;/li&gt;
&lt;li&gt;Jadi, jangan terlalu mengandalkan apt di dalam script otomatis (misal file bash yang jalan otomatis), karena kalau apt berubah, script-nya bisa error. &lt;/li&gt;
&lt;li&gt;Tapi kalau cuma dipakai manual kayak yang saya lakukan barusan aman.&lt;/li&gt;
&lt;li&gt;Ini cuma peringatan buat programmer atau sysadmin yang bikin script otomatis, rekomendasi menggunakan apt-get untuk script automation.&lt;/li&gt;
&lt;/ol&gt;
&lt;/blockquote&gt;

&lt;p&gt;Terus apakah ada solusinya?&lt;br&gt;
Sebenernya tidak perlu solusi khusus, karena:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;apt memang secara bawaan di Ubuntu 24.04 (dan versi-versi baru) kasih warning ini.&lt;/li&gt;
&lt;li&gt;Ubuntu pengennya orang-orang yang bikin automation/script pakai apt-get bukan apt.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Dengan rasa penasaran saya, saya mencoba menjalankan command, di bawah ini&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe3iym30wj9el9gnpgg6d.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe3iym30wj9el9gnpgg6d.png" alt="Image description" width="492" height="27"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;dan outputnya&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsiskcz6uptv7qjtrzujr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsiskcz6uptv7qjtrzujr.png" alt="Image description" width="800" height="16"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;Kenapa error?&lt;br&gt;
Karena apt-get tidak punya subcommand list.&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Bedanya di sini:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;apt list --installed → ada di apt (lebih modern, sejak Ubuntu 16.04 ke atas)&lt;/li&gt;
&lt;li&gt;apt-get → tidak punya list. Dia cuma punya: &lt;code&gt;install, remove, update, upgrade&lt;/code&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Nah, terus kenapa tadi aku bilang:&lt;br&gt;
&lt;code&gt;apt-get cocok untuk automation/script?&lt;/code&gt;&lt;br&gt;
Maksudnya begini:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Kalau kamu bikin script otomatis (misal file .sh) yang dipakai di server, CI/CD, atau deployment&lt;br&gt;
Misalnya:&lt;br&gt;
&lt;/p&gt;


&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;apt-get update
apt-get install nginx
apt-get install docker-ce
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Maka jauh lebih aman pakai apt-get karena:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Output-nya stabil.&lt;/li&gt;
&lt;li&gt;Tidak banyak warning, info, atau formatting warna-warni kayak apt.&lt;/li&gt;
&lt;li&gt;Kalau ada error, lebih jelas dan gampang dibaca scriptnya.&lt;/li&gt;
&lt;li&gt;Karena automation butuh stabilitas output.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Apa sih maksudnya "bikin script automation" itu?&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Sederhananya:&lt;br&gt;
Bikin script automation itu artinya bikin file yang berisi perintah-perintah terminal (shell command) supaya bisa dijalankan otomatis, tanpa kita ketik manual satu-satu.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Misalnya:&lt;br&gt;
Kalau kamu install server baru, biasanya kamu akan ngetik manual:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;sudo apt update
sudo apt install nginx
sudo apt install docker-ce
sudo apt install mysql-server
sudo ufw allow 22
sudo ufw allow 80
sudo ufw enable
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Capek kan kalau tiap kali harus ketik satu-satu?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Solusinya: bikin automation script&lt;/strong&gt;&lt;br&gt;
Kamu bikin file misalnya &lt;code&gt;setup-server.sh&lt;/code&gt; isinya&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;#!/bin/bash

apt-get update
apt-get install -y nginx
apt-get install -y docker-ce
apt-get install -y mysql-server
ufw allow 22
ufw allow 80
ufw enable
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Langkah - langkah membuat script automation&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Pertama Buat file baru:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nano setup-server.sh
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Kalau kamu pakai editor lain (vim, code-server, dsb) juga boleh.&lt;br&gt;
&lt;strong&gt;"Bikin file scriptnya itu di taro dimana folder mana?"&lt;/strong&gt;&lt;br&gt;
Jawabannya:&lt;br&gt;
Bebas kamu taruh di mana aja, selama kamu tau path-nya.&lt;br&gt;
Tapi biar gampang, cukup taruh di home directory kamu.&lt;/p&gt;

&lt;p&gt;Sekarang lihat folder kamu, misalnya&lt;br&gt;
&lt;code&gt;namauser@namahostname:~$&lt;/code&gt;&lt;br&gt;
Kamu sekarang udah berada di home directory kamu sendiri.&lt;/p&gt;

&lt;p&gt;Misalnya, Kamu mau bikin file script automation di &lt;strong&gt;home&lt;/strong&gt;&lt;br&gt;
&lt;code&gt;nano setup-server.sh&lt;/code&gt;&lt;br&gt;
File setup-server.sh nanti otomatis tersimpan di&lt;br&gt;
&lt;code&gt;/home/namausers/setup-server.sh&lt;/code&gt;&lt;br&gt;
Kalau pakai perintah ls&lt;br&gt;
&lt;code&gt;ls -la&lt;/code&gt;&lt;br&gt;
Nanti file itu bakal muncul.&lt;br&gt;
Cara menjalankannya&lt;br&gt;
pastikan berada di &lt;strong&gt;home&lt;/strong&gt;&lt;br&gt;
atau bisa menggunakan command &lt;code&gt;cd ~&lt;/code&gt;&lt;br&gt;
lalu bisa menjalankan &lt;code&gt;./setup-server.sh&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Kamu juga boleh bikin folder khusus&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;mkdir scripts
cd scripts
nano setup-server.sh
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Jadi nanti file kamu rapi di dalam:&lt;br&gt;
/home/namauser/scripts/setup-server.sh&lt;br&gt;
Maka cara menjalankannya ada 3 opsi&lt;/p&gt;

&lt;p&gt;Opsi 1 — pindah dulu ke folder-nya:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;cd ~/scripts
./setup-server.sh
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Opsi 2 — panggil pakai full path&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/home/namauser/scripts/setup-server.sh
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Opsi 3 — pakai relative path&lt;br&gt;
Misalnya kamu masih di home:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;./scripts/setup-server.sh
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Di Linux, ./ artinya: "folder tempat aku berdiri sekarang"&lt;br&gt;
Makanya kalau kamu di folder yang sama, cukup pakai ./namafile.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;Kedua Isi file-nya seperti ini, contohnya&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;#!/bin/bash

# update package list
apt-get update

# install nginx
apt-get install -y nginx

# install docker-ce
apt-get install -y docker-ce

# install mysql-server
apt-get install -y mysql-server

# konfigurasi firewall
ufw allow 22
ufw allow 80
ufw enable
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Lihat ya&lt;br&gt;
Di sini aku pakai apt-get di bagian install.&lt;br&gt;
Karena ini script automation, biar stabil.&lt;br&gt;
Dan saat kamu bikin file script automation (biasanya file .sh), perintah apt-get kamu tulis di dalamnya.&lt;br&gt;
Karena script automation butuh output yang stabil → apt-get lebih aman dipakai daripada apt.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;#!/bin/bash
Ini namanya: Shebang
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Fungsinya Ngasih tau sistem&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;"Hei sistem Linux, tolong jalankan file ini pakai program bash (shell interpreter)."
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Jadi pas kamu ketik:&lt;br&gt;
&lt;code&gt;./setup-server.sh&lt;/code&gt;&lt;br&gt;
Linux tau harus jalanin file ini pakai bash.&lt;/p&gt;

&lt;p&gt;Kalau kamu gak kasih &lt;code&gt;#!/bin/bash&lt;/code&gt;, kadang bisa error, atau sistem bingung ini file harus dijalankan pakai apa.&lt;/p&gt;

&lt;p&gt;Intinya:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Wajib ditulis di paling atas file bash script kamu.&lt;br&gt;
Biar sistem tau ini file script Bash.&lt;br&gt;
&lt;/p&gt;


&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Kenapa ada -y ?
-y itu supaya otomatis jawab "yes" saat install (biar nggak nanya kamu terus).
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Ketiga Kasih permission biar bisa dijalankan&lt;/strong&gt;&lt;br&gt;
Saat kamu bikin file script, misalnya:&lt;br&gt;
&lt;code&gt;setup-server.sh&lt;/code&gt;&lt;br&gt;
Itu kan cuma file teks biasa.&lt;br&gt;
Linux gak otomatis tau bahwa file itu "boleh dijalankan" kayak program.&lt;br&gt;
Makanya, sebelum file itu bisa dijalankan, kita harus kasih ijin:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;chmod +x setup-server.sh
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Artinya file ini sekarang boleh dieksekusi.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;chmod = change mode → artinya mengubah izin akses file.&lt;br&gt;
+x = kasih hak eksekusi → artinya: "file ini boleh dijalankan (execute)".&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;Keempat Jalankan script automation-nya:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;sudo ./setup-server.sh
Atau
sudo bash setup-server.sh
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Nah, di sinilah automation terjadi, karena&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Kamu tinggal ketik 1 perintah, semua install jalan otomatis.&lt;/li&gt;
&lt;li&gt;Tidak perlu ketik manual satu-satu lagi.&lt;/li&gt;
&lt;li&gt;Karena kita pakai apt-get, maka aman untuk automation (tidak ada warning unstable interface).&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Kapan apt dipakai?&lt;/strong&gt;&lt;br&gt;
Kalau kamu ngetik langsung di terminal&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;sudo apt install nginx
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Aman pakai apt.&lt;br&gt;
Karena interaktif, kamu bisa lihat warning-nya, tinggal enter aja.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F45juguqfldc2lfy5gh0p.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F45juguqfldc2lfy5gh0p.png" alt="Image description" width="701" height="241"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>developer</category>
      <category>ubuntu</category>
      <category>indonesia</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Sharing Solusi Tantangan CodeWars: Least Larger, dari Dasar hingga 1 Baris</title>
      <dc:creator>Ramadhanty Sadewi</dc:creator>
      <pubDate>Wed, 18 Dec 2024 10:33:17 +0000</pubDate>
      <link>https://dev.to/rantidhanty/sharing-solusi-tantangan-codewars-least-larger-dari-dasar-hingga-1-baris-4daf</link>
      <guid>https://dev.to/rantidhanty/sharing-solusi-tantangan-codewars-least-larger-dari-dasar-hingga-1-baris-4daf</guid>
      <description>&lt;h2&gt;
  
  
  &lt;strong&gt;Belajar dari Tantangan CodeWars: Least Larger&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Halo, teman-teman! Kali ini aku mau sharing soal tantangan &lt;a href="https://www.codewars.com/kata/5f8341f6d030dc002a69d7e4" rel="noopener noreferrer"&gt;Least Larger&lt;/a&gt; dari CodeWars. Tantangan ini seru banget karena melatih logika dan cara berpikir sistematis, sekaligus memberikan gambaran bagaimana konsep ini bisa berguna di dunia nyata. Yuk, kita bahas bareng-bareng!&lt;/p&gt;




&lt;h3&gt;
  
  
  Apa Tantangannya?
&lt;/h3&gt;

&lt;p&gt;Jadi, kita diberi sebuah array angka dan sebuah indeks tertentu. Tugas kita adalah mencari &lt;strong&gt;angka terkecil yang lebih besar&lt;/strong&gt; dari elemen di indeks tersebut, lalu mengembalikan &lt;strong&gt;indeksnya&lt;/strong&gt;. Kalau nggak ada angka yang memenuhi, kita harus mengembalikan &lt;code&gt;-1&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Contoh:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Array: &lt;code&gt;[4, 1, 3, 5, 6]&lt;/code&gt;&lt;br&gt;&lt;br&gt;
Indeks: &lt;code&gt;0&lt;/code&gt; (angka acuan adalah &lt;code&gt;4&lt;/code&gt;)&lt;br&gt;&lt;br&gt;
Hasilnya adalah &lt;code&gt;3&lt;/code&gt;, karena angka terkecil yang lebih besar dari &lt;code&gt;4&lt;/code&gt; adalah &lt;code&gt;5&lt;/code&gt;, yang ada di indeks &lt;code&gt;3&lt;/code&gt;.&lt;br&gt;
kenapa bisa 3 ?&lt;br&gt;
array itu di mulai dari 0&lt;br&gt;
jadi :&lt;br&gt;
4 : index 0&lt;br&gt;
1 : index 1&lt;br&gt;
3 : index 2&lt;br&gt;
5 : index 3&lt;br&gt;
6 : index 4&lt;/p&gt;


&lt;h3&gt;
  
  
  Solusi yang Aku Buat
&lt;/h3&gt;

&lt;p&gt;Untuk menyelesaikan tantangan ini, aku membuat fungsi bernama &lt;code&gt;leastLarger&lt;/code&gt;. Berikut kodenya:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;leastLarger&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;smaller&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;Infinity&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Nilai pembanding awal&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;        &lt;span class="c1"&gt;// Default hasil kalau nggak ada elemen yang memenuhi&lt;/span&gt;

  &lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;index&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;index&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;index&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;index&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;index&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;smaller&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;smaller&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;index&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt; &lt;span class="c1"&gt;// Update nilai terkecil yang lebih besar&lt;/span&gt;
      &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;index&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;     &lt;span class="c1"&gt;// Simpan indeks elemen&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Kembalikan hasil&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  Bagaimana Cara Kerjanya?
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Inisialisasi Awal&lt;/strong&gt;  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Aku set &lt;code&gt;smaller&lt;/code&gt; ke &lt;code&gt;Infinity&lt;/code&gt; sebagai nilai awal untuk pembanding.
&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;result&lt;/code&gt; di-set ke &lt;code&gt;-1&lt;/code&gt; untuk jaga-jaga kalau nggak ada elemen yang memenuhi.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Iterasi Array&lt;/strong&gt;  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Aku cek setiap elemen di array.
&lt;/li&gt;
&lt;li&gt;Ada dua kondisi yang harus terpenuhi:

&lt;ol&gt;
&lt;li&gt;Elemen lebih besar dari elemen acuan (&lt;code&gt;a[i]&lt;/code&gt;).
&lt;/li&gt;
&lt;li&gt;Elemen lebih kecil dari pembanding sebelumnya (&lt;code&gt;smaller&lt;/code&gt;).
&lt;/li&gt;
&lt;/ol&gt;


&lt;/li&gt;

&lt;li&gt;Kalau kedua kondisi itu terpenuhi, aku update &lt;code&gt;smaller&lt;/code&gt; dan simpan indeks elemen di &lt;code&gt;result&lt;/code&gt;.&lt;/li&gt;

&lt;/ul&gt;

&lt;/li&gt;

&lt;li&gt;

&lt;p&gt;&lt;strong&gt;Mengembalikan Hasil&lt;/strong&gt;  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Kalau ada elemen yang memenuhi, fungsi mengembalikan indeksnya.
&lt;/li&gt;
&lt;li&gt;Kalau nggak ada, hasilnya tetap &lt;code&gt;-1&lt;/code&gt;.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ol&gt;




&lt;h3&gt;
  
  
  Contoh Penggunaan
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;leastLarger&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;6&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt; &lt;span class="c1"&gt;// Output: 3&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Penjelasan:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Elemen acuan adalah &lt;code&gt;4&lt;/code&gt; (di indeks 0).
&lt;/li&gt;
&lt;li&gt;Elemen-elemen yang lebih besar dari &lt;code&gt;4&lt;/code&gt; adalah &lt;code&gt;[5, 6]&lt;/code&gt;.
&lt;/li&gt;
&lt;li&gt;Dari elemen-elemen itu, yang terkecil adalah &lt;code&gt;5&lt;/code&gt;, dan posisinya ada di indeks &lt;code&gt;3&lt;/code&gt;.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  Solusi Advance: Ringkas dalam 1 Baris
&lt;/h3&gt;

&lt;p&gt;Buat kamu yang suka pendekatan lebih "JavaScript banget," kita bisa menulis solusi ini dalam satu baris kode menggunakan metode bawaan seperti &lt;code&gt;filter&lt;/code&gt;, &lt;code&gt;Math.min&lt;/code&gt;, dan &lt;code&gt;findIndex&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;leastLarger&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;findIndex&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;min&lt;/span&gt;&lt;span class="p"&gt;(...&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;filter&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;y&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;y&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;])));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Kode ini melakukan hal yang sama, tapi dalam gaya yang lebih fungsional dan ringkas. Cocok untuk situasi di mana kamu ingin menulis solusi cepat tanpa terlalu banyak variabel tambahan.&lt;/p&gt;




&lt;h3&gt;
  
  
  Studi Kasus di Dunia Nyata
&lt;/h3&gt;

&lt;p&gt;Fungsi seperti ini sebenarnya cukup relevan di berbagai situasi nyata. Beberapa contohnya:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Sistem Pemesanan Tiket&lt;/strong&gt;  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Dalam sistem tiket, kita sering perlu mencari harga kursi terendah yang lebih tinggi dari harga tertentu (misalnya, untuk mengisi kursi berikutnya).&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Penjadwalan Tugas&lt;/strong&gt;  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Saat membuat jadwal, kita bisa mencari waktu terdekat berikutnya yang lebih besar dari waktu tertentu, misalnya untuk mengalokasikan slot meeting atau tugas berikutnya.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Manajemen Inventaris&lt;/strong&gt;  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Dalam gudang, jika kamu perlu mencari lokasi penyimpanan dengan kapasitas terkecil yang masih cukup untuk menyimpan barang tertentu.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;




&lt;p&gt;Tantangan ini terlihat sederhana, tapi pas dicoba, aku jadi sadar kalau logika yang rapi itu sangat penting. Yang aku suka dari tantangan ini adalah betapa relevannya konsep ini untuk diterapkan di dunia nyata.&lt;/p&gt;

&lt;p&gt;Oh iya, kalau teman-teman punya cara lain untuk menyelesaikan tantangan ini, jangan ragu buat share di kolom komentar, ya! Siapa tahu, kita bisa saling belajar dari pendekatan yang berbeda. Semoga sharing ini bermanfaat, dan happy coding! 😊&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>leastlarger</category>
      <category>programming</category>
      <category>indonesia</category>
    </item>
    <item>
      <title>Memahami Function Ticker di JavaScript: Cara Kerja dan Penjelasan Detail</title>
      <dc:creator>Ramadhanty Sadewi</dc:creator>
      <pubDate>Sun, 15 Dec 2024 13:56:31 +0000</pubDate>
      <link>https://dev.to/rantidhanty/memahami-function-ticker-di-javascript-cara-kerja-dan-penjelasan-detail-4e9f</link>
      <guid>https://dev.to/rantidhanty/memahami-function-ticker-di-javascript-cara-kerja-dan-penjelasan-detail-4e9f</guid>
      <description>&lt;p&gt;&lt;strong&gt;Memahami Function Ticker di JavaScript&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Ticker adalah teks berjalan yang sering digunakan dalam aplikasi digital signage atau sebagai media promosi. Teks ini dapat menampilkan informasi seperti berita, iklan, atau pengumuman dengan cara yang menarik perhatian. Teks berjalan biasanya diimplementasikan dengan HTML dan CSS, dan dapat dioperasikan tanpa JavaScript, meskipun banyak software juga menyediakan fitur ini untuk penjadwalan dan kontrol yang lebih baik.&lt;/p&gt;

&lt;p&gt;Artikel ini membahas cara kerja fungsi ticker dalam JavaScript, yang saya temui dalam tantangan di &lt;a href="https://www.codewars.com/kata/5a959662373c2e761d000183" rel="noopener noreferrer"&gt;Codewars&lt;/a&gt;. Fungsi ini memungkinkan kita untuk menciptakan efek teks berjalan (scrolling) dengan menggunakan JavaScript.&lt;/p&gt;

&lt;h3&gt;
  
  
  Apa itu Ticker?
&lt;/h3&gt;

&lt;p&gt;Ticker adalah teks yang bergerak secara horizontal, yang sering digunakan dalam berbagai aplikasi untuk menampilkan informasi yang terus diperbarui, seperti berita terkini, pengumuman, atau iklan. Efek ini bisa ditemukan di layar digital atau papan pengumuman elektronik, dan pada umumnya bisa diimplementasikan menggunakan HTML, CSS, dan JavaScript.&lt;/p&gt;

&lt;p&gt;Fungsi &lt;code&gt;ticker&lt;/code&gt; dalam JavaScript yang akan kita bahas berikut ini, memberikan solusi untuk menciptakan efek teks berjalan secara dinamis di dalam aplikasi web Anda.&lt;/p&gt;

&lt;p&gt;Berikut adalah kode fungsi ticker yang akan kita bahas:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;ticker&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;width&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;tick&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;display&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt; &lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;repeat&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;width&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;  &lt;span class="c1"&gt;// 1&lt;/span&gt;
  &lt;span class="nx"&gt;text&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;display&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;text&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;display&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;    &lt;span class="c1"&gt;// 2&lt;/span&gt;
  &lt;span class="nx"&gt;tick&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;tick&lt;/span&gt; &lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;width&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// 3&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;slice&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;tick&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;tick&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;width&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// 4&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Penjelasan Fungsi &lt;code&gt;ticker&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;Fungsi ini memiliki tiga parameter: &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;text&lt;/code&gt;: Teks yang ingin ditampilkan.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;width&lt;/code&gt;: Lebar tampilan yang diinginkan, yaitu berapa banyak karakter yang akan ditampilkan pada satu waktu.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;tick&lt;/code&gt;: Posisi pergeseran teks, yang menentukan teks mana yang akan ditampilkan saat fungsi dipanggil.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Berikut adalah penjelasan teknis dari setiap langkah yang ada dalam fungsi ini:&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;1. Membuat Spasi untuk Membungkus Teks&lt;/strong&gt;
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;display&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt; &lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;repeat&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;width&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Pada langkah pertama, kita membuat sebuah string kosong yang berisi spasi sebanyak &lt;code&gt;width&lt;/code&gt; menggunakan metode &lt;code&gt;repeat()&lt;/code&gt;. Fungsi &lt;code&gt;repeat()&lt;/code&gt; akan mengulang karakter yang ditentukan (dalam hal ini adalah spasi) sebanyak jumlah yang ditentukan oleh &lt;code&gt;width&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Contoh&lt;/strong&gt;:&lt;br&gt;
Jika &lt;code&gt;width&lt;/code&gt; adalah 5, maka variabel &lt;code&gt;display&lt;/code&gt; akan berisi string &lt;code&gt;'     '&lt;/code&gt; yang terdiri dari 5 spasi.&lt;/p&gt;
&lt;h3&gt;
  
  
  &lt;strong&gt;2. Menambahkan Spasi di Sekitar Teks&lt;/strong&gt;
&lt;/h3&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;text&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;display&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;text&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;display&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Pada langkah kedua, kita menambahkan string &lt;code&gt;display&lt;/code&gt; (spasi) di bagian depan dan belakang teks (&lt;code&gt;text&lt;/code&gt;). Ini memastikan bahwa teks memiliki ruang kosong di kedua sisi, memberikan tempat agar teks bisa bergerak (scroll) tanpa terpotong.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Contoh&lt;/strong&gt;:&lt;br&gt;
Misalkan teks yang diberikan adalah &lt;code&gt;'Hello'&lt;/code&gt; dan &lt;code&gt;width&lt;/code&gt; adalah 5. Maka setelah baris ini, teks akan menjadi:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;'     Hello     '
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Dengan ini, ada cukup ruang kosong di kiri dan kanan teks untuk pergerakan yang lebih mulus.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;3. Menghitung Posisi Pergerakan Teks&lt;/strong&gt;
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;tick&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;tick&lt;/span&gt; &lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;width&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Pada langkah ketiga, kita menggunakan operator modulus (&lt;code&gt;%&lt;/code&gt;) untuk memastikan bahwa nilai &lt;code&gt;tick&lt;/code&gt; berada dalam rentang yang valid dan tidak melampaui panjang teks yang telah dibungkus dengan spasi. &lt;/p&gt;

&lt;p&gt;Nilai &lt;code&gt;text.length - width&lt;/code&gt; memberikan panjang total dari teks yang dibungkus (termasuk spasi) dikurangi lebar tampilan yang ingin kita tampilkan (&lt;code&gt;width&lt;/code&gt;). Ini memastikan bahwa pergeseran teks yang ditentukan oleh &lt;code&gt;tick&lt;/code&gt; tidak melebihi panjang teks yang dapat ditampilkan.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Contoh&lt;/strong&gt;:&lt;br&gt;
Jika panjang &lt;code&gt;text&lt;/code&gt; setelah penambahan spasi adalah 15 (misalnya, &lt;code&gt;'     Hello     '&lt;/code&gt;), dan &lt;code&gt;width&lt;/code&gt; adalah 5, maka &lt;code&gt;text.length - width&lt;/code&gt; menjadi 10. Artinya, kita hanya perlu memastikan bahwa &lt;code&gt;tick&lt;/code&gt; berada di rentang 0 hingga 9. Ini memastikan pergerakan teks tetap valid tanpa ada bagian yang hilang.&lt;/p&gt;
&lt;h3&gt;
  
  
  &lt;strong&gt;4. Mengambil Substring untuk Ditampilkan&lt;/strong&gt;
&lt;/h3&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;slice&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;tick&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;tick&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;width&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Pada langkah terakhir, kita menggunakan metode &lt;code&gt;slice()&lt;/code&gt; untuk mengambil bagian dari string &lt;code&gt;text&lt;/code&gt;, dimulai dari posisi &lt;code&gt;tick&lt;/code&gt; hingga posisi &lt;code&gt;tick + width&lt;/code&gt;. Fungsi &lt;code&gt;slice()&lt;/code&gt; mengembalikan bagian string yang sesuai dengan posisi tersebut.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Contoh&lt;/strong&gt;:&lt;br&gt;
Misalnya jika &lt;code&gt;tick = 3&lt;/code&gt; dan &lt;code&gt;width = 5&lt;/code&gt;, maka kode &lt;code&gt;slice(3, 8)&lt;/code&gt; akan menghasilkan substring &lt;code&gt;'Hello'&lt;/code&gt; dari string &lt;code&gt;'     Hello     '&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Dengan cara ini, kita menampilkan bagian teks dengan panjang yang sesuai dengan &lt;code&gt;width&lt;/code&gt;. Setiap kali fungsi ini dipanggil dengan nilai &lt;code&gt;tick&lt;/code&gt; yang berbeda, teks yang ditampilkan akan bergeser, menciptakan efek pergerakan atau scrolling.&lt;/p&gt;


&lt;h3&gt;
  
  
  &lt;strong&gt;Contoh Penggunaan Fungsi Ticker&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Mari kita lihat contoh penggunaan fungsi ini dalam kode:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;ticker&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello World&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Proses yang terjadi adalah:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;code&gt;display = '     '&lt;/code&gt; (5 spasi).&lt;/li&gt;
&lt;li&gt;Teks yang sudah dimodifikasi: &lt;code&gt;'     Hello World     '&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Nilai &lt;code&gt;tick = 3&lt;/code&gt;, dan panjang &lt;code&gt;text&lt;/code&gt; setelah dibungkus menjadi 18. Dengan &lt;code&gt;width = 5&lt;/code&gt;, kita tahu bahwa &lt;code&gt;tick&lt;/code&gt; bisa berkisar antara 0 hingga 13.&lt;/li&gt;
&lt;li&gt;Fungsi &lt;code&gt;slice(3, 8)&lt;/code&gt; akan mengembalikan substring &lt;code&gt;'Hello'&lt;/code&gt;.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Jika kita meningkatkan nilai &lt;code&gt;tick&lt;/code&gt; pada pemanggilan berikutnya, maka teks akan bergerak lebih jauh dan bagian teks yang tampil pun akan berubah.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Bagaimana Teks Bisa Bergerak?&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Efek pergerakan tercipta karena setiap kali kita memanggil fungsi &lt;code&gt;ticker&lt;/code&gt;, nilai &lt;code&gt;tick&lt;/code&gt; akan berubah. Dengan meningkatnya nilai &lt;code&gt;tick&lt;/code&gt;, bagian teks yang ditampilkan juga berubah. Ini memberikan efek pergerakan karena &lt;code&gt;tick&lt;/code&gt; menggulir teks secara dinamis.&lt;/p&gt;

&lt;p&gt;Untuk menguji efek ini lebih lanjut, kita bisa memanggil fungsi &lt;code&gt;ticker&lt;/code&gt; dalam sebuah loop dengan meningkatkan nilai &lt;code&gt;tick&lt;/code&gt; secara berkala, misalnya menggunakan &lt;code&gt;setInterval()&lt;/code&gt; untuk memperbarui tampilan setiap beberapa detik.&lt;/p&gt;




&lt;p&gt;Jika Anda tertarik untuk mencoba tantangan serupa, saya menemukan fungsi ini melalui &lt;a href="https://www.codewars.com/kata/5a959662373c2e761d000183" rel="noopener noreferrer"&gt;Codewars&lt;/a&gt;, dan ini menjadi latihan yang menyenangkan untuk meningkatkan kemampuan pemrograman JavaScript Anda.&lt;/p&gt;

&lt;p&gt;Selamat mencoba, dan semoga artikel ini bermanfaat dalam memahami cara kerja efek ticker di JavaScript!&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>programming</category>
      <category>tutorial</category>
      <category>indonesia</category>
    </item>
    <item>
      <title>Cara Membuat Fungsi longestWord di JavaScript dengan Penjelasan Teknis</title>
      <dc:creator>Ramadhanty Sadewi</dc:creator>
      <pubDate>Sat, 14 Dec 2024 05:57:58 +0000</pubDate>
      <link>https://dev.to/rantidhanty/cara-membuat-fungsi-longestword-di-javascript-dengan-penjelasan-teknis-29ej</link>
      <guid>https://dev.to/rantidhanty/cara-membuat-fungsi-longestword-di-javascript-dengan-penjelasan-teknis-29ej</guid>
      <description>&lt;h2&gt;
  
  
  Menemukan Kata Terpanjang di JavaScript dengan &lt;code&gt;longestWord&lt;/code&gt;
&lt;/h2&gt;

&lt;p&gt;Oke, jadi kali ini aku mau sharing tentang sebuah fungsi simpel tapi cukup menarik yang aku temui waktu belajar JavaScript dan aku menemukan ini di &lt;a href="https://www.codewars.com/kata/5939ab6eed348a945f0007b2" rel="noopener noreferrer"&gt;codewars&lt;/a&gt;. Nama fungsinya adalah &lt;code&gt;longestWord&lt;/code&gt;. Seperti namanya, fungsi ini bakal mencari dan mengembalikan kata terpanjang dari sebuah string. &lt;/p&gt;

&lt;p&gt;Aku akan jelaskan kenapa fungsi ini bisa jalan, metode-metode apa aja yang dipakai, dan alasannya. Yuk, langsung aja ke penjelasan detailnya!&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;Tujuan Fungsi &lt;code&gt;longestWord&lt;/code&gt;&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Fungsi ini tugasnya simpel: menerima input berupa string yang berisi beberapa kata (dipisahkan spasi), lalu mengembalikan kata terpanjang. Kalau ternyata ada lebih dari satu kata dengan panjang yang sama, fungsi ini bakal ambil kata terakhir yang ditemukan.&lt;/p&gt;

&lt;p&gt;Contohnya kayak gini:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;longestWord&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Aku sedang belajar JavaScript yang menyenangkan&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="c1"&gt;// Output: "menyenangkan"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;longestWord&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;red blue gold&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="c1"&gt;// Output: "gold"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  &lt;strong&gt;Kode Fungsinya&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Ini kodenya, pendek banget, tapi kerennya di balik layar ada banyak hal yang terjadi:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;longestWord&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;stringOfWords&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;stringOfWords&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;split&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt; &lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// Pecah string jadi array kata-kata&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;sort&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// Urutkan berdasarkan panjang&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;slice&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// Ambil elemen terakhir (kata terpanjang)&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;toString&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// Ubah jadi string lagi&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  &lt;strong&gt;Penjelasan Teknis&lt;/strong&gt;
&lt;/h2&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;1. Memisahkan String Jadi Array Kata: &lt;code&gt;.split(' ')&lt;/code&gt;&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Pertama, string yang dimasukkan dipecah jadi array kata-kata dengan metode &lt;code&gt;split(' ')&lt;/code&gt;. Jadi spasi di string itu kayak pemisah antar kata.  &lt;/p&gt;

&lt;p&gt;Misalnya:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Aku sedang belajar&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;split&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt; &lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="c1"&gt;// Output: ["Aku", "sedang", "belajar"]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Ini penting karena kita nggak bisa langsung manipulasi string kayak array. Dengan split, tiap kata jadi elemen array yang gampang banget dikelola.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;2. Mengurutkan Kata Berdasarkan Panjang: &lt;code&gt;.sort((a, b) =&amp;gt; a.length - b.length)&lt;/code&gt;&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Setelah jadi array, kita urutkan kata-kata itu dari yang terpendek sampai terpanjang pakai metode &lt;code&gt;sort&lt;/code&gt;.&lt;br&gt;&lt;br&gt;
Di dalam &lt;code&gt;sort&lt;/code&gt;, aku kasih callback &lt;code&gt;(a, b) =&amp;gt; a.length - b.length&lt;/code&gt;. Intinya, aku minta JavaScript ngurutkan elemen array berdasarkan panjangnya.  &lt;/p&gt;

&lt;p&gt;Hasilnya?&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Aku&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;sedang&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;belajar&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nf"&gt;sort&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="c1"&gt;// Output: ["Aku", "sedang", "belajar"]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;strong&gt;3. Ambil Kata Terpanjang: &lt;code&gt;.slice(-1)&lt;/code&gt;&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Karena array sudah diurutkan, kata paling panjang pasti ada di ujung array. Nah, &lt;code&gt;slice(-1)&lt;/code&gt; fungsinya buat ambil elemen terakhir.&lt;/p&gt;

&lt;p&gt;Contohnya kayak gini:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Aku&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;sedang&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;belajar&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nf"&gt;slice&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="c1"&gt;// Output: ["belajar"]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;strong&gt;4. Ubah Lagi Jadi String: &lt;code&gt;.toString()&lt;/code&gt;&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Hasil dari &lt;code&gt;slice(-1)&lt;/code&gt; itu sebenarnya masih berbentuk array, walaupun isinya cuma satu elemen. Supaya sesuai dengan output yang diminta, kita ubah lagi jadi string pakai &lt;code&gt;toString()&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Hasil akhirnya:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;belajar&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nf"&gt;toString&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="c1"&gt;// Output: "belajar"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  &lt;strong&gt;Kenapa Pakai Metode-Metode Ini?&lt;/strong&gt;
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;split(' ')&lt;/code&gt;&lt;/strong&gt;: Karena string itu sifatnya immutable (nggak bisa diubah langsung), aku pecah dulu jadi array biar gampang diolah.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;sort()&lt;/code&gt;&lt;/strong&gt;: Cara tercepat buat cari elemen terbesar atau terpanjang adalah dengan ngurutkan dulu datanya.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;slice(-1)&lt;/code&gt;&lt;/strong&gt;: Ini trik simple buat langsung ambil elemen terakhir dari array.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;toString()&lt;/code&gt;&lt;/strong&gt;: Karena output akhirnya harus berbentuk string, ini step terakhirnya.&lt;/li&gt;
&lt;/ol&gt;




&lt;p&gt;Buat aku, fungsi &lt;code&gt;longestWord&lt;/code&gt; ini kayak latihan yang bagus buat ngingetin beberapa metode penting di JavaScript, terutama buat kerja dengan string dan array. Dari fungsi ini, aku juga jadi makin paham gimana cara kerja &lt;code&gt;split&lt;/code&gt;, &lt;code&gt;sort&lt;/code&gt;, &lt;code&gt;slice&lt;/code&gt; dan &lt;code&gt;toString&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Kalau kamu ada ide lain buat nyelesain masalah ini, atau mungkin mau optimasi lebih lanjut, yuk diskusi bareng di kolom komentar! 😊&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>programming</category>
      <category>indonesia</category>
      <category>tutorial</category>
    </item>
  </channel>
</rss>
