Data types in JS

What is a data type?

“A data type, in programming, is a classification that specifies which type of value a variable has and what type of mathematical, relational or logical operations can be applied to it without causing an error.” (techtarget, data type, November 2016)

From the above referenced quote, we can understand that a variable defined with a specific data type will describe what specific type of value it has and also only allows to assign values to the variable that describes the data type.

For example, a variable that is defined with string data type, will tell us that variable holds a value of string or variable only allows to be assigned a value of string.

How to declare a variable with a data type in JS?

In JavaScript, programmers cannot specify data types when declaring variables. Because it is a weakly typed programming language and will make assumptions of the data type based on the value the programmer assign.

JavaScript is considered a “weakly typed” or “untyped” language. The type in question here are the data types — nothing to do with typing from your keyboard. For programmers coming from C++ or Java, two strongly typed languages, this means that JavaScript will figure out what type of data you have and make the necessary adjustments so that you don’t have to redefine your different types of data. (oreilly, JavaScript Design ,William B. Sanders)

For more information about JavaScript being weekly typed programming language, read an article by Charlie Levine, JavaScript Is Drunk.

So how is variable declared in JS?

Variables in JS are declared in below syntax.

[variable type] [variable name] = [value]
var name = "John Doe";

JavaScript will read and figure the variable holds a value of string.

Also we can check the data type of a variable by using typeof operator.

So what are the data types of JS?

string

string variable is a collection of alphanumeric characters and symbols.

var name = "John Doe"
var heightDesc = "John doe is 5 feet tall! ";

number

number variables allows integers and decimals.

var age = 10;
var weight = 45.2;

boolean

boolean variables can only contain either true orfalse .

var isVisible = true

undefined

undefined variable is when a variable is declared but not given a value.

var name;

null

null is similar to undefined, but it has to be set intentionally. Null variable means it’s empty or nothing and it is because the developer set it be like that.

var username = null

objects

It is an unordered collection of key/value pairs. The collection can consist of variables, functions and data structures.

//object
var person = {
  name: "John Doe",
  age: 10,
  interest: ["gaming","reading"],
  getTotalScore: function(prevScore, currentScore){
      return prevScore + currentScore;
  }
}

arrays

Array allows to store multiple collections of data in a single variable.

// array
var colourList = ["red","blue","orange"];
var products = [ {id:0, name: "john"}, {id:1, name: "Doe"}];

These data types are categorized into two types.

1. Primitive Types
2. Reference types

Primitive types

Data types fall under this type are;

string, number, boolean, null, undefined.

These data types are fall under primitive data type because the variables defined with these data type can only be assigned with one value at a time. Due to that the variable is able to hold the value.

“In JavaScript, a primitive (primitive value, primitive data type) is data that is not an object and has no methods or properties.” (MDN Web Docs, Primitive)

“A primitive type has a fixed size in memory. For example, a number occupies eight bytes of memory, and a boolean value can be represented with only one bit. The number type is the largest of the primitive types. If each JavaScript variable reserves eight bytes of memory, the variable can directly hold any primitive value.” (oreilly, Primitive Types and Reference Types)

Reference types

Data types fall under this type are;

objects, arrays, function

These data types are fall under reference data type because the variables defined with these data type can be assigned with more than one value at a time and due to that it does not have a fixed size. Therefore, the value of the variable is stored on the memory and its memory address is used to reference the value to the specific variable.

“Reference types are another matter, however. Objects, for example, can be of any length — they do not have a fixed size. The same is true of arrays: an array can have any number of elements. Similarly, a function can contain any amount of JavaScript code. Since these types do not have a fixed size, their values cannot be stored directly in the eight bytes of memory associated with each variable. Instead, the variable stores a reference to the value. Typically, this reference is some form of pointer or memory address. It is not the data value itself, but it tells the variable where to look to find the value.” (oreilly, Primitive Types and Reference Types)

The difference can between primitive type and reference type can be identified from below examples.

Code

Result printed

What I’m trying to imply from this example is, variable “name” is assigned to “nameP1”, this will result in passing value directly to “nameP1” and not a reference that points to the memory location that stores “name” variable’s value.

Therefore, if variable “nameP1” as a new value assigned, it does no change to value stored in “name” variable but only stores a new value in memory allocated for “nameP1”.

code

What do you think the value of “nameP1” here ?

It will be “Leonard Hofstadter” because “nameP1” does not hold a reference to memory address of “name”, but a value. So if value of “name” is changed after line 3, there wont be any change to “nameP1”.

That’s why they are called primitive types. 🌟

Let’s see the behavior of reference types 👀

code

Printed result

😲 why is the result printed like this ❓

Shouldn’t the result be as the primitive example and print as “Leonard Hofstadter” ? Unfortunately, no.

Because when a variable “personInfo” is created and assigned a value, its value is stored in a memory space and its memory address is used as a reference and attached to the the variable. And when the variable “personInfo” is assigned to another variable called “actor”, it is passing a reference not a value directly. This action allows variable “actor” to take control over the value originally stored when declaring “personInfo”. So at line 5, variable accesses the property named “personName” and updates its value. This is why it’s called reference type.