Skip to content

4.4 Data Types Part 1

Primitive Data Types

Task 1: What is the data type of the variable below.

var myName = "Ali";

console.log(typeof myName);

The result is: string

Task 2: What is the data type of the variable below.

var myAge = 3;

console.log(typeof myAge);

The result is: number

Task 3: What is the data type of the variable below.

var isLoggedIn = false;

console.log(typeof isLoggedIn);

The result is: boolean

Task 4: What is the data type of the variable below.

var myHeight = undefined;

console.log(typeof myHeight);

The result is: undefined

Task 5: What is the data type of the variable below.

var myfavoriteBigNumber = 4712n;

console.log(typeof myfavoriteBigNumber);

The result is: bigint

bigint

bigint is a data type that handles big numbers

You can create bigint by appending n to the number.

Data Type

There are six data types in JavaScript:

  1. String.
  2. Number.
  3. Boolean.
  4. BigInt.
  5. undefined.
  6. Symbol (We will learn about it later)

typeof

We can check the data type using typeof

Primitive Data Type

The data types above are called primitive data types.

Task 6: Change the case of the following string to the lower case.

var myString = "GREAT";

myString.toLowerCase();

console.log(myString);

The result is: GREAT

The string did not change even after applying toLowerCase method. Why?! Because strings are an immutable data type in JavaScript.

Strings are immutable

Strings cannot be altered in JavaScript.

Task 7: Convert the following number to a string. Use number.toString().

var num = 80;

var numToString = num.toString();

console.log("the type of num: " + typeof num);
console.log("the type of numToString: " + typeof numToString);

The result is as follows:

the type of num: number
the type of numToString: string

The number did not change even after applying toString method. Why?! Because numbers are an immutable data type in JavaScript.

Numbers are immutable

Numbers cannot be altered in JavaScript.

Task 8: Convert the following Boolean to a string. Use boolean.toString().

var bool = true;

var boolToString = bool.toString();

console.log("the type of bool: " + typeof bool);
console.log("the type of boolToString: " + typeof boolToString);

The result is as follows:

the type of bool: boolean
the type of boolToString: string

The Boolean value did not change even after applying toString method. Why?! Because Boolean is an immutable data type in JavaScript.

Boolean is immutable

Boolean cannot be altered in JavaScript.

Task 9: Convert the following bigint to a string. Use bigint.toString().

var bigNum = 54540n;

var bigNumToString = bigNum.toString();

console.log("the type of bigNum: " + typeof bigNum);
console.log("the type of bigNumToString: " + typeof bigNumToString);

The result is as follows:

the type of bigNum: bigint
the type of bigNumToString: string

The bigInt did not change even after applying toString method. Why?! Because bigint is an immutable data type in JavaScript.

bigInt is immutable

BigInt cannot be altered in JavaScript.

Info

JavaScript primitive data types are immutable, i.e., they cannot be changed.

Practice More!

Task 10: Does the variable below hold a primitive value?

Yes, myVar holds a number value; which is indeed a primitive data type.

var myVar =  12;

console.log("The type is: " + typeof myVar);

The result is: The type is: number

Task 11: I re-wrote console.log in task 10 as follows.

var myVar = 5;

console.log(`The type is: ${typeof myVar}`);

The result is: The type is: number

Template Strings

Template strings (template literals) are regular strings allowing embedded expressions.

The syntax is enclosing the string in backticks `your string here`.

You can also embed an expression in the string using `${your expression here}`.

How do I type a backtick character?

Well! it depends on your keyboard layout.

For QWERTY and QWERTZ layouts, just press on the key below the ESC key.

Task 12: Does the variable below hold a primitive value? Hint: use template literals.

Yes, myVar holds an undefined value; which is indeed a primitive data type.

var myVar = undefined;

console.log(`The type is: ${typeof myVar}`);

The result is: The type is: undefined

Task 13: Does the variable below hold a primitive value? Hint: use template literals.

Yes, myVar holds a string value; which is indeed a primitive data type.

var myVar = "My beautiful world is in making.";

console.log(`The type is: ${typeof myVar}`);

The result is: The type is: string

Task 14: Does the variable below hold a primitive value? Hint: use template literals.

Yes, myVar holds a bigInt value; which is indeed a primitive data type.

var myVar =  153n;

console.log(`The type is: ${typeof myVar}`);

