JavaScript — Arrays & Objects

Learn to work with collections of data — arrays for lists and objects for structured information.

Playwright Automation • Prep • Lesson 6
14 min read

What you'll learn

  • Create and manipulate arrays (lists of items)
  • Create and access object properties
  • Use common array methods (push, filter, map, find)
  • Understand destructuring basics
Playwright AutomationlessonsJump to another lesson

JavaScript --- Arrays & Objects

Real programs deal with lists and structured data.

Arrays --- Ordered Lists

const fruits = [
"apple"
"banana"
"cherry"
"date"
]
An array is a row of boxes — each box has an index starting from 0.
 
const fruits = ["apple", "banana", "cherry"];
//                 0         1         2

fruits[0];         // "apple"
fruits[2];         // "cherry"
fruits[3];         // undefined (doesn't exist)
fruits.length;     // 3
const fruits = [
"apple"
"banana"
"cherry"
"date"
]
fruits[1] gets "banana" — indexes start at 0, not 1!

Adding & removing

const fruits = ["apple", "banana"];
fruits.push("cherry");       // ["apple", "banana", "cherry"]
fruits.pop();                // removes & returns "cherry"
fruits.includes("banana");   // true

Array Methods You’ll Use A LOT

array[1, 2, 3]
rulen * 2
map()

transform every item by the rule

return
[2, 4, 6]
map transforms every item. Same count in, same count out.
 
[1, 2, 3].map(n => n * 2);                // [2, 4, 6]
["ab", "cd"].map(s => s.toUpperCase());   // ["AB", "CD"]
array[1, 2, 3, 4]
rulen > 2
filter()

keep items where rule is true

return
[3, 4]
filter keeps items that match the rule, discards the rest.
 
[1, 2, 3, 4, 5, 6].filter(n => n % 2 === 0);  // [2, 4, 6]
[45, 82, 90].filter(score => score >= 70);    // [82, 90]
array["apple","banana","cherry"]
rulef === "banana"
find()

return the FIRST item matching the rule

return
"banana"
find returns just one item — the first match — not an array.
 
["apple", "banana"].find(f => f === "banana");  // "banana"
["apple", "banana"].find(f => f === "grape");   // undefined
["apple", "banana"].forEach(f => console.log(`I like ${f}!`));

Quick check

Question 1 of 10 correct

You have [1, 2, 3, 4]. You want to keep only numbers greater than 2. Which method do you reach for?

Objects --- Labeled Containers

user

3 fields
name:""Alice""
age:"25"
isAdmin:"false"
An object is a labeled container — each field has a key and a value.
 
const user = {
  name: "Alice",
  age: 25,
  isAdmin: false
};

user.name;        // "Alice" — dot notation
user["age"];      // 25 — bracket notation

user.email = "a@b.com";   // add a new property
user.age = 26;            // change an existing one

Nested objects

const config = {
  browser: { name: "chrome", headless: true },
  timeout: 30000
};

config.browser.name;  // "chrome" — chain dots

Destructuring --- A Handy Shortcut

Long way

  • const name = user.name;
  • const age = user.age;
  • Repetitive once you have 3+ properties

With destructuring

  • const { name, age } = user;
  • One line, same result
  • Variable names must match property names
 
const user = { name: "Alice", age: 25 };
const { name, age } = user;
// name === "Alice", age === 25

// Array destructuring by position
const fruits = ["apple", "banana", "cherry"];
const [first, second] = fruits;
// first === "apple", second === "banana"

Arrays of Objects (Very Common!)

A list of things where each thing has many properties:

const tests = [
  { name: "Login", passed: true, duration: 1200 },
  { name: "Search", passed: true, duration: 800 },
  { name: "Checkout", passed: false, duration: 3500 }
];

// How many passed?
tests.filter(t => t.passed).length;           // 2

// Names of failed tests
tests.filter(t => !t.passed).map(t => t.name); // ["Checkout"]

// Find a specific one
tests.find(t => t.name === "Login");           // { name: "Login", ... }

This pattern --- array of objects, queried with .filter() / .map() / .find() --- is everywhere in real code.

Quick check

To pull the 'name' property out of an object called user, use: const { } = user;

JSON --- How Data Travels

node
# Object → JSON text (stringify)$ JSON.stringify({ name: 'Alice', age: 25 })'{"name":"Alice","age":25}'# JSON text → Object (parse)$ JSON.parse('{"name":"Alice"}').name'Alice'

Try it in your terminal!

You’ll use JSON.stringify() and JSON.parse() constantly when testing APIs.

Practice Time

Exercise 1: Create an Array and Use Filter and Find

Fill in the blanks to create an array of scores, filter out passing scores (70 or above), and find the first perfect score (100).

const scores = [85, 42, 100, 67, 91, 55];

// Keep only scores that are 70 or above
const passing = scores.(score => score  70);
console.log(passing);  // [85, 100, 91]

// Find the first score that is exactly 100
const perfect = scores.(score => score  100);
console.log(perfect);  // 100

Exercise 2: Match Array Methods to Their Descriptions

Match each array method to what it does:

Exercise 3: Check Your Understanding

Question 1 of 30 correct

What does this code output? const colors = ["red", "green", "blue"]; console.log(colors[1]);