DEV Community

loading...

The Data Types of Javascript

Thomas(Tripp) White
Living life one line at a time.
・3 min read

Javascript has evolved into one of the most robust languages. Before javascript was just mainly focused on adding some interactivity to the web, but now we are able to build mobile application with React Native, backend with Node.js and even desktop applications with Electron. To take advantage of all this functionality we need to make sure we have our basic Javascript fundamentals down. Today I want to talk about the different data types in Javascript.

Primitive vs Non-Primitive

There are two main categories data types fall into with javascript. You have primitive and non-primitive. Why is this important? Depending on its category will determine how javascript stores and references the information. A primitive data types stores a single value and are passed by value. A non-primitive data type can store multiple values and are passed by reference.

Primitive

To clear things up, a primitive data type are things like boolean, strings, and numbers. Being passed by value means if you assign one variable the value of a different variable it stores just the value. Example: let x=“hi” let y=x. y is assigned ‘hi’. In background when y is assigned x, Javascript takes 'hi' and creates a new space in memory to reference. This keeps x and y separated from each other.

primitive being passed by value

String

A string is a group of characters inside of quotes. Javascript lets you use both single and double quotes.

let str = hi there
let str2=I have 2 dogs
Enter fullscreen mode Exit fullscreen mode

Number

This represents a number and can be assigned with or without decimals. They are 64-bit floating point values and have a limit to how big a number can be.

let num = 3
let num2 = 3.3
Enter fullscreen mode Exit fullscreen mode

BigInt

This is used to store numbers larger than what the number data type can hold.

let bigNum = 87956239487562934765239847562398745638974562983745623987456
Enter fullscreen mode Exit fullscreen mode

Boolean

Conditional values of true and false. You can set variables to a boolean value or you can also compare and that will return a boolean value.

let bol = true
let num = 3
num === 3 //return true
num === 33 //return false
Enter fullscreen mode Exit fullscreen mode

Undefined

This is when you declare a variable but never assign it a value. Javascript will automatically assign it an undefined value.

let x; //value of x is undefined
let y = undefined //same as declaring without assigning value = undefined
Enter fullscreen mode Exit fullscreen mode

Null

Represents a non-existent or invalid value.

Symbol

Used to store an anonymous and unique value. This a new data type that was introduced with ES6.

let sym = Symbol(unique)
Enter fullscreen mode Exit fullscreen mode

Non-primitive

Non-primitive data types are things like arrays and objects. They can hold multiple values inside of them. Being passed by reference means that if you assign a non-primitive data type to a variable it actually stores the location of the original variable and not the value. This can lead to some tricky errors to fix if not managed correctly. Example let x=[1,2,3] and let y=x. In the example we are not assigning y the value of [1,2,3] like we would for a primitive data type. We are actually assigning it x. In the background when we assign y=x Javascripts looks for the location in memory that represents x. It will then assign that location to y. This means if we make any changes to x it will also reflect in y.

Non-Primitive being passed by reference

Object

Stores a collection of data. If the data type is non-primitive it will always an object type in javascript.

let obj = {name: Tripp, dogDad: true}
let arr = [1,2,3,4]
Enter fullscreen mode Exit fullscreen mode

I hope you found this quick summary of data types in Javascript useful. They are pretty straight forward but if not managed correctly can lead to some tricky errors to debug.

Discussion (5)

Collapse
lukeshiru profile image
LUKE知る

Nice article! One thing worth mentioning is that the graphics are hard to read with Dev.to's dark theme. Try adding a white border to the text or making it gray #808080.

Cheers!

Collapse
sanampakuwal profile image
Sanam

Short, Concise, and Clear explanation.

cheers!

Collapse
turpp profile image
Thomas(Tripp) White Author

Thanks Sanam!

Collapse
bam92 profile image
Abel Lifaefi Mbula • Edited

Thanks for this. I failed a test because I didn't pay attention that objects work by ref not by values.

Collapse
turpp profile image
Thomas(Tripp) White Author

Abel,
Your welcome! That is a super easy detail to overlook. Good news is I bet you never forget it now! Best of luck on your future test.