A BEGINNER'S GUIDE TO JAVASCRIPT DATA TYPES.

Photo Credit: Bello Ololade

Welcome to the fascinating world of JavaScript! If you’re new to programming or just starting your journey with JavaScript, understanding the types of data is a crucial first step. In this article, we’ll explore JavaScript data types, focusing on both “primitive” and “non-primitive” types.

Before we proceed, one very important terminology we have to discuss to understand data types better is “ JavaScript variables.”

A variable is like a container that is used to hold data. It could be any type of data (as will be discussed). It’s just like a glass cup with water inside. The glass cup is equivalent to the variable and the water inside is equivalent to the data. We can change the water to any other type of liquid like fruit juice, Fanta, etc.

We can declare a variable using the keywords “let” or “const”. The former is used to declare variables that can change values (or data types) while the latter is used to declare variables that cannot change values (or data types)

For example:

let myName = "Chinedu";  // The value of myName can be changed to "Nicholas".
const pi = 3.142;    // The value of pi cannot change as it is a constant.

Since we are not here to talk about variables (for further information, visit: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables), let us delve proper into the world of data types.

Data types are divided into Primitive Data Types and Non-Primitive Data Types.

Primitive Data Types:
These data types are the basic building blocks of data. They can not be changed once they are created (i.e. immutable). They include:

1. String:

This consists of sequences of characters placed within single quotes (' ') or double quotes (" "). These characters can be letters, digits, or special characters like “.”, “!”, etc.

It’s important to note that:

• some special characters serve different purpose e.g. The backlash (\) can be used as an escape character to tell JavaScript to behave differently to single or double quotes
• Decorative single or double quotes such as ‘ ’ or “ ” are not accepted by the javascript interpreter.
• It is advisable to use single quotes within double quotes or vice versa.

Example:

let myName = "Dipo";
let sentence1 = "This is Dipo’s book.";
let sentence2 = 'This is Dipo\’s book.';
let sentence3 = 'He is "very funny".';

(For more on strings: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Strings)

2. Number:

This data type represents numeric values. It includes integers (positive and negative whole numbers), floating-point numbers (numbers with decimal points), and special numeric values like `Infinity` and `NaN`. It is worthy of note that the data types "5" and 5 are entirely different as one is a string and the other a number.

Example:

let num1 = 5;  // This assigns a value of 5 to the num1 variable.

const pi = 3.142;  // This assigns a value of 3.142 to the variable called pi.

                   //This variable cannot be reassigned another value as it is a constant.

(More on numbers: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Math)

3. Boolean:

This data type represents logical values: “true” or “false”. The true and false values are equivalent to the numerical values: 1 and 0 respectively and also the switch values: ON and OFF respectively. They are usually the result of comparisons in JavaScript.

It is important to note that the first letters are lowercase (i.e. true/false) as opposed to "True" and "false" (or any other combinations) since JavaScript is case sensitive and will not accept any value other than the the correct spelling.

Example:

let isLogged = true;
let is married = false;

(For more information on booleans: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean).

4. Null:

This data type is intentionally used to indicate the absence of any value. It is used to indicate that a value has been explicitly set to nothing.

Example:

let user = null; //This sets the value of the variable to nothing (null).

Note that the spelling of the value is “null”.
(For more on null: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/null).

5. Undefined:

This data type is used when a variable has been declared but has not been assigned a value. It represents the absence of a meaningful value.

Example:

let city;  // This assigns the value `undefined` to the variable `city` as it was not assigned any value after declaration

(For more info on undefined, visit: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined)

Note: The difference between null and undefined is that for null, a variable is intentionally assigned a value of nothing (null) whereas for undefined, the variable is not been assigned any value and thus a default value of nothing (undefined i.e. not defined) is given to it.

Okay, that's it for the primitive data types. Let's delve into the second.

Non-Primitive Data types:
These data types are use to hold multiple values and they are mutable i.e. their values can be changed. They can be stored in a variable like their primitive counterparts.

