Forem: Anthony Smith

Object Destructuring in JavaScript

Anthony Smith — Tue, 14 Feb 2023 21:22:12 +0000

What Is Object Destructuring in JavaScript?

Object destructuring has been around for a while now, but many developers still don't fully understand the concept and its capabilities. Object destructuring is a simple way to unpack values from an object into variables. Let's take a closer look at how it works.

What Is Object Destructuring?

Object destructuring is a process of unpacking values or properties from an object into distinct variables. It is a convenient way to work with objects and extract properties without having to create separate variables.

Let's take a look at a simple example:

const emp = {
    name: "John Doe",
    position: "Software Developer",
    age: 32
};

let {name, position, age} = emp;

In this example, we define an object emp that contains three keys: name, position and age. To access the value of each key, we can use the variable names as properties of the object.

Using object destructuring, we can extract these values into distinct variables by declaring the variable names in curly braces - {name, position, age}. Now we have each property stored in its own distinct variable.

We can also rename the variables if needed, by adding a colon after the original property name. For example, if we wanted to rename the position variable to title, we would do the following:

let {name, position: title, age} = emp;

Object destructuring is a powerful feature of JavaScript, but it can be tricky to understand. Let's take a look at some more use cases and explore how we can leverage this syntax in our applications.

Use Cases

Object destructuring comes in handy when we have large objects containing multiple properties. If we want to access multiple properties from one object, we can assign them to individual variables instead of having to write out the full object name every time.

For example, let's say we have a user object containing information about a user (i.e., name, email, etc.):

const user = {
    name: "John Doe",
    email: "john@example.com",
    age: 32
};

If we wanted to assign each property to a separate variable, we could do this using object destructuring:

let {name, email, age} = user;

console.log(name);              // "John Doe"
console.log(email);             // "john@example.com"
console.log(age);               // 32

In this case, we can access each property from the user object separately, without having to write out the full object name each time.

Object destructuring is a great tool for extracting pieces of data from an object that we need. But we can also leverage it for another purpose - to set default values for a variable.

Setting Default Values With Object Destructuring

There may be times where we want to assign a default value for a variable if it is not provided. We can do this easily with object destructuring by utilizing the || operator.

For example, let's say we only have a name property in our user object:

const user = {
    name: "John Doe"
};

But, if we tried to destructure the email property, it would be undefined as it doesn't exist in the user object:

let {name, email} = user;

console.log(name);              // "John Doe"
console.log(email);             // undefined

We can use the || operator to assign a default value for the email variable:

let {name, email} = user || "john@example.com";

console.log(name);              // "John Doe"
console.log(email);             // "john@example.com"

Now the email variable will be assigned the provided value ("john@example.com") if it does not exist in the user object.

Conclusion

Object destructuring is an incredibly useful tool for working with objects in JavaScript. It provides us with an easy way to unpack object properties into individual variables. It also allows us to set default values for variables if they are not provided.

Take some time to experiment and explore the possibilities with object destructuring in your own applications. I'm sure you'll find it just as useful :)

How to Insert Form Data into a Database Using HTML & PHP

Anthony Smith — Sun, 21 Aug 2022 05:12:00 +0000

Collecting customer form data is a common task in web development. Contact forms make your site more professional and send a clear signal that you're interested in doing business with your potential clients. The lack of one could make your business seem outdated or unprofessional. People are more likely to patronize your products if you're highly accessible. This is a great way to increase your business's visibility.

Other reasons to implement a contact form:

It makes your site more professional
Security
Makes yourself more reachable
Automate email responses

Today, we will be learning how to insert customer form data into a MySQL database using HTML and PHP. We will be creating an HTML form and a PHP script to insert the data into the database using phpMyAdmin.

Prerequisites:

Instructions:

As an example, the first thing we will need to do is create our HTML form. An HTML Form is a document that stores information about the user's interaction with a website. The form is a way for the user to send information to the database.



<form action="/action_page.php" method="POST">
  Form Elements...
</form>

The action attribute tells the form where to send the data. The method attribute tells the form how to send the data.

Connecting to the Database

A database is a collection of data. It is a way to store and retrieve data from a computer or server.

Xampp stands for "Extended Apache MySQL Platform". It is a free and open-source software that allows you to run a database server on your computer. It utilizes MySQL, Apache, PHP and Perl as its database engine, and it is free to use.

