Contact Information

KodeBlog

We're Available 24/ 7. Drop us an email.

JavaScript Primitive Types

Let's now look at data types. A data type specifies the nature of the data. This could be a string composed of letters or numeric composed of numbers etc. A primitive type in JavaScript refers to data types that are not objects and does not have any methods. Objects represent real world entities and methods are operations that those entities can perform. An example of an object is the console that we have worked with in the previous lessons and log is an example of a method of the console object.

Now that we know the difference between a primitive and an object, let's look at the types of primitives that JavaScript supports.

  • string
  • number
  • boolean
  • null
  • undefined
  • symbol

Topics to be covered

We will cover the following topics in this lesson

Lesson Prerequisites

For you to successfully complete this lesson, you should have the following requirements

  • NodeJS - we will be executing JavaScript files directly using NodeJS from the command line. Alternatively you can execute the files in the web browser but that takes a a little more time and involves working with multiple programs.
  • Web Browser - a web browser can be used as an alternative to executing JavaScript files that we will be working with.
  • Visual Studio Code - we will be using it as the code editor. It comes with a built-in terminal that will allow us to easily execute JavaScript code from within the text editor. You can also use any code editor that you prefer.
  • JavaScript Basics - this is an added advantage and not mandatory. We will explain every piece of code covered in these lessons.

Lesson Practical Examples Project Setup

This is a practical based lesson. For you to successfully work out the examples given in this lesson, you will need to setup the following directories and files

Create a new directory called javascript-primitives

Open the directory javascript-primitives in Visual Studio Code or your favorite code editor

Create the following files inside your project folder.

  • json.js - this file will be used to for code dealing with the switch statement

The following visualizes our project setup

javascript-primitives
-primitives.js
-numbers.js

JavaScript Dynamic Typing

If you have worked with statically typed languages like C# or Java, then you know that you have to specify the data type when declaring a variable and that cannot be changed later on. The following code shows how statically typed languages declare variables

int first_number = 9;
string first_name = 'Happy';

In the above example, we defined a variable first_number of int type and assigned a value of 9 to it. We also created a string variable first_name and assigned a value to it. This is what is know as static typing.

Let's now look at dynamic tying. Dynamic typing allows you to declare a variable without specifying the data type. The variable data type if determined by the value that you assign to it. For example, if you assign letters to a variable, then it will be a string. If you assign numbers, then it will be of number data type.

The above code in JavaScript can be written like

let first_number = 9; //dynamically types to number
let first_name = 'Happy'; //dynamically types to string

JavaScript Strings

Let's now look at how to work with strings in JavaScript. Strings are alphanumeric in nature and must be enclosed in either single or double quotes. Single quotes are commonly used to declare strings but if the single quote is part of the string value then we can assign it using double quotes.

Let's look at a practical example. Open the file primitives.js and add the following code

let quote = 'Talk is cheap. Show me the code.';

console.log(quote);

console.log(typeof quote);

HERE,

  • let quote = 'Talk is cheap. Show me the code.'; defines a variable quote and assigns a string value to it.
  • console.log(quote); prints the value of the variable quote
  • console.log(typeof quote); prints the data type of the variable quote using the function typeof.

Open the terminal and run the following command

node primitives.js

You should be able to get the following results

Talk is cheap. Show me the code.
string

Let's now look at how to declare a string that contains a single quote in it.

let name = "D'Angelo";

console.log(name);

console.log(typeof name);

HERE,

  • let name = "D'Angelo"; the single quote is not treated as a special character used to hold the value of the variable but it is instead treated as part of the value.

Executing the above code gives us the following results.

D'Angelo
string

Let's look at another example that contains the double quotes as part of the string value.

let message = 'Are you saying we are just "friends"?';

console.log(message);

console.log(typeof message);

HERE,

  • let message = 'Are you saying we are just "friends"?'; defines a variable message using single quotes so the double quotes within are treated as part of the value.

Executing the above code produces the following results

Are you saying we are just "friends"?
string

But what if you are in a JavaScript cult and you take an oath to always declare strings using single quotes? How do you stick to your oath and declare a variable that still contains a single quote as part of the value? Well, you can do it like so.

let bold_message = 'I ain\'t using double quotes yo!';

console.log(bold_message);

console.log(typeof bold_message);

HERE,

  • let bold_message = 'I ain\'t using double quotes yo!'; we define a variable bold_message that assigned a string value to it using single quotes. The backslash before the second quote is used to escape the single quote and tell the JavaScript interpreter to treat it as part of the value and not the closing quote.

Executing the above code produces the following results.

I ain't using double quotes yo!
string

JavaScript Numbers

