Belajar Array JavaScript: Manipulasi Data Array dengan Mudah dan Efisien
Pernah nggak sih kamu bingung bagaimana mengelola daftar data di JavaScript? Misalnya, mau nyimpan list produk, daftar user, atau history transaksi? Jawabannya selalu sama: Array! Tapi tahukah kamu bahwa banyak developer JavaScript yang hanya menggunakan 10% dari kekuatan array yang sebenarnya?
Saya masih inget waktu pertama kali belajar array, cuma bisa push dan pop doang. Padahal, JavaScript array itu seperti pisau Swiss Army – punya banyak tool yang powerful tapi sering nggak kepake karena kita nggak tau fungsinya!
Di tutorial ini, kita akan eksplor array JavaScript dari dasar sampai advanced. Kita akan belajar dengan analogi dunia nyata dan praktik langsung bikin aplikasi to-do list interaktif. Siap-siap buat jadi master array!
Apa Itu Array dan Kenapa Penting?
Array itu seperti kereta yang punya banyak gerbong. Setiap gerbong bisa muat penumpang (data) yang berbeda-beda, dan kita bisa atur penumpangnya dengan mudah.
Fakta seru tentang array JavaScript:
- Array JavaScript bisa nyimpan berbagai tipe data dalam satu array
- Bisa berubah ukuran dynamically (unlike arrays di bahasa lain)
- Punya 50+ method built-in untuk manipulasi data
- Didukung oleh semua browser modern
- Foundation untuk functional programming di JavaScript
Cara Membuat Array
Ada beberapa cara membuat array, masing-masing punya use case-nya sendiri:
1. Array Literal (Paling umum)
// Simple array
const fruits = ['apple', 'banana', 'orange'];
// Array campuran tipe data
const mixedArray = [1, 'hello', true, null, { name: 'John' }];
// Array multidimensi
const matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];2. Array Constructor
// Array dengan length tertentu
const emptyArray = new Array(5); // [empty × 5]
// Array dengan elements
const numbers = new Array(1, 2, 3, 4, 5);3. Array.from() untuk conversion
// Dari string
const fromString = Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']
// Dari Set
const fromSet = Array.from(new Set([1, 2, 2, 3])); // [1, 2, 3]
// Dari array-like objects
const fromNodeList = Array.from(document.querySelectorAll('div'));Mengakses dan Memodifikasi Array
1. Akses Elements dengan Index
const fruits = ['apple', 'banana', 'orange', 'grape'];
console.log(fruits[0]); // 'apple' - index pertama
console.log(fruits[1]); // 'banana'
console.log(fruits[-1]); // undefined (JavaScript nggak support negative index)
console.log(fruits[10]); // undefined (index out of bounds)
// Akses index terakhir
console.log(fruits[fruits.length - 1]); // 'grape'2. Modifikasi Elements
const numbers = [1, 2, 3, 4, 5];
// Ganti value di index tertentu
numbers[2] = 99;
console.log(numbers); // [1, 2, 99, 4, 5]
// Tambah element di index baru
numbers[5] = 6;
console.log(numbers); // [1, 2, 99, 4, 5, 6]Array Properties yang Penting
const colors = ['red', 'green', 'blue'];
// Length - jumlah elements dalam array
console.log(colors.length); // 3
// Constructor - function yang membuat array
console.log(colors.constructor); // ƒ Array()
// Prototype - untuk menambah custom methods
Array.prototype.sayHello = function() {
console.log('Hello from array!');
};
colors.sayHello(); // 'Hello from array!'Array Methods Kategori: CRUD Operations
1. CREATE – Menambah Elements
const fruits = ['apple', 'banana'];
// push() - tambah di akhir
fruits.push('orange');
console.log(fruits); // ['apple', 'banana', 'orange']
// unshift() - tambah di awal
fruits.unshift('grape');
console.log(fruits); // ['grape', 'apple', 'banana', 'orange']
// concat() - gabungkan arrays
const moreFruits = fruits.concat(['mango', 'pineapple']);
console.log(moreFruits); // ['grape', 'apple', 'banana', 'orange', 'mango', 'pineapple']2. READ – Akses dan Cari Elements
const numbers = [10, 20, 30, 40, 50];
// indexOf() - cari index element
console.log(numbers.indexOf(30)); // 2
console.log(numbers.indexOf(99)); // -1 (not found)
// includes() - cek apakah element ada
console.log(numbers.includes(20)); // true
console.log(numbers.includes(99)); // false
// find() - cari element berdasarkan kondisi
const found = numbers.find(num => num > 25);
console.log(found); // 30
// findIndex() - cari index berdasarkan kondisi
const foundIndex = numbers.findIndex(num => num > 25);
console.log(foundIndex); // 23. UPDATE – Modifikasi Elements
const numbers = [1, 2, 3, 4, 5];
// map() - transform setiap element
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
// fill() - ganti elements dengan value tertentu
numbers.fill(0, 1, 3); // fill dengan 0 dari index 1 sampai 3 (exclusive)
console.log(numbers); // [1, 0, 0, 4, 5]4. DELETE – Hapus Elements
let fruits = ['apple', 'banana', 'orange', 'grape'];
// pop() - hapus element terakhir
const lastFruit = fruits.pop();
console.log(lastFruit); // 'grape'
console.log(fruits); // ['apple', 'banana', 'orange']
// shift() - hapus element pertama
const firstFruit = fruits.shift();
console.log(firstFruit); // 'apple'
console.log(fruits); // ['banana', 'orange']
// splice() - hapus dari index tertentu
fruits = ['apple', 'banana', 'orange', 'grape'];
const removed = fruits.splice(1, 2); // hapus dari index 1, sebanyak 2 elements
console.log(removed); // ['banana', 'orange']
console.log(fruits); // ['apple', 'grape']Array Methods Kategori: Transformation
1. map() – Transformasi Data
const users = [
{ id: 1, name: 'John', age: 25 },
{ id: 2, name: 'Jane', age: 30 },
{ id: 3, name: 'Bob', age: 35 }
];
// Extract hanya names
const names = users.map(user => user.name);
console.log(names); // ['John', 'Jane', 'Bob']
// Tambah property baru
const usersWithStatus = users.map(user => ({
...user,
isActive: user.age > 25
}));
console.log(usersWithStatus);
// [{id: 1, name: 'John', age: 25, isActive: false}, ...]2. filter() – Filter Data
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// Filter angka genap
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6, 8, 10]
// Filter users dewasa
const adultUsers = users.filter(user => user.age >= 18);
console.log(adultUsers); // Semua users karena age >= 183. reduce() – Aggregasi Data
const numbers = [1, 2, 3, 4, 5];
// Sum semua numbers
const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 15
// Group users by age category
const usersByAge = users.reduce((groups, user) => {
const category = user.age < 30 ? 'young' : 'adult';
if (!groups[category]) {
groups[category] = [];
}
groups[category].push(user);
return groups;
}, {});
console.log(usersByAge);
// { young: [{id: 1, name: 'John', age: 25}], adult: [...] }Array Methods Kategori: Iteration
1. forEach() – Loop melalui Array
const fruits = ['apple', 'banana', 'orange'];
// Traditional for loop
for (let i = 0; i < fruits.length; i++) { console.log(fruits[i]); } // forEach (lebih modern) fruits.forEach((fruit, index) => {
console.log(`${index + 1}. ${fruit}`);
});
// 1. apple
// 2. banana
// 3. orange2. some() dan every() – Test Conditions
const numbers = [1, 2, 3, 4, 5];
// some() - apakah minimal satu element memenuhi kondisi?
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // true
// every() - apakah semua elements memenuhi kondisi?
const allPositive = numbers.every(num => num > 0);
console.log(allPositive); // trueArray Methods Kategori: Sorting dan Searching
1. sort() – Mengurutkan Array
const fruits = ['banana', 'apple', 'orange', 'grape'];
// Sort strings (default: alphabetical)
fruits.sort();
console.log(fruits); // ['apple', 'banana', 'grape', 'orange']
// Sort numbers (perlu compare function)
const numbers = [10, 5, 40, 25, 1000];
numbers.sort((a, b) => a - b); // ascending
console.log(numbers); // [5, 10, 25, 40, 1000]
numbers.sort((a, b) => b - a); // descending
console.log(numbers); // [1000, 40, 25, 10, 5]2. reverse() – Membalik Urutan
const numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers); // [5, 4, 3, 2, 1]Modern Array Features (ES6+)
1. Spread Operator (…)
// Copy array
const original = [1, 2, 3];
const copy = [...original];
console.log(copy); // [1, 2, 3]
// Gabungkan arrays
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]
// Tambah elements
const newArray = [0, ...arr1, 3.5, ...arr2, 7];
console.log(newArray); // [0, 1, 2, 3, 3.5, 4, 5, 6, 7]2. Destructuring Assignment
const colors = ['red', 'green', 'blue', 'yellow'];
// Extract values
const [firstColor, secondColor] = colors;
console.log(firstColor, secondColor); // 'red' 'green'
// Skip elements
const [,, thirdColor] = colors;
console.log(thirdColor); // 'blue'
// Default values
const [primary, secondary, tertiary, fourth = 'black'] = colors;
console.log(fourth); // 'yellow'
// Rest pattern
const [first, ...rest] = colors;
console.log(rest); // ['green', 'blue', 'yellow']3. Array.from() dan Array.of()
// Array.from() - buat array dari array-like atau iterable
const fromString = Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']
const fromSet = Array.from(new Set([1, 2, 2, 3])); // [1, 2, 3]
// Array.of() - buat array dari arguments
const numbers = Array.of(1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]
const single = Array.of(42); // [42] (beda dengan new Array(42))Practical Project: Aplikasi To-Do List
Mari buat aplikasi to-do list yang menggunakan berbagai array methods:
class TodoApp {
constructor() {
this.todos = [];
this.nextId = 1;
}
// CREATE: Tambah todo baru
addTodo(text, priority = 'medium') {
const newTodo = {
id: this.nextId++,
text: text,
priority: priority,
completed: false,
createdAt: new Date()
};
this.todos.push(newTodo);
return newTodo;
}
// READ: Dapatkan semua todos
getAllTodos() {
return [...this.todos]; // Return copy untuk avoid mutation
}
// READ: Dapatkan todos berdasarkan filter
getTodos(filter = 'all') {
switch (filter) {
case 'active':
return this.todos.filter(todo => !todo.completed);
case 'completed':
return this.todos.filter(todo => todo.completed);
case 'high':
return this.todos.filter(todo => todo.priority === 'high');
default:
return [...this.todos];
}
}
// UPDATE: Toggle completion status
toggleTodo(id) {
const todo = this.todos.find(todo => todo.id === id);
if (todo) {
todo.completed = !todo.completed;
return true;
}
return false;
}
// UPDATE: Update todo text
updateTodo(id, newText) {
const todo = this.todos.find(todo => todo.id === id);
if (todo) {
todo.text = newText;
return true;
}
return false;
}
// DELETE: Hapus todo
deleteTodo(id) {
const initialLength = this.todos.length;
this.todos = this.todos.filter(todo => todo.id !== id);
return this.todos.length < initialLength; } // DELETE: Hapus semua completed todos clearCompleted() { this.todos = this.todos.filter(todo => !todo.completed);
}
// UTILITY: Stats
getStats() {
const total = this.todos.length;
const completed = this.todos.filter(todo => todo.completed).length;
const active = total - completed;
return {
total,
completed,
active,
completionRate: total > 0 ? (completed / total * 100).toFixed(1) : 0
};
}
// SORT: Urutkan todos
sortTodos(by = 'created') {
switch (by) {
case 'priority':
const priorityOrder = { high: 1, medium: 2, low: 3 };
this.todos.sort((a, b) => priorityOrder[a.priority] - priorityOrder[b.priority]);
break;
case 'text':
this.todos.sort((a, b) => a.text.localeCompare(b.text));
break;
case 'completed':
this.todos.sort((a, b) => a.completed - b.completed);
break;
default:
this.todos.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));
}
}
// SEARCH: Cari todos
searchTodos(keyword) {
return this.todos.filter(todo =>
todo.text.toLowerCase().includes(keyword.toLowerCase())
);
}
}
// Usage example
const myTodoApp = new TodoApp();
// Tambah beberapa todos
myTodoApp.addTodo('Belajar JavaScript Array', 'high');
myTodoApp.addTodo('Buat project todo app', 'medium');
myTodoApp.addTodo('Baca dokumentasi', 'low');
// Tampilkan semua todos
console.log('All todos:', myTodoApp.getAllTodos());
// Toggle completion
myTodoApp.toggleTodo(1);
// Tampilkan active todos
console.log('Active todos:', myTodoApp.getTodos('active'));
// Stats
console.log('Stats:', myTodoApp.getStats());
// Search
console.log('Search "JavaScript":', myTodoApp.searchTodos('JavaScript'));Performance Considerations
Methods yang Efficient vs Inefficient
// ✅ EFFICIENT (O(1))
const lastElement = array[array.length - 1]; // access last element
array.push(element); // add to end
array.pop(); // remove from end
// ⚠️ MODERATE (O(n))
array.unshift(element); // add to beginning
array.shift(); // remove from beginning
array.includes(element); // search
// ❌ INEFFICIENT untuk large arrays (O(n))
array.splice(0, 1); // remove from beginning
array.find(element => element.id === 123); // linear searchBest Practices dan Common Mistakes
Best Practices:
- Gunakan
constuntuk array yang tidak di-reassign - Gunakan functional methods (
map,filter,reduce) untuk avoid mutation - Gunakan
Array.isArray()untuk cek tipe data - Hindari
deleteoperator (meninggalkan holes di array) - Gunakan destructuring untuk extract multiple values
Common Mistakes:
// ❌ SALAH: for-in untuk array (bisa termasuk prototype properties)
for (let index in array) {
console.log(array[index]);
}
// ✅ BENAR: for-of atau forEach
for (let element of array) {
console.log(element);
}
// ❌ SALAH: langsung modify array dalam loop
array.forEach((item, index) => {
if (item.condition) {
array.splice(index, 1); // BISA BERMASALAH!
}
});
// ✅ BENAR: filter atau loop terbalik
array = array.filter(item => !item.condition);Kesimpulan: Array adalah Superpower JavaScript
Menguasai array JavaScript itu seperti punya kotak perkakas lengkap. Dari yang sederhana seperti menyimpan daftar, sampai yang kompleks seperti data transformation dan aggregation.
Yang penting diingat:
- Pilih method yang tepat untuk task yang tepat
- Understand performance implications terutama untuk large datasets
- Practice functional programming dengan map, filter, reduce
- Experiment dengan modern features seperti spread operator dan destructuring
Dengan menguasai array, kamu sudah menguasai salah satu fundamental terpenting dalam JavaScript. Selanjutnya, kamu bisa explore lebih dalam ke functional programming, async programming, dan advanced data structures.
Happy coding! 🚀