Cara menggunakan javascript array join numbers

<Array Referensi JavaScript

Show

Contoh

Bergabung dengan elemen array ke dalam string:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join();

Hasil energi akan menjadi:

Banana,Orange,Apple,Mango

Cobalah sendiri "

Lebih "Try it Yourself" contoh di bawah ini.


Definisi dan Penggunaan

The join() metode bergabung dengan elemen array menjadi string, dan mengembalikan string.

Elemen-elemen akan dipisahkan oleh separator ditentukan. Pemisah default dengan koma (,) .


Dukungan Browser

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.

metodejoin()1.05.51.0iya nihiya nih

Sintaksis

Nilai parameterParameterDeskripsiseparatorPilihan. pemisah yang akan digunakan. Jika dihilangkan, unsur-unsur dipisahkan dengan koma

Rincian teknis

Kembali Nilai:Sebuah String, yang mewakili nilai-nilai array, dipisahkan oleh pemisah yang ditentukanVersi JavaScript:1.1

Cara menggunakan javascript array join numbers

Contoh lebih

Contoh

Coba gunakan pemisah yang berbeda:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join(" and ");

Hasil energi akan menjadi:

Banana and Orange and Apple and Mango

Cobalah sendiri "


<Array Referensi JavaScript

Examples

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = fruits.join();

Try it Yourself »

Another separator:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = fruits.join(" and ");

Try it Yourself »


Definition and Usage

The join() method returns an array as a string.

The join() method does not change the original array.

Any separator can be specified. The default is comma (,).


Syntax

Parameters

ParameterDescriptionseparatorOptional.
The separator to be used.
Default is a comma.

Return Value

TypeDescriptionA string.The array values, separated by the specified separator.

Browser Support

join() is an ECMAScript1 (ES1) feature.

ES1 (JavaScript 1997) is fully supported in all browsers:

ChromeEdgeFirefoxSafariOperaIEYesYesYesYesYesYes

Bagaimana kalau ada 100 produk, apakah kita akan membut variabel sebanyak 100 dan melakukan

var products = ["Flashdisk", "SDD", "Monitor"];
4 sebanyak 100x?

Capek donk.

Karena itu, kita harus menggunakan Array.

Apa itu Array?

Sebelum kita membahas Array, kita bahas dulu apa itu struktur data?

Struktur data merupakan cara-cara atau metode yang digunakan untuk menyimpan data di dalam memori komputer.

Salah satu struktur data yang sering digunakan dalam pemrograman adalah Array.

Array merupakan struktur data yang digunakan untuk menyimpan sekumpulan data dalam satu tempat.

Setiap data dalam Array memiliki indeks, sehingga kita akan mudah memprosesnya.

Cara menggunakan javascript array join numbers

Indeks array selalu dimulai dari angka nol (

var products = ["Flashdisk", "SDD", "Monitor"];
5).

Pada teori struktur data…

…Ukuran array akan bergantung dari banyaknya data yang ditampung di dalamnya.

Cara Membuat Array pada Javascript

Pada javascript, array dapat kita buat dengan tanda kurung siku (

var products = ["Flashdisk", "SDD", "Monitor"];
6).

Contoh:

var products = [];

Maka variabel

var products = ["Flashdisk", "SDD", "Monitor"];
7 akan berisi sebuah array kosong.

Kita bisa mengisi data ke dalam array, lalu setiap data dipisah dengan tanda koma (

var products = ["Flashdisk", "SDD", "Monitor"];
8).

Contoh:

var products = ["Flashdisk", "SDD", "Monitor"];

Oya, karena javascript merupakan bahasa pemrograman yang dynamic typing…

…maka kita bisa menyimpan dan mencampur apapun di dalam array.

Contoh:

var myData = [12, 2.1, true, 'C', "Petanikode"];

Cara Mengambil Data dari Array

Seperti yang sudah kita kethaui…

Array akan menyimpan sekumpulan data dan memberinya nomer indeks agar mudah diakses.

Indeks array selalu dimauli dari nol

var products = ["Flashdisk", "SDD", "Monitor"];
5.

Misalkan kita punya array seperti ini:

var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];

Bagaimana cara kita mengambil nilai

var myData = [12, 2.1, true, 'C', "Petanikode"];
0?

Jawabannya seperti ini:

makanan[1] //-> "Mie Ayam"

Kenapa bukan

var myData = [12, 2.1, true, 'C', "Petanikode"];
1?

