Lecture ini membahas dua method String untuk menambahkan karakter di bagian luar sebuah string sampai mencapai panjang tertentu, yaitu:

• padStart()
• padEnd()

Keduanya sebenarnya sederhana. Yang sering bikin bingung adalah arti targetLength, cara kerja padding, dan perbedaan antara jumlah karakter padding dengan panjang akhir string.

1. Apa itu padStart() dan padEnd()?

Secara sederhana:

padStart() menambahkan karakter di awal String.

padEnd() menambahkan karakter di akhir String.

Contoh:

let str = "ABC";

Panjang str adalah:

A B C
0 1 2

str.length
// 3

Kalau kita ingin panjang akhirnya menjadi 8:

str.padStart(8, "*");

hasil:

*****ABC

Panjangnya:

*****ABC
└──8───┘

Sedangkan:

str.padEnd(8, "*");

hasil:

ABC*****

Jadi gampangnya:

padStart
↓
*****ABC


padEnd
↓
ABC*****

2. Bentuk dasar syntax

padStart()

string.padStart(targetLength, padString);

Contoh:

let str = "ABC";

let result = str.padStart(8, "*");

console.log(result);

Hasil:

*****ABC

padEnd()

string.padEnd(targetLength, padString);

Contoh:

let str = "ABC";

let result = str.padEnd(8, "*");

console.log(result);

Hasil:

ABC*****

3. Ada dua parameter

Kedua method ini mempunyai dua parameter:

padStart(targetLength, padString)
padEnd(targetLength, padString)

Parameter 1: targetLength

Ini adalah:

Panjang total String yang ingin dicapai.

Bukan jumlah karakter yang ingin ditambahkan.

Ini bagian yang sangat penting.

Misalnya:

"ABC".padStart(8, "*");

String awal:

ABC

Panjang:

3

Target:

8

Maka JavaScript perlu menambahkan:

8 - 3 = 5

karakter.

Hasil:

*****ABC

Total:

5 + 3 = 8

4. Cara menghitung padding

Gunakan rumus sederhana:

jumlah padding = targetLength - panjang String sekarang

Contoh:

"ABC".padStart(8, "*");

targetLength = 8
currentLength = 3

padding = 8 - 3
        = 5

Maka:

*****ABC

Contoh lain:

"Hello".padStart(10, "-");

"Hello" memiliki 5 karakter.

Target = 10.

Maka:

10 - 5 = 5

Hasil:

-----Hello

5. Parameter kedua boleh tidak diberikan

padString bersifat optional.

Misalnya:

"ABC".padStart(8);

Karena kita tidak memberikan karakter padding, JavaScript menggunakan spasi.

Hasilnya secara visual:

     ABC

Ada 5 spasi sebelum ABC.

Begitu juga:

"ABC".padEnd(8);

hasil:

ABC     

6. Kita bisa menggunakan karakter apa saja

Misalnya *:

"ABC".padStart(8, "*");

*****ABC

Dengan titik:

"ABC".padStart(8, ".");

.....ABC

Dengan -:

"ABC".padStart(8, "-");

-----ABC

Jadi padding tidak harus *.

7. Bahkan padString bisa berupa beberapa karakter

Ini bagian yang menarik.

Misalnya:

"ABC".padStart(8, "123");

Target = 8.

String asli:

ABC

Panjang = 3.

Jadi membutuhkan:

8 - 3 = 5

karakter padding.

Pad string kita adalah:

123

JavaScript mengulangnya:

123123...

Tapi kita hanya membutuhkan 5 karakter.

Jadi yang diambil:

12312

Hasil:

12312ABC

Total:

12312 + ABC
  5    +  3
       = 8

8. Jadi padStart() bukan sekadar “mengulang string”

Ini penting.

Lecture mengatakan padStart() akan mengulang string padding sampai mencapai panjang tertentu.

Benar, tetapi cara berpikir yang lebih tepat:

JavaScript akan mengambil sebanyak karakter yang diperlukan dari padString yang diulang agar panjang akhir mencapai targetLength.

Contoh:

"ABC".padStart(10, "123");

Butuh:

10 - 3 = 7

karakter padding.

123 diulang:

123123123...

Ambil 7:

1231231

Hasil:

1231231ABC

Total:

7 + 3 = 10

9. Perbedaan utama padStart() dan padEnd()

Ini sebenarnya cuma satu hal:

Contoh:

let str = "ABC";

padStart()

str.padStart(8, "*");

*****ABC

padEnd()