Example PHP Code:



<?php

// Set your connection variables
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database_name";

// Create connection
$conn = new mysqli($servername,
    $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: "
        . $conn->connect_error);
}
// Insert into appropriate table
$sqlquery = "INSERT INTO table VALUES
    ('John', 'Doe', 'john@example.com')"

// If the connection is successful, run the query
if ($conn->query($sql) === TRUE) {
    echo "record inserted successfully";

// If the query is not successful, display the error message
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}
?>

Processing form data:

We can collect the form data submitted through our HTML form that we're going to create. We can use the $_REQUEST variable to collect the data.



<?php

if ($_SERVER["REQUEST_METHOD"] == "POST") {

    // collect value of input field
    $data = $_REQUEST['val1'];

    if (empty($data)) {
        echo "data is empty";
    } else {
        echo $data;
    }
}

// Closing the connection.
$conn->close();

?>

Setting up your Xampp Server

In order to successfully connect to the database and send over our form data, we need to set up our Xampp server to accept the incoming data:

First we need to start our Xampp server.
Navigate to localhost/phpmyadmin.
Create a database name of SampleDB and a table name of SampleTable.
Create our HTML and PHP files in our Code Editor. I am using Visual Studio Code.
Submit our data through the form we created.
Check the results and verify that all data was successfully inserted.

Process:

First, you'll want to make sure that you already have XAMPP Server installed on your local machine. Once it's installed, let's begin by first opening up our Xampp application. In my case, I am using a Macbook Pro so things may look a little different if you're using Windows or another operating system. You'll want to make sure you have the following services running when you open up your Xampp application:

MySQL Database
Apache Web Server

Now we can navigate over to localhost/phpmyadmin and create a database and table.

Click on New and then type in the name of your Database. We are going to name our database SampleDB. Once complete, go ahead and click the Create button.

Next we can create the table we want to use named SampleTable. Make sure to set the number of columns to 5. Once complete, click the Create button.

Now that our Database and Sample table is created, we can enter our columns and click on save.

Make sure you enter the correct data type for each column.

first_name
last_name
gender
address
email

Also, make sure to add the appropriate type of VARCHAR to each item as well.

Create the html form

Now it's time to create our HTML form. We will be using this form to send the data to our database.

Filename: index.php



<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Sample Form</title>
   </head>
   <body>
      <center>
         <h1>Storing Form data in Database</h1>
         <form action="insert.php" method="post">
            <p>
               <label for="firstName">First Name:</label>
               <input type="text" name="first_name" id="firstName">
            </p>
            <p>
               <label for="lastName">Last Name:</label>
               <input type="text" name="last_name" id="lastName">
            </p>
            <p>
               <label for="Gender">Gender:</label>
               <input type="text" name="gender" id="Gender">
            </p>
            <p>
               <label for="Address">Address:</label>
               <input type="text" name="address" id="Address">
            </p>
            <p>
               <label for="emailAddress">Email Address:</label>
               <input type="text" name="email" id="emailAddress">
            </p>
            <input type="submit" value="Submit">
         </form>
      </center>
   </body>
</html>

Create the php script

Now we need to create our PHP script. This is the script that will process our form data and insert it into our database.

Filename: insert.php



<!DOCTYPE html>
<html>

<head>
    <title>Insert Page page</title>
</head>

<body>
    <center>
        <?php

        // servername => localhost
        // username => root
        // password => empty
        // database name => staff
        $conn = mysqli_connect("localhost", "root", "", "sampleDB");

        // Check connection
        if($conn === false){
            die("ERROR: Could not connect. "
                . mysqli_connect_error());
        }

        // Taking all 5 values from the form data(input)
        $first_name = $_REQUEST['first_name'];
        $last_name = $_REQUEST['last_name'];
        $gender = $_REQUEST['gender'];
        $address = $_REQUEST['address'];
        $email = $_REQUEST['email'];

        // We are going to insert the data into our sampleDB table
        $sql = "INSERT INTO sampleDB VALUES ('$first_name',
            '$last_name','$gender','$address','$email')";

        // Check if the query is successful
        if(mysqli_query($conn, $sql)){
            echo "<h3>data stored in a database successfully."
                . " Please browse your localhost php my admin"
                . " to view the updated data</h3>";

            echo nl2br("\n$first_name\n $last_name\n "
                . "$gender\n $address\n $email");
        } else{
            echo "ERROR: Hush! Sorry $sql. "
                . mysqli_error($conn);
        }

        // Close connection
        mysqli_close($conn);
        ?>
    </center>
