Array di JavaScript: Contoh dan Codenya

Array pada JavaScript digunakan untuk menyimpan banyak nilai dalam satu variabel.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array</h2>

<p id="demo"></p>

<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Apa itu Array?

Array adalah variabel khusus, yang dapat menampung variabel lebih dari satu nilai dalam satu waktu.

Jika kita memiliki daftar item contohnya daftar nama mobil, menyimpan daftar item mobil dalam variabel tunggal akan terlihat seperti ini:

var car1 = “Saab”;
var car2 = “Volvo”;
var car3 = “BMW”;

Namun, bagaimana jika kita menginginkan nama mobil yang spesifik? Dan bagaimana jika data yang kita miliki bukan hanya 3 mobil, tetapi 300 mobil?

Maka solusinya adalah array menggunakan array.

Sebuah array dapat menampung banyak nilai dengan satu nama, dan Anda dapat mengakses nilai-nilai tersebut dengan merujuk ke nomor indeks.

Membuat Array

Menggunakan array literal adalah cara termudah untuk membuat Array pada JavaScript.

Sintaks:

var array_name = [item1, item2, …];

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array</h2>

<p id="demo"></p>

<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Spasi dan jeda baris tidak penting. Deklarasi array pada JavaScript dapat mencakup beberapa baris.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array</h2>

<p id="demo"></p>

<script>
var cars = [
  "Saab",
  "Volvo",
  "BMW"
];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Menggunakan Keyword new pada JavaScript

Contoh berikut ini juga menunjukan cara membuat Array, dan memberikan nilai kedalam array tersebut.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array</h2>

<p id="demo"></p>

<script>
var cars = new Array("Saab", "Volvo", "BMW");
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Kedua contoh di atas menghasilkan hasil yang sama persis. Tidak perlu menggunakan new Array().
Agar lebih sederhana, mudah dibaca dan kecepatan eksekusi, gunakan cara yang pertama (metode literal array).

Akses Elemen Array

Kita dapat mengakses elemen array dengan mengacu pada nomor indeks.

Statement dibawah ini mengakses nilai elemen pertama pada cars:

var name = cars[0];

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array</h2>

<p> Elemen array JavaScript dapat diakses menggunakan indeks numerik (mulai dari 0). </p>
<p id="demo"></p>

<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];
</script>

</body>
</html>

Catatan: Indeks array dimulai dengan 0.

[0] adalah elemen pertama. [1] adalah elemen kedua.

Mengubah Elemen Array

Statement ini menunjukan cara mengubah nilai elemen pertama dalam cars:

cars[0] = "Opel";

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>JavaScript array elements are accessed using numeric indexes (starting from 0).</p>

<p id="demo"></p>

<script>
var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Akses Array Penuh

Dengan JavaScript, full array dapat diakses dengan mengacu pada nama array.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array</h2>

<p id="demo"></p>

<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Array adalah Object

Array adalah tipe object khusus. Operator typeof dalam JavaScript mengembalikan nilai “object” untuk array.

Namun mendeksripsikan array JavaScript paling baik dideskripsikan sebagai array.

Array menggunakan angka untuk mengakses “elemen” nya. Dalam contoh ini, person [0] mengembalikan nilai John.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array</h2>

<p> Array menggunakan angka untuk mengakses elemennya. </p>
<p id="demo"></p>

<script>
var person = ["John", "Doe", 46];
document.getElementById("demo").innerHTML = person[0];
</script>

</body>
</html>

Object menggunakan nama untuk mengakses anggotanya. Dalam contoh ini, person.firstName mengembalikan nilai John.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object</h2>
<p> JavaScript menggunakan nama untuk mengakses properti objek. </p>
<p id="demo"></p>

<script>
var person = {firstName:"John", lastName:"Doe", age:46};
document.getElementById("demo").innerHTML = person["firstName"];
</script>

</body>
</html>

Elemen Array Bisa Menjadi Object

Variabel JavaScript bisa menjadi object dan Array adalah jenis object khusus pada JavaScript.

Karenanya, kita dapat membuat variabel dengan tipe berbeda dalam Array yang sama.

Kita dapat membuat object dalam Array. Kita dapat membuat fungsi dalam Array. Kita dapat membuat array dalam Array.

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

Properti dan Method Array

Kelebihan yang sebenarnya dari array pada JavaScript adalah properti dan method array bawaan.

Contoh:

