Hi everyone, and welcome to another exciting edition of Boring JavaScript. Today, we tackle the nine different data types within JavaScript.
Line Up!
There are three categories of data types in JavaScript. How JavaScript deals with each category is important to know:
Primitive
Primitive variables are ‘simple’ variables, like numbers and strings. These variables have no methods associated with them (generally), and are not objects. Important! When you assign a primitive to a variable, or pass it as an argument to a function, a copy of the variable is made and given to that variable. Why is this important? We’ll cover that in a minute.
Boolean
Boolean variables have one of two values – ‘true’ or ‘false’. And that’s it.
// two Boolean Values
let myTrueValue = true;
let myFalseValue = false;
console.log(typeof myTrueValue); // prints 'boolean'
Number
Number variables are just that – numbers. It represents any floating point and integer number. Using the Number object you can determine the limits of integers and floating point numbers. Simply look at Number.MAX_SAFE_INTEGER, Number.MIN_SAFE_INTEGER, Number.MAX_VALUE, and Number.MIN_VALUE.
let myInteger = 100; // sample Integer number
let myFloat = 1.221; // sample Floating point number
console.log(typeof myInteger); // prints 'number'
console.log(typeof myFloat); // prints 'number'
String
String variables contain a variety of textual data – characters, numbers, just about anything.
let myString = "This is my string";
console.log(typeof myString); // prints 'string'
BigInt
New to JavaScript, a BigInt variable allows you to work with integers beyond the Number.MAX_SAFE_INTEGER and Number.MIN_SAFE_INTEGER. To specify a BigInt, you type in the number and suffix it with the letter ‘n’. Works just like numbers, but please note: You cannot mix BigInt numbers with Numbers.
let myBigInt = 1n;
console.log(typeof myBigInt); // prints 'bigint'
myBigInt += 1; // WHOOPS! Throws error! You cannot mix BigInt and Number
myBigInt += 1n; // this is legal
undefined
Undefined? Really? Yes! This really is a data type, and can be assigned to a variable. Doing so basically means that you have declared a variable, but you have yet to assign it any values. Confused? Yeah, so am I.
let myUndefined = undefined;
console.log(typeof myUndefined); // prints 'undefined'
Symbol
Also new to JavaScript, Symbols are unique and immutable variables. They are normally used as keys in Maps, but you can use them anywhere when you need ‘unique’ and ‘immutable’ variables.
let mySymbol = Symbol(1);
console.log(typeof mySymbol); // prints 'symbol'
Structural
Structural variables are variables that are not the simple values of primitives. Instead, they represent more complex data structures. Important! When you assign a structural to a variable or pass it as an argument to a function, a reference to the data is passed, not a copy of the data. This is very important to know when working with structural variables. We’ll show you that shortly.
There are two types of structural variables:
Object
Simply put, an Object is a collection of key/value pairs, and possibly some methods associated with it. It’s really a LOT more than that, but that’s beyond this post.
let myObject = { property: 1 };
console.log(typeof myObject); // prints 'object'
Function
A function is an object to which you assign code that gets executed when it is called. Again, everything a function can do is beyond the scope of this post. An arrow function and a class are also types of functions.
let myFunction = function (args) {};
let myArrowFunction = (args) => {};
let myClass = class BoringJavaScript {};
console.log(typeof myFunction); // prints 'function'
console.log(typeof myArrowFunction); // prints 'function'
console.log(typeof myClass); // prints 'function'
Structural Root Primitive
Then, of course, there’s that one odd-ball of the group, and that is the Structural Root Primitive. There is only one – and that is null. It acts like a structural variable in that it is identified as an Object, but in practice it operates like a primitive – in that the value is copied and not referenced.
let myNull = null;
console.log(typeof myNull); // prints 'object'
So What Was So Imporant?
Why did I keep saying earlier that something was Important!?
It’s important to understand how JavaScript works with Primitive and Structural variables.
When you assign a primitive to a variable, or pass it as an argument, a copy of the primitive is made, and the new variable works with that copy. Therefore, you cannot change the primitive value of the original variable. For example:
let myVar = 1;
let mySecondVar = myVar;
// let's change the value of the second variable
mySecondVar = 2;
// what are the values of the variables?
console.log(myVar); // prints '1'
console.log(mySecondVar); // prints '2'
As you see, the first variable doesn’t change when the second variable is changed, even though we assigned the first variable to the second variable (line 5). All primitives work this way. A copy is made of the original variable’s value so that is cannot be changed except by changing the original variable itself.
Now, this makes a lot of sense, which is why structural variables can throw people for a loop.
Structural variables are passed by reference. Meaning, that the original value is not copied, but a pointer to the value is passed to the variable or as the argument to the function. How does that work? Let’s look at an example:
let myObject = { property: 1 };
let mySecondObject = myObject;
// let's change the property of the second variable
mySecondObject.property = 2;
//what are the values of the variables?
console.log(myObject); // prints { property: 2 }
console.log(mySecondObject); // prints { property: 2 }
What? Yes, you see that right. By passing a reference to the value instead of copying it, changes made to the second variable will also be made to the first variable. This is very important to remember – and can be very powerful is used correctly (and can blow things up if used incorrectly).
The Video
Here is our Boring JavaScript video on JavaScript Data Types. Be sure to subscribe to our YouTube channel.
Categories: Boring JavaScript Javascript
thevirtuoid
Web Tinkerer. No, not like Tinkerbell.
Creator of the game Virtuoid. Boring JavaScript. Visit us at thevirtuoid.com
TheVirtuoid 
Leave a Reply