</body>

</html>

Great! Now we can submit our form data to our database but first we need to save our index.php and insert.php files inside of our htdocs folder located inside our Xampp directory.

HTDOCS Folder

We can access this folder by opening up our Xampp application and then clicking on Open Application Folder.

This will open up our Xampp files directory. Navigate to the htdocs folder and copy your index.php and insert.php files directly into this directory. This will overwrite the existing file. Now we can head over to localhost/index.php to fill out the form submit it to our database.

Fill out the form and then click submit. Great! it looks like our data has been successfully stored in our DB.

Head over to localhost/phpmyadmin and select your database to ensure that our data was successfully inserted.

Conclusion

You have just completed the basic steps to store data in a database using HTML and PHP. You can now use this method to create any kind of form you like and attach it to a phpMyAdmin database.

🤝 Thank you so much for taking time out of your day to read this Article! I hope it helped you out and you learned something new today! Please leave a comment if you have anything you'd like to add. I'd love to hear from you!

How to Create a Todo List App

Anthony Smith — Tue, 16 Aug 2022 00:59:00 +0000

Today we are going to build a simple to-do list using HTML, CSS and JavaScript. This will be a fun little project that will surely give you some good practice on your Front-end development skills.

This todo app will allow users to add, remove, and modify tasks easily and effectively. You can easily integrate this lightweight code inside your project to create to-do lists on the fly according to your needs.

Let's get started!

Add Bootstrap 5 to your project

The first thing we need to do is set up our project and add our HTML code. We will use a <div> tag to create a container for our to-do list and then we'll add our JavaScript later on.

Let's first add our Bootstrap 5 CSS into the <head> section of our HTML file.



<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

Once that's done, let's add our HTML code into our <body> section.

Add the todo list HTML code



<div class=" container rounded-3 border-dark border border-2 my-5 bg-white" style="height:auto;">
    <div>
        <h1 class=" h1">To Do List</h1>
        <div class="row">
            <div class=" col-8">
                <input class=" py-3 form-control shadow" placeholder="Add a task" type="text" id="inputText">
            </div>
            <div class="col-2">
                <button id="addButton" onclick="addList()" class=" mt-2 btn btn-success"> Add Task</button>
            </div>
        </div>
    </div>
    <hr>
    <div class="row rounded bg-white">
        <div class=" col-12">
            <ul class=" list-group" id="list"></ul>
        </div>
    </div>
</div>

Great! we have our skeleton code implemented. Now it's time to add our JavaScript.



let input = document.getElementById("inputText");

        let list= document.getElementById("list");

        let minimalValue = 3;

        let listNum = 0;

addList=()=>{

    // get

    let inputText = filterList(input.value);

    // set 

   if (inputText) {

    list.innerHTML += &lt;li class=" my-3 py-3 shadow list-group-item " id="list</span><span class="p">${</span><span class="nx">listNum</span><span class="p">}</span><span class="s2">"&gt;

                &lt;div class="row"&gt;

                &lt;div class="col-1"&gt;

                &lt;input class="" type="checkbox" id="check</span><span class="p">${</span><span class="nx">listNum</span><span class="p">}</span><span class="s2">" onclick="done(</span><span class="p">${</span><span class="nx">listNum</span><span class="p">}</span><span class="s2">)"&gt;

                &lt;/div&gt;

                &lt;div class="col-6"&gt;

                    &lt;span class=" h4" id="text</span><span class="p">${</span><span class="nx">listNum</span><span class="p">}</span><span class="s2">"&gt; </span><span class="p">${</span><span class="nx">inputText</span><span class="p">}</span><span class="s2"> &lt;/span&gt;

                &lt;/div&gt;

                &lt;div class="col-4"&gt;

                     &lt;button class=" btn btn-danger" onclick="deleteList(</span><span class="p">${</span><span class="nx">listNum</span><span class="p">}</span><span class="s2">)"&gt;Delete&lt;/button&gt;

                     &lt;button class=" btn btn-primary" onclick="editList(</span><span class="p">${</span><span class="nx">listNum</span><span class="p">}</span><span class="s2">)"&gt;Edit&lt;/button&gt;

                &lt;/div&gt;                  

                 &lt;/div&gt;    

                &lt;/li&gt;;

        input.value=" ";

        listNum++;

}

}

