Tips in Javascript
Tags: javascript, consolelog, debugging
Published: 2018-11-12 14:15:20

---
title: Tips in Javascript
published: true
description: Write better and efficient way console.log
tags: javascript, console.log, debugging
---

Hi and greetings. So today I would like to share some different way when writing `console.log`. You can freely copy the code and paste it on your browser's devtool. 


At the time I'm writing, I was using Chrome 70. We will be using JSON response from this awesome service [JSONPlaceholder](https://jsonplaceholder.typicode.com/). Also noted that I'm going to use [Javascript ESNext](https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla) syntax.

```javascript
  // this will be our dummy data list of users
  const users = [
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org"
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
    "email": "Shanna@melissa.tv",
    "address": {
      "street": "Victor Plains",
      "suite": "Suite 879",
      "city": "Wisokyburgh",
      "zipcode": "90566-7771",
      "geo": {
        "lat": "-43.9509",
        "lng": "-34.4618"
      }
    },
    "phone": "010-692-6593 x09125",
    "website": "anastasia.net"
  },
  {
    "id": 3,
    "name": "Clementine Bauch",
    "username": "Samantha",
    "email": "Nathan@yesenia.net",
    "address": {
      "street": "Douglas Extension",
      "suite": "Suite 847",
      "city": "McKenziehaven",
      "zipcode": "59590-4157",
      "geo": {
        "lat": "-68.6102",
        "lng": "-47.0653"
      }
    },
    "phone": "1-463-123-4447",
    "website": "ramiro.info"
  }
]   
```
   
We have a dummy data called `users` and we only interested in user's `name`     and `email`. [Array.prototype.map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) come to the rescue.


```javascript
    
    const nameAndEmails = users.map(user => {
        return {
            name: user.name,
            email: user.email,
        };
    })

/*
  [
    {
      "name": "Leanne Graham",
      "email": "Sincere@april.biz"
    },
    {
      "name": "Ervin Howell",
      "email": "Shanna@melissa.tv"
    },
    {
      "name": "Clementine Bauch",
      "email": "Nathan@yesenia.net"
    }
  ]

*/
    
```

Yay, the result we get contains `name` and `email`. But we can write this better and shorter syntax with [object literal expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Advanced_Syntax) and [destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)

```javascript
    // 👍 implicitly return object literal expression
    const nameAndEmails = users.map(user => ({
      name: user.name,
      email: user.email,
    }))


    // 👍👍destructuring function parameter and return object literal expression
    const nameAndEmails = users.map(({ name, email }) => ({ name, email }))
```

Ok, lets pretend that after 1 months after coding this code, there is a high chances that you already forgot the `User Shape`, and you might also need to return user's phone number. So we need to `console.log` so that we can have a look at our `User Shape` again.  

```javascript
   // 1) Write console.log(users) before running the function.
   console.log(users);
   const nameAndEmails = users.map(({ name, email }) => ({ name, email }))

   // 2) Open devtool and reload the browser
   // 3) Lastly, look at the logged `users` 
```

As for me this approach is kinda tiresome and below is approach that I found in the internet.

```javascript
   const nameAndEmails = users.map((user) => console.log(user) || ({ 
        name: user.name, 
        email: user.email
   }))

   or 
  
   const nameAndEmails = users.map(({ name, email, ...otherPayload }) => console.log({ name, email, ...otherPayload }) || ({ name, email }))
```
![output](https://thepracticaldev.s3.amazonaws.com/i/a31o4cr8f3eobl2rknhd.png)


**WHY?**, it is because `console.log` return `undefined`, and the browser will still running the code after `||`. 

You can play around with these examples into devtool: 
 - `undefined || 'return me'`.
 - `console.log('log me') || 'return me'`
 - `true && console.log('log me')`
 - `false && console.log('do not log me')`


I hope you learned something  😁😁;