Categories
Object-Oriented JavaScript

Object-Oriented JavaScript — JSON vs XML and Singletons

Spread the love

JavaScript is partly an object-oriented language.

To learn JavaScript, we got to learn the object-oriented parts of JavaScript.

In this article, we’ll look at some basic coding and design patterns.

Use JSON

JSON is a popular lightweight format for exchanging data.

It’s better than XML since we can convert between JSON string and JavaScript objects easily.

An example of a JSON string includes:

{
  'a': 1,
  'b': 2,
  'c': 3
}

XML code is like:

<?xml version="1.0" encoding="UTF-8"?>
<response>
   <name>james</name>
   <books>
      <book>foo</book>
      <book>bar</book>
      <book>baz</book>
   </books>
</response>

It’s hard to convert XML code into JSON with JavaScript.

We have to install a library to do it.

But we can convert between a JSON string and an object literal with JSON.parse and JSON.stringify .

Also, XML code is longer with all the opening and closing tags.

JSON parsing and stringifying methods are also available in standard libraries of other languages like PHP.

Higher-Order Functions

Functional programming is confined to a limited set of languages.

JavaScript is one of the programming languages that have some functional programming features.

Higher-order functions are one of the basic features of functional programming.

A higher-order function is a function that takes one or more functions as arguments or returns a function as a result.

JavaScript functions can take functions as arguments and return functions.

They’re treated like other objects.

For instance, the array instance’s map method takes a function to let us map array entries to something else.

For instance, we can write:

[1, 2, 3, 4, 5].map(a => {
  return a ** 2;
})

We square each array entry and return an array with the squared entries.

The function we passed in is called on each entry and the returned result is added to the returned array.

We can write higher-order functions easily with arrow functions.

For instance, instead of writing:

function add(x) {
  return function(y) {
    return y + x;
  };
}
const add5 = add(5);

We write:

const add = x => y => y + x;
const add5 = add(5);

It’s much shorter and cleaner.

In both add functions, we take the parameter and return a function that takes a parameter y , add that with x and returns it.

Design Patterns

Design patterns are commonly-used language-agnostic ways for organizing our code.

The Gang of Four book is the most popular book with design patterns.

There’re several kinds of design patterns.

Creational patterns deal with how objects are created.

Structural patterns deal with how different objects are composed to provide new functionality.

Behavioral patterns provide us with ways for objects to communicate with each other.

Singleton Pattern

Singleton pattern is a creational design pattern.

In the pattern, we create only one object from any kind of class.

In JavaScript, we can do this simply with an object literal.

For instance, we can write:

const single = {};

to create an object literal.

Conclusion

We should use JSON for communication since it’s easier to serialize and parse.

Also, higher-order functions are used everywhere in JavaScript.

And we can create singleton objects with object literals.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

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