JavaScript is a scripting language that has been known to be a finicky beast. Many well-known developers have forged their names in the annals of the web-development community, having discovered special techniques and hidden gems to tame said beast. The topic of this book, JSON, is one such gem. You will learn more about that in Chapter 4.

JSON is simply a data-interchange format and, therefore, does not directly require immediate knowledge of the JavaScript language. However, this book does not only discuss the composition of JSON. It also discusses how to incorporate it within an application. For this reason, this book employs JavaScript extensively to demonstrate the many ways to work with JSON. There are plenty of great books that reveal the ins and outs of the JavaScript language. This chapter solely acts as a primer to the upcoming chapters.

JavaScript History

The year is 1995, and Netscape seeks to add dynamic behavior as well as the capability to automate parts of a web page within its browser. It was at this point in time that Brendan Eich was hired to incorporate the functional scripting language Scheme into the Netscape Navigator browser.¹ However, Netscape had also been in discussion with other software/hardware companies. In a mad dash for the finish line, Eich had prototyped the scripting language that would soon become what is known today as JavaScript.

The incorporation of this new dynamic behavior within the browser became a game-changer. This had a direct impact on how developers programmed for the Web. Furthermore, this incorporation, as an innovation, encouraged Internet users to adopt Navigator as the preferred browser. In order to compete with the new dynamic, and with the browser wars on the rise, Microsoft was quick to incorporate a scripting language of its own into Internet Explorer.

Microsoft’s scripting dialect was developed to be compatible with the scripting language of Netscape. However, to ensure the language remained uniform, Netscape submitted its dialect to the Ecma International for standardization. Thus were the beginnings of the ECMA-262 specification. ECMA-262 is the name for this scripting language’s specification. The name ECMAScript is the union of Ecma International and JavaScript. To reference ECMAScript is to reference the specification rather than the language itself.

JavaScript Essentials

At its core, JavaScript is a text-based scripting language, whereby sequences of Unicode characters are strung together. That said, what makes JavaScript more than a sequence of characters is its adherence to the rules that govern how the JavaScript engine interprets said sequence into a particular application. The set of rules that defines the valid sequencing of characters is known as Syntax. Listing 1-1 reveals a syntactically correct, albeit simple, JavaScript application.

Listing 1-1. A Valid JavaScript Program

 1 var welcomeMessage = "Hello World";
 2   //Lines denoted with '//' are used to leave comments
 3   console.log( welcomeMessage );  //prints to the console Hello World
 4   console.log("A");   //prints the character A
 5   console.log( 2+5 ); //prints the number 7
 6
 7   console.log("goodbye" + " " + "all"); //prints goodbye all.

Listing 1-1 reveals seven lines composed of a sequence of Unicode-encoded characters. However, as the characters of Listing 1-1 adhere to the ECMAScript specification, what Listing 1-1 reveals is technically a JavaScript application.

Values

Because many languages heavily influenced JavaScript, the values used by JavaScript may appear familiar. While there are many values used by the JavaScript language, there are two categories for which these values are distinguished. Those two categories are the primitive and non-primitive types. Non-primitive types are otherwise known as Objects and are the topic of Chapter 2.

Primitive Types

A primitive type represents the set of all basic building blocks for which data can be represented. These are referred to as primitive because they are rudimentary. This is, of course, in contrast to non-primitive types.

There are five primitive types in JavaScript, as depicted in Figure 1-1. These five types are number, string, Boolean, undefined, and null.

The Number Type

The number type represents the set of all possible numeric values recognized by the JavaScript language. Such representations are shown in Figure 1-2. Possible number values include fractions as well as whole numbers, and each can possess a negative or positive value. Additionally, fractions can be written using scientific notation. Listing 1-2 reveals a variety of valid JavaScript numeric values.

Listing 1-2. Valid Number Values

4
16
3.402823669209385e+38
-1

The String Type

The string type represents the set of all possible string values whereby a string value is a finite representation that includes 0 or more Unicode characters. As outlined in Figure 1-3, while the character encoding is strictly regarded as that of Unicode, string values can also be representative of ASCII character encoding. This is because ASCII is a subset of the Unicode character set. Examples of possible string values can be found in Listing 1-3.

