Web Development
Learn JavaScript
Data Types

Data Types

đź’ˇ

This page is under construction

A data type is a kind of item that is defined by the values it can take, and the operations that can be performed on it. JavaScript has 8 kinds of data types, but we are going to look at only 7 in this module, because the eighth one needs a whole page dedicated to it.

All data types are primitive data types except for the object data type. A primitive data type is one that can only contain one single value. However, objects can be used to store more complex values such as strings, arrays, objects themselves and even boolean.

String

A string is zero or more characters written inside quotation marks. For example:

let name = "";
let firstName = "Thomas";
let lastName = 'Sankara';
let fullName = `Thomas Sankara`;

The first example initializes name to an empty string. The second example uses double quotation marks. The third example uses single quotation marks, and the fourth example uses template literals which are represented by the backticks or tilde symbol (`).

All the above are ways that you can use to define strings in JavaScript. The preference falls to the developer or the team definitions on a particular project.

String concatenation

This refers to adding string values. For example:

const firstName = "Thomas";
const lastName = "Sankara";
const fullName = firstName + " " + lastName;
 
// This can also be written as
const fullName = "Thomas" + " Sankara";

Notice that we are also adding a whitespace when adding the two string variables so that the end result is readable and not smooshed together. Also notice the whitespace in Sankara to make the end result text readable.

Adding strings to integers

In JavaScript, it is also possible to add integers to strings and strings to integers. But use this with caution because JavaScript evaluates these two cases weirdly:

const age = 28;
const name = "Thomas";
console.log(age + name);

The above will evaluate to 28Thomas. Let's reverse the example:

const age = 28;
const name = "Thomas";
console.log(name + age);

This will now print Thomas28. Nothing confusing yet...until we introduce anther integer:

const age = 28;
const year = 2024;
const name = "Thomas";
console.log(age + year + name);

This will now print 2052Thomas. Okay, fair enough because we can see that it is adding the age and the year first. But what happens when we have the name come first before the integers?

const age = 28;
const year = 2024;
const name = "Thomas";
console.log(name + age + year);

This will now print Thomas202428. It no longer adds the two numbers. The reason why adding strings and integers behaves in this way has to do with how JavaScript evaluates expressions.

JavaScript evaluates expressions from left to right. So, when it meets a string as the first value, it will treat the entire expression as a string. Therefore, when adding the name, age and year, to JavaScript, the expression is evaluated as:

console.log(name + year + age); 
// becomes
console.log("Thomas" + "2024" + "28");
// Which logs Thomas 202428 just like adding strings together

But when the integers come first, it treats the entire expression as an integer to be added. So the string is also treated as one big integer as follows:

console.log(age + year + name);
// becomes
console.log(28 + 2024 + "Thomas"); 
// Which will log 2052Thomas because it first adds the numbers and then the string

Using different types of quotations

Whenever you are working with strings, you will find yourself wanting to use either double, single quotes or template literals in your string variables. For example, if you had a variable such as Thomas's vehicle, how would you define it? Well, that's simple:

const owner = "Thomas's vehicle";

What if you wanted to represent the name of a book like `"Harry Potter"?

const book = "I've been reading "Harry Potter"";

Now that becomes a problem. JavaScript solves this in three ways:

Using different type quotation marks

Using the above book example, we can fix the error by using single quotes on the opening and the double quotes for the book name, or vice versa:

const book = "I've been reading 'Harry Potter'";

But wait: Using single quotes on the outside doesn't exactly work well with that example because of the English possessive "I've":

const book = 'I've been reading "Harry Potter"';

How do you fix that? We can use the escape character, or template literals.

Using template literals

Using template literals, the erroring example above will be corrected to:

const book = `I've been reading "Harry Potter"`;

Template literals provide a very nice way to always declare your strings without having to worry about conflicts of quotation marks. However, remember that template literals are not supported in Internet Explorer.

Using the escape character

The escape character in JavaScript is the backslash(\). Using this, we can tell JavaScript to ignore a character that would normally cause issues. Let's fix the two examples above by escaping them:

const owner = 'Thomas\'s vehicle';
const book = 'I\'ve been reading "Harry Potter"'; // or
const book = "I've been reading \"Harry Potter\"";

The escape character is placed before the character you want to escape.

Template literals

Template literals were introduced in ES6 (ECMAScript 6) or ECMAScript 2015 which was published in 2015. They are strings defined using backticks and allow both single and double quotes to be used inside them, as we have seen from the examples above. They also allow for multiline strings:

Example:

const optimusPrime = `
But the day will never come
when we forsake this planet
or it's people.
`

Template literals allow us to append variables to strings. Beforehand, we have already seen the syntax we used (Just to be clear, we still use this syntax depending on the use case and preference):

const age = 28;
console.log("Thomas " + age);

But now, we can do this:

const age = 28;
console.log(`Thomas ${age}`);

When adding a variable using template literals, we use the dollarsign curly brackets syntax:

${variable_name}

Strings as objects

Here are four reasons why you should not declare strings as objects:

1

It changes the string data type from a primitive to an object.

2

The String is a literal and not an object.

3

In JavaScript, object comparison always returns false. So if you try to compare string objects, it can lead to unexpected results.

4

Using the method below slows down execution.

The new keyword is a reserved keyword in JavaScript that is used to create an instance of an object, and can be used on user-defined objects.

Read more about Reserved Words

In order to create an string object, you use the new keyword:

const name = new String("Thomas");
console.log(name); // Will print out "Thomas"

However, if you check the type of the newly created string, it will no longer be a string data type, it will be an object.

console.log(typeof(new String("Thomas"))); // will return "object"

Number

Boolean

Undefined

Null

Symbol

Object

BigInt

This is the last remaining data type we have. You can find it here

LoopsThe typeof Operator