Passing Data to Functions

You have passed numbers, strings, and booleans to functions. Arrays and objects work the same way — with one important behavioral note. This lesson brings together everything from this module into renderTourCard(), the function you will connect to the DOM in Module 05.

Passing arrays to functions

Pass an array as an argument just like any other value:

function logAllTours(tours) {
  for (const tour of tours) {
    console.log(tour.name);
  }
}

const tourList = [
  { name: 'Cascade Ridge Hike', price: 149, available: true,  category: 'hiking' },
  { name: 'Summit Loop Trek',   price: 199, available: true,  category: 'hiking' },
  { name: 'Valley Floor Walk',  price: 99,  available: false, category: 'walking' },
];

logAllTours(tourList);

The function receives the same array — no copy is made. This is called pass by reference: the parameter tours inside the function points to the same array as tourList outside it.

Passing objects to functions

Objects work the same way — the parameter and the original variable point to the same object:

function logTour(tour) {
  console.log(tour.name);
  console.log(tour.price);
  console.log(tour.available);
}

const tour = { name: 'Cascade Ridge Hike', price: 149, available: true };
logTour(tour);

Access properties with dot notation inside the function body exactly as you would outside.

Returning arrays and objects

Functions can return any value — including arrays and objects:

function getAvailableTours(tours) {
  const available = [];
  for (const tour of tours) {
    if (tour.available) {
      available.push(tour);
    }
  }
  return available;
}

const availableTours = getAvailableTours(tourList);
console.log(availableTours.length);  // 2

Avoid mutating inputs

Because arrays and objects are passed by reference, modifying them inside the function changes the original:

function addFee(tour) {
  tour.price += 20;  // mutates the original object — usually a mistake
}

Prefer returning a new value instead of modifying the input:

function withFee(tour) {
  return { ...tour, price: tour.price + 20 };  // new object — original unchanged
}

The ...tour syntax (spread operator) copies all properties into a new object. Returning a new object rather than mutating the original makes functions predictable and easier to reason about.

Building renderTourCard()

Now bring it all together. renderTourCard(tour) accepts a tour object, uses the helpers from Lessons 02 and 04, and returns a formatted string that mirrors what you will write as HTML in Module 05:

const isAvailable = available => available === true;
const formatPrice = price => '$' + price.toFixed(2);

function renderTourCard(tour) {
  const status = isAvailable(tour.available) ? 'Available' : 'Sold Out';
  return `
Tour: ${tour.name}
Price: ${formatPrice(tour.price)}
Status: ${status}
  `.trim();
}

Exercise

const isAvailable = available => available === true;
const formatPrice = price => '$' + price.toFixed(2);

function renderTourCard(tour) {
  const status = isAvailable(tour.available) ? 'Available' : 'Sold Out';
  return `Tour: ${tour.name} | ${formatPrice(tour.price)} | ${status}`;
}

const tours = [
  { name: 'Cascade Ridge Hike', price: 149, available: true,  category: 'hiking' },
  { name: 'Summit Loop Trek',   price: 199, available: true,  category: 'hiking' },
  { name: 'Valley Floor Walk',  price: 99,  available: false, category: 'walking' },
];

for (const tour of tours) {
  console.log(renderTourCard(tour));
}
// Tour: Cascade Ridge Hike | $149.00 | Available
// Tour: Summit Loop Trek | $199.00 | Available
// Tour: Valley Floor Walk | $99.00 | Sold Out

This is the exact pattern Module 05 will build on — instead of console.log, the string will be inserted into the page as HTML.

Recap

• Arrays and objects are passed by reference — the function receives the same object, not a copy.
• Access array elements with for...of and object properties with dot notation inside the function body.
• Functions can return arrays and objects, not just primitives.
• Prefer returning a new object or array over mutating the original input.
• renderTourCard(tour) — accepting an object, using helpers, returning a formatted string — is the pattern for every data-driven UI function in this course.