done=(listId)=>{ 

    let checkbox = document.getElementById(check</span><span class="p">${</span><span class="nx">listId</span><span class="p">}</span><span class="s2">);

    let current = document.getElementById(text</span><span class="p">${</span><span class="nx">listId</span><span class="p">}</span><span class="s2">);

    let classExit=current.classList.contains("text-decoration-line-through");

    if (classExit == true) {

        current.classList.remove("text-decoration-line-through");

    }else{

        current.classList.add("text-decoration-line-through");

    }

}

// filter the list

filterList=(x)=>{

       if (x) {

            if (x.length >= minimalValue) {

                return x;

            }

            else{

                alert("Please enter more than 3 words")

            }

       }

       else{

            return false;

       }

}

// edit list

editList=(listId)=>{

    let currentText = document.getElementById(text</span><span class="p">${</span><span class="nx">listId</span><span class="p">}</span><span class="s2">);

    let newText = prompt("Type a new task",currentText.innerHTML);

    if (filterList(newText)) {

        currentText.innerHTML = newText; 

    }

}

// delete list

deleteList=(listId)=>{

    let current = document.getElementById(text</span><span class="p">${</span><span class="nx">listId</span><span class="p">}</span><span class="s2">).innerHTML;

       let deleteComfirm = confirm(Are you sure you want to delete the task:</span><span class="p">${</span><span class="nx">current</span><span class="p">}</span><span class="s2">?);

    if (deleteComfirm) {

         let p = document.getElementById("list")

        let c = document.getElementById(list</span><span class="p">${</span><span class="nx">listId</span><span class="p">}</span><span class="s2">);

        p.removeChild(c);

    }

    else{

        console.log("deleted");

    }

};

Conclusion

Great! we have our JavaScript code implemented. We should now be able to add tasks to our to-do list and it will update dynamically.

☕️ If you enjoy reading my content Buy me a coffee as it will help me continue to make awesome quality blogs!

👨🏽‍💻 For more Web Dev code snippets, tips, and tricks check out my Grepper Platform

🎨 You can also check out my Portfolio here

🐦 You can also follow me on Twitter to check out my self-taught journey as well as more bite-sized tips on web development.

How To Create a Screen Sharing Application With JavaScript

Anthony Smith — Mon, 08 Aug 2022 18:04:00 +0000

Have you ever wondered how hard or easy it would be to create your own screen-sharing application?

In this article, we will show you how to create a screen-sharing application with JavaScript via the Screen Capture API
and its getDisplayMedia() technique. This will allow us to capture half or all of a screen and share it with other
users throughout a WebRTC conference session.

Initial Steps:

Create a new project in your favorite IDE.
Setup HTML boilerplate code
Add JavaScript code
Deploy Live server

Create a new project in your favorite IDE

I'm going to be using VScode for this tutorial. Feel free to use the editor of your choice. Let's go ahead and set up
our html code.

HTML:



<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Screen Sharing</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body>
    <div style="width:80%;background: grey;margin: auto;">
        <video id="video" autoplay playsinline muted></video>
    </div>
    <div style="width:80%;margin: auto;padding-top:10px ;">
        <button class="btn btn-primary" id="start"> Start Screen Sharing</button>
        <button class="btn btn-secondary" id="stop"> Stop</button>
    </div>
</body>

</html>

Start your live-server and open the index.html file in your browser. You should see a page that looks like this:

JavaScript:

Next, we need to add some JavaScript code to our index.html file. Go ahead and add your script tags to the body section
of your index.html file and add the following code:



const videoElem = document.getElementById("video");
      const startElem = document.getElementById("start");
      const stopElem = document.getElementById("stop");
      // Options for getDisplayMedia()
      var displayMediaOptions = {
          video: {
              cursor: "always",
              height: 1000,
              width: 1200
          },
          audio: false
      };
      // Set event listeners for the start and stop buttons
      startElem.addEventListener("click", function (evt) {
          startCapture();
      }, false);
      // Stop the screen capture
      stopElem.addEventListener("click", function (evt) {
          stopCapture();
      }, false);
      // Start the screen capture
      async function startCapture() {
          try {
              videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
              dumpOptionsInfo();
          } catch (err) {
              // Handle error
              console.error("Error: " + err);
          }
      }
      // Stop the stream
      function stopCapture(evt) {
          let tracks = videoElem.srcObject.getTracks();
          tracks.forEach(track => track.stop());
          videoElem.srcObject = null;
      }
      // Dump the available media track capabilities to the console
      function dumpOptionsInfo() {
          const videoTrack = videoElem.srcObject.getVideoTracks()[0];
          console.info("Track settings:");
          console.info(JSON.stringify(videoTrack.getSettings(), null, 2));
          console.info("Track constraints:");
          console.info(JSON.stringify(videoTrack.getConstraints(), null, 2));
}

Test the Application

Now we can go ahead and test our application. Open the index.html file in your browser and click on the start button to
initialize the screen capture.

Click on a screen and you should see the video stream of the screen you clicked on. You can also click on the stop
button to stop the screen capture.

Full Code:



<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Screen Sharing</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body>
    <div style="width:80%;background: grey;margin: auto;">
        <video id="video" autoplay playsinline muted></video>
    </div>
    <div style="width:80%;margin: auto;padding-top:10px ;">
        <button class="btn btn-primary" id="start"> Start Screen Sharing</button>
        <button class="btn btn-secondary" id="stop"> Stop</button>
    </div>
    <script type="text/javascript">
        const videoElem = document.getElementById("video");
        const startElem = document.getElementById("start");
        const stopElem = document.getElementById("stop");
        // Options for getDisplayMedia()
        var displayMediaOptions = {
            video: {
                cursor: "always",
                height: 1000,
                width: 1200
            },
            audio: false
        };
        // Set event listeners for the start and stop buttons
        startElem.addEventListener("click", function (evt) {
            startCapture();
        }, false);
        stopElem.addEventListener("click", function (evt) {
            stopCapture();
        }, false);
        async function startCapture() {
            try {
                videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
                dumpOptionsInfo();
            } catch (err) {
                console.error("Error: " + err);
            }
        }

        function stopCapture(evt) {
            let tracks = videoElem.srcObject.getTracks();
            tracks.forEach(track => track.stop());
            videoElem.srcObject = null;
        }

        function dumpOptionsInfo() {
            const videoTrack = videoElem.srcObject.getVideoTracks()[0];
            console.info("Track settings:");
            console.info(JSON.stringify(videoTrack.getSettings(), null, 2));
            console.info("Track constraints:");
            console.info(JSON.stringify(videoTrack.getConstraints(), null, 2));
        }
    </script>
</body>
</html>

☕️ If you enjoy reading my content Buy me a coffee as it will help me continue to make awesome quality blogs!

👨🏽‍💻 For more Web Dev code snippets, tips, and tricks check out my Grepper Platform

🎨 You can also check out my Portfolio here

🐦 You can also follow me on Twitter to check out my self-taught journey as well as more bite-sized tips on web development.

Obfuscating JavaScript code with Node.js

Anthony Smith — Tue, 26 Jul 2022 16:53:00 +0000

As a developer, you spend a lot of time building, developing, and debugging your code. The last thing you want is for someone else to have the ability to steal all of your hard work and reuse it somewhere else. Thankfully, there is a common practice called code obfuscation that can help protect your work from the eyes of the public.

Obfuscation is a technique that deliberately obfuscates the source code of a JavaScript file which makes it difficult for humans to understand. It is similar to encryption, but a computer program can still understand the code and can execute it.

Analyzing obfuscated code

function _0x33bc(_0x357a49, _0x4d043b) {
    var _0x3af57c = _0x3af5();
    return _0x33bc = function (_0x33bc59, _0x2d7f6b) {
        _0x33bc59 = _0x33bc59 - 0xac;
        var _0x433c74 = _0x3af57c[_0x33bc59];
        return _0x433c74;
    }, _0x33bc(_0x357a49, _0x4d043b);
}
var _0x5b0965 = _0x33bc;

