How class fields are magically created through constructor by 'implicit assignment'

Take a look at the following code which defines a class Rectangle with no explicit declaration of its fields.

//Define a call named Rectangle
class Rectangle {
  //Declaration of height and width fields are absent
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

Now, lets instantiate an object for this class

const rec1 = new Rectangle(10,20); //Executes without errors

Now, if you console.log(rec1.height) it prints 10 !

How did JS magically create those fields for you?

The properties "height" and "width" are indeed created in the Rectangle class without explicitly defining them using let, but it's not exactly spontaneous creation.

1. Implicit Assignment:

When you define constructor parameters inside the constructor function, like height and width in this case, JavaScript implicitly assigns those parameters to properties with the same names on the new object being created (this).

2. this Keyword:

Inside the constructor function, this refers to the new object being created (Rectangle instance in this case).

So, this.height = height is equivalent to saying "assign the value of the height parameter to the height property of the new Rectangle object".

3. No need for let:

JavaScript automatically creates properties if they don't already exist when you assign a value to them using this.

Therefore, you don't need to explicitly declare let height or let width before assigning them.

In simpler terms:

When you create a new Rectangle object with specific height and width values, those values are automatically stored as properties named height and width on that object.

Bonus

Take a look at this code

function noKeywordVariableDemo(){
    randomVal=15 //not declared as let, const or var
    return randomVal;  
}

Now, console.log(noKeywordVariableDemo) would print 15. This is possible because its assignment without declaration.

Assignment without Declaration: In pre-ES6 versions of JavaScript (before 2015), you could assign values to variables without explicitly declaring them using keywords like let, const, or var. However, this is generally discouraged in modern JavaScript due to scoping issues and potential naming conflicts.

Variable Hoisting: In pre-ES6 JavaScript, variable declarations are "hoisted" to the top of their enclosing scope (global or function). This means that even if you declare h later in the function, it appears like it's available from the beginning.

Why Use Modern Declarations?

1. Clarity and Scope: Declaring variables makes their scope clear and avoids unintended global variable creation.

2. Safety: Using let or const prevents accidental reassignment of variables declared with var, reducing bugs.

3. Modern Practices: It adheres to modern JavaScript style guidelines and best practices.

Please feel free to correct me if I'm wrong or leave the questions that still bother you in the comments.