Discovering Complexity in JavaScript

In this tutorial, we’ll take a brief look at what complex data types look like, and we’ll discover how they are useful for keeping tightly related data together.

Learning Outcome Guide

At the end of this tutorial, you should be able to:

Explain the difference between primitive and complex data.
Name the two possible values for Boolean data types.
Create objects using the Object Literal syntax.
Create objects using the new keyword and object constructor functions.
Access members (properties and functions) of objects using the dot notation.
Add new properties to objects dynamically.
Describe the role of the .toString() method in certain objects such as dates.
Create date objects for specific dates.
Use date object functions to get specific information about the date.
Modify a date object using its built-in functions.

Primitive vs. Complex Data

Information is truly the central part of why computer programs exist. We’ve seen that there is a type of information that is primitive in nature. Primitive information refers to data that is in its most simple form. Strings and numbers are the foundational examples of such data. Data types for primitive information are built directly into our programming languges, and JavaScript is no exception.

Where computer programs get more useful and interesting is when we start dealing with complex information. Complex data tends to have multiple pieces of information that are “bundled together”, typically because there is some significant relationship between the individual pieces. These data types are not built into the programming language, but our language supports the creation of these data types. In JavaScript, complex data types are based on the built-in Object data type.

Object Literals

Launch VS Code side-by-side with an external terminal. (See the first tutorial in this QuickStart series if you need a refresher on how to do this.)
Create a file called data-types.js in the same folder as the scripts from the earlier tutorials.
data-types.js
```
console.log('Data Complexity in JavaScript');
console.log('===============================');
console.log();
```
Run it in the terminal using Node.
Terminal window
```
node --watch data-types.js
```
Let’s begin with a look at how primitive values can be stored in individual variables. Add the following code to your JavaScript file.
data-types.js
```
// Primitive types: string, number, boolean
let fullName = 'Stewart Dent';
console.log(`The value ${fullName} is a ${typeof fullName}.`);
let age = 25;
console.log(`The value ${age} is a ${typeof age}.`);
let employed = true;
console.log(`The value ${employed} is a ${typeof employed}.\n`);
```
Notice we’ve also added a new data type: Boolean. This data type represents two possible values: true and false. In fact, JavaScript’s list of reserved words includes both of these as keywords.
The problem with having these as entirely separate variables is that it doesn’t indicate any connection between these items. If the data is related, we can group them together as a set of values.

Add in the following code as an example. This creates an object, named person, with three properties.
data-types.js
```
// Complex types: Objects - object literals (the (still popular) OG approach to creating objects)
let person = {
    name: 'Stewart Dent',
    age: 25,
    employed: true
};
console.log("Here is the data for a person:");
console.log(person);
```
Notice a few things about how we’ve declared our variable. First of all, we’ve used curly braces ({}) to group the items together. Secondly, inside the braces we’re declaring name-value pairs in this format: propertyName: value. Third, notice that we separate each property with a comma (,). This way of creating variables/objects uses Object Literal syntax.

The result of displaying the person variable to the console is that all of the data contained by that object is shown in the terminal.
Terminal window
```
Here is the data for a person:
{ name: 'Stewart Dent', age: 25, employed: true }
```
If we were to examine what data type the person variable is, we would see that it’s an object.
data-types.js
```
// Remember: A variable's type is determined by the contents of the variable
console.log(`My person variable is an ${typeof person}.`);
```
One of the beautiful aspects of JavaScript is that it’s an extensible language. That’s just another way of saying that JavaScript is flexible in allowing us to create our own objects. There’s more to discover when it comes to creating objects. You can read about that at these links.
AUTHOR TODO: Links to tutorials/explanations on objects
Because this person’s name, age and employment status is bundled as a single object, we can access individual properties using a dot (.) between the variable name and the property name. Let’s try that with the following code.
data-types.js
```
console.log(`${person.name} is ${person.age} years old.\n`);
```
This produces the following output.
Terminal window
```
Stewart Dent is 25 years old.
```
Property accessors provide access to an object’s properties by using the dot notation or the bracket notation. MDN Reference
The properties on our object are not just something we can read. We can change those values as well. Let’s pretend that Stewart has just celebrated his birthday. He’s a year older, so we can update his age.
data-types.js
```
person.age = person.age + 1;
console.log(`${person.name} is now ${person.age} years old. Happy Birthday!\n`);
```

Obect Literal syntax is the OG way of creating objects in JavaScript. In this next part, we’ll discover another way of creating objects.

Date Objects

JavaScript environments, such as Node and the browser, include additional complex data types that we can use when creating object variables. Because they come pre-installed, we create those objects using the new keyword along with a call to the object’s constructor function.

An excellent example of this is the Date() constructor that lets us build an object that contains date and time information.

Add this example to your script. Notice that we’re not creating our object using Object Literal syntax. Rather, we’re using a constructor function.
data-types.js
```
// Complex types: Date
let today = new Date(); // The current date/time
console.log(`Today is ${today}`);
console.log(`The year is ${today.getFullYear()}`);
```
The purpose of the new keyword is to have the constructor generate a new, distinct object. The purpose of the constructor function itself is to set up the object with “meaningful” information.

