クラスのスコープについて

前提・実現したいこと

youtubeでecサイトを作るチュートリアルを見ていたのですが、
スコープについてわからないことがあり、質問させていただきました。

わからないこと

class Productsで個々のproductsについて、mapを使って、
titleやpriceを定義しています。

その定義したものをなぜ、class UI で使えるのでしょうか？
class Productsでproductsをreturnしたときに、
その前にreturnしたtitleやpriceも使える状態になるのでしょうか。

試しに一番最後の行でdisplayProductsを呼ぶ代わりに、
consol.log(products.title)としたのですが、undefinedとなってしまいました。
これは何が起きているのでしょうか。

該当のソースコード

ソースコード
javascript 

const cartBtn = document.querySelector('.cart-btn')
const closeCartBtn = document.querySelector('.close-cart')
const clearCartBtn = document.querySelector('.clear-cart')
const cartDOM = document.querySelector('.cart')
const cartOverlay = document.querySelector('.cart-overlay')
const cartItems = document.querySelector('.cart-items')
const cartTotal = document.querySelector('.cart-total')
const cartContent = document.querySelector('.cart-content')
const productsDOM = document.querySelector('.products-center')

let cart = []

//get products
class Products {
    async getProducts() {
        try {
            let result = await fetch('products.json')
            let data = await result.json()
            let products = data.items;
            products = products.map(item => {
                const {title, price} = item.fields
                const {id} = item.sys
                const image = item.fields.image.fields.file.url
                return {title, price, id, image}
            })
            return products
   
        } catch (error) {
            console.log(error);
        }
    }
}

// display products
class UI {
    displayProducts(products) {
        let result = ''
        products.forEach(product => {
            result += `
            <article class="product">
                <div class="img-container">
                    <img src=${product.image} alt="product" class="product-img"> 
                    <button class="bag-btn" data-id=${product.id}>
                        <i class="fas fa-shopping-cart">add to bag</i>
                    </button>
                </div>
                <h3>${product.title}</h3>
                <h4>$${product.price}</h4>
            </article>
            `
        });
        productsDOM.innerHTML = result
    }
}

// local storage
class Storage {

}

document.addEventListener('DOMContentLoaded', () => {
    const ui = new UI ()
    const products = new Products()

    //get all products
    products.getProducts().then(products => ui.displayProducts(products));
})