Javascript Data Types

When we create a variable, we associate it with a data type. it can be a number, a text, a keyword etc. Data types, in programming, tell us what type of data a variable has, for example integers, floats, strings, or booleans. Data types also determine what kind of operations can be performed on the variable without causing an error. Al programming languages have data types or data structures, but sometimes with slight differences.

Javascript data types can be classified into two groups: primitive and reference.

Primitive data types are Boolean, Null, Undefined, Numbers, Symbols and String.

Reference data types are Objects, Arrays, and Functions.

Primitive data types

Primitive data types in Javascript are used for representing a value. These data types are immutable, meaning their values cannot be changed. Another important thing to know about primitive types is that they do not have methods. Let’s take a look at these data types one by one.

String data type

The string data type is basically for storing and representing text or series of characters. String variables are enclosed in either double or single quotes.

let firstName = "John";

Here we assigned a string data type to the variable firstName and its value is “John”.

If we want to check what type of data we are working with, we can use the “typeof” operator.

console.log(typeof firstName);

The console should show us that we have a string.

If we want to use double quotes with double quotes, we need to escape it with a backslash character.

let greeting = "Hello, \"delicious\" earthlings!";

or we can use single quotes instead of the double quotes.

let greeting = 'Hello, "delicious" earthlings!';

but if you want to use single quotes within the string, you must escape it.

Note! We can use numbers as string.

let numberAsString = "12";
console.log(typeof numberAsString);

In this case the value of the variable “numberAsString” is treated as a string, not a number.

We mentioned earlier that immutable data types don’t have methods, however, we can use string methods to manipulate a string, but these methods will return a new string. So we don’t change the original value. For example, we can’t change the X character in a string to something else. But we can manipulate the character like this:

let firstName = "John";
console.log(firstName.toUpperCase());

this string method will change all characters of the string to uppercase, but the value itself will remain the same.

Number data type

Number data types are data types that represent numbers. There are various number data types, including integers, floating-point numbers, and complex numbers.

We write numbers without quotes.

let age = 40;
console.log(typeof age);

We assign 40 to the variable “age” and we check its type in the console, which is “number”.

Numbers can be whole numbers or decimals (also called floats or floating-point numbers).

We can perform arithmetic operations with the number data type.

Above I mentioned that we can use numbers as strings. So if we do this:

let age = 40;
let ageString = "50";

let result = age + ageString;
console.log(result);

The console should show us 4050. It concatenated the two variables. If we check the type of the result variable:

console.log(typeof result);

then we get a string. So in this case we cannot perform an arithmetic operation on those two variables. However, if we remove the quotes, we will get a number type, and the value of the “result” variable will be 90.

When we perform arithmetic operations and we make mistakes, we may encounter NaN property. NaN in JavaScript stands for “Not a Number”. It is a value that is typically returned when an operation cannot be performed because one or more of the operands is not a number.

For example, if you want to multiply a number with a string

console.log(5 * "hello");

you get NaN.

Boolean data type

A boolean data type is a logical data type that can have one of two values, either “true” or “false”, “one” or “zero”, “yes” or “no”. We often use booleans with conditional statements. If this is true, do this, if not do that.

We can set a variable to true or false (no quotes)

let foo = true;
console.log(foo);

in this case the value of the variable foo is true, and if we check its type

console.log(typeof foo);

we’ll get boolean. here the “true” is a special keyword, not a string. We can do the same with false.

let foo = false;

console.log(foo);
console.log(typeof foo);

We can also use comparison operators to get a true or false value.

let myAge = 40;
console.log(myAge == 40);

in this case the console should show us true.

console.log(myAge == 20);

in this case false, because myAge does not equal to 20.

null data type

null represents an empty value, meaning no value has been assigned. For boolean operations null is treated as false.

let test = null;

console.log(test);
console.log(typeof test);

