How to create a private variable in JavaScript ?

In this article, we will try to understand how we could create private variables in JavaScript. Let us first understand what are the ways through which we may declare the variables generally in JavaScript.

Syntax: By using the following syntaxes we could declare our variables in JavaScript.

var variable_name = value

Also, another syntax that we could use for variable declaration is by using the "let" keyword.

let variable_name = value

Now that we have a basic idea about how we could declare the variables, let us see how to make them private which is making these variables inaccessible directly.

Private Variables creation in functions: Whenever we deal with functions we always try to make variables private which then helps not to directly access variables further avoids updating these values too.

Example: The implementation of the code will eventually assist us in understanding how to build private variables and functions:

<script>
    function carDetails() {
        let kms = 0;
        let speed = 0;
        let speedUp = (intialSpeed) => {
            speed += intialSpeed;
            kms += speed;
        };
        let totalkmsDriven = () => kms;
        return { speedUp, totalkmsDriven };
    }
    
    let car_object = carDetails();
    car_object.speedUp(7);
    car_object.speedUp(9);
    console.log(car_object.totalkmsDriven());
    
    // Undefined, since it is made private:
    console.log(car_object.kms); 
</script>

Output:

23
undefined

All the variables declared (shown in the above code snippet) can't be accessed directly since they are encapsulated in such a way that without the function call access the values carried by these variables can't be used or printed out.

Alternatively, we may also use the "this" keyword to make method (function) calls to stick to the main method itself which thus makes the variables private.  The main idea for using the "this" keyword is just to make things directly visible that is making methods directly accessible. Following is the code snippet shown for better understanding:

<script>
    function carDetails() {
        let kms = 0;
        let speed = 0;
        this.speedUp = (intialSpeed) => {
            speed += intialSpeed;
            kms += speed;
        };
        this.totalkmsDriven = () => kms;
    }
    
    let car_object = new carDetails();
    car_object.speedUp(7);
    car_object.speedUp(9);
    console.log(car_object.totalkmsDriven());
    
    // Undefined, since it is made private:
    console.log(car_object.kms);
</script>

Output:

23
undefined

Private Variables creation in classes: In ES6 we have a facility in the form of classes that are also used in terms of displaying certain output over the user's console. While declaring a class we also use the constructor function which is nothing but the default function which accepts certain parameters while calling certain variables or methods after making the object.

In order to demonstrate variable privacy, we will put all the things inside the constructor function, and then further we will access them via certain methods (it could also be referred to as encapsulation in which we access variables via methods).

Following is the code snippet which demonstrates the above-illustrated facts:

<script>
    class carDetails {
        constructor() {
            let kms = 0;
            let speed = 0;
    
            this.speedUp = (initialSpeed) => {
                speed += initialSpeed;
                kms += speed;
            };
            this.totalkmsDriven = () => kms;
        }
    }
    let car_object = new carDetails();
    car_object.speedUp(12);
    car_object.speedUp(13);
    console.log(car_object.totalkmsDriven());.
    
    // Undefined...since it is made private:
    console.log(car_object.speed);
</script>

Output:

37
undefined