var x = cars.length;   // Properti panjang mengembalikan jumlah elemen
var y = cars.sort();   // MetHod sort () mengurutkan array

Properti Length

Properti length array akan mengembalikan nilai panjang array (jumlah elemen array).

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array</h2>
<p>Properti length array akan mengembalikan nilai panjang array.</p>

<p id="demo"></p>

<script>
var fruits = ["Pisang", "Jeruk", "Apel", "Mangga"];
document.getElementById("demo").innerHTML = fruits.length;
</script>

</body>
</html>

Properti length selalu lebih satu dari indeks array tertinggi.

Mengakses Elemen Array Pertama

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p> Elemen array JavaScript diakses menggunakan indeks numerik (mulai dari 0). </p>
<p id="demo"></p>

<script>
var fruits = ["Pisang", "Jeruk", "Apel", "Mangga"];
var first = fruits[0];
document.getElementById("demo").innerHTML = first;
</script>

</body>
</html>

Mengakses Elemen Array Terakhir

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array</h2>

<p> Elemen array JavaScript diakses menggunakan indeks numerik (mulai dari 0). </p>

<p id="demo"></p>

<script>
var fruits = ["Pisang", "Jeruk", "Apel", "Mangga"];
var last = fruits[fruits.length-1];
document.getElementById("demo").innerHTML = last;
</script>

</body>
</html>

Elemen Looping Array

Cara paling aman untuk melakukan looping melalui array adalah menggunakan for loop.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Cara paling aman untuk melakukan looping melalui array adalah menggunakan for loop.</p>

<p id="demo"></p>

<script>
var fruits, text, fLen, i;
fruits = ["Pisang", "Jeruk", "Apel", "Mangga"];
fLen = fruits.length;