JavaScript only has a single type for numbers and its called number. Other languages such as C# have a variety of number types like integer, float, double etc. but that is not the case with JavaScript. Let's now create a variable that holds a number.

Create a new file numbers.js in your lessons directory

Add the following code to the file.

let age = 35;

console.log(age);

console.log(typeof age);

HERE,

  • let age = 35; defines a number variable that is assigned the value of 35. Notice how we did not enclose the value 35 into either single or double quotes.
  • console.log(age); prints out the value of our variable in the terminal
  • console.log(typeof age); prints out the data type of the variable age in the console

Open the terminal in Visual Studio Code and run the following command to execute it using NodeJS

node numbers.js

The above command should give you the following results.

35
number

You can also perform arithmetic operations using number variables. Let's look at a simple application that calculates the VAT.

const vat_rate = 0.18;
let total = 3500;
let vat_charges = total * vat_rate;
let grand_total = total + vat_charges;

console.log('The subtotal is: ' + total);
console.log('The VAT charge is: ' + vat_charges);
console.log('The Grandtotal is: ' + grand_total);

HERE,

  • const vat_rate = 0.18; defines a constant variable vat_rate that is assigned the value 0.18 which is equivalent to 18%.
  • let total = 3500; defines a variable total that holds the amount 3500
  • let vat_charges = total * vat_rate; calculates the VAT charge by multiplying the total and vat rate
  • let grand_total = total + vat_charges; calculates the grand total by adding the total and vat charge.
  • console.log('The subtotal is: ' + total); prints the total amount
  • console.log('The VAT charge is: ' + vat_charges); prints the VAT charge
  • console.log('The Grandtotal is: ' + grand_total); prints the grand total.

Executing the above code produces the following results

The subtotal is: 3500
The VAT charge is: 630
The Grandtotal is: 4130

JavaScript Boolean

Boolean values evaluate to either true or false. They are usually used in when working with conditional statements. For example, you can use a boolean value to check if a user is logged in into the application. If yes you can then redirect them to the dashboard. If the value is false, you can then redirect them to the login page.

You define Boolean variables like so.

let logged_in = true;
let is_admin = false;

console.log('logged in: ' + logged_in);
console.log(typeof logged_in);
console.log('admin user: ' + is_admin);
console.log(typeof is_admin);

HERE,

  • let logged_in = true; defines a Boolean variable that is initialized to the value true
  • let is_admin = false; defines a Boolean variable with a default value of false
  • console.log('logged in: ' + logged_in); prints out the value of logged_in
  • console.log(typeof logged_in); prints the type of logged_in
  • console.log('admin user: ' + is_admin); prints out the admin status of the user
  • console.log(typeof is_admin); prints out the type of is_admin

JavaScript Null

The null data type simply refers to an empty value. You can define a variable, assign a value to it and when you no longer need the value then you can assign it to a null type. The following example shows how null works.

let table_name = 'customers';
console.log(table_name);
console.log(typeof table_name);
table_name = null;
console.log(table_name);
console.log(typeof table_name);

HERE,

  • let table_name = 'customers'; creates a variable table_name that is assigned the value customers.
  • console.log(table_name); logs the value of table_name
  • console.log(typeof table_name); prints out the type of table_name
  • table_name = null; the value of the variable table_name is explicitly cleared by assigning it the value of null
  • console.log(table_name); prints out the value of table_name
  • console.log(typeof table_name); prints out the type of table_name after clearing it.

Executing the above code produces the following results

customers
string
null
object

JavaScript Undefined

Undefined is the default data type if you create a variable and do not assign a value to it. Sometimes you just need to have a variable to use without really caring about the data type. Let's now look at a practical example

let selection;
console.log(selection);
console.log(typeof selection);

selection = 'article';
console.log(selection);
console.log(typeof selection);

HERE,

  • let selection; defines a variable selection that is not assigned any value.
  • console.log(selection); prints out the value of selection
  • console.log(typeof selection); prints out the type of selection
  • selection = 'article'; assigns a string literal article to the variable selection
  • console.log(selection); prints out the value of the variable selection
  • console.log(typeof selection); prints out the type of selection after we assign a value to it.

Executing the above code produces the following results.

undefined
undefined
article
string

Summary

JavaScript is a dynamically typed language that supports 6 types of primitives. Primitive types are not objects and they do not have any methods. The six primitive types are string, number, Boolean, null, undefined and symbol. The variable data type is determined by the value that is assigned to the value.

Author: Rodrick Kazembe

Rodrick is a developer who works on Desktop, Web and Mobile Applications. He is familiar with Python, Java, JavaScript, C++, C#, Kotlin, PHP, Python and the list goes on. Rodrick enjoys sharing knowledge especially when it comes to technology.

JavaScript Variables

JavaScript Objects

Leave A Reply