Listing 1-3. Valid String Values

"this is a string value";
"string";
"s";
"";  //An empty String

Because a program is made up of text, a string value is differentiated from our program by delimiting its value with quotations. In Listing 1-3, I have wrapped each string value within double quotes. However, it is entirely valid to utilize singular quotes as well.

Because quotations mark the beginning and end of a string value, it will be imperative that your string does not employ the same outer quotes to nest quotes such as the following: “Mike said and I quote, “let me tell you a secret””. Nesting quotations with the same characters used to signify a string will confuse the engine, resulting in the likelihood of an error. Because the engine reads in a left-to-right, top-to-bottom manner, the first nested quotation encountered will be interpreted as the terminating quotation. This means that what was expected to be a quote by Mike is instead treated as an invalid statement.

Nesting quotations within string values are perfectly acceptable, providing they do not cause the engine to believe the string ends prematurely, as in the preceding example. There are two possible ways to accomplish this.

Alternate Quotations

Because you can alternate between singular and double quotes, whichever you use to delimit a string value, you can use the alternate variation to add grammar to your string. Listing 1-4 revisits the preceding example with the use of alternating quotations.

Listing 1-4. Alternating Use of Quotes

'Mike said and I quote, "let me tell you a secret".';  //  ' is used to delimit a string
"Mike said and I quote, 'let me tell you a secret'.";  //  " is used to delimit a string

As you can see from Listing 1-4, you can use one pair of quotes to signify a string and an alternate form to establish proper English grammar within. The engine will interpret this as a string within a string and move on.

Escaped Quotations

The second method of incorporating quotes within a string is to ensure that the engine does not treat our inner quotations as string delimiters. In order to accomplish this, we must escape our inner quotation marks.

The escape character instructs the engine to interpret the subsequent character differently from how it would otherwise be viewed. This is opposed to being interpreted as a delimiter that would otherwise be used to mark the end or beginning of a string value. Escaping a character is easily accomplished by prefixing the character you wish to escape with a backslash ().

The use of the escaped quotation allows our strings to employ quotations indiscriminately. Examples can be seen in Listing 1-5.

Listing 1-5. Nested Escaped Quotations

"Mike said and I quote, "let me tell you a secret".";
'Mike said and I quote, 'let me tell you a secret'.';

The Boolean Type

A Boolean type represents a logical value consisting of only two possible values. Those values, as illustrated in Figure 1-4, are either true or false. While these are two possible values that can be assigned, a Boolean type is commonly returned as the evaluation of a condition. Such an evaluation may be the comparison between two numbers, as seen in Listing 1-6.

Listing 1-6. Boolean Expressions

var bol = false; //assigns bol a false value
(10<9);          //evaluates to false;
(10>9);          //evaluates to true;

Boolean values are great for incorporating decision making within your application. Determining whether an expression evaluates to true or false allows an application to react accordingly. We will revisit this when I discuss conditional statements.

undefined Type

The undefined type is the value used to represent when an identifier has not yet been assigned a value. When a reference to a variable is evaluated, if it has yet to be assigned a value, the value of undefined is returned.

Listing 1-7 reveals two lines of code. The first line is used to declare a variable labeled name (line 1). The declaration of our variable informs the JavaScript engine to allocate a portion of memory that our application can use to store data. The variable’s identifier name provides us a textual means to refer to said allocation. As we have not yet assigned any data to our variable, the subsequent line returns the value of undefined (line 2).

Listing 1-7. An Undefined Variable

1 var name;
2 console.log(name)   //returns undefined;

null Type

The null type represents the intentional absence of a value. This is contrary to the undefined value, which represents no value as having been set. The null type is a value used explicitly to represent an empty or nonexistent reference.

Listing 1-8, assigns the value of null to the name identifier, to explicitly denote the intentional absence of a value.

Listing 1-8. null Assignment

var name = null;
console.log(name)   //returns null;

Expressions

Simply stated by the Mozilla Developer Network, “An expression is any valid unit of code that resolves to a value.”² The value to which an expression resolves is either that of a primitive type or that of an object. Two possible forms of expressions can be viewed in Listing 1-9.

