Beginners Guide To Understanding JavaScript Data Types

What are JavaScript data types?

JavaScript is a dynamic programming language where nearly everything you type is a form of data. Every piece of data falls into one of JavaScripts Data Types: Numbers, Strings, Booleans, Objects, Null, Undefined and Symbols. Below we are going to learn about the different data types and how they might interact with one another at a basic level of understanding.

Typeof

"typeof" is an operator in Javascript that will return a string indicating the data type of the operand. It accepts one argument after it and it is the data you would like to know the type of. A simple way of using the operator is by using console.log(). Throughout this blog, we will be using this operator to identify the different data types

console.log(typeof dataGoesHere);
// Expected output: The data type of dataGoesHere

Numbers

Numbers in their most basic form is a data type that contains a given value. When JavaScript was being developed it was not believed that it needed to require a large amount of precision to get things working so there was just a single all-encompassing data type. This is unlike some other programming languages that split up numbers into different data types like Integers, Decimals, Doubles, Floats, and so on. Although Javascript has become a more widely used language for front and backend development in recent years, it is this one caveat that keeps it from being used in many Banking and Engineering applications where there is a severe need for precision.

console.log(typeof 1337);
// 'number'
console.log(typeof 3.14);
// 'number'
console.log(typeof Infinity);
// 'number'

Strings

Strings are how Text is represented in JavaScript. They are denoted by being surrounded by quotation marks " ", single quotes ' ', or backticks ` `. Each different notation has its specific uses that can be learned by further studying how to interact with strings. Note that even a string of an empty space is still a string of that empty space.

console.log(typeof "lookie lookie I am a string.");
// 'string'
console.log(typeof 'I AM A BIG STRING');
// 'string'
console.log(typeof `backticks are very useful I swear`);
// 'string'
console.log(typeof " ");
// 'string'

Booleans

Booleans consist of data that can only be one of two possible values: 'true' or 'false'. They play are large role in how data types can interact by either setting limits or conditions to certain functions. Examples would be in "if" statements and looping.

console.log(typeof true);
// 'boolean'
console.log(typeof false);
// 'boolean'

Objects

Javascript objects are unlike what we have looked at so far in that are a collection of data rather than a singular value. The object consists of a list of properties, wrapped in curly braces { } and separated by commas. Each property consists of Key and Value pairs. Where the data of the Key points to its Value.

const javaScriptObj = {
    key: 'value',
    book: 'The Mistborn Saga',
    createdBy: {
        firstName: 'Brandon',
        lastName: 'Sanderson',
        },
    firstRelease: 2006
};
console.log(typeof javaScriptObj);
// 'object'
console.log(javaScriptObj.book);
// 'The Mistborn Saga'
console.log(typeof javaScriptObj.firstRelease);
// 'number'

The easiest way to describe JavaScript objects is to think of them as dictionary definitions or as a basic directory on a computer. The Dictionary would have an array of terms, in our case the name or Key, and their definitions, in our case the Values of the Key. Whereas Object values can also contain more objects. Objectception. So it may help to think of them as directories.

Arrays

Not included in the major data types since it is just another form of a javascript object whose key points to multiple forms/sets of data but it is important to understand the differences and uses between them. Arrays are enclosed in brackets [ ]. their similarities can be seen where the variable name could be thought of as the Key and the output could be seen as the Value.

const cats = ['Tom', 'Garfield', 'Felix', 'Sylvester', 'The Cheshire Cat'];
console.log(typeof cats);
// 'object'
console.log(cats[0]);
// 'Tom'

Null

The Null data type exists to represent an intentionally absent object or value. It can be used to catch errors and return null instead of completely breaking things. Strangely enough, the typeof null returns an object. I think of it being similar to irrational numbers in math. In math, Irrational numbers are still technically a representation of numbers used when you are unable to perform the operator on the two numbers. Similar to how null is still an object because null is there to be an absence of data.

console.log(typeof null);
// 'object'

Undefined

Undefined is when you are dealing with data that has not been assigned with an appropriate set of data. as a value.

console.log(typeof undefined)
// 'undefined'
let unassignedVariable
console.log(typeof unassignedVariable)
// 'undefined'
let assignedVariable = " "
console.log(typeof assignedVariable)
// 'string'

Symbols

A recent addition to JavaScript as of Es6. Symbols were added as a datatype in Javascript so that things like objects could be iterated over. It is made to represent a "unique" value that may be used as an identifier for the properties of an object.

const one = Symbol();
const two = Symbol(1337);
const three = Symbol('meow');

// To show that the values are *unique*
console.log(Symbol() == Symbol());
// false
console.log(Symbol() === Symbol());
// false

// To show the data type and note that capital S since it is log of the command.
console.log(typeof two);
// 'symbol'
console.log(three.tostring());
// 'Symbol(meow)'

// The first line logs false because the first part is a symbol with a key of 444 and the second part is a symbal with the discription of 444. whereas in the second line of code they are equal since they are both symbols with the same key.
console.log( Symbol.for(444) === Symbol(444));
// False
console.log( Symbol.for(444) === Symbol.for(444));
// True

// Below we see that it does not catch the value whose Key is Symbol() when using a standard console.log. Also when using JSON.stringify it will not catch if the key or value is set with Symbol().
let obj = {}
obj['key1'] = 'value ';
obj['key2'] = 'value2';
obj[Symbol()] = 'value3';
obj['key4'] = Symbol();

for(let x in obj){
    console.log(x, obj[x]);
}
console.log(JSON.stringify(obj))
// 'key1' 'value1'
// 'key2' 'value2'
// 'key4' Symbol()
// {'key1':'value1','key2':'value2'}

Conclusion

We have now seen the different data types in JavaScript. All that is left now is trying to figure out how the types of data can interact with each other, but that will all be left for another time! Thank you for reading my beginner's guide to understanding JavaScript data types.