O código não aparece na página

<p id="welcome"></p>

<script>
    const personData = {
        firstName: "Matheus",
        lastName: "Araujo",
        age: 18,
        hairType: "Curly",
    }
    
    document.getElementById("welcome").innerText = "Hello, " + personData.firstName
    + "! I noticed that your hair is " + personData.hairType + "!";
</script

Desse jeito vai funcionar, não estava funcionando principalmente por dois motivos:

1. No objeto você colocou ";" após o "Curly", num objeto não se usa ";", apenas ",".
2. No innerHtml você apenas declarou as propriedades "firstName", mas esqueceu de colocar daonde essas propriedades estão saindo, no caso elas são parte do objeto personData, o correto seria personData.firstName, por exemplo.

Além disso, como você não está inserindo nenhum html dentro do parágrafo, o mais interessante seria usar a função innerText ao invés de innerHtml.

Espero ter ajudado :)

Fala rei, vê se assim funciona:

<p id="welcome"></p>

<script>
const personData = {
firstName: "Matheus",
lastName: "Araujo",
age: 18,
hairType: "Curly"
}
document.getElementById("welcome").innerHTML = "Hello, " + personData.firstName
+ "! I noticed that your hair is" + personData.hairType + "!";</script>