JavaScript is one of the most commonly used scripting languages, and is most frequently used for developing dynamic web pages. JavaScript is used on the client side; web clients interact with the server side using the HTTP Request/Response protocol. Several web frameworks are available for developing full-stack web applications using JavaScript. Agile principles for software development emphasize the importance of simplicity, flexibility, and continuous delivery of valuable, working software. Any software that uses JavaScript during development benefits from the Agile features of JavaScript. In this article, we will explore how JavaScript supports Agile.

Simple

If your software development depends on JavaScript, simply enable JavaScript in the browser, which may be different for different browsers. In Google Chrome, access url chrome://settings/content/javascript and select Sites can use JavaScript as shown in Figure 1.

Figure 1. Enabling JavaScript use

JavaScript is a lightweight language that is interpreted at runtime rather than being compiled separately before running. The just-in-time compilation, or dynamic compilation, precludes having to compile a JavaScript-based application ahead of use, separately.

Simple, but standards-based, JavaScript is based on ECMAScript Language Specification (ECMA-262) and the ECMAScript Internationalization API specification (ECMA-402).

Several other features make JavaScript simple, including:

• Object-oriented
• Automatic object creation at runtime
• The automatic freeing of memory, or garbage collection

JavaScript supports the familiar object-oriented principles of polymorphism, inheritance, abstraction, and encapsulation, but in a slightly different way than some other programming languages. JavaScript supports first-class functions, which means:

• Functions can be passed to other functions as arguments
• A function can return functions
• Functions can be assigned to variables

In short, a function is just like a variable. As an example, the following code creates an anonymous function and assigns it to a variable var1:

const var1 = () => {
document.write("Page loaded");
};

The following code calls the function using the variable:

var1();

The website would display the message, “Page loaded.”

To demonstrate passing a function to another function as an argument, consider the following function:

function hi(message, name) {
console.log(message() + name);
}

Create a second function that is to be passed to the first function:

function hello() {
return "Hello, ";
}

Call the first function passing the second function as an argument:

hi(hello, "John!");

The output is the message, “Hello, John!”

Below is an example of a function that returns a function as a value:

function hello() {
return () => {
document.write("Hello!");
};
}

Flexible

One of the Agile principles for software development emphasizes responding to change as the requirements may evolve. If the software being developed, tested, or used depends on accessing data from the server, it could benefit from fetching the data without any latency, or delay. In a typical HTML page that uses synchronous data access, the complete page has to be refreshed when the returned data is to be posted on the page. Ajax (Asynchronous JavaScript for XML) overcomes that limitation by fetching and posting/using data from the server asynchronously without having to refresh the complete page. Ajax makes use of the XMLHttpRequest object for the asynchronous request/response.

Welcomes Changing Requirements

JavaScript is a prototype-based language that does not require that a class be explicitly defined, including defining its methods and properties. Instead, a class can be derived by adding properties and methods to an empty object or an instance of another class. While a class can be declared using the class keyword, allowing changing requirements, an object can be created without first defining a class for it.

As an example of creating a new object using an existing object to demonstrate prototype-based object creation, define an object called hello with the property isNewContact, and the function hiMsg.

const hello= {
isNewContact: false,
hiMsg() {
console.log(`Hi from ${this.name}`);
console.log(`Is new contact? ${this.isNewContact}`);
},
};

Using Object.create, create another object called newObj using the hello object as the prototype.

const newObj = Object.create(hello);

Set the value of the property name for the newObj. Note that the name property is not defined in the hello object.

newObj.name = 'John';

Set the value of the isNewContact property to true.

newObj.isNewContact = true;

Call the hiMsg function of the newObj object:

newObj.hiMsg();

The output is:

Hi from John
Is new contact? true

JavaScript is a dynamically-typed language, another feature that supports changing requirements. A variable is not associated with any particular type and can be assigned a value of any supported type. To demonstrate, create a variable a and assign it a number value:

let a = 1;

Output the type of the variable using the typeof operator:

console.log(typeof a);

The output is number.

Assign a new value “one” to the variable, and output its type to:

a = "one";
console.log(typeof a);

The output this time is “string.” Again, assign a different value true to the same variable, and output its type to:

a = true;
console.log(typeof a);

This time the output is boolean.

JavaScript is weakly typed, which implies that mismatched types can be used and an implicit conversion is made. As an example, a number value is added to a string value, which is added to a boolean value:

let a = 1;

a = a+"one";

a = a+true;

The output to the console is made and no error is generated:

console.log(a);

The output is 1onetrue.

Though primarily designed for scripting on web pages, JavaScript may be used in non-browser environments including server-side use. As an example, Adobe Acrobat, which you may be familiar with for PDF, uses JavaScript.

Maintainable

One of the Agile principles is to promote sustainable development. JavaScript recommends several styling/naming guidelines to keep code easy to understand and maintain, such as:

• Add indentation using two spaces instead of the tab character
• Use literals instead of constructors to create an array
• Use single-line comments instead of block comments
• Use meaningful function names that start with lower-case
• Use braces with control flow statements and loops
• Use class names that start with upper-case
• Use class method and class property names that start with lower-case
• Use short variable names that start with lower-case

Extensible

JavaScript source code is extensible by virtue of several features that include:

• Prototype-based objects
• Class Inheritance using the extends keyword
• Object class static methods

As an example of extending a class, create a NumberString class that extends the built-in Number object and provides the getStringValue() function that returns the string value of a number by calling the toString() instance method inherited from the Number object.

class NumberString extends Number {

getStringValue() {
return `${this.toString()}`;
}

}

The extended class can be used as follows:

console.log(new NumberString(10e2).getStringValue());

The output is “100”.

As an example of using one of the static methods in the Object class, the Object.assign() static method copies the enumerable, own properties from one or more source objects to a target object. To demonstrate, create an object called obj:

const obj = {
a: 10,
get message() {
return "Hello";
},
};

Create a copy of the object using the Object.assign() method:

let copyOfObj = Object.assign({}, obj);

Log the copyOfObj object to the console:

console.log(copyOfObj);

Output is:

{a: 10, message: "Hello"}

Portable

JavaScript is a platform-independent language. As browsers are used on different operating systems, and JavaScript is used on browsers, JavaScript’s portability helps in this regard.