DEV Community

 Adeola Ajiboso
Adeola Ajiboso

Posted on • Originally published at deola.hashnode.dev

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
Enter fullscreen mode Exit fullscreen mode

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`;
Enter fullscreen mode Exit fullscreen mode

Let's consider the example below :

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

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Null:
Null is an empty value

let a = null;
console.log(a)        //This returns null
Enter fullscreen mode Exit fullscreen mode

Undefined:
A declared variable without a value

let a;
console.log(a)       // This returns undefined
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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!
Enter fullscreen mode Exit fullscreen mode
  • toLowerCase(): This method changes the string to lowercase.
let myWord = "Hello, World!";
let myLowercaseString = myWord.toLowerCase();
console.log(myUppercaseString); 

// Output:hello,world!"
Enter fullscreen mode Exit fullscreen mode
  • length(): This method returns the number of characters in a string, including space.
let fruit = "Banana ";
console.log(fruit.length);         // This return 7
Enter fullscreen mode Exit fullscreen mode
  • 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"
Enter fullscreen mode Exit fullscreen mode
  • 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' ]
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (1)

Collapse
 
johnodh58450097 profile image
John Odhiambo

Great work Miss Adeola. Keep up the good work