The result is: The type is: bigInt

Task 15: Does the variable below hold a primitive value? Hint: use template literals.

Yes, myVar holds a Boolean value; which is indeed a primitive data type.

var myVar =  true;

console.log(`The type is: ${typeof myVar}`);

The result is: The type is: boolean

Info

JavaScript primitive values have no properties or methods.

Question

If primitive data types do NOT have methods, how do strings have length property? How do Boolean and number values have toString method?

Well! You have just opened the door to a new world. Let's investigate more!

String Object Constructor

Task 16: Assign "You can do it" to myVar. Display the type and the value of myVar in the console.

var myVar = "You can do it";

console.log(`The value is: ${myVar}`);
console.log(`The type is: ${typeof myVar}`);

The result is as follows:

The value is: You can do it
The type is: string

String Literals

A string literal is a string created with single or double quotation marks.

In task 16; "You can do it" is a string literal.

Task 17: Assign new String("You can do it.") to myVar. Display the type and the value of myVar in the console.

var myVar = new String("You can do it");

console.log(`The value is: ${myVar}`);
console.log(`The type is: ${typeof myVar}`);

The result is as follows:

The value is: You can do it
The type is: object

Task 18: Refer to task 17; What is the length of the myVar value.

var myVar = new String("You can do it");

console.log(`The length is: ${myVar.length}`);

The result is: The length is: 13

Task 19: Refer to task 17; Change myVar to the upper case.

var myVar = new String("You can do it");

console.log(`The new String is: ${myVar.toUpperCase()}`);

The result is: The new String is: YOU CAN DO IT*

The String Object

The string object is a regular string with associative properties and methods.

Primitive String <==> String Object

When you access a string property or method, JavaScript converts this string to its respective string object.

The respective string object has string properties and methods.

Then JavaScript converts the string back to its primitive value.

Hence, a string does not have properties or methods, however, its respective object does have.

Task 20: Refer to task 17; myVar value is an object, how was it constructed? Hint: use myVar.constructor.

var myVar = new String("You can do it");

console.log(`${myVar.constructor}`);

The result is: function String() { [native code] }

String() constructor

String() is a constructor function that creates new string objects.

To create a string using String() constructor, use the keyword new followed by String(). Enclose your string in the quotation marks new String("You string here").

Task 21: Create a new string using String() constructor. This string value is "Resist not evil. Face it! You are higher than evil."

var myQuote = new String("Resist not evil. Face it! You are higher than evil.");

console.log(`${myQuote}`);

The result is: Resist not evil. Face it! You are higher than evil.

Task 22: Refer to task 21; What is the type of myQuote value?

var myQuote = new String("Resist not evil. Face it! You are higher than evil.");

console.log(`The type is: ${typeof myQuote}`);

The result is: The type is: object

Task 23: Refer to task 21; Which type of primitive data does myQuote correspond to? Hint: use typeof myQuote.valueOf()

var myQuote = new String("Resist not evil. Face it! You are higher than evil.");

console.log(`The primitive type is: ${typeof myQuote.valueOf()}`);

The result is: The primitive type is: string

valueOf

The valueOf() returns the primitive value of the object.

Task 24: Create a new string using String() constructor. This string value is "Only knowledge can free and save us, but with knowledge must go virtue.". Display the string value, its type, and its corresponding primitive value.

var myQuote = new String("Only knowledge can free and save us, but with knowledge must go virtue.");

console.log(`The value is: ${myQuote}`);
console.log(`The type is: ${typeof myQuote}`);
console.log(`The primitive type is: ${typeof myQuote.valueOf()}`);

The result is as follows:

The value is: Only knowledge can free and save us, but with knowledge must go virtue.
The type is: object
The primitive type is: string

Task 25: Create a new string using String() constructor. This string value is "Don't look back--forward, infinite energy, infinite enthusiasm, infinite daring, and infinite patience.". Display the string value, its type, and its corresponding primitive value.

var myQuote = new String("Don't look back--forward, infinite energy, infinite enthusiasm, infinite daring, and infinite patience.");

console.log(`The value is: ${myQuote}`);
console.log(`The type is: ${typeof myQuote}`);
console.log(`The primitive type is: ${typeof myQuote.valueOf()}`);

The result is as follows:

The value is: Only knowledge can free and save us, but with knowledge must go virtue.
The type is: object
The primitive type is: string