One of the style conventions in JavaScript is that constructor functions should start with a capital letter (e.g.: Date instead of date). You’ll see that play out with other built-in constructor functions. When we build our own constructor functions, we’ll follow the same pattern.
Of course, depending on when you run this code, your output will change. That’s because the Date() constructor function will (by default) generate the current date in your local time zone. When I ran this on my computer, I got the following.
Terminal window
```
Today is Sun Mar 09 2025 15:57:33 GMT-0600 (Mountain Daylight Time)
The year is 2025
```
There’s a few interesting things to note about our Date object, which we’ll examine in the following steps.
First, displaying the today variable as a whole doesn’t show up as some data enclosed in curly braces. That’s because this build-in function is specially designed to show its content as a string. However, if we use the typeof operator, we can still see that it is indeed an object (not a string).
data-types.js
```
console.log(`My today variable is an ${typeof today}.`);
```
Why did we see a string when displaying today in the console? That’s because the Date() object has a custom .toString() function that outputs the object’s data in a more “human friendly” format. Well, maybe not that friendly, but it does contain the exact moment in time, right down to the millisecond!
When we create our own constructor functions in a later tutorial, we’ll discover how we can also include a custom .toString() that displays our objects information to whatever level of detail we choose.
A second thing I want to point out is that our date object doesn’t just contain information - it contains functions that allow us to get specific parts of that information.

When we called today.getFullYear(), we got the Year portion of the date. There are quite a large number of functions on Date objects that allow us to access different parts of the date. Here’s just a few.
data-types.js
```
console.log(`This date is ${today.getMonth()} months after January.`);
console.log(`The date portion is ${today.toDateString()}.`);
console.log(`The time portion is ${today.toTimeString()}.`);
console.log(`The complete date/time is ${today.toString()}.`);
```
Notice in that last example that we explicitly called our object’s .toString() function. When we earlier displayed just ${today}, the console made an implicit call to the object’s .toString() (because the goal of console.log() is to display textual information).
We can also call functions on our date object to change some aspect of the date. For example, we can set the day to the first day of the month.
data-types.js
```
today.setDate(1);
console.log(`Now the date is ${today.toDateString()}.`);
```
Or, we could set the date to the day before by first getting the current day of the month and subtracting one.
data-types.js
```
let yesterday = today.getDate() - 1; // should produce a 0
today.setDate(yesterday);
console.log(`The previous day was ${today.toDateString()}.`);
```
Tip
Why do Date objects use functions to access or change information about the date? Our earlier person object didn’t have that.
The reason is that our person object was a general object, whereas the built-in Date() object is specially crafted to protect the date and time details from being assigned corrupt information. Notice that when we changed the day of the month to zero, that caused the date to change to the last day of the previous month.
Our person object has no such protections in place. Consider how we can change Stewart’s age to something strange.
data-types.js
person.age = 'Something strange'; console.log(person); // Now that's not terribly secure!
For now, our object literals are fine as-is, but we should remember that they are subject to uncontrolled changes. That means that we - as the developers - will need to be careful to use them properly. (At least, until we learn how to create classes with all of the protection goodness that they provide.)
We initially set up today as the current date. This time, let’s make a new object with a specific date in mind. Write the code to create a new variable called hiredDate.
data-types.js
```
let hiredDate = new Date('January 5, 2022');
console.log(`Your first day of work will be ${hiredDate.toDateString()}.\n`);
```
That’s not the only way we can create a specific date. But it does highlight the fact that the Date constructor function accepts arguments. For more details, see the Date constructor on MDN.
Before we finish with dates, let’s take that hiredDate value and apply it to the person object we created earlier.
data-types.js
```
// We can dynamically assign this value to our person object.
person.hiredOn = hiredDate;
console.log(`Here's ${person.name}'s latest information:`);
```
Notice how JavaScript objects are dynamic. This means that we can add any extra information we want to our objects. Try displaying the complete person object in the terminal.
data-types.js
```
console.log(person);
```

There are a number of other built-in constructor functions. Here’s just one more, to satisfy your curiosity.

let url = new URL("https://github.com/dagilleland/CPSC-1520");
console.log(`\nVisit ${url.toString()} for the source code of this website.\n`);
console.log(url);

The URL() object contains the details of a web address. Displaying the url by itself shows the different parts of that address.

Visit https://github.com/dagilleland/CPSC-1520 for the source code of this website.

URL {
  href: 'https://github.com/dagilleland/CPSC-1520',
  origin: 'https://github.com',
  protocol: 'https:',
  username: '',
  password: '',
  host: 'github.com',
  hostname: 'github.com',
  port: '',
  pathname: '/dagilleland/CPSC-1520',
  search: '',
  searchParams: URLSearchParams {},
  hash: ''
}

Date objects are a fairly versatile data type for representing date and time information. They have been around since the very early days of JavaScript. But they are not without their problems. Fortunately, there’s a new object called Temporal which will be available in browsers in the near future.

JavaScript Temporal is coming Learn about the upcoming Temporal object proposed for browsers.

Conclusion

With this tutorial, we’ve covered some essential ground that will help us as we move forward. Everything up to this point has been largely focused on exploring information, with a little bit on how we can manipulate information. Appreciating how data can exist in various forms - primitive and complex - it essential because everything we do in JavaScript will revolve around data.

Our next stop is to take a closer look at functions and the vital role they play in making our code modular and easier to manage.

A computer program is a set of instructions for manipulating information. — Dan Gilleland