ordre d'ecriture du code

Bonjour,

Dans javascript l'ordre d'écriture du code à bien son importance?  Du coup javascript va commencer par lire la fonction Projet mais quand on fait props.projet ,   projet n'existe pas encore vu qu'il est crée par la fonction du dessous qui sera executée plus tard. Du coup je ne comprends plus.   

// Librairie
import { useRouter } from "next/router";
import Link from "next/link";
import CarteDeProjet from "@/components/CarteDeProjet/CarteDeProjet";
import { connectToDatabase } from "../../helpers/mongodb";

export default function Projet(props) {
  // Variable
  const { titre, description, client, annee, slug } = props.projet;
  let clientAAfficher = client;
  if (client == "projet personnel") {
    clientAAfficher = "perso";
  }

  // Méthode

  return (
    <>
      <h1 style={{ marginBottom: ".5rem" }}>{titre}</h1>
      <small style={{ display: "flex", gap: "10px" }}>
        <Link
          href={`/${clientAAfficher}`}
          style={{ color: "#e59880", textDecoration: "none" }}
        >
          {client}
        </Link>
        <div>projet réalisé en {annee}</div>
      </small>
    </>
  );
}

export async function getStaticProps(context) {
  // Variables
  let projetRecupere;

  const { params } = context;
  const slug = params.slug;

  try {
    const client = await connectToDatabase();
    // Connexion a la BD
    const db = client.db("portfolio");
    projetRecupere = await db
      .collection("projets")
      .find({ slug: slug })
      .sort({ annee: "desc" })
      .toArray();
  } catch (error) {
    projetRecupere = [];
  }

  return {
    props: {
      projet: JSON.parse(JSON.stringify(projetRecupere))[0],
    },
  };
}

export async function getStaticPaths() {
  // Variables
  let projets;
  try {
    // Connexion a MongoDb
    const client = await connectToDatabase();
    const db = await client.db("portfolio");

    //Récupérer les projets
    projets = await db.collection("projets").find().toArray();
  } catch (error) {
    projets = [];
  }

  const dynamicPaths = projets.map((projet) => ({
    params: {
      slug: projet.slug,
    },
  }));

  return {
    paths: dynamicPaths,
    fallback: false,
  };
}