Listing 1-9. Contrasting Expressions

1 var name = "ben";
2             2+5;

Listing 1-9 demonstrates two different types of expressions. The first represents the assignment of a literal value to a variable (line 1) where name represents the identifier to which the string literal ben is assigned. The second regards the operation of two operands (line 2).

An expression either returns a value, causes a side effect, or both. The determining factor is the operator employed.

Operators

There are a variety of operators within the JavaScript language that can be used to fashion an expression. The operator utilized directly impacts the outcome of the value. I will take this opportunity to discuss the various operators utilized throughout this book.

Assignment Operator

The assignment operator is used to set the value of an expression to that of an identifier. In order to devise an assignment, the JavaScript language relies on the use of the equal (=) operator. Listing 1-10 makes use of the assignment operator to assign a primitive value to a variable.

Listing 1-10. Assigning Values to Variables

1 var bolValue = true;
2 var name = "ben";

Once a value is assigned, it can be obtained by referencing the appropriate identifier. It’s important to note that identifiers are case-sensitive, meaning that if you use all lowercase characters to label a variable, it must always be referred to in lowercase. To do otherwise would cause an error.

Arithmetic Operators

The arithmetic operators are operators that are concerned with mathematical operations. The operators that make up this category can be viewed in Table 1-1.

As you may suspect, arithmetic operators are used to perform mathematical operations on numerical values, as shown in Listing 1-11.

Listing 1-11. Arithmetic Operations

4+9;  // evaluates to 13
8-2;  // evaluates to 6
3*7;  // evaluates to 21
2/1;  // evaluates to 2

However, what might not be expected is that the addition operator serves two purposes. The first purpose concerns the summation of numbers; the second is used to join two string values together. As long as the two operands used in conjunction with the additional operator are of numeric value, they will be added together. However, if at least one operand is a string value, both operands will be coerced into their string representations and joined end-to-end, as demonstrated in Listing 1-12.

Listing 1-12. String Concatenation

1 'Hello' + 'World'; // evaluates to "Hello World"
2 "" + 'Welcome';    // evaluates to "Welcome"
3 true + '';         // evaluates to "true"
4 3 + '3';           // evaluates to "33"

Listing 1-12 demonstrates the union of strings when used with the addition operator. While lines 1 and 2 may be easily accepted, lines 3 and 4 may not be. As previously stated, the addition operator can only be used on numbers or strings. If both operands are numbers, then it’s easy for the engine to know which operation to perform. However, if at least one operand is a string value, then no matter what data type the other operand is, it will always be converted into a string.

Line 3 seeks to add a Boolean value with an empty string, which results in the coercion of true into that of a string. Then, as both operands are viewed as strings, they are joined together and returned as the singular string value. Similarly, line 4 seeks to add the number 3 with that of the string '3', resulting in the string value "33".

Comparison Operators

Comparison operators are used to compare two operands (see Table 1-2). The evaluated value, which will always be that of a Boolean value, is a direct reflection as to whether or not the comparison is true. It is important to point out that few comparison operators compare operands without implicit type coercion.

Listing 1-13 reflects the evaluation between two operands. As demonstrated by Listing 1-13, the comparison operators have two modes: one is the strict comparison between two operands; the other is a more lax comparison.

Listing 1-13. Comparing Operands

3<=3;    // evaluates to true:  after type coercion, 3 is less than or equal to 3
3=='3';  // evaluates to true:  after type coercion, '3' and '3' are found to be equal
3==3;    // evaluates to true:  after type coercion, 3 and 3 are found to be equal
3===3;   // evaluates to true:  3 and 3 are the same
3==='3'; // evaluates to false: 3 does not equal '3'
3!='3';  // evaluates to false: 3 and '3' are equal
3!=='3'; // evaluates to true:  3 does not equal '3'

When the comparison is lax, the two operands are coerced behind the scenes to the same type. Regardless of whether the operand is that of a string or a number, both will be coerced into the same data type before they are compared.