text = "<ul>";
for (i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Anda juga bisa menggunakan fungsi Array.forEach ()

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p> Array.forEach () memanggil fungsi untuk setiap elemen array. </p>
<p> Array.forEach () tidak didukung di Internet Explorer 8 atau versi sebelumnya. </p>
<p id="demo"></p>

<script>
var fruits, text;
fruits = ["Pisang", "Jeruk", "Apel", "Mangga"];

text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
document.getElementById("demo").innerHTML = text;

function myFunction(value) {
  text += "<li>" + value + "</li>";
} 
</script>

</body>
</html>

Menambahkan Elemen Array

Cara termudah untuk menambahkan elemen baru ke array adalah menggunakan method push ().

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p> Metode push menambahkan elemen baru pada array. </p>
  
<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
var fruits = ["Pisang", "Jeruk", "Apel", "Mangga"];
document.getElementById("demo").innerHTML = fruits;

function myFunction() {
  fruits.push("Lemon");
  document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

Elemen baru juga dapat ditambahkan ke array menggunakan properti length.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p> Properti length menyediakan cara mudah untuk menambahkan elemen baru kedalam array tanpa menggunakan metode push (). </p>
<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
var fruits = ["Pisang", "Jeruk", "Apel", "Mangga"];
document.getElementById("demo").innerHTML = fruits;

function myFunction() {
  fruits[fruits.length] = "Lemon";
  document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

PERINGATAN !
Menambahkan elemen dengan indeks tinggi dapat membuat “hole” yang tidak ditentukan dalam array:

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Menambahkan elemen dengan indeks tinggi dapat membuat "hole" yang tidak ditentukan dalam array:</p>

<p id="demo"></p>

<script>
var fruits, text, fLen, i;
fruits = ["Pisang", "Jeruk", "Apel", "Mangga"];
fruits[6] = "Lemon";

fLen = fruits.length;
text = "";
for (i = 0; i < fLen; i++) {
  text += fruits[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Array Asosiatif

Banyak bahasa pemrograman mendukung array dengan indeks yang diberi nama.

Array dengan indeks bernama disebut array asosiatif (atau hashes).

JavaScript tidak mendukung array dengan indeks bernama.

Dalam JavaScript, array selalu menggunakan indeks bernomor.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p id="demo"></p>

<script>
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46; 
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>

</body>
</html>

PERINGATAN !!
Jika Anda menggunakan indeks bernama pada javascript, maka JavaScript akan mendefinisikan kembali array menjadi object standar.
Setelah itu, beberapa metode dan properti array akan menghasilkan hasil yang salah.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Jika Anda menggunakan indeks bernama pada javascript, maka JavaScript akan mendefinisikan kembali array menjadi object standar.
Setelah itu, beberapa metode dan properti array akan menghasilkan hasil yang salah.</p>

<p id="demo"></p>

<script>
var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46; 
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>

</body>
</html>

Perbedaan Antara Array dan Object

Dalam JavaScript, array menggunakan indeks bernomor.

Dalam JavaScript, objek menggunakan indeks bernama.

Array adalah jenis objek khusus, dengan indeks bernomor.

Kapan Menggunakan Array dan Kapan menggunakan Object

JavaScript tidak mendukung array asosiatif.
Gunakan objek ketika Anda ingin nama elemen menjadi string (teks).
Gunakan array ketika Anda ingin nama elemen menjadi angka.

Hindari new Array()

Tidak perlu menggunakan konstruktor baru array bawaan JavaScript Array ().

Gunakan [] sebagai gantinya.

Kedua statement berbeda ini membuat array kosong baru bernama poin.

var points = new Array();     // Buruk
var points = [];              // Baik

Kedua statement berbeda ini membuat array baru yang berisi 6 angka.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Hindari mengggunakan new Array(). Gunakan [].</p>

<p id="demo"></p>

<script>
//var points = new Array(40, 100, 1, 5, 25, 10);
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points[0];  
</script>

</body>
</html>

Cara Mengenali Array

Pertanyaan umum yang sering terjadi adalah: Bagaimana kita tahu jika variabel adalah array?

Masalahnya adalah bahwa opertaor typeof JavaScript mengembalikan object.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>opertaor typeof JavaScript mengembalikan object.</p>

<p id="demo"></p>

<script>
var fruits = ["Pisang", "Jeruk", "Apel", "Mangga"];
document.getElementById("demo").innerHTML = typeof fruits;
</script>

</body>
</html>

Operator typeof mengembalikan objek karena array pada JavaScript adalah objek.

Solusi 1:

Untuk mengatasi masalah ini ECMAScript 5 mendefinisikan metode baru Array.isArray ().

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p> Metode ECMASCRIPT 5 baru isArray mengembalikan nilai true saat digunakan pada array:</p>

<p id="demo"></p>

<script>
var fruits = ["Pisang", "Jeruk", "Apel", "Mangga"];
document.getElementById("demo").innerHTML = Array.isArray(fruits);
</script>

</body>
</html>

Masalah dengan solusi ini adalah ECMAScript 5 tidak didukung di browser lama.

Solusi 2

Untuk mengatasi masalah ini, Anda dapat membuat fungsi isArray () Anda sendiri:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Fungsi isArray () yang dibuat sendiri mengembalikan nilai true saat digunakan pada array:</p>

<p id="demo"></p>

<script>
var fruits = ["Pisang", "Jeruk", "Apel", "Mangga"];
document.getElementById("demo").innerHTML = isArray(fruits);

function isArray(myArray) {
  return myArray.constructor.toString().indexOf("Array") > -1;
}
</script>

</body>
</html>

Fungsi di atas selalu mengembalikan nilai true jika argumennya adalah array.

Atau lebih tepatnya: mengembalikan nilai true jika prototipe objek berisi kata “Array”.

Solusi 3

Operator instanceof mengembalikan nilai true jika sebuah objek dibuat oleh konstruktor tertentu:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p> Operator instanceof mengembalikan nilai true saat digunakan pada array: </p>
<p id="demo"></p>

<script>
var fruits = ["Pisang", "Jeruk", "Apel", "Mangga"];
document.getElementById("demo").innerHTML = fruits instanceof Array;
</script>

</body>
</html>

array javascript

Array di JavaScript: Contoh dan Codenya

Apa itu Array?

Membuat Array

Menggunakan Keyword new pada JavaScript

Akses Elemen Array

Mengubah Elemen Array

Akses Array Penuh

Array adalah Object

Elemen Array Bisa Menjadi Object

Properti dan Method Array

Properti Length

Mengakses Elemen Array Pertama

Mengakses Elemen Array Terakhir

Elemen Looping Array

Menambahkan Elemen Array

Array Asosiatif

Perbedaan Antara Array dan Object

Kapan Menggunakan Array dan Kapan menggunakan Object

Hindari new Array()

Cara Mengenali Array

Solusi 1:

Solusi 2

Solusi 3

Rounded Border di CSS: Cara Membuat dan Codenya

Cara Mencegah Peretasan Whatsapp Paling Ampuh: 2 Step

You may also like