Understanding JavaScript Data Types In Web Development

JavaScript is a popular programming language for web development. Developers can create dynamic and interactive web applications by manipulating web page elements and responding to user interactions.

JavaScript supports several primitive data types, including numbers, strings, booleans, null, and undefined, and it also supports more complex data types like arrays and objects. Each data type has its unique properties and behaviours, and understanding how to use them effectively can make a big difference in the performance and reliability of our code.

This article will review the various JavaScript data types in depth, looking at their characteristics and best practices for using them in web development projects.

What Are Data Types?

Data types describe the characteristics of data. Also, a data type is a classification of data that tells the compiler or interpreter how the programmer intends to use the data.
Data types can be classified into two: primitive data types and non-primitive data types.

Primitive data types in JavaScript

Primitive data types are non-modifiable data types. Once a primitive data type is created, we cannot modify it. Primitive data types in JavaScript include:

Numbers:
Numbers are integers or decimal values which can perform arithmetic.

let a = 25;    // integer value
let b = 27.0;  // decimal value

Strings:
Strings are text enclosed by a single, double, or backtick quote. We need a variable name, an assignment operator, and a value enclosed by a single, double, or backtick quote to declare a string.

let nameOne = “Ade”;   //This is a string
let nameTwo= ‘Ola’;
let name = `love`;

Let's consider the example below :

let animal = "Dog";
animal[0] = "C";
console.log(animal);    //This returns Dog

The expression above indicates that the variable "animal" value remains unchanged after evaluating the expression. As a result, we can conclude that strings are immutable.

Primitive variables are compared, their values are compared directly to determine whether they are equal.

Boolean:
Boolean gives either true or false values. They are mostly used to check logical conditions.

let a = 5;
let b = 6;
console.log(a==b)    // returns false

let a = 5;
let b = 5;
console.log(a==b)    // returns true

Let's consider some more examples below:

let firstName = "Ade";
let lastName = "Ade";
console.log(firstName == lastName);    // This returns true

//Another example
let ageOne = 10;
let ageTwo = 11;
console.log( ageOne == ageTwo);        // This returns false

Null:
Null is an empty value

let a = null;
console.log(a)        //This returns null

Undefined:
A declared variable without a value

let a;
console.log(a)       // This returns undefined

Non-Primitive Data types in JavaScript

Non-primitive data types are modifiable or mutable, i.e., the value of non-primitive data types can be changed after it gets created. Non-primitive data types in JavaScript include:

• Object: An object is a collection of properties, which are key-value pairs.

• Array: An array is a list of data values in a square bracket. Arrays can contain the same or different data types.

Let's consider the code below.

let name = ["Adeola", "Tosin", "Comfort"];
name[1] = "Daniel";
console.log(name);      //output: ["Adeola", "Daniel", "Comfort"]

An array is a mutable non-primitive data type, meaning its contents can be changed.

Note: To avoid unexpected results, it is generally recommended not to directly compare non-primitive data types like objects and arrays, as they are typically compared by reference rather than by value.

// array example
let age = [10, 26, 38]
let ages = [10, 26, 38]
console.log(age == ages)     // This returns false

// object example
let user_info_One = {
name: 'Adeola',
role: 'Writer',
country:'Nigeria'
}
let user_info_Two = {
name: 'Adeola',
role: 'Writer',
country: 'Nigeria'
}
console.log(user_info_One == user_info_Two)  // This returns false

Note: Two objects are only strictly equal if they refer to the same underlying object.

// array example
let age = [10, 26, 38]
let ages = age
console.log(age == ages)     // This returns true

// object example
let user_info_One = {
name:'Adeola';,
role:'Writer';,
country:'Nigeria';
}
let user_info_Two = user_info_One
console.log(user_info_One == user_info_Two)    //This returns true

String Concatenation

Concatenation is the term used to describe the process of joining multiple strings together to create a single string.

Let's consider the code below.

let firstName =  "Adeola";
let lastName =  "Ajiboso";
let gender =  "Girl";
let hobby =  "writing";
let fullName =  firstName + ' ' + lastName;
let userInfo = fullName + ' is a  ' + gender + ' and  she loves ' + hobby;
console.log(userInfo);

// Output
Adeola Ajiboso is a Girl and she loves writing

Template Literals

Template literals provide an easy way to interpolate variables and expressions into strings.

Backticks are used instead of single or double quotes to create a template string. We can include placeholders for expressions or variables within a template string by enclosing them in curly braces () and prefixing them with a dollar sign ($).

For example,