However, the use of a strict comparison operator ensures that both operands are compared without the use of type conversion. This is essential for determining whether two operands are similar in both value as well as type.

The typeof Operator

The typeof operator evaluates the type of any datum. The value returned reflects one of the six data types (see Listing 1-14) used by the JavaScript language.

Listing 1-14. Determining Data Types

1 typeof 3;              //outputs number
2 typeof "hello world";  //outputs string
3 typeof true;           //outputs boolean
4 typeof (new Object()); //outputs object
5 var emptyVariable;
6 typeof emptyVariable;  //outputs undefined

Listing 1-14 demonstrates how the typeof operator can be used to identify to which data type the value in question belongs.

The instanceof Operator

While the typeof operator is used to determine the type of some value, instanceof is used to test whether an instance is a subclass for a given object type. The instanceof operator returns a Boolean value, indicating whether or not the instance is the descendant, directly or otherwise, of a particular object. Use of the instanceof operator is demonstrated in Listing 1-15.

Listing 1-15. Classifying Instances

1 var array = new Array();
2 var xhr = new XMLHttpRequest();
3
4 console.log( xhr instanceof Array);             //outputs false
5 console.log( array instanceof XMLHttpRequest);  //outputs false
6 console.log( array instanceof Array);           //outputs true
7 console.log( xhr instanceof XMLHttpRequest);    //outputs true
8 console.log( xhr instanceof Object);            //outputs true
9 console.log( array instanceof Object);          //outputs true

Listing 1-15 employs the instanceof operator to determine whether two instances, array and xhr, evaluate as members of each other’s object type. Because xhr is an instance of the XMLHttpRequest Object, and array is an instance of the Array Object type, they both output false when compared against each other’s object type.

From there, each instance is compared against its own object type, which evaluates to that of true. This is because our array is an instance of the Array Object type, while xhr is indeed a member of the XMLHttpRequest Object type.

One final thing to point out is that both our xhr and array instances are in fact members of the Object type. This is because both the Array and XMLHttpRequest Objects are direct descendants of the Object itself. This will be discussed in more detail in Chapter 2.

The ! Operator

The NOT operator, signified by the exclamation (!) token, is used to invert a Boolean value, as seen in Listing 1-16.

Listing 1-16. Inversing a Boolean Value

console.log( !true );   // outputs false
var someVal = !false;   // assigns the value true;

Statements

While expressions are concerned with the evaluation of values, statements are concerned with the actions of an application. A statement can be as simple as displaying the sum of two numbers or as complex as generating the histogram of a photograph.

A statement may exist on a line of its own or be composed of multiple statements. A general rule of thumb is that each new line of code represents a statement. However, what truly distinguishes a statement is the explicit use of line terminators.

Line Terminators

The use of a semicolon (;) explicitly signifies the end of a statement. This ensures that if multiple statements are found on a single line, they are interpreted as entirely separate statements. If a semicolon is not found at the end of a valid statement, the engine will instead interpret carriage returns and line breaks as statement terminators. When these implicit line terminators are encountered, the engine inserts semicolons behind the scenes to comply with the syntax.

Listing 1-17 reveals four lines of code. The first two lines represent two separate statements. While they do not explicitly end with a semicolon, they do employ line breaks, which is seen by the engine as a line terminator. When the JavaScript interpreter reads these two lines, it will automatically add semicolons to the end of both lines 1 and 2, making them valid statements.

Listing 1-17. Statements Require Terminators

1 console.log('a')                     //valid statement
2 console.log('b')                     //valid statement
3 console.log('a'), console.log('b'),  //2 valid statements on 1 line
4 console.log('a')  console.log('b'),  //1 invalid statement

Line 3, on the other hand, is a condensed way of writing the preceding two statements. Rather than occupy two lines of code, the explicit use of semicolons after each statement informs the interpreter that multiple statements occur on the same line.

Line 4, on the other hand, possesses two statements without explicit use of the ; delimiter. This results in the engine executing an invalid statement leading to a syntax error.

Control Statements

Control statements are used to add decision making to an application. Depending on the evaluation of an expression, an application can determine whether or not to execute a particular statement. Table 1-3 reveals two keywords that are used by this book to devise control statements.

