JavaScript Arrays, Objects,
and DOM Basics
This presentation provides an overview of JavaScript arrays,
objects, and DOM manipulation, essential concepts for modern web
developers. We'll explore core principles, practical examples, and
modern methods to enhance your web development skills.
JavaScript Arrays: Core Concepts
Arrays in JavaScript are dynamic, ordered collections
that store various data types, from numbers and Example:
strings to other objects. They are zero-indexed,
meaning the first element is at index 0. const fruits = ["Banana", "Apple", "Peach"];
Although arrays are objects themselves, they come
with specialized properties like .length and powerful
• "Banana" is at index 0
methods such as .push(), .pop(), and .slice() for
efficient data management. • "Apple" is at index 1
• "Peach" is at index 2
Working with JavaScript Arrays
Accessing Elements Modifying Arrays Converting to Arrays
Elements are accessed using Methods like push() add new The Array.from() method is
their index, e.g., fruits[0] elements, automatically crucial for converting array-like
returns "Banana". updating the array's length or iterable objects into true
property. arrays, unlocking full array
method functionality.
Example: Array.from(document.querySelectorAll("img")) creates an array from a NodeList of image elements.
JavaScript Objects and Arrays of Objects
JavaScript objects are fundamental for storing data as
unordered key-value pairs, providing a flexible way to Object Example:
represent structured information.
var
Arrays of objects combine the strengths of both,
allowing you to store multiple structured data entries in
person = {name: "John", age: 30};
an ordered collection, perfect for datasets like user
profiles or product listings. Array of Objects Example:
Accessing properties within objects in an array can be
done using dot notation (array[index].property) or const users = [ {name: "Jane", age:
bracket notation ( array[index]["property"]). 25}, {name: "Mark", age: 32}];
Accessing and Manipulating Arrays of Objects
Iterate with forEach() Transform with map() Filter with filter()
Perfect for performing an Creates a new array by Creates a new array
action on each item without applying a function to each containing only elements that
creating a new array. element. satisfy a condition.
let names =
users.forEach(user => users.map(u => let adults =
console.log(user.name) u.name); users.filter(u =>
); u.age >= 18);
DOM Selectors and Array-
Like Objects
When you use DOM selectors like
document.getElementsByClassName() or
document.querySelectorAll(), they return HTMLCollections or
NodeLists, not true JavaScript arrays.
These collections are "array-like": they have a .length property
and allow indexed access to elements, but they lack many of the
convenient array methods such as forEach, map, or filter.
Converting DOM Collections to Arrays & Manipulation
Convert to Array Unlock Array Methods Dynamic DOM Manipulation
Use Array.from() to convert a Once converted, you can fully This enables powerful and efficient
NodeList or HTMLCollection into a leverage array methods like forEach, dynamic modification of HTML
proper array. map, and filter on your DOM elements based on their properties or
elements. content.
Practical Example:
const divs = Array.from(document.getElementsByTagName("div"));divs.forEach(div =>
div.style.backgroundColor = "lightblue");
Summary and Best Practices
Arrays: Objects: Arrays of Objects:
Ordered, dynamic, and versatile Key-value pairs, essential for Powerful for complex data
for diverse data storage. structured data representation. manipulation and organization.
DOM Collections: Modern Methods:
Convert to arrays for easier and more flexible manipulation.Embrace Array.from, map, and filter for clean,
efficient, and maintainable code.