Ingat: indeks array selalu dimulai dari nol.

Biar lebih jelas, mari kita coba dalam program:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Mengambil data dari array</title>
</head>
<body>
    <script>
        // membuat array
        var products = ["Senter", "Radio", "Antena", "Obeng"];

        // mengambil radio
        document.write(products[1]);
    </script>
</body>
</html>

Hasilnya:

Cara menggunakan javascript array join numbers

Mencetak isi Array dengan Perulangan

Kita bisa saja mencetak semua isi array satu-per-satu seperti ini:

document.write(products[0]);
document.write(products[1]);
document.write(products[2]);
document.write(products[3]);
document.write(products[4]);

Bagaimana kalau nanti isi array-nya ada

var myData = [12, 2.1, true, 'C', "Petanikode"];
2?

Tentu kita tidak akan mau menulis

var myData = [12, 2.1, true, 'C', "Petanikode"];
2 baris kode untuk mencetak array.

Solusinya: Gunakan perulangan.

Mari kita lihat contohnya:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Array dan perulangan</title>
</head>
<body>
    <script>
        // membuat array
        var products = ["Senter", "Radio", "Antena", "Obeng"];

        document.write("<h3>Daftar Produk:</h3>");
        document.write("<ol>");
        // menggunakan perulangan untuk mencetak semua isi array
        for(let i = 0; i < products.length; i++){
            document.write(`<li>${ products[i] }</li>`);
        }
        document.write("</ol>");
    </script>
</body>
</html>

Hasilnya:

Cara menggunakan javascript array join numbers

Perhatikan…

Pada contoh di atas, kita menggunakan properti

var myData = [12, 2.1, true, 'C', "Petanikode"];
4 untuk mengambil panjang array.

Kita memiliki

var myData = [12, 2.1, true, 'C', "Petanikode"];
5 data di dalam array
var products = ["Flashdisk", "SDD", "Monitor"];
7, maka properti
var myData = [12, 2.1, true, 'C', "Petanikode"];
4 akan bernilai
var myData = [12, 2.1, true, 'C', "Petanikode"];
5.

Lalu kita gunakan properti ini untuk membatasi jumlah perulangan di dalam for.

for(let i = 0; i < products.length; i++){
    document.write(`<li>${ products[i] }</li>`);
}

…dan di dalam blok for, kita mencetak isi produk dengan indeks yang mengacu pada variabel

var myData = [12, 2.1, true, 'C', "Petanikode"];
9.

Cara lain:

Kita bisa mengunakan perulangan dengan method

var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];
0.

Contoh:

var products = [];
0

Hasilnya akan sama seperti di atas.

Cara menggunakan javascript array join numbers

Cara Menambahkan Data ke Dalam Array

Ada dua cara yang bisa dilakukan untuk menambah data ke dalam array:

  1. Mengisi menggunakan indeks;
  2. Mengisi menggunakan method
    var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];
    1.

Mengisi dengan indeks maksudnya begini…

Misal kita punya array dengan isi sebagai berikut:

var products = [];
1

Terdapat tiga data di dalam array

var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];
2 dengan indeks:

  • var products = ["Flashdisk", "SDD", "Monitor"];
    5:
    var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];
    4
  • var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];
    5:
    var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];
    6
  • var myData = [12, 2.1, true, 'C', "Petanikode"];
    1:
    var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];
    8

Kita ingin menambahkan data lagi pada indeks ke-

var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];
9, maka kita bisa melakukannya seperti ini:

var products = [];
2

Sekarng array

var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];
2 akan berisi
var myData = [12, 2.1, true, 'C', "Petanikode"];
5 data.

Mari kita coba pada console Javascript.

Cara menggunakan javascript array join numbers

Benar kan…

makanan[1] //-> "Mie Ayam"
2 berhasil kita tambahkan ke dalam array
var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];
2.

Tapi kekurangan dari cara ini ialah:

Kita harus tahu jumlah data atau panjang array-nya, barulah kita bisa menambahkan.

Apabila kita memasukan nomer indeks sembarangan, maka nanti yang akan terjadi adalah data yang ada di daalam indeks tersebut akan ditindih.

Lalu solusinya bagaimana donk?

Kita gunakan method

var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];
1.

Kita tidak perlu tahu berapa panjang array-nya, karena method

var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];
1 akan menambahkan data ke dalam array dari ekor atau belakang.

