HTML and CSS project tutorial covering web development fundamentals. Learn to build interactive and responsive web pages.
Arrays store ordered collections of values. Create them with square brackets: const fruits = ['apple', 'banana', 'orange'];. Access elements by index, starting at 0: fruits[0] returns 'apple'. Arrays can hold mixed types: const mixed = [1, 'hello', true, {name: 'test'}]. The length property gives the number of elements. Arrays are zero-indexed, so the last element is at array[array.length - 1]. You can also use array.at(-1) for negative indexing. Arrays are objects in JavaScript, which means they have built-in methods for manipulation and iteration.
JavaScript arrays have powerful built-in methods. push() adds to the end, pop() removes from the end, unshift() adds to the beginning, and shift() removes from the beginning. indexOf() finds the position of an element. includes() checks if an element exists. slice(start, end) extracts a portion without modifying the original. splice(start, deleteCount, items) adds or removes elements in place. concat() merges arrays. join() creates a string from array elements. reverse() reverses the array order. These methods handle most common array operations without manual loops.
Modern JavaScript provides elegant iteration methods. forEach() executes a function for each element. map() transforms each element and returns a new array — perfect for converting data formats. filter() returns elements that pass a test. find() returns the first element matching a condition. some() checks if any element passes a test. every() checks if all elements pass a test. reduce() accumulates values into a single result. These methods create cleaner, more readable code than traditional for loops. They also support method chaining: array.filter(x => x > 5).map(x => x * 2).
Objects store key-value pairs using curly braces: const person = { name: 'Alice', age: 30, city: 'New York' };. Access properties with dot notation (person.name) or bracket notation (person['name']). Bracket notation is useful when property names are dynamic or contain special characters. Add new properties by assignment: person.email = '[email protected]'. Delete properties with delete person.age. Check if a property exists with 'name' in person or person.hasOwnProperty('name'). Objects can contain arrays, other objects, and functions as property values.
Loop through object properties with for...in: for (let key in person) { console.log(key, person[key]); }. Modern JavaScript provides static methods: Object.keys(obj) returns an array of property names, Object.values(obj) returns an array of values, and Object.entries(obj) returns an array of [key, value] pairs. These methods integrate perfectly with array methods: Object.entries(person).filter(([key, val]) => typeof val === 'string'). Use Object.assign() or the spread operator {...obj1, ...obj2} to merge objects.
Sort an array of objects by a property: users.sort((a, b) => a.age - b.age). Group objects by a property using reduce: items.reduce((groups, item) => { (groups[item.category] = groups[item.category] || []).push(item); return groups; }, {}). Convert between arrays and objects: Object.fromEntries(array.map(k => [k, true])) creates an object from an array of keys. Deep clone an object: JSON.parse(JSON.stringify(obj)) for simple cases, or use structuredClone for modern browsers. These patterns appear constantly in real-world JavaScript development for data processing and state management.