str.padEnd(8, "*");

ABC*****

Cara mengingat:

START = awal
END   = akhir

Jadi:

padStart
    ↓
[padding][String]


padEnd
    ↓
[String][padding]

10. Bagaimana kalau target lebih kecil dari panjang String?

Ini juga penting.

Misalnya:

let str = "ABC";

Panjang:

3

Kemudian:

str.padStart(2, "*");

Target:

2

Tapi String sudah memiliki panjang:

3

JavaScript tidak akan memotong String.

Hasil:

ABC

Sama seperti original.

Begitu juga:

str.padEnd(2, "*");

hasil:

ABC

11. Kalau target sama dengan panjang sekarang?

Misalnya:

"ABC".padStart(3, "*");

Panjang sekarang = 3.

Target = 3.

Tidak perlu menambahkan apa pun.

Hasil:

ABC

Jadi:

current length >= target length
        ↓
tidak ada padding
        ↓
String tetap

12. Visualisasi cara kerja

Misalnya:

"ABC".padStart(8, "*");

Awalnya:

ABC

Panjang:

3

Target:

8

Butuh 5 karakter:

*****

Gabungkan:

***** + ABC

Hasil:

*****ABC

Sedangkan padEnd():

ABC + *****

Hasil:

ABC*****

13. padStart() tidak mengubah String asli

Ini nyambung dengan materi sebelumnya tentang String immutable.

Misalnya:

let str = "ABC";

str.padStart(8, "*");

console.log(str);

Hasil:

ABC

Kenapa?

Karena:

str.padStart(8, "*");

menghasilkan String baru.

Tapi kita tidak menyimpannya.

Kalau ingin menyimpan hasilnya:

let str = "ABC";

let result = str.padStart(8, "*");

console.log(str);
console.log(result);

Hasil:

ABC
*****ABC

Jadi:

original
"ABC"
   │
   └──────→ tetap "ABC"

padStart()
   │
   └──────→ menghasilkan "*****ABC"

14. Ini sama seperti method String yang sudah kamu pelajari

Kamu sebelumnya belajar:

toUpperCase()
toLowerCase()
slice()
substring()
repeat()
concat()
trim()

Method-method tersebut umumnya tidak mengubah String original.

padStart() dan padEnd() juga sama.

Contoh:

let name = "john";

let result = name.toUpperCase();

console.log(name);   // john
console.log(result); // JOHN

Begitu juga:

let str = "ABC";

let result = str.padStart(8, "*");

console.log(str);    // ABC
console.log(result); // *****ABC

15. Use case pertama: format angka

Salah satu penggunaan paling mudah adalah membuat angka memiliki panjang yang konsisten.

Misalnya kita punya nomor:

7
42
123

Kita ingin semuanya memiliki 3 digit:

007
042
123

Gunakan:

"7".padStart(3, "0");

Hasil:

007

Dan:

"42".padStart(3, "0");

Hasil:

042

Sedangkan:

"123".padStart(3, "0");

tetap:

123

16. Kenapa angka harus diubah menjadi String?

Perhatikan:

let number = 7;

7 adalah Number.

padStart() adalah String method.

Jadi kita biasanya mengubahnya menjadi String:

let result = String(number).padStart(3, "0");

atau:

let result = number.toString().padStart(3, "0");

Hasil:

007

17. Use case kedua: jam

Misalnya kita memiliki:

let hour = "7";
let minute = "5";

Kita ingin menampilkan:

07:05

Kita bisa:

let formattedHour = hour.padStart(2, "0");
let formattedMinute = minute.padStart(2, "0");

console.log(formattedHour + ":" + formattedMinute);

Hasil:

07:05

Ini adalah contoh penggunaan yang sangat umum.

18. Use case ketiga: nomor invoice

Misalnya sistem kita memiliki nomor invoice:

1
2
3
...
25

Tapi kita ingin menampilkan:

INV-0001
INV-0002
INV-0025

Kita bisa:

let invoiceNumber = "25";

let invoice = "INV-" + invoiceNumber.padStart(4, "0");

console.log(invoice);

Hasil:

INV-0025

Perhatikan:

"25"
 ↓
padStart(4, "0")
 ↓
"0025"
 ↓
"INV-" + "0025"
 ↓
"INV-0025"

19. Use case utama lecture: masking kartu

Sekarang masuk ke contoh yang lebih menarik.

Misalnya nomor kartu:

1234567890123456

Kita tidak ingin menampilkan semuanya.

Kita ingin:

************3456

Artinya:

