Lesson 6 of 30

JavaScript Arrays

Working with Lists

Arrays are ordered collections of values. They can hold multiple items of any type.

Arrays are zero-indexed, meaning the first element is at position 0.

Example 
// Creating Arrays
const fruits = ['apple', 'banana', 'orange'];
const numbers = [1, 2, 3, 4, 5];
const mixed = [1, 'hello', true, { name: 'John' }];

// Accessing Elements
console.log(fruits[0]);     // 'apple'
console.log(fruits[1]);     // 'banana'
console.log(fruits.length); // 3

// Modifying Arrays
fruits[1] = 'grape';        // Change element
fruits.push('mango');       // Add to end
fruits.pop();               // Remove from end
fruits.unshift('kiwi');     // Add to beginning
fruits.shift();             // Remove from beginning

// Array Methods
fruits.includes('apple');   // true (check if exists)
fruits.indexOf('orange');   // 2 (find position)
fruits.slice(0, 2);         // ['apple', 'grape'] (copy portion)
fruits.splice(1, 1);        // Remove 1 element at index 1

// Looping Through Arrays
fruits.forEach(fruit => {
  console.log(fruit);
});
  • Arrays store ordered lists
  • Access by index: arr[0]
  • push() - Add to end
  • pop() - Remove from end
  • unshift() - Add to beginning
  • shift() - Remove from beginning
  • length property - Number of elements
  • Arrays are zero-indexed
Try Arrays
HTML 
<div class="array-demo">
  <h3>Todo List</h3>
  <input type="text" id="todoInput" placeholder="Enter a task">
  <button onclick="addTodo()">Add Task</button>
  <button onclick="clearAll()">Clear All</button>
  <ul id="todoList"></ul>
  <p id="count">Tasks: 0</p>
</div>
CSS 
.array-demo { padding: 20px; background: #f0f0f0; border-radius: 8px; }
input { padding: 10px; margin: 5px; border: 1px solid #ddd; border-radius: 4px; width: 250px; }
button { padding: 10px 20px; background: #d1039e; color: white; border: none; border-radius: 5px; cursor: pointer; margin: 5px; }
#todoList { list-style: none; padding: 0; margin: 15px 0; }
#todoList li { background: white; padding: 10px; margin: 5px 0; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; }
.delete-btn { background: #ff4444; padding: 5px 10px; border: none; border-radius: 3px; color: white; cursor: pointer; font-size: 12px; }
JavaScript 
let todos = [];

function addTodo() {
  const input = document.getElementById('todoInput');
  const task = input.value.trim();
  
  if (task) {
    todos.push(task);
    input.value = '';
    renderTodos();
  }
}

function deleteTodo(index) {
  todos.splice(index, 1);
  renderTodos();
}

function clearAll() {
  todos = [];
  renderTodos();
}

function renderTodos() {
  const list = document.getElementById('todoList');
  const count = document.getElementById('count');
  
  list.innerHTML = todos.map((todo, index) => `
    <li>
      ${todo}
      <button class="delete-btn" onclick="deleteTodo(${index})">Delete</button>
    </li>
  `).join('');
  
  count.textContent = `Tasks: ${todos.length}`;
}
Notes
  • Arrays are perfect for storing lists of similar items. Use array methods to manipulate them efficiently.