Objects

Objects are a way to store data in JavaScript. They are similar to arrays, but instead of using indexes to access data, you use properties. Properties are key-value pairs that allow you to store data in a more structured way. Objects can store any type of data, including strings, numbers, arrays, and even other objects. Here is an example of an object, similar to what is being used to render the hobby list on the about page

           typescript  
  const person: Person = {"name":"Bels Thomaz","job":"Software Engineer","hobbies":[{"name":"Crocheting"},{"name":"Gaming"},{"name":"Hiking"},{"name":"Photography"},{"name":"Traveling"},{"name":"TTRPGs"},{"name":"Learning new things"}]};

You can reference/destructure your object in many ways, such as the dot notation as shown below in a console log or as a dynamic piece to display in your svelte html component.

           typescript  
  console.log(person.name);
           html  
  <h1>{person.name}</h1>

You can also use the object's methods to perform actions on the object's data. For example, you can create a method that prints out all of the person's hobbies:

           typescript  
  person.printHobbies();

Try printing the hobbies to the console by clicking the button below.

You can also modify the value stored inside of the object using the dot notaion as we mentioned above. Use the input and button to make the update to our person's job or go check out the fantasy character creator page for a better demonstation of updating and maintaining an object.

           typescript  
  const updateJob = () => {
  const jobInput = document.getElementById('update-job-value');
  if (jobInput) {
    const job = (jobInput as HTMLInputElement).value;
    person.job = job;
  }
};

Current Job: Software Engineer