The if statement is used to execute a statement if and when an expression evaluates to true. On the other hand, if the expression evaluates to false, the indicated statement will be skipped, as seen in Listing 1-18.

Listing 1-18. Controlling Flow with if

1 var bol = false;
2 if( bol ) console.log('condition is met'),

Listing 1-18 demonstrates a typical use of the if statement. Listing 1-18 begins by assigning false to a variable labeled bol (Line 1). The subsequent line represents our control, which outlines the following condition: if bol evaluates as true, then perform the subsequent statement (Line 2). Unfortunately, as bol evaluates to false, the condition is not met, and, therefore, the statement does not execute.

Whereas the statement in Listing 1-18 will cease to be executed, the else clause can be paired with that of the if statement. As you may have anticipated, the else clause will execute a statement in the case that a condition is not met. Listing 1-19 appends the else statement to our earlier demonstration.

Listing 1-19. Controlling Flow with if/else

1 var bol=false;
2 if( bol ) console.log('condition is met'),
3 else console.log('condition is not met'),   // condition is not met

Running Listing 1-19 results in the execution of line 3.

Block Statements

Although a statement can only ever comprise one task, it is quite possible to group a series of statements to be performed. A grouping of statements is known as a block statement. A block statement is delimited with the pair of curly brackets, as seen in Listing 1-20.

Listing 1-20. Grouping Statements Within a Block

{
  statement1;
  statement2;
  statement3;
}

As revealed by Listing 1-20, a statement block can hold any number of statements within. You may notice that while each enclosed statement within the block is concluded with a semicolon, the block statement itself does not require them. The statement block is an extremely important aspect of the language, because it can be inserted wherever a statement is considered valid. Listing 1-21 revisits our control statements from Listing 1-19 and incorporates the use of a block statement.

Listing 1-21. Substituting Block Statements for Statements

1 var bol=false;
2 if( bol ) {  console.log('condition is met'), alert('condition is met'), }
3 else {  console.log('condition is not met'), alert('condition is not met'), }

Truthy/Falsy

Any valid JavaScript value will evaluate to that of a Boolean value when used as the expression of a control statement. While the evaluation returns either true or false, the values that evaluate to true or false are not as cut and dry. Those that evaluate to true are referred to as truthy values. While those that evaluate to false are referred to as falsy values.

The simplest way to contrast the truthy values from those that are falsy is to recognize which values are falsy. Listing 1-22 reveals the falsy values of the JavaScript language.

Listing 1-22. Demonstrates All Falsy Values

if(''),                     // An empty string
if(0);                      // the number 0
if(null);                   // a value of null
if(false)                   // a value of false
if(undefined);              // a value of undefined
if(NaN);                    // a value of NaN

Any value not displayed in Listing 1-22 represents a truthy value.

Loop Statements

The JavaScript language does possess a few loop statements, which enable a statement to occur as long as a particular condition is met.

The for loop

One loop that is used extensively throughout this book is the for loop. The for loop is commonly used to execute a statement for as long as a condition remains true. The syntax for the for loop can be seen in Listing 1-23.

Listing 1-23. The Syntax of a for Loop

for( initialization ; condition ; operation ) statement;

As revealed in Listing 1-23, a for loop requires an initialization, a condition, and, last, an operation that either increments or decrements the initialized value.

As long as the condition remains true, the provided statement will be executed. However, the moment the condition is no longer met, the loop will terminate and the engine will move on to the next statement in the application. Listing 1-24 employs a for loop to execute a statement, as long as the variable i remains less than 10.

Listing 1-24. An Iterative Statement Can Reference the Current Index

1 for( var i=0; i<10 ; i++ ) console.log( i ); // logs out 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

The for/in loop

The second form of a loop that will be used by this book is the for/in loop. The for/in loop is used to enumerate the members possessed by an object instance (see Listing 1-25).

Listing 1-25. Iterating All Owned Enumerable Keys of an object

1 var carA = new Object();
2     carA.wheels=4;
3     carA.color="blue"
4     carA.make="Volvo";
5 for( var member in carA ) console.log( member );

