JavaScript Data Types Examples

JavaScript Data Types Examples

javascript Data types; In this tutorial, you will learn about the JavaScript data types and their unique characteristics.

JavaScript has two types of data types:

  • Primitive Data Types in JavaScript
  • Non-primitive Data Types in JavaScript

Primitive Data Types in JavaScript

  1. null
  2. undefined
  3. boolean
  4. number
  5. string
  6. symbol

Non-primitive Data Types in JavaScript

  1. object
  2. array
  3. function
JavaScript Data Types

Primitive Data Types in JavaScript

In javascript, primitive data types can hold only one value at a time. Let’s discuss each one of them in detail.

The undefined type

The undefined  data type in JavaScript, which occurs when a variable is defined but a value is not specified.

Note:- Meaning of undefined is “value is not assigned”.

Consider the following example:

let foo;
console.log(foo);        // undefined
console.log(typeof foo); // undefined

In this example,foo is a variable. Since foo is not declared, it is not assigned the value. The type of foo is also undefined.

When you print a variable, which value is not assigned. So  typeof operator also returns undefined.

Consider the following example:

console.log(typeof bar); // undefined

The null type

The null data type variable contains only null value. Javascript defines that null is an empty object pointer.

See the following example:

let obj = null;
console.log(typeof obj); // object

Take next example for practice. Define a variable and assign a variable  null value. So that ,you can check whether the variable is null or not by using the if-else statement.

See the following example:

let obj = null;

if(obj != null) {
   // call method
}else{
   // call different methods
}

JavaScript defines that null is equal to undefined as shown in the following statement.

console.log(null == undefined); // true

The number type

In the javascript, number data type represents both integer and floating point numbers.

Many operations can be done with numbers e.g. multiplication *, division /, addition +, subtraction -, and so on.

Integer numbers

The following statement declares a variable that contains an integer.

let num = 100;

If you want to represent the octal (base 8) literals, you put the first digit as zero (0) followed by octal digit numbers (0 to 7) as follows:

let oct = 060; // octal for 48

If the literal of an octal number is out of the range, JavaScript treats it as a decimal as shown in the following example.

let d = 090; // intepreted as 90

To avoid the confusion, ES6 allows you to specify an octal literal by using the prefix 0o followed by a sequence of octal digits from 0 through 7:

let v = 0o45;
console.log(v); // 37

To create hexadecimal (base 16) literal, you must use 0x (in lowercase) as the first two characters followed by any number of hexadecimal digits (0 to 9, and A to F).

let h = 0xf; // same as 0xF hexadecimal for 15

Floating-point numbers

To represent a floating-point number in js, include a decimal point with number.

See the following example:

let f1 = 16.4; 
let f2 = .5;   // same as 0.5, also valid but not recommended

JavaScript converts a floating-point number into an integer number if the number appears to be the whole number. The reason is that Javascript always wants to use less memory since a floating-point value uses twice as much memory as an integer value.

let f3 = 500.00; // interpreted as integer 500

JavaScript allows you to use the e-notation to represent very large or small numbers as in the following example.

let f4 = 3.17e6; // ~ 3170000

JavaScript provides the minimum and maximum values of a number that you can access using Number.MIN_VALUE and Number.MAX_VALUE. In addition, JavaScript uses Infinity and -Infinity to represent the finite numbers, both positive and negative.

See the following example:

console.log(Number.MAX_VALUE); // 1.7976931348623157e+308
console.log(Number.MIN_VALUE); // 5e-324
console.log(Number.MAX_VALUE + Number.MAX_VALUE); // Infinity
console.log(-Number.MAX_VALUE - Number.MAX_VALUE); // -Infinity

NaN

JavaScript has a special numeric value called NaN, which stands for Not a Number. In fact, it means an invalid number.

Consider the following example:

here, division of a string by a number returns NaN as in the following example.

console.log('a'/2); // NaN;

The NaN has two special characteristics:

  1. Any operation with NaN returns NaN.
  2. The NaN does not equal any value, including itself.

Consider the following examples:

console.log(NaN/2); // NaN
console.log(NaN == NaN); // false

The string type

In JavaScript, a string is a sequence of one or more characters. It must be enclosed in single or double quotation marks.

Consider the following examples:

let greeting = 'Hi';
let foo = "It's a valid string";
let bar = 'I'm also a string';

JavaScript strings are immutable. It means that you cannot modify a string once it is created. However, you can create a new string based on an operation on the original string, like this:

let myStr = 'js';
myStr = myStr + ' world';

In this example:

  • First, declare the myStr variable and initialize it to a string of 'js'.
  • Second, use the + operator to combine 'js' with ' world' to make its value as 'js world'.

Behind the scene, JavaScript engine creates a new string that holds the new string 'js world' and destroys two other original strings 'js' and ' world'.

The boolean type

The boolean datatype variable holds only one value, which can be true or false, in lowercase.

Consider the following example:

Declares two variables that hold boolean values.

let a = true;
let b = false;
console.log(typeof b); // boolean

JavaScript allows values of other types to be converted into boolean values of true or false.

To convert a value of another data type into a boolean value, you use the Boolean function. The following table shows the conversion rules:

Typetruefalse
stringnon-empty stringempty string
numbernon-zero number and Infinity0, NaN
objectnon-null objectnull
undefinedundefined

See the following demonstration.

console.log(Boolean('Hi'));// true
console.log(Boolean(''));  // false