Note: It is always advisable to declare objects and arrays with a const keyword to prevent unnecessary bugs in your code due to assignments of the same variable names.

They include:

1. Normal Objects:

This is a collection of properties (attributes) and methods (actions). These attributes and methods are arranged in key-value pairs (separated by a colon [:]) with the key signifying the name of the property (or method) and the value signifying the value of the property or method. Different key-value pairs are separated by commas. This object is likened to objects in real life like person, car, house, etc.
The key-value pairs are written within curly braces ({}). Objects can contain any other data type—whether primitive or non-primitive.

Objects can also be of built-in type (i.e. ones that are created by the Javascript language) or can be created by a user.

Example:
An object can be created as below;

const Dog = {
                myName: "Billy";
                age: 3,
                bark: (){
                       return "whoof!"
            }
 };

The above person object have two attributes: myName and age and one method (action): bark.
(For more on objects, visit: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object).

2. Array Object:

This is a type of object that contains an ordered list of items which can be different data types. As opposed to normal objects, its items occupies ordered index such as 0, 1, 2, etc and these indices are means through which the items can be accessed.

It’s values are placed within square brackets ([ ]) and are also separated by commas. It can also be called “Array”. As it is an object, it also has built-in methods that can be used to perform tasks.

Example:

const randomItems = ["Nick", 2, true, null, 2.5, "17"];

In the example above, the variable randomItems contains different values of different data types.
(For more on arrays visit: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Arrays).

3. The Date Object:

The Date object is a built-in object in JavaScript that represents the current time (or a single moment in time). It provides various methods to work with dates, times, and time zones.

To create a date object, we use the “new” keyword followed by Date and a pair of parenthesis ().

Example:

let newDate = new Date();

The above creates a new date that shows the current date, the current time (hour, minute, second and millisecond) and the time zone.

To see the above value in the console (which is embedded in browsers and work alongside a javascript interpreter), we use “console.log”.

Example:

console.log(newDate); // This gives: 2023-06-25T08:29:12.366Z (assuming it is the current time).

In the above, the “T” is a time separator which separates the date from the time while the time is arranged in the order of hour, minute, second and millisecond. The “Z” indicates that the time is given in UTC or GMT.

Since the date object is a JavaScript object, it has methods like:

i. .getFullYear()—which gets the current year as a 4-digit. E.g.

newDate().getFullYear() //Outputs 2023.

ii. .getDate()—which gets the current day as a number (1-31)E.g. 24 (24th day).
iii. .getMonth()—which gets the current month as a number (0-11). It starts from zero. E.g. 6 (June).
iv. .getDay()—which gets the weekday as a number from 0-6. Sunday is considered the first day. E.g.
v. .toLocaleString()—which formats the date object in the form: 25/06/2023, 09:49:55.

(To read more about the date object, visit: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date).

The typeof Operator.

This is a JavaScript operator that is used to check the data type a “value” or a variable holding a value belongs to. It returns a “string” showing the name of the data type.
Note that all the letters of the “typeof” operator when spelt are lowercase.

Example:

let myName = "Nick";
let myAge = 15;
let isMarried = false;
let classStatus = null;
let isOkay;

let person = {
        myName: "John",
        isGoodBoy: true
};

let randomArray = ["Eba", 2, false, null];

console.log(typeof (myName));  // outputs 'string'
console.log(typeof (myAge)); // outputs 'number'
console.log(typeof (isMarried));  // outputs 'boolean'
console.log(typeof (classStatus)); //outputs 'object'
console.log(typeof (isOkay)); // undefined
console.log(typeof (person)); // outputs 'object'
console.log(typeof (randomArray)); // outputs 'object'

From the above, we can see that the null and array data types are both objects in JavaScript.

To recap, we talked about the primitive (whose values cannot changed after been created—immutable) and non-primitive data types (whose values are mutable) and how to use the concept of variables to represent them. We also talked about how we can use the typeof operator to check for the data types of values.

Thank you for reading to the end. By now, I believe you should be able to identify the different data types and push your JavaScript journey to the next gear.

Photo Credit: Deposit Photos.

See you soon!