Remove console.log from Production Mode
Tags: javascript, node, webdev, tutorial
Published: 2022-03-10 07:58:36

<kbd>console.log</kbd> is one the debugging weapon or logger we use as javascript developer. _The console. log method is a way for developers to construct code that informs them about what the code is doing in a non-obtrusive way_. But this tiny little snippets can do the following to our code base.
![log](https://media.giphy.com/media/l0HUcCoNIvfjmPZL2/giphy.gif)


🎯 Impact our app performance and increase our computation power and time at production level.

🎯 Also creates a variable and consumes memory, however minute.

🎯 Expose some information which might put your app at risk.

#### Let's consider the code snippet below

```javascript
const { email, password } = req.body;
const user = await User.findOne({ email });
console.log(user);
if (!user || user === null) {
  return errorResMsg(res, 400, "this email does not exist");
}
//...
//create token
const token = await jwt.sign(
  {
    id: user._id,
    email: user.email,
    fullName: user.fullName,
  },
  process.env.USER_SECRET,
  {
    expiresIn: "2d",
  }
);
console.log(token);
```

In the code above, i logged the <mark>user</mark> and the <mark>token</mark> and this can be used by attackers to steal information from our app.

With that being said, let's look at two ways to remove `console.log` from our app

## Vscode method

This method uses the search icon and regex to remove all `logs`

```javascript
// Classes are templates for creating objects
// Method 1: Class function

class Person {
  constructor(name, age, occupation) {
    this.age = age;
    this.name = name;
    this.occupation = occupation;
  }

  todo() {
    console.log("kill");
  }
}

const createPerson = new Person("Abayomi", 78, "dev");
console.log(createPerson.todo());

// Method 2: Class Expression
const doSomething = class HouseChores {
  constructor(cut, clean, arrange) {
    this.cut = cut;
    this.clean = clean;
    this.arrange = arrange;
  }
};

const datInfo = {
  cut: (doSomething.cut = "grass"),
  clean: (doSomething.clean = "cars"),
  arrange: (doSomething.arrange = "house"),
};

console.log(datInfo);

// static types
class Music {
  constructor(viola, trombone) {
    this.viola = viola;
    this.trombone = trombone;
  }

  static musicConstant = "drums";
}

const result = new Music("Eb", "F#");
console.log(result);
console.log(Music.musicConstant); // static types are called without instantiating
```

- Click on the search Icon
  ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oeqslwqqkez8xvvylb7z.PNG)

---

- Type console.log
  ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/etxqh51jx101cfuuksga.PNG)

---

- Click the regex option
  ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3mbaimh3pmech7988a1.PNG)

---

- Click replace all

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iuepy41803d4c368el0d.PNG)

---

- Click the replace option

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mpxt4gs67jfj6tt64bxr.PNG)

---

- Result:
  ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t1q70w9vq36zsrt4gark.PNG)

---

## Method 2:

While method one is cool, i consider it as been destructive way. what if you need the logs during development mode again 🙄

Here is the work around.

Create `.env` file in your root project with <kbd>NODE_ENV=development</kbd>

Install the dotenv package and configure it

```javascript
const env = require("dotenv");
env.config();
```

Now let's test our environment variable with our friend

> console.log(process.env.NODE_ENV);

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2oa8e68pbrwhhkqg9cwp.PNG)

The last thing to write is a simple line of code

```javascript
if (process.env.NODE_ENV === "development") {
  console.log = function () {};
}
```

The code above says if our environment variable is in development mode, output an empty function that says nothing.

With the snippet active, If you run your code, you should get nothing from the terminal.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rb8x5v488rfsss25nr23.PNG)

With the snippet commented out, it log results to our terminal
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k9lualqy5a2e6ocij3gc.PNG)
 
---

## Discuss
What other methods can you use other than the aforementioned.