An Overview of JavaScript Data Types: Primitives & Objects

Javascript has become my primary programming language as a new developer. It is powerful and provides developers with a variety of data types to work with. Here we’ll dive into the two categories of data types in JavaScript.

Primitives

The simplest data type in JavaScript are primitives. They include numbers, strings, booleans, undefined, null and symbols. They store single values that cannot be changed. Here are examples of using primitives.

const number = 100;
const string = "JavaScript is awesome!"
const boolean = true;
const undefinedValue; 
const null = null;
const sym = Symbol('symbol');

A concept that’s important to know is that primitives are passed by value, which I will discuss more of in another post. This basically means that when assigning a primitive to a variable or pass it as an argument into a function, a copy of the value is created. Changes to a value in one location doesn’t affect it’s value in another.

Objects

Now objects are a little more complex than primitives. They can store collections of data and have properties and methods which we can associate with them. Unlike primitives they are passed by reference, which mean that when assigning an object to a variable or passing it as an argument into a function, a reference of that original object is created.

We can create objects in JavaScript by using object literals, the object constructor, or by creating custom objects. Here is an example of using object literals:

const house = {
  developer: "Ocean Breeze",
  yearBuilt: 2017,
  currentListingPrice: 750,000,
  bedrooms: 4,
  bathrooms: 2,
  hasPool: true,
  calculateDiscountedPrice: function(discountPercentage) {
    return this.currentListingPrice - (this.currentListingPrice * (discountPercentage / 100));
  }
}

In this example we’ve created an object house with properties developer, yearBuilt, currentListingPrice, bedrooms, bathrooms, hasPool as well as a method calculateDiscountedPrice which returns the discounted price of the current listing price after passing a number to it (discountPercentage).

It’s also important to note that in JavaScript, arrays and functions are also considered objects! In other words, they too also have properties and methods just like objects.

For example, here is an array of the band members in The Beatles.

const theBeatles = ["John Lennon", "Paul McCartney","George Harrison", "Ringo Starr"];
console.log(theBeatles.length); // -> 4
theBeatles.pop();
console.log(theBeatles) // -> ["John Lennon", "Paul McCartney","George Harrison"]

In this example, the array theBeatles has a length property returning the number of elements in the array, which would be 4. We can use the pop() method on the array to remove the last item in the array and our result would leave us with only the remaining members of the band.

Here is an example of using a function

function sayJoke(name) {
  return `Why did ${name}'s code break? Because it had too many bugs!`;
}

console.log(sayJoke.name) // -> "sayJoke"
console.log(sayJoke("Sean")); // -> Why did Sean's code break? Because it had too many bugs!

In this example, the function sayJoke also has a name property that returns the name of the function.

Conclusion

Understanding the differences between these two data types is important to becoming a better programmer. Primitives are data types that store single values, while objects store collections of data and have properties and methods that allow us to manipulate and interact with the data they store.