Bits and Pieces

In this section I cover the bits and pieces of Javascript, I will add to this section from time to time.

Proxies and Reflect

This is a quick introduction regarding proxies and reflect, a proxy is kinda a wrapper around an object so that you can add additional functionality without changing the original object, in its simplest form it can exist nothing more than an abstract target object. You use the Proxy constructor to create the proxy which you supply the target object and a handler object. You define traps which function as operational interceptors inside the handler, you can have zero to many traps. When you call the proxy before actioning on the object the proxy trap will be invoked. You can use Reflect to retrieve the data in a more elegant way. It possible to build a proxy of a proxy adding many layers on top of a single object.

Proxy example 
// Original Object (plain old object)
const target = {
    id: 'target'
};

const handler = {};

const proxy = new Proxy(target, handler);

// The 'id' property will access the same value
console.log(target.id);                                     // target
console.log(proxy.id);                                      // target

// Assignment to a target property changes both since
// both are accessing the same value.
target.id = 'foo';
console.log(target.id);                                     // foo
console.log(proxy.id);                                      // foo

// Assignment to a proxy property changes both since
// this assignment is conferred to the target object.
proxy.id = 'bar';
console.log(target.id);                                     // bar
console.log(proxy.id);                                      // bar
Proxy with handler examples 
const user = {
    name: 'paul'
};

const handler = {
    // any retrieval will use the same get method
    get() {
        return 'handler override';
    }
};

const proxy = new Proxy(user, handler);


console.log(user.name);         // paul
console.log(proxy.name);        // handler override
Retrieve value 
const user = {
    fname: 'paul',
    lname: 'valle'
};

const handler = {
    // Works but not ideal
    get(trapTarget, property, receiver) {
        // DO OTHER STUFF
        
        return trapTarget[property];            // use trapTarget[property] to get value
    }
};

const proxy = new Proxy(user, handler);


console.log(user.fname);         // paul
console.log(proxy.fname);        // paul

console.log(user.lname);         // valle
console.log(proxy.lname);        // valle
Proxy and Reflect example 
const user = {
    fname: 'paul',
    lname: 'valle'
};

const handler = {
    // Use Reflect to retrieve the object values
    get: Reflect.get
};

const proxy = new Proxy(user, handler);


console.log(user.fname);         // paul
console.log(proxy.fname);        // paul

console.log(user.lname);         // valle
console.log(proxy.lname);        // valle

XML

I am briefy going to cover XML and Javascript, you can use the DOMParser to parse XML into a DOM document.

XML and DOM examples 
let parser = new DOMParser();                            // DOMParser is a browser module (not NodeJS)

let xmldom = parser.parseFromString("", "text/xml");

console.log(xmldom.documentElement.tagName);                    // "root"
console.log(xmldom.documentElement.firstChild.tagName);         // "child"

// Create DOM element using XML
let anotherChild = xmldom.createElement("child");
xmldom.documentElement.appendChild(anotherChild);

If you are a tester and have used Selenium, then you must have come across XPath, XPath is used to find the location of any element on a webpage using HTML DOM structure. There are two types XPathEvaluator which is used to evaluate XPath expressions and XPathResult, XPathEvaluator has three methods

XPath example 
let result = xmldom.evaluate("employee/name", xmldom.documentElement, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);

if (result !== null) {
    let element = result.iterateNext();
    while(element) {
        console.log(element.tagName);
        node = result.iterateNext();
    }
}
XPath complex example 
  let parser = new DOMParser();                            // DOMParser is a browser module (not NodeJS)
let xmldom = parser.parseFromString("
", "text/xml");

let result = xmldom.evaluate("//html[1]/body[1]/div[1]", xmldom.documentElement, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);

if (result !== null) {
    let element = result.iterateNext();
    while(element) {
        console.log(element.tagName);
        node = result.iterateNext();
    }
}

JSON

Before JavaScript Object Notation (JSON), XML was the favourite way of sending data, however it seems that JSON is now the default way to send data across the wire, JSON allows the representation of three types of values

Values and Objects in JSON are listed below

simple values 
5
        "Hello"
objects 
JavaScript
look like this:
// Javascript object
let person = {
    name: "Paul",
    age: 21
};

// JSON's way of the above
{
"name": "Nicholas",
"age": 29
}
Arrays 
// Javascripts way
let values = [25, "hi", true];

// JSON's way
[25, "hi", true]

// JSON's complex data
[
    {
        "Name": "Paul Valle",
        "skills": [ "programmer", "Administrator" ],
        "years": 30,
    },
    ....
]

JSON has two methods to convert a JSON object into a Javascript and vice versa called stringify() and parse(), also you can stringify parts of a Javascript object

JSON example 
let user = {
    fname: "Paul",
    lname: "Valle",
    age: 5
}

let json_user = JSON.stringify(user)
console.log(json_user);                                 // JSON - {"fname":"Paul","lname":"Valle","age":5}

let javascript_user = JSON.parse(json_user);
console.log(javascript_user);                           // Javascript Object - { fname: 'Paul', lname: 'Valle', age: 5 } 

// using a filter
let json_user_filter = JSON.stringify(user, ["fname"]);
console.log(json_user_filter);                          // {"fname":"Paul"}
Previous Return to Home Page Next