• 12 karakter pertama → *
• 4 karakter terakhir → tetap terlihat

20. Langkah pertama: ambil 4 karakter terakhir

Kita sudah belajar slice().

let card = "1234567890123456";

let x = card.slice(-4);

Hasil:

3456

Kenapa -4?

Karena:

slice(-4)
   ↓
ambil 4 karakter terakhir

Visual:

1234567890123456
            ↑↑↑↑
             4

21. Langkah kedua: gunakan padStart()

Sekarang:

x

berisi:

3456

Panjangnya:

4

Tapi kita ingin hasil akhir memiliki panjang sama dengan nomor kartu asli.

Nomor kartu:

card.length

hasil:

16

Maka:

x.padStart(card.length, "*");

sama dengan:

"3456".padStart(16, "*");

Butuh:

16 - 4 = 12

asterisk.

Hasil:

************3456

22. Function lengkap

Lecture membuat function:

function maskCardNumber(card) {
  let x = card.slice(-4);

  return x.padStart(card.length, "*");
}

Kemudian:

let cardNumber = "1234567890123456";

let maskedCard = maskCardNumber(cardNumber);

console.log(maskedCard);

Hasil:

************3456

23. Mari baca function tersebut seperti manusia

Kode:

function maskCardNumber(card) {
  let x = card.slice(-4);

  return x.padStart(card.length, "*");
}

Artinya:

Step 1

Terima nomor kartu:

1234567890123456

Step 2

Ambil 4 terakhir:

3456

Step 3

Panjangkan 3456 sampai panjang kartu asli:

panjang kartu = 16

Step 4

Gunakan * sebagai padding:

************3456

Flow-nya:

1234567890123456
        │
        │ slice(-4)
        ▼
      "3456"
        │
        │ padStart(16, "*")
        ▼
************3456

Ini contoh bagus bagaimana dua String method dapat digabungkan:

slice()
  ↓
ambil bagian tertentu

padStart()
  ↓
format bagian tersebut

24. Contoh kedua: masking email

Lecture kemudian membuat contoh email.

Misalnya:

johnsmith@gmail.com

Kita ingin menampilkan sebagian awal:

johns*************

25. Ambil 5 karakter pertama

Gunakan:

let e = email.slice(0, 5);

Misalnya:

johnsmith@gmail.com

Hasil:

johns

Kenapa 5?

Karena:

slice(0, 5)

mengambil index:

0 1 2 3 4

Index 5 tidak termasuk.

26. Kemudian gunakan padEnd()

Sekarang:

e = "johns"

Kita ingin mempertahankan panjang asli email.

Misalnya:

email.length

adalah:

18

Maka:

e.padEnd(email.length, "*");

akan membuat:

johns*************

Total panjangnya tetap sama dengan email original.

27. Function lengkap

function maskEmail(email) {
  let e = email.slice(0, 5);

  return e.padEnd(email.length, "*");
}

Kemudian:

let email = "johnsmith@gmail.com";

let maskedEmail = maskEmail(email);

console.log(maskedEmail);

Secara konsep hasilnya:

johns*************

28. Perhatikan pola dua contoh tadi

Card

Kita ingin mempertahankan bagian belakang:

************3456

Maka:

slice(-4)
      ↓
ambil belakang

padStart()
      ↓
tambahkan * di depan

Email

Kita ingin mempertahankan bagian depan:

johns*************

Maka:

slice(0, 5)
      ↓
ambil depan

padEnd()
      ↓
tambahkan * di belakang

Ini pola yang bagus untuk diingat:

INGIN MENYIMPAN BAGIAN BELAKANG?
        ↓
     slice(-n)
        ↓
    padStart()


INGIN MENYIMPAN BAGIAN DEPAN?
        ↓
    slice(0, n)
        ↓
     padEnd()

29. Hubungan slice() + padStart() + padEnd()

Tiga method yang sekarang sudah kamu pelajari bisa bekerja bersama.

slice()
  ↓
mengambil sebagian String

padStart()
  ↓
menambahkan padding di depan

padEnd()
  ↓
menambahkan padding di belakang

Contoh:

let card = "1234567890123456";

let lastFour = card.slice(-4);

let masked = lastFour.padStart(card.length, "*");

Flow:

1234567890123456
        │
        ▼
      slice(-4)
        │
        ▼
       3456
        │
        ▼
   padStart(16, "*")
        │
        ▼
************3456

30. Hal yang sering salah: mengira 8 berarti tambah 8 karakter

Misalnya:

"ABC".padStart(8, "*");

❌ Jangan berpikir:

“Tambahkan 8 *.”

Bukan.

8 berarti:

Panjang akhir harus 8 karakter.

Karena "ABC" sudah punya 3 karakter:

8 - 3 = 5

Maka hanya ditambahkan 5 *.

*****ABC

31. Contoh latihan cepat

Coba tebak sebelum melihat jawabannya.

A

"Hi".padStart(5, "*");

Panjang awal:

2

Target:

5

Butuh:

5 - 2 = 3

Hasil:

***Hi

B

"Hi".padEnd(5, "-");

Hasil:

Hi---

C

"Hello".padStart(3, "*");

Panjang awal = 5.

Target = 3.

Karena:

5 > 3

hasil:

Hello

D

"ABC".padStart(8, "12");

Butuh 5 karakter.

Pad string:

12

Diulang:

12121

Hasil:

12121ABC

32. Perbandingan dengan repeat()

Ini juga penting karena sebelumnya kamu belajar repeat().

repeat()

"*".repeat(5);

Artinya:

Ulangi * sebanyak 5 kali.

Hasil:

*****

Sedangkan:

"ABC".padStart(8, "*");

artinya:

Tambahkan * sampai total panjang String menjadi 8.

Hasil:

*****ABC

Jadi:

33. padStart() vs repeat()

Misalnya kita ingin:

*****

Kita bisa:

"*".repeat(5);

Karena memang kita ingin 5 *.

Tapi kalau kita punya:

ABC

dan ingin total panjang 8:

"ABC".padStart(8, "*");

Kita tidak perlu menghitung jumlah * secara manual.

JavaScript yang menghitung:

target 8
-      3
--------
       5

34. Catatan keamanan untuk contoh kartu

Contoh masking kartu di lecture bagus untuk belajar padStart(), tetapi dalam aplikasi nyata kita perlu berhati-hati.

Jangan menyimpan atau mencetak nomor kartu lengkap sembarangan.

Konsep masking:

************3456

adalah pola tampilan yang umum, tetapi pengelolaan data kartu asli harus mengikuti praktik keamanan pembayaran yang benar.

Untuk belajar JavaScript, kita cukup fokus pada algoritmanya:

ambil bagian yang ingin ditampilkan
        ↓
mask bagian lainnya

35. Ringkasan semua String method yang sudah kamu pelajari

Sekarang kamu sudah punya cukup banyak tools.

Kamu bisa mulai melihat bahwa String method itu seperti alat-alat kecil untuk memproses teks.

36. 🧠 Mental model paling penting

Kalau melihat:

str.padStart(10, "*");

langsung baca:

“Buat panjang total str menjadi 10 dengan menambahkan * dari kiri.”

Kalau:

str.padEnd(10, "*");

baca:

“Buat panjang total str menjadi 10 dengan menambahkan * dari kanan.”

Visual:

             targetLength
                  ↓
       ┌──────────────────┐
       ↓                  ↓

padStart              padEnd

*****ABC              ABC*****
^^^^^                  ^^^^^
padding                padding

Dan ingat:

targetLength = PANJANG AKHIR

bukan:

jumlah karakter yang ditambahkan

37. Cheat sheet lecture

// START
"ABC".padStart(8, "*");
// "*****ABC"

// END
"ABC".padEnd(8, "*");
// "ABC*****"

// Default padding = space
"ABC".padStart(8);
// "     ABC"

// Target lebih kecil → tidak berubah
"ABC".padStart(2, "*");
// "ABC"

// Multi-character padding
"ABC".padStart(8, "123");
// "12312ABC"

// Tidak mengubah original
let str = "ABC";
let result = str.padStart(8, "*");

console.log(str);
// "ABC"

console.log(result);
// "*****ABC"

Pola masking:

// Tampilkan 4 terakhir
let lastFour = card.slice(-4);
let maskedCard = lastFour.padStart(card.length, "*");

1234567890123456
       ↓ slice(-4)
      3456
       ↓ padStart(16, "*")
************3456

Dan untuk menampilkan bagian depan:

let firstFive = email.slice(0, 5);
let maskedEmail = firstFive.padEnd(email.length, "*");

johnsmith@gmail.com
       ↓ slice(0, 5)
      johns
       ↓ padEnd(email.length, "*")
johns*************

Intinya: padStart() dan padEnd() adalah method untuk formatting String berdasarkan panjang total yang diinginkan, dan keduanya menghasilkan String baru tanpa mengubah String original.