function _0x3af5() {
    var _0x16d4f2 = ['2293120DDXwAC', '5tguhIh', 'ExpressJS', '32097acJbHr', '1234303tDdtZs', 'HTML', '51273EoArEE', 'CSS', 'JavaScript', '3214428qqnLuG', 'MongoDB', '40qdyzEo', 'Smith', '252346qcgJWs', '292cvJCiT', 'Anthony', 'PHP', '2392880xWQHuO', 'Full\x20Stack\x20Developer'];
    _0x3af5 = function () {
        return _0x16d4f2;
    };
    return _0x3af5();
}(function (_0x36cba0, _0x8d74e1) {
    var _0x4b315b = _0x33bc,
        _0x589073 = _0x36cba0();
    while (!![]) {
        try {
            var _0x243a48 = -parseInt(_0x4b315b(0xb8)) / 0x1 * (-parseInt(_0x4b315b(0xb1)) / 0x2) + -parseInt(_0x4b315b(0xba)) / 0x3 * (parseInt(_0x4b315b(0xb2)) / 0x4) + parseInt(_0x4b315b(0xb5)) / 0x5 + parseInt(_0x4b315b(0xad)) / 0x6 + -parseInt(_0x4b315b(0xbb)) / 0x7 + -parseInt(_0x4b315b(0xaf)) / 0x8 * (parseInt(_0x4b315b(0xbd)) / 0x9) + -parseInt(_0x4b315b(0xb7)) / 0xa;
            if (_0x243a48 === _0x8d74e1) break;
            else _0x589073['push'](_0x589073['shift']());
        } catch (_0x513014) {
            _0x589073['push'](_0x589073['shift']());
        }
    }
}(_0x3af5, 0x68fca));
var person = {
    'first_name': _0x5b0965(0xb3),
    'last_name': _0x5b0965(0xb0),
    'occupation': _0x5b0965(0xb6),
    'languages': [_0x5b0965(0xac), _0x5b0965(0xbc), _0x5b0965(0xbe), 'React', _0x5b0965(0xb4), 'NodeJS', _0x5b0965(0xae), _0x5b0965(0xb9)]
};

That's some code that is obfuscated. Pretty hard to understand isn't it? Most likely, unless you are some super programming genius, you will not be able to understand it. You'll have to read it really carefully to understand what is going on.

Here is the original code:

var person = {
    first_name : "Anthony",
    last_name : "Smith",
    occupation : "Full Stack Developer",
    languages: ["JavaScript", "HTML", "CSS", "React", "PHP","NodeJS", "MongoDB","ExpressJS"],
};

Looks pretty different, doesn't it? Even though this is just a simple object it can be easily stolen and re-used somewhere else without your permission. If this was company data that you dont want the world to see, obfuscating is the way to go. This is also useful for people who sell code on platforms like ThemeForest, Template Monster, etc where your code could easily be copied from the browser and pasted into a text editor, however with an obfuscator it can still be copied but it would be extremely hard to read and decrypt.

In this article, I'll be showing you how you can obfuscate your code with the JavaScript Obfuscator library in Node.js.

When and why should you obfuscate your JavaScript code?

One of the most frustrating things about JavaScript is that it is easy to understand by most developers which means it can be stolen and reused somewhere else without the developer's permission. The last thing you want is for someone else to capture and reuse all the code YOU wrote.

I think it makes sense to obfuscate, to make it at least harder if not impossible for someone to disassemble. Also, I think it makes sense for products involving a large customer base where you do not want your competitors to know much about your products.

How to obfuscate your JavaScript code?

We're going to be using the Node.js and the JavaScript Obfuscator module to obfuscate our JavaScript code. The javaScript obfuscator module is a free and open source tool with a wide number of features that can protect your code from being stolen.

Key Features:

control flow flattening
various code transformations
CLI options
Has no restrictions or limits
Can run on your local machine or on a remote server as it does not require any internet connection
variables renaming
dead code injection

Installation:

npm install javascript-obfuscator

After installing the module, you can require it in your code using require("javascript-obfuscator").

Using the module:

Now we can begin using the obfuscator module. We must first create an instance of the obfuscator module, from there, we can use the obfuscate method to obfuscate our code. It expects a first argument which is the code to obfuscate and a second argument which is an object containing the options to use.

// Require the JavaScript obfuscator
var JavaScriptObfuscator = require('javascript-obfuscator');