let name = "Peter";
let age = 20;
let message = `My name is ${name} and I am ${age} years old.`;
console.log(message)  
//output
My name is Peter and I am 20 years old.

String Methods

JavaScript methods are actions that can be performed on objects. Common string methods include:

• toUpperCase(): toUpperCase() is a built-in string method that changes a string to uppercase

let myWord = "hello, world!";
let myUppercase = myWord.toUpperCase();
console.log(myUppercase);               
// Output: HELLO, WORLD!

• toLowerCase(): This method changes the string to lowercase.

let myWord = "Hello, World!";
let myLowercaseString = myWord.toLowerCase();
console.log(myUppercaseString); 

// Output:hello,world!"

• length(): This method returns the number of characters in a string, including space.

let fruit = "Banana ";
console.log(fruit.length);         // This return 7

• substr(): This method takes two arguments, the substring's starting index and the substring's length to be returned.

let myString = "hello, world!";
let mySubstring = myString.substr(7, 5);
console.log(mySubstring);                  // Output: "world"

• split(): This is a built-in string method that splits a string into an array of substrings based on a specified separator.

let string = 'Technical writing is fun'
console.log(string.split())     
console.log(string.split(' '))  

//output
// Changes to an array -> [ 'Technical writing is fun' ]
// Split to an array at space -> [ 'Technical', 'writing', 'is', 'fun' ]

• trim(): This method removes trailing space at a string's beginning or end.

let firstName = ' Prestige '
console.log(firstName)
console.log(firstName.trim())

//output
  Prestige
Prestige

• includes(): This method returns a boolean value indicating whether the specified string is within the original string.

let word = "hello, world!";
let isWordFound = word.includes("world");
console.log(isWordFound);                   // Output: true

• replace(): replace is used to replace all occurrences of a particular substring in a string with a new substring or character.

  The syntax for replace looks like this

  string.replace(oldsubstring, newsubstring)

For example,

let hobby = 'I love writing'
console.log(hobby.replace('writing', 'singing')) 

// output: I love singing

• indexOf(): Takes a substring, and if the substring exists in a string, it returns the first position of the substring; if it does not exist, it returns -1.

Let’s consider the code below.

let string = 'Technical is fun'
console.log(string.indexOf('T'))               // 0
console.log(string.indexOf('fun'))            // 13
console.log(string.indexOf('Fun'))           // -1
console.log(string.indexOf('i'))            // 5
console.log(string.indexOf('Technical'))   // 0
console.log(string.indexOf('Is'))         //-1
console.log(string.indexOf('e'))         // 1

Casting and Checking of Data Type

Casting

Casting refers to the process of converting a value from one data type to another. We use parseInt(), parseFloat(), Number(), +, str()

String to int
We can use various methods to convert a string number to a numeric value. As mentioned, any number inside a pair of quotes is considered a string number. We can convert string to number using the following methods:

• parseInt(),
• Number(),
• Plus sign(+)

For example, let's consider the code below.

//using parseInt to convert from string to int
let num = '10'
let numInt = parseInt(num)
console.log(numInt)   // 10

//using Number to convert string to int
let num = '20'
let numInt = Number(num)
console.log(numInt)   // 20

//using + to convert from string to int
let num = '40'
let numInt = +(num)
console.log(numInt)   // 40

Float to int
We can convert float numbers to integers using the following methods

• parseInt()

Let’s consider the code below.

let num = 7.82;
let numInt = parseInt(num);
console.log(numInt);            //output: 7

Checking Of Data Type In Javascript

We make use of the typeof method to check data type.

Let's consider the code below.

let firstName = 'John';      
let lastName = 'Doe';        
let country = 'Nigeria';       
let city = 'Lagos';          
let age = 25;                 
let job;                         
console.log(typeof 'lastName')  // string
console.log(typeof firstName)   // string
console.log(typeof country)     // string
console.log(typeof city)        // string
console.log(typeof age)          // number
console.log(typeof 3.14)        // number
console.log(typeof true)        // boolean
console.log(typeof false)       // boolean
console.log(typeof NaN)         // number
console.log(typeof job)         // undefined

Conclusion

In conclusion, understanding JavaScript data types is essential for web development. By knowing the different types of data used in JavaScript, developers can write more efficient and effective code.

Do not hesitate to ask questions or leave comments on this post. I'm available on Twitter, LinkedIn, and GitHub. Keep an eye out for my upcoming blog post, in which I'll go over another important area of web development. As a developer, I'm glad to provide additional information. Until then, happy coding, and take care!