Listing 1-25 possesses a variable labeled carA, which is assigned a non-primitive value. To be more specific, carA is assigned the value of an object. An object can be thought of as a container used to group common variables together. In this case, the particular variables are grouped together to represent a vehicle. As revealed in Listing 1-25, the variables used in the collection are the following: wheels, color, and make. These properties are used to add specifics to our vehicle.

The for/in loop is used to iterate all identifiers contained within the chosen instance. Executing the preceding listing results in the following output:

wheels
color
make

Declarations

JavaScript declarations are used to register text identifiers that can be referenced throughout a program.

Variables

For all intents and purposes, JavaScript variables can be thought of as a named pointer that remains a symbolic link to a particular location in memory. The name for which the pointer is provided is known as an identifier. An identifier is a case-sensitive label used as a means to refer to its particular storage location. Only by declaring a variable can a value be assigned, retained, and later referenced.

In the JavaScript language, variables are declared via the keyword var, as demonstrated in Listing 1-26.

Listing 1-26. Declaring Three Variables

1 var name = "ben";
2 var age = 36;
3 var sayName = function(){ return this.name };  //function expression

Listing 1-26 declares three variables and provides each with a concise yet meaningful identifier. Identifiers should reflect something meaningful and befit the data for which they are assigned.

Functions

Technically, functions are not statements but are used to perform specific actions. Functions are a special form of object, which allows functions to be treated as values. Listing 1-27 reveals the syntax of a function.

Listing 1-27. The Syntax of the Function Declaration

function Identifier ( FormalParameterListopt ) { //statements; }

As outlined in Listing 1-27, a function is defined by using the function keyword. The identifier, which follows the declaration, registers the function with the provided label. This ensures that an application can refer to the function at any point in time throughout the application.

Following the identifier is a pair of parentheses, which are used to hold any number of optional identifiers separated with the use of a comma. These identifiers are used as labels for the parameters that you may wish to provide to the body of a function.

The final component of the function declaration is the statement block to be executed when the function is executed. Listing 1-28 declares a function labeled sayName.

Listing 1-28. Invoking the sayName Function with a Parameter

1 function sayName (name){
2   return "Hello " + name;
3 };
4 console.log( sayName("Ben") ); // Hello Ben

Listing 1-28 employs a function declaration to devise a function that is capable of accepting an arbitrary value whose identifier reflects that of name. This identifier represents the identity for the parameterized value provided by the caller of the function. The body of the function can then reference this value and use it within its operation.

In the case of sayName, the function body references the identifier name and uses the addition operator to join its value and the word Hello together. Utilizing the keyword return, the evaluation is then provided back to the caller of the function. This results in the output of Hello Ben to the console.

Summary

This chapter has sought to provide an overview of the many upcoming chapters, in which the JavaScript language will be relied on extensively to employ, explain, and devise JSON. While much of this chapter has focused on statements, operators, and primitive types that will be used in this book, the next chapter focuses on the non-primitive types of the language, otherwise known as objects.

Key Points from This Chapter

• JavaScript is a text-based language made up of Unicode and ASCII characters.
• ECMAScript refers to the specification of the language.
• JavaScript possesses two categories of data types: primitive and non-primitive.
• Primitive values can be numbers, strings, Boolean, undefined, and null.
• undefined represents the lack of value.
• null is used to denote intentional absence of value.
• Expressions resolve to a value.
• Operators are used to fashion expressions.
• The addition operator serves two purposes.
• Strict comparison operators prevent the occurrence of type coercion.
• Non-strict comparison operators rely on type coercion before comparing two operands.
• The typeof operator is used to determine the type of datum.
• The instanceof operator is used to determine the Object type of an instance.
• Statements should be terminated explicitly.
• Statement blocks can group multiple statements.
• Identifiers are case-sensitive text-based labels.
• Functions are named blocks of code that can be provided parameters.

_____________________

¹Wikipedia, “JavaScript,” http://en.wikipedia.org/wiki/JavaScript, modified January 2015.

²MDN: Mozilla Developer Network, “Expressions and operators,” https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators, last updated November 27, 2014.