Data Type - JAVASCRIPT: A Beginner’s Guide to Learning the Basics of JavaScript Programming (2015)

JAVASCRIPT: A Beginner’s Guide to Learning the Basics of JavaScript Programming (2015)

Chapter 5. Data Type

In programming, manipulation of data is imminent. What is data anyway? Data is information. It can be in form of numbers or text. Aside from text and numbers, JavaScript can also process other forms of data types such as arrays and objects.

Why is there a classification of data? It is to make the language and functions as clear and clean as possible. Also, it compartmentalizes the usage of operators. For example, there is no way you can multiple texts:

> "addend1" * "addend2"

< NaN

> _

You get a NaN result. NaN stands for Not a Number. In other programming languages, you will receive an error instead. On the other hand, doing operations on different data types can be tricky. For example:

> "big number" – 888

< NaN

> _

Here is another example:

> "one" + 1

< "one1"

> _

Not knowing the data types that you are handling can make your program perform outside your expectations. However, unlike other programming languages, JavaScript is more forgiving.

Dynamic Data Typing

JavaScript Is a Strong Typing Language. It is also considered as a loosely type language. It is also referred to as duck typing language.

It seems that using var is a pain, right? To be honest, the usage of var is convenient. Back then, you must specify a variable’s data type. For example, when creating an integer variable in C, you will need to declare it as:

int variableExample;

If you fail to provide the right type or declare the variable, you will encounter errors in your program. For example:

#include <stdio.h>

int main(void) {

void dd;

dd = "This is a string";

printf(dd);

return 0;

}

Error: variable or field 'dd' declared void

That is an example declaration of variable in C, an old and powerful programming language. Since variable dd is a void data type, you cannot assign a different data type on it. If you do that in JavaScript, there will be no problem. For example:

> var x = null

< undefined

> x

< null

> x = "This is a string."

< "This is a string."

> x

< "This is a string."

> _

In technical terms, all variables declared in JavaScript can be considered variants. Variant is a data type that can accept different data types. The type of the variable will depend on the data it contains regardless of declarations or first assigned values.

However, the term variant type is not totally applicable to JavaScript. The term is usually used on languages such as Visual Basic and C++.To be precise, it is much better to call it dynamically typed.

On the other hand, do note that this is just the tip of the iceberg. Technically speaking, these variables behave like objects. And these data types can be correctly called as object classes. More about this will be discussed on the chapter about object-oriented programming.

Number

Numbers are one of the data types in JavaScript. Unlike other programming languages, JavaScript only has two types of number literals -- Integers and float. Integers are whole numbers that do not have decimal values. Float includes rational and real numbers, with decimal values.

Strings

Strings, in easy to understand term, are text data. In a program or script, you need to use and edit multiple texts. In technical terms, strings are values enclosed in quotation marks. For example, "dog" and "cat" are strings. Even if the quotation marks do not contain any character, it will still be considered as a string.

You can assign strings to variables. For example:

> var sampleString = "This is a sample string.";

< undefined

> alert(sampleString);

> _

The code will make a message box containing the string, "This is a sample string.", without the quotation marks appear on the web page.

Adding Quotation Marks on Strings

What will happen if you decide to place quotation marks on your string? Try this example:

> var sampleString = "Quotation marks look like these ""."

xu Uncaught SyntaxError: Unexpected string (…)

> _

Unfortunately, adding quotation marks within a string can be problematic for you and the parser. In the example, the parser thought that the string assignment has already ended at the second appearance of the quotation mark. Here is how the parser perceived the example.

var sampleString = "Quotation marks look like these "

"."

The parser was expecting a statement separator (;) since it thought that the assignment was already finished. And since the “previously thought valid statement” was followed by a quoted dot, the parser returned a SyntaxError due to the unexpected appearance of another string data.

There are multiple ways to work around this issue. First of all, aside from double quotes ("), strings can be contained using single quotes ('). For example:

> var sampleString = 'This will still work.';

< undefined

> alert(sampleString);

> _

How will that help you? Well, if you started a string data with a single quote, the string must end with a single quote, too. The same goes with double quotes. Because of that, if you insert double quotes inside a string that started with a single quote, the double quotes will not terminate or signal the end of the string data. For example:

> var anotherSampleString = 'The double quotes "" will not make this line return an error.';

< undefined

> alert(anotherSampleString);

> _

If you tried that example, you will notice that, aside from not returning an error, the popup box displayed the double quotations. Alternatively, the single quotations were not displayed since they were used to contain the string.

Smart Quotes or Curly Quotes

Please take note that smart quotes or curly quotes are different from the usual single or double quotation marks. In most word processing programs like Microsoft Word, regular single or double quotes are converted to smart quotes or curly quotes automatically — for aesthetic purposes.

For example, if you press ' in your keyboard, Microsoft word will change that to ‘(or ” if a’ is present before the cursor). The same goes with ", which will be changed to “ (or ” if a “ is present before the cursor).

Unfortunately, the character code for these smart quotes is different from the character codes of the regular single and double quotes. Because of that, compilers and parsers will return an error if you use those quotes in place of the regular quotes.

For example:

> var example = “This is a fancy text with fancy quotes.”

xu Uncaught SyntaxError: Unexpected token ILLEGAL (…)

> _

To fix this, you can just disable the feature in your word processor or perform an undo action to revert the smart quote to a regular quote if you are coding your scripts or programs using word processors or copying code from document files. Another method is to use your word or text processors Search and Replace function.

Primitive Values

If a certain data or value is typed as is, it is usually referred to a primitive value. It is important to know this concept, especially with an object oriented programming language like JavaScript.

As for now, just remember that almost everything in JavaScript is considered as objects. A few of the exceptions are primitive values. Unlike objects, primitive values do not have inherent properties and methods (although strings do have some).

Aside from numbers, other primitive values are data types of their own exist. And they are true, false, undefined, and null. They also are keywords, which have special meanings. At this point, you must already have an idea on what true and false stand for.

undefined and null

As for undefined, it is a value given to a variable that has been declared, but was not assigned a value yet. On the other hand, null is a primitive value that symbolizes the absence of value. Also, null is provided to objects that are not existing in the document. Both undefined and null can be assigned to variables.

Arrays

Array is a concept that aspiring programmers with loose mathematical foundation may find difficult to understand. In a few simple words, an array is a collection of values. In JavaScript, an array is a variable that can contain multiple separate values. For example:

var exampleArray = ["Google", "Yahoo!", "Bing"];

You can access these values from the array using indices. For example:

var exampleArray = ["Google", "Yahoo!", "Bing"];

alert(exampleArray[0]);

alert(exampleArray[1]);

alert(exampleArray[2]);

Array Index

By the way, indices are automatically generated once you add values to the array that you created. By default, indices always start with 0. Also, the indices are assigned according to the order that they were assigned. Google received an index of 0 because it was the first value assigned, and Yahoo! was assigned an index of 1 because it was the second value that was assigned.

However, you can opt to assign a specific index of your own in an element that you will insert in your array. For example:

var exampleArray;

exampleArray[0] = "Google";

exampleArray[1] = "Yahoo!";

exampleArray[2] = "Bing";

By the way, assigning and accessing values in array can be done like this. The syntax for this is: array[index]. On the other hand, unlike other programming languages, JavaScript do not support using keys or named indices.

Array Values Data Types

Arrays are not restricted in containing strings alone. It can also contain objects and numbers. In addition, you are allowed to place any type of data within it. For example:

var randomArray = ["This is a string", 1234, document];