Contoh:

var products = [];
3

Maka hasilnya:

Cara menggunakan javascript array join numbers

Kita juga bisa menambahkan beberapa data sekaligus dengan cara seperti ini:

var products = [];
4

Cara Menghapus Data Array

Sama seperti menambahkan data ke array, menghapus data juga memiliki dua cara:

  1. Menggunakan
    makanan[1] //-> "Mie Ayam"
    
    6;
  2. Menggunakan method
    makanan[1] //-> "Mie Ayam"
    
    7.

Contoh:

var products = [];
5

Kita dapat menghapus data dengan nomer indeks tertentu dengan

makanan[1] //-> "Mie Ayam"
6. Sedangkan
makanan[1] //-> "Mie Ayam"
7 akan menghapus dari belakang.

Kekurangan dari

makanan[1] //-> "Mie Ayam"
6, ia akan menciptakan ruang kosong di dalam array.

Percobaan di dalam console:

Cara menggunakan javascript array join numbers

Tentu ini kurang bagus…

…karena array akan tetap memiliki panjang

var myData = [12, 2.1, true, 'C', "Petanikode"];
5.

Cara kedua menggunakan method

makanan[1] //-> "Mie Ayam"
7, kebalikan dari method
var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];
1.

Method

makanan[1] //-> "Mie Ayam"
7 akan menghapus array yang ada di paling belakang.

Array pada javascript dapat kita pandang sebagai sebuah stack (tumpukan), yang mana memiliki sifat LILO (Last in Last out).

Cara menggunakan javascript array join numbers

Mari kita coba di dalam console.

Cara menggunakan javascript array join numbers

Kita memanggil method

makanan[1] //-> "Mie Ayam"
7 sebanyak
var myData = [12, 2.1, true, 'C', "Petanikode"];
5 kali, maka array-nya akan kosong
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Mengambil data dari array</title>
</head>
<body>
    <script>
        // membuat array
        var products = ["Senter", "Radio", "Antena", "Obeng"];

        // mengambil radio
        document.write(products[1]);
    </script>
</body>
</html>
7. Karena isinya hanya
var myData = [12, 2.1, true, 'C', "Petanikode"];
5 saja.

Method

makanan[1] //-> "Mie Ayam"
7 akan mengembalikan nilai item atau data yang terhapus dari array.

Menghapus Data dari Depan

Kita juga dapat menghapus data dari depan dengan menggunakan method

document.write(products[0]);
document.write(products[1]);
document.write(products[2]);
document.write(products[3]);
document.write(products[4]);
0.

Contoh:

var products = [];
6

Maka data yang terhapus adalah

document.write(products[0]);
document.write(products[1]);
document.write(products[2]);
document.write(products[3]);
document.write(products[4]);
1.

Percobaan pada conosole:

Menghapus Data pada Indeks Tertentu

Apabila kita ingin menghapus data pada inteks tertentu, maka fungsi atau method yang digunakan adalah

document.write(products[0]);
document.write(products[1]);
document.write(products[2]);
document.write(products[3]);
document.write(products[4]);
2.

Fungsi ini memiliki dua parameter yang harus diberikan:

var products = [];
7

Keterangan:

  • document.write(products[0]);
    document.write(products[1]);
    document.write(products[2]);
    document.write(products[3]);
    document.write(products[4]);
    3 adalah indeks dari data di dalam array yang akan dihapus;
  • document.write(products[0]);
    document.write(products[1]);
    document.write(products[2]);
    document.write(products[3]);
    document.write(products[4]);
    4 adalah jumlah data yang akan dihapus dari indeks tersebut.

Biasanya kita berikan nilai total dengan nilai

var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];
5 agar hanya menghapus satu data saja.

Contoh:

var products = [];
8

Percobaan pada console:

Cara menggunakan javascript array join numbers

Pada percobaan di atas, apabila kita tidak mengisi

document.write(products[0]);
document.write(products[1]);
document.write(products[2]);
document.write(products[3]);
document.write(products[4]);
4 data yang akan dihapus, maka semua data dari indeks yang terpilih akan dihapus.

Mengubah isi Array

Untuk mengubah isi array, kita bisa mengisi ulang seperti ini:

var products = [];
9

Maka

document.write(products[0]);
document.write(products[1]);
document.write(products[2]);
document.write(products[3]);
document.write(products[4]);
7 akan diganti dengan
document.write(products[0]);
document.write(products[1]);
document.write(products[2]);
document.write(products[3]);
document.write(products[4]);
8.

Percobaan pada console:

Cara menggunakan javascript array join numbers

Sangat mudah bukan…

Method-method penting pada Array

Selain method-method atau fungsi yang sudah kita coba di atas, terdapat beberapa method dalam Array yang perlu kita ketahui.

1. Method document.write(products[0]); document.write(products[1]); document.write(products[2]); document.write(products[3]); document.write(products[4]);9

Method

document.write(products[0]);
document.write(products[1]);
document.write(products[2]);
document.write(products[3]);
document.write(products[4]);
9 berfungsi untuk menyaring data dari array.

Parameter yang harus diberikan pada method

document.write(products[0]);
document.write(products[1]);
document.write(products[2]);
document.write(products[3]);
document.write(products[4]);
9 sama seperti method
var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];
0, yaitu: sebuah fungsi callback.

Contoh:

var products = ["Flashdisk", "SDD", "Monitor"];
0

Pada contoh di atas, kita memberikan arrow function sebagai fungsi callback yang akan melakukan penyaringan terhadap array.

Sebenarnya kita bisa buat lebih sederhana lagi seperti ini:

var products = ["Flashdisk", "SDD", "Monitor"];
1

2. Method <!DOCTYPE html> <html lang="en"> <head> <title>Array dan perulangan</title> </head> <body> <script> // membuat array var products = ["Senter", "Radio", "Antena", "Obeng"]; document.write("<h3>Daftar Produk:</h3>"); document.write("<ol>"); // menggunakan perulangan untuk mencetak semua isi array for(let i = 0; i < products.length; i++){ document.write(`<li>${ products[i] }</li>`); } document.write("</ol>"); </script> </body> </html>3

Method ini berfungsi untuk mengecek apakah sebuah data ada di dalam array atau tidak. Biasanya digunakan untuk melakukan pencarian untuk memastikan data sudah ada di dalam array.

Contoh:

var products = ["Flashdisk", "SDD", "Monitor"];
2

3. Method <!DOCTYPE html> <html lang="en"> <head> <title>Array dan perulangan</title> </head> <body> <script> // membuat array var products = ["Senter", "Radio", "Antena", "Obeng"]; document.write("<h3>Daftar Produk:</h3>"); document.write("<ol>"); // menggunakan perulangan untuk mencetak semua isi array for(let i = 0; i < products.length; i++){ document.write(`<li>${ products[i] }</li>`); } document.write("</ol>"); </script> </body> </html>4

Method

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Array dan perulangan</title>
</head>
<body>
    <script>
        // membuat array
        var products = ["Senter", "Radio", "Antena", "Obeng"];

        document.write("<h3>Daftar Produk:</h3>");
        document.write("<ol>");
        // menggunakan perulangan untuk mencetak semua isi array
        for(let i = 0; i < products.length; i++){
            document.write(`<li>${ products[i] }</li>`);
        }
        document.write("</ol>");
    </script>
</body>
</html>
4 berfungsi untuk mengurutkan data pada array.

Contoh:

var products = ["Flashdisk", "SDD", "Monitor"];
3

Apa Selanjutnya?

Kita sudah belajar tentang dasar-dasar array pada javascript, seperti membuat array, menambahkan data pada array, mengubah data pada array, menghapus data pada array, dan juga method-method yang biasa digunakan pada array.

Masih banyak lagi method-method yang belum kita coba.

Saran saya:

Sering-seringlah berlatih.

Gunakan console Javascript untuk mencoba-coba method yang ada pada Array.

Cara menggunakan javascript array join numbers

Selanjutnya kita akan belajar tentang fungsi pada Javascript untuk membuat program yang lebih terstruktur. Serta di sana kita akan membuat aplikasi dengan menggunakan array sebagai penyimpanan datanya.

Bagaimana cara yang benar untuk menulis array JavaScript?

Cara Membuat Array pada Javascript Pada javascript, array dapat kita buat dengan tanda kurung siku ( [...] ). Contoh: var products = []; Maka variabel products akan berisi sebuah array kosong.

Method apa yang dapat kita gunakan untuk memilih elemen array berdasarkan kondisi tertentu dan akan membuat sebuah array baru?

filter() Metode ini berfungsi untuk membuat sebuah array baru dengan memperhatikan kondisi tertentu pada setiap elemen dari array yang sudah ada.