console.log(Boolean(20));  // true
console.log(Boolean(Infinity));  // true
console.log(Boolean(0));  // false

console.log(Boolean({foo: 100}));  // true on non-empty object
console.log(Boolean(null));// false

The symbol type

JavaScript added a primitive type in ES6: the symbol. Different from other primitive types, the symbol type does not have a literal form.

To create a symbol, you call the Symbol function as follows:

let s1 = Symbol();

Note that Symbol is a function, not an object constructor, therefore, you cannot use the new operator. If you do so, you will get a TypeError.

The Symbol function creates a new unique value every time you call it.

console.log(Symbol() == Symbol()); // false

You can pass a descriptive string to the Symbol function for the logging and debugging purposes.

let s2 = Symbol('event.save');

When you call the toString() method on the symbol variable, it returns more descriptive name as shown below:

console.log(s2.toString()); // Symbol(event.save)

You can use symbols for many purposes. One of them is to create a string-like constant that can’t clash with any other value. The following example creates a symbol that represents the click event.

const click = Symbol('click');

The string 'click' may be used for different purposes and not unique. However, the click symbol is absolutely unique.

Non-primitive Data Types in JavaScript

In javascript, non-primitive data types can hold collections of values and more complex entities. Let’s discuss each one of them in detail.

The object type

In JavaScript, an object is a collection of properties, where each property is defined as a key-value pair.

The following example defines an empty object using the object literal form:

var emptyObject = {};

The following example defines the ps object with two properties:

var ps = {
    firstName: 'John',
    lastName: 'Doe'
};

A property name of an object can by any string. You can use quotes around the property name if it is not valid JavaScript identifier.

For example, if you have a property first-name, you must use the quotes such as "first-name" but firstName is a valid JavaScript identifier so the quotes are optional.

If you have more than one property, you use a comma ( ,) to separate the pairs.

JavaScript allows you to nest object as shown in the following example:

var contact = {
    firstName: 'John',
    lastName: 'Doe',
    email: '[email protected]',
    phone: '(408)-555-9999',
    address: {
        building: '4000',
        street: 'North 1st street',
        city: 'San Jose',
        state: 'CA',
        country: 'USA'
    }
}

The contact object consists of firstNamelastNameemailphone, and address properties. The address property itself is also an object that consists of building,  streetcitystate, and country properties.

You can access the properties of an object by using two notations: the dot notation (.) and array-like notation ( []).

The following example uses the dot notation (.) to access the firstName and lastName properties of the contact object.

console.log(contact.firstName);
console.log(contact.lastName);

To get property of a nested object, you use the following form:

console.log(contact.address.country);

If you refer to a non-existent property, you will get an undefined value as follows:

console.log(contact.age); // undefined

The following example uses the array-like notation to access the email and phone properties of the contact object.

console.log(contact['phone']); // '(408)-555-9999'
console.log(contact['email']); // '[email protected]'

Besides the object literal form, you can use the new keyword to create a new object as follows:

let customer = new Object();

And assign the property of the object a value:

customer.name = 'ABC Inc.';

In JavaScript, all objects are derived from the Object type. We will discuss more the Object type in the next tutorial.

The Array Data Type

An array is a non-primitive data type in js, which is used to store multiple values in a single variable. Each elements an array has a numeric position, known as its index. Using the index, can access values from an array.

The following example defines an array with values:

let colors = ["Red", "Yellow", "Green", "Orange"]; 

The following example access values from an array:

console.log(color[0]) // Red

The Function Data Type

In JavaScript, a function allows to define a block of code, give it a name and then execute it as many times. So it is possible to assign them to variables.

Consider the following example:

In the following example defines a function named say that has a return value “Hello World”.

var say = function(){ 
    return "Hello World!"; 
}
 
// Check the type of greeting variable
console.log(typeof say) // Output: function
console.log(say());     // Output: Hello World!

The typeof Operator

JavaScript is a dynamic language or loosely typed so a variable is not associated with any type, however, its value is. In other words, the same variable can hold values ​​of different types at any given time.

If you want to check any variable Data Types at runtime in javascript, you can use the  typeof operator.

The typeof operator can be used to determine type of variable or operand. It can be used with or without parentheses (typeof(x) or typeof x).

Consider the following examples:

 
// Undefined
typeof undefined;  // Returns: "undefined"
typeof undeclaredVariable; // Returns: "undefined"
 
// Null
typeof Null;  // Returns: "object"

// Booleans
typeof true;  // Returns: "boolean"
typeof false;  // Returns: "boolean"

// Numbers
typeof 15;  // Returns: "number"
typeof 42.7;  // Returns: "number"
typeof 2.5e-4;  // Returns: "number"
typeof Infinity;  // Returns: "number"
typeof NaN;  // Returns: "number". Despite being "Not-A-Number"
 
// Strings
typeof '';  // Returns: "string"
typeof 'hello';  // Returns: "string"
typeof '12';  // Returns: "string". Number within quotes is typeof string

 
// Objects
typeof {name: "John", age: 18};  // Returns: "object"
 
// Arrays
typeof [1, 2, 4];  // Returns: "object"
 
// Functions
typeof function(){};  // Returns: "function

Conclusion

In this tutorial, you have learned javascript primitive and non-primitive data types including undefined, null, number, string, boolean, symbol, object, date, and array.

Recommended JavaScript Tutorial

Recommended:-JavaScript Arrays

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *