Note! This article is part of a series (see here). In this installation, we will explore syntax and string testing.

Let's start by writing a small JavaScript function.

var person = function(first_name,last_name) {
    this.init = function(first_name,last_name) {
        if (first_name) {
            this.first_name = first_name;
        };
        if (last_name) {
            this.last_name = last_name;
        };
    };
    this.getFirstName = function() {
        return this.first_name;
    };
    this.setFirstName=function(first_name) {
        this.first_name = first_name;
    };
    this.getLastName = function() {
        return this.last_name;
    };
    this.setLastName=(last_name) {
        this.last_name = last_name;
    };
    this.init(first_name,last_name);
}

When learning a computer language, one of the first issues you grapple with is syntax errors. So we are going to look a few tools that will help spot syntax errors.

A little background on how I choose and install tools. I use Linux, specifically the Arch Linux distribution here: https://www.archlinux.org/ . So I know this isn't for everyone, but it might be helpful to some folks. I've used Arch Linux's package manage (Pacman) to install 2 different JavsScript engines:

Mozilla SpiderMonkey https://www.archlinux.org/packages/extra/i686/js/
and Google's V8 https://www.archlinux.org/packages/community/i686/v8/

At this point, I just want to make sure that person.js is syntactically correct. Here is how to invoke command line ("workspace" is my current directory").

SpiderMonkey

$workspace> js person.js

V8

$workspance> d8 person.js

Note! "js" is SpiderMonkey's executable. "d8" is the V8 executable.

Here are our results:

SpiderMonkey

$workspace> js person.js
person.js:19: SyntaxError: missing ; before statement:
person.js:19:     this.setLastName=(last_name) {
person.js:19: .................................^

V8

$workspance> d8 person.js
person.js:19: SyntaxError: missing ; before statement:
person.js:19:     this.setLastName=(last_name) {
person.js:19: .................................^

Doh!! I forgot to add "=function" on line line 21. So, let's fix it:

var person = function(first_name,last_name) {
    this.init = function(first_name,last_name) {
        if (first_name) {
            this.first_name = first_name;
        };
        if (last_name) {
            this.last_name = last_name;
        };
    };
    this.getFirstName = function() {
        return this.first_name;
    };
    this.setFirstName=function(first_name) {
        this.first_name = first_name;
    };
    this.getLastName = function() {
        return this.last_name;
    };
    this.setLastName= function(last_name) {
        this.last_name = last_name;
    };
    this.init(first_name,last_name);
}

Let's run it:

Let's run both engines again. However, I want to add some statements which test the functionality of our code. A short test that verifies functionality is sometimes referred to as "string testing". Similar to "unit testing", just not as formal. To string test our code, we adjust the command line like so:

SpiderMonkey

$workspace> js
js> load("person.js");

V8

$workspace>d8
d8> load("person.js");

Now let's add a small functional test. Both SpiderMonkey anf V8 allow you to interactively execute statements in the same manner.

> var joe = new person("joe","smoe");
> var firstName = joe.getFirstName();
> firstName
joe

Both SpiderMonkey and V8 identified the location of my syntax error. But what if I need more specific hints on not only where the error is located but how I should fix it. For extended help with syntax, let's use JS Hint (at jshint.com), Note! JS Hint has both an online utility and a stand alone utility you can install on your development machine.

I've installed the standalone version (see instructions here http://jshint.com/install/). Let's run the bad version of our code with jshint.

$workspance> jshint person.js
badperson.js: line 5, col 22, Unnecessary semicolon.
badperson.js: line 8, col 22, Unnecessary semicolon.
badperson.js: line 19, col 33, Missing semicolon.
badperson.js: line 21, col 10, Unnecessary semicolon.
badperson.js: line 23, col 2, Missing semicolon.

5 errors

Note! I've also been using VIM as an editor. I happend to have Syntastic plugin for VIM ( see http://www.vim.org/ installed (see https://github.com/scrooloose/syntastic). Thus, the same syntax checks I just demonstrated are also available during my edit session with VIM.

Another note, JS HINT states there are 5 "errors". Whether these are errors or "warnings", I'm not going to argue. Let's clear them.

There are also tools that run within your web browser. Let's take a quick look at Firefox and Chromium. I'm using version 20.0.1 of Firefox and 26.0.1410.63 of Chromium. Both browsers provide a JavaScript console. You can paste you javacript in to either console and get the similar type of syntax check we performed with the SpiderMonkey and V8 command line engines. You can also enter the "string test" we demonstrated above with the javascript consoles.

Firefox also has a tool called Scratchpad. Scratchpad extends the js command line functionality by giving you access to Document Object Model (DOM). In other words. you can also string test code that manipulates your document.

Let's repeat our syntax and string test in Scratchpad. From the FireFox top menu bar, choose . We can either use Scatchpad's top menu and open the person.js file, or we can paste the code in to the Scratchpad edit area. From the Scratchpad top menu, select . Scratchpad identifies the syntax error:

/*
Exception: missing ; before statement
@Scratchpad/8:27
*/

Let's edit the code, using Scratchpad's edit area and repeat the command. If Scratchpad doesn't report any errors we are ready to add our string test. This time we are going to adjust the string test so that the out put is displayed in the Firefox web browser JavaScript "console". Here is our new code:

var joe = new person("joe","smoe");
var firstName = joe.getFirstName();
console.log(firstName);

Lets open the FireFox javascript console and verify the output. Go to FireFox main menu. select . OK, there is output "joe".

This tiny exercise, may not seem that useful right now. However, later, you may later be working on a larger program where your code is running from within a web browser and cached with the HTML5 "Application Cache". In that scenario, running the string test from the command line. console or Scratchpad, becomes a huge time saver. You can perform your syntax and string test without updating the server code, or clearing the "Application Cache" in your browser. Actually, clearing the "Application Cache" itself can require several steps.

The summarize, at certain phases of development simple syntax and string tests speed up the development process. Our next installment will take a look at performance testing.

About the Author:
Lorin M Klugman is an experienced developer focused on new technology.
Open for work (contract or hire).
Drop Lorin a note. Click here for address.
Please no recruiters :)
- Home