Tips in Javascript

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. Also noted that I'm going to use Javascript ESNext syntax.

  // this will be our dummy data list of users
  const users = [
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "[e-mail]",
    "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": "[e-mail]",
    "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": "[e-mail]",
    "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 come to the rescue.

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

/*
  [
    {
      "name": "Leanne Graham",
      "email": "[e-mail]"
    },
    {
      "name": "Ervin Howell",
      "email": "[e-mail]"
    },
    {
      "name": "Clementine Bauch",
      "email": "[e-mail]"
    }
  ]

*/

Yay, the result we get contains name and email. But we can write this better and shorter syntax with object literal expression and destructuring

    // 👍 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.

   // 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.

   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 }))

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 😁😁;

Comments

[Sergiu Mureşan]

This

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

is neat. I have to admit.

The problem is, it's really hard to understand and few people know about this || syntax, let alone the return value of console.log. In production this type of code wouldn't even fly past code review.

So use it sparingly and with some comments for others to understand.

[Azriz Jasni]

Agreed, this code will not pass in code review. But essentially it just to make developer debugging easier.

[Basti Ortiz]

I never even considered using the return value of console.log that way. Thanks for the tip!