What are the classes and proxies in JavaScript ?

Classes: These are almost similar to functions, except they use a class keyword instead of a function keyword. Another important difference between functions and classes is that functions can be called in code before they are defined whereas classes must be defined before a class object is constructed in JavaScript, else running the code will throw a Reference error.

Defining a class: A class can be defined by using a class keyword along with a constructor function to initialize it.

Syntax:

class Classname {
    constructor(property1, property2) {
        this.property1 = property1;
        this.property2 = property2;
    }
}

Example: The following example describes for a simple classes.

<script>
    class Employee {
        constructor(name, id) {
            this.name = name;
            this.id = id;
        }
    }
    let Employee1 = new Employee("Suraj", 533);
    console.log(Employee1);
</script>

Output:

Employee {name: 'Suraj', id: 533}
id: 533
name: "Suraj"
[[Prototype]]: Object

Class Expressions: We can also define a class using class expressions. They can be of two types namely "named" or  "unnamed". The name of a class can be accessed by the name property.

Syntax:

let Employee = class {
      constructor(name, id) {
          this.name = name;
          this.id = id;
      }
}

Example: 

<script>

   // Unnamed class
    let Employee1 = class {
        constructor(name, id) {
            this.name = name;
            this.id = id;
        }
    }
    console.log(Employee1.name);   

   // Named class
    let Employee2 = class Intern {
        constructor(name, id) {
            this.name = name;
            this.id = id;
        }
    }
    console.log(Employee2.name);        
</script>

Output:

Employee1
Intern

Class methods: We can also define methods inside classes. It can be with or without parameters. 

Syntax:

class Classname {
 constructor(property1, property2) {
   this.property1 = property1;
   this.property2 = property2;
 }
 method1() { ... }
}

Example:

<script>
    class Employee {
        constructor(name, id) {
            this.name = name;
            this.id = id;
        }
      
        // Without parameter
        getname(){
            return "Name of Employee: "+this.name; 
        }
      
        // With parameter
        getdept(department){
            return "Works in " + department;
        }
    }

    let Employee1 = new Employee("Suraj", 533);
    console.log(Employee1.getname());
    console.log(Employee1.getdept("Finance department"));
</script>

Output:

Name of Employee: Suraj
Works in Finance department

Proxies: Proxies are objects that are used to redefine the fundamental operations of an object.  It allows us to create a proxy of another object.

Parameters:

A proxy object accepts two parameters described below:

• target: It is the original object of which we want to wrap with proxy.
• handler: An object whose properties define the behavior of proxy if an operation is performed on that proxy.

Syntax:

const target = {
   property1: "first property",
   property2: "second property"
};
const handler = { ... };
const proxy1 = new Proxy(target, handler);

Example:

<script>
    const target = {
        property1: "GeeksforGeeks",
        property2: "Computer science portal"
    };

    const handler = {};
    const proxy = new Proxy(target, handler);

    console.log(proxy.property1); 
    console.log(proxy.property2); 
</script>

Output:

GeeksforGeeks
Computer science portal

Since the handler is empty, it does not affect the target. Thus, the proxy behaves as its original target.

We can also define operations within the handler to change the properties of the proxy from its original target. For this, we need to use the get() handler which can access the properties of the target and manipulate the properties inside the proxy. The reflect class helps to apply the original properties of the target to the proxy.

Example: We applied if condition in the handler, to check for "property2" of the target, the output should be changed from the original property of the target.

<script>
    const target = {
        property1: "GeeksforGeeks",
        property2: "Computer science portal"
    };

    const handler = {
        get: function (target, prop, receiver) {
            if (prop === "property2") {
                return "For computer science geeks";
            }
            else{
                return Reflect.get(target,prop);
            }
        }
     }
        const proxy = new Proxy(target, handler);

        console.log(proxy.property1); 
        console.log(proxy.property2); 
</script>

Output:

GeeksforGeeks
For computer science geeks