Here we assign the special keyword “null” to the variable test. The console should show null for is, however when we chack the type, the console will show “object”. This is not an error, this is how Javascript represents this data type.

Undefined data type

The undefined data type in JavaScript is a special value that represents a missing or unknown value. It occurs when we don’t assign a value to a variable.

let food;
console.log(food);

The console shows undefined, because we haven’t assigned a value (a data type) to this variable. Therefore its type is undefined.

Symbol data type

The symbol data type was introduced in ES6. A symbol is a unique and immutable identifier. It can be used as a property key in an object. In this way it’s somewhat similar to strings.

We can create a value of this type with the Symbol() function.

let a = Symbol('test');

The parameter in the Symbol() function is optional. Every time the Symbol() is called, it returns a unique value. So if we do this:

let a = Symbol('test');
let b = Symbol('test');

console.log(a == b);

the console should show false.

Reference data types

Reference data types in Javascript are data types that point to other data values. These data types are mutable, meaning their values can be changed. They are also called dynamic data types and have methods.

Objects

In JavaScript, an object is a data structure that pairs a key with a value. Objects are written with curly braces, and properties are added to them using the dot notation. Javascript has built-in objects, but we can also create our own objects.

let post = {
title: "What is Javascrip",
content: "Javascript is a ......",
is_featured: true
}

Here we created an object called post using the object literal notation. It has three properties, title, content and is_featured. Each property consists of key-value pairs. The values can be different data types. In this case the first two are string, the third one is a boolean type.

We can check its type with the typeof

console.log(typeof post);

and it should give us “object”.

We can access the properties of an object.

console.log(post.title);

It gives us the title of the post.

Because this data type is mutable, we can change the property value like this:

post.title = "What is PHP?";

Now the title should be changed:

console.log(post.title);

We can add methods to object. Methods are basically things the object can do.

let post = {
title: "What is Javascrip",
content: "Javascript is a ......",
is_featured: true,
subscribe: function() {
// Here comes what this method does
console.log("The reader is subscribed to this post!");
},
unsubscribe: function() {
// Here comes what this method does
console.log("The reader is unsubscribed from this post!");
}
}

Here we added two methods, subscribe and unsubscribe.

We can call them the following way:

post.subscribe();
post.unsubscribe();

So it’s similar to how we access properties, but we add the two parenthesis after the method name.

Arrays

An array is a data type in JavaScript that allows you to store multiple values that relate to each other in a single variable. Arrays are similar to objects, but they are designed to store data in a more specific way.

We write arrays with square brackets, like this.

let posts = ['What is Javascript', 'What is PHP', 'What is CSS'];

and we separate the items with a comma. The array called posts contains three items.

We can check its type with the typeof

console.log(typeof posts);

This will NOT give you array for the type. It will give you object. The typeof for an array will always return object.

We can access items in an array

console.log(posts[0]);

remember that array indexes are 0-based.

We can override items in an array

posts[0] = 'What is C#';

Now “What is Javascript” is replaced with “What is C#”.

Arrays also have properties and methods. We’ll talk more about array methods here.

Functions

A function is a block of code that takes an input and produces an output. In JavaScript, functions are first-class objects, which means that they can be passed as arguments to other functions and returned from functions.

A function is defined with the “function” keyword followed by the name of the function and parenthesis. Inside the parenthesis, parameters can be included. After the parenthesis we have opening and closing curly braces and we place the code to be executed inside.

function greeting() {
console.log('hello');
}

We execute the function by calling its name:

greeting();

We can add a parameter to the function

function greeting(name) {
console.log('Hello ' + name);
}

greeting('Tom');

You can learn more about Javascript functions here.

Wrapping it all up

To sum up, it’s important to know the difference between primitive and reference data types which is that primitive data types are immutable, while reference data types are not. This means that you can’t change the value of a primitive data type once it’s been set, but you can change the value of a reference data type.

References:

• MDN Web Docs
• W3schools