Visitor Design Pattern in JavaScript

1. Definition

The Visitor Design Pattern is a way of adding further operations to objects without having to modify them. It is a means of separating an algorithm from an object structure on which it operates.

2. Problem Statement

Consider a structure of many objects of different types and you need to perform operations on these objects that are not related. Implementing the operations within the classes is not viable because it leads to a lot of unwanted ties between methods, making the system harder to scale.

3. Solution

Visitor pattern suggests that you place the new operation into a separate class called a visitor, rather than trying to integrate it into existing classes. The original object that had to perform the operation is now accepting the visitor object and allows it to operate on its data.

4. Real-World Use Cases

1. Rendering graphical objects in multiple formats (e.g., SVG, Canvas).

2. Applying various types of validation to a set of disparate objects.

3. Operating on different data formats (e.g., XML, JSON) in a unified manner.

5. Implementation Steps

1. Declare the visitor interface with a visit operation for each type of concrete element in the object structure.

2. Implement concrete visitor classes for operations you need to implement.

3. In each concrete element class, implement an accept method that takes a visitor as an argument and redirects the call to the visitor.

6. Implementation in JavaScript

// Element Interface
class Element {
    accept(visitor) {}
}
// Concrete Elements
class ElementA extends Element {
    accept(visitor) {
        visitor.visitElementA(this);
    }
    operationA() {
        return 'ElementA';
    }
}
class ElementB extends Element {
    accept(visitor) {
        visitor.visitElementB(this);
    }
    operationB() {
        return 'ElementB';
    }
}
// Visitor Interface
class Visitor {
    visitElementA(element) {}
    visitElementB(element) {}
}
// Concrete Visitor
class ConcreteVisitor extends Visitor {
    visitElementA(element) {
        console.log(`Visited ${element.operationA()} by ConcreteVisitor`);
    }
    visitElementB(element) {
        console.log(`Visited ${element.operationB()} by ConcreteVisitor`);
    }
}
// Client Code
const elements = [new ElementA(), new ElementB()];
const visitor = new ConcreteVisitor();
for(let element of elements) {
    element.accept(visitor);
}

Output:

Visited ElementA by ConcreteVisitor
Visited ElementB by ConcreteVisitor

Explanation:

1. Element represents an interface for objects that can be visited.

2. ElementA and ElementB are concrete elements. They implement the accept method, which takes a visitor object and allows it to interact with the element.

3. Visitor is an interface for all visitors, defining visit methods for all types of visitable elements.

4. ConcreteVisitor provides a specific implementation of a visitor.

5. In the client code, a list of elements is traversed and each one accepts the visitor, allowing the visitor to perform an operation on the element.

7. When to use?

Use the Visitor Pattern when:

1. You need to perform operations across a set of disparate objects.

2. Operations on objects need to be decoupled from the objects themselves.

3. The object structure is unlikely to change but is very likely to have new operations which change frequently.