// Obfuscate the code providen as first argument
var obfuscationResult = JavaScriptObfuscator.obfuscate(`
function myfunction() {
  console.log("function");
};

myfunction();

function calculate(x, y, op) {
  var answer;
  if ( op = "add" ) {
    answer = x + y;
  };
  else if ( op = "sub" ) {
    answer = x - y;
  };
  else if ( op = "multi" ) {
    answer = x * y;
  };
  else if ( op = "divide" ) {
    answer = x / y;
  };
  else {
    answer = "Error";
  };
  return answer;
};
`);

// Display obfuscated result
console.log(obfuscationResult.getObfuscatedCode());

Options:

You can customize the obfuscator module by passing an object containing the options to use.

JavaScriptObfuscator.obfuscate(YourCode, {
    compact: true,
    controlFlowFlattening: false,
    controlFlowFlatteningThreshold: 0.75,
    deadCodeInjection: false,
    deadCodeInjectionThreshold: 0.4,
    debugProtection: false,
    debugProtectionInterval: false,
    disableConsoleOutput: false,
    domainLock: [],
    log: false,
    mangle: false,
    renameGlobals: false,
    reservedNames: [],
    rotateStringArray: true,
    seed: 0,
    selfDefending: false,
    sourceMap: false,
    sourceMapBaseUrl: '',
    sourceMapFileName: '',
    sourceMapMode: 'separate',
    stringArray: true,
    stringArrayEncoding: false,
    stringArrayThreshold: 0.75,
    target: 'browser',
    unicodeEscapeSequence: false
});

You should check out the official documentation of the library to see all the new options that are presently available. You can also check out the JavaScript Obfuscator website to see all the options that are currently available. Currently, they provide presets which include a feeling of "low", "medium", "high" and "highest".

A. Low Obfuscation

{
    compact: true,
    controlFlowFlattening: false,
    deadCodeInjection: false,
    debugProtection: false,
    debugProtectionInterval: false,
    disableConsoleOutput: true,
    log: false,
    mangle: true,
    renameGlobals: false,
    rotateStringArray: true,
    selfDefending: true,
    stringArray: true,
    stringArrayEncoding: false,
    stringArrayThreshold: 0.75,
    unicodeEscapeSequence: false
}

B. Medium Obfuscation

{
    compact: true,
    controlFlowFlattening: true,
    controlFlowFlatteningThreshold: 0.75,
    deadCodeInjection: true,
    deadCodeInjectionThreshold: 0.4,
    debugProtection: false,
    debugProtectionInterval: false,
    disableConsoleOutput: true,
    log: false,
    mangle: false,
    renameGlobals: false,
    rotateStringArray: true,
    selfDefending: true,
    stringArray: true,
    stringArrayEncoding: 'base64',
    stringArrayThreshold: 0.75,
    unicodeEscapeSequence: false
}

C High Obfuscation

{
    compact: true,
    controlFlowFlattening: true,
    controlFlowFlatteningThreshold: 1,
    deadCodeInjection: true,
    deadCodeInjectionThreshold: 1,
    debugProtection: true,
    debugProtectionInterval: true,
    disableConsoleOutput: true,
    log: false,
    mangle: false,
    renameGlobals: false,
    rotateStringArray: true,
    selfDefending: true,
    stringArray: true,
    stringArrayEncoding: 'rc4',
    stringArrayThreshold: 1,
    unicodeEscapeSequence: false
}

Try it out!

We're going to go ahead and read the content of a JS file and then obfuscate it.

// Require Filesystem module
var fs = require("fs");

// Require the Obfuscator Module
var JavaScriptObfuscator = require('javascript-obfuscator');

// Read the file of your original JavaScript Code as text
fs.readFile('./your-original-code.js', "UTF-8", function(err, data) {
    if (err) {
        throw err;
    }

    // Obfuscate content of the JS file
    var obfuscationResult = JavaScriptObfuscator.obfuscate(data);

    // Write the obfuscated code into a new file
    fs.writeFile('./your-code-obfuscated.js', obfuscationResult.getObfuscatedCode() , function(err) {
        if(err) {
            return console.log(err);
        }

        console.log("The file was saved!");
    });
});

As you can see, the above code is now obfuscated making it much harder for humans to understand. This is a great way to protect your JavaScript code from hackers and prying eyes.

Obfuscation is a great way to hide business logic from the outside world, and it will also make the size of your js file much smaller so it can be more easily transferred.