DEV Community: Rishabh Jain

Let's go beyond console.log statements. (There is more to console object than what meets the eye. )

Rishabh Jain — Sun, 18 Apr 2021 20:36:38 +0000

consoel.log() is one of the most important and early learned debugging tool that we have when working with javascript. The tool become one of the most essential part of the development. Most developers start their debugging with console.log() statements.

Today in this tutorial let's go beyond the console.log() and learn what more console object can do for us and increase our productivity/proficiency with console.

Different type of logging.

With console object we have more than just log statements, some of them are warn and error.

console.warn()

console.warn() is very useful when you wanna signify that something is not right with the code but its not bad enough to be classified as error.

console.warn('This is a warning');

console.error()

console.error() is a useful statement when we wanna signifies that something is broken in our code.

console.error('This is an error');

console.assert()

console.assert() is a conditional error printer which can be helpful in verity of situations. it accepts 2 parameters 1st of which is our condition. If true the error message will not print. if false error message will be logged to the console.

console.assert(false, 'This error message will show up');

console.assert(true, 'This error message will not show up');

console.count, console.countReset

console.count() is one of the more important functions that is provided by console object. It can be used as counter that is incremented by one every time its been called and console.countReset() can be used to reset the counter.

We can use it to count a number of iterations in a loop.
We can use it to see how many times a function has been called.
etc

let x = 0;
const calculateSomeValue = x => x + 1;

while (x < 100) {
    x = calculateSomeValue(x);
    console.count('x');
}

console.countReset('x');
console.log('counter x has been reset');
console.count('x');

console.time(), console.timeEnd()

console.time() and console.timeEnd() are very important functions provided to us by console object. The two functions can be used to start and stop a timer. The timer can be helpful in performance tests and more.

console.time('forLoopTimer');

for (let x = 0; x < 100000; x++) {
    console.count('forLoop');
}

console.timeEnd('forLoopTimer');

console.group(), console.groupEnd()

console.group() and console.groupEnd() are fairly useful tools when you want to encapsulate some logs together.

console.group();
console.log('This is console.log 1');
console.log('This is console.log 2');
console.log('This is console.log 3');
console.log('This is console.log 4');
console.groupEnd();

console.group();
console.log('This is console.log 5');
console.log('This is console.log 6');
console.log('This is console.log 7');
console.log('This is console.log 8');
console.groupEnd();

Now let's go crazy and nest them for helping in nesting we can pass labels in each group which will act as our identifiers.

console.group('Group1');
console.log('This is console.log 1');
console.log('This is console.log 2');
console.log('This is console.log 3');
console.log('This is console.log 4');

console.group('Group2');
console.log('This is console.log 5');
console.log('This is console.log 6');
console.log('This is console.log 7');
console.log('This is console.log 8');
console.groupEnd('Group2');

console.groupEnd('Group1');

console.table()

Since the day i found out about console.table() i fell in love with it. Have an array you need to look at in a good symmetrical way?, have an object ? console.table() have you covered. It expects two arguments tableData and tableColumn . The first argument tableData is required but 2nd argument is optional and specifies which columns do you want to display.

console.table(['One', 'Two', 'Three']);

console.table({
    name: 'Rishabh Jain',
    designation: 'Sen Software Engineer',
    country: 'India'
});

Now let's say from the above example we only wanna show name and country.

console.table([{
    name: 'Rishabh Jain',
    designation: 'Sen Software Engineer',
    country: 'India'
}], ['name', 'country']);

console.trace()

A lot of times it happens that we need to know where a specific function is called or we need to know where a function is. console.trace() can be extremely useful when you wanna know when your functions are being called. You can also pass an optional label to the function.

const myFunc = () => console.trace();

const myNewHOF = () => myFunc();

myNewHOF();

Format your output

With this trick you can style your output the way you want it to.

Specifier	Output
%s	Formats the value as a string
%i or %d	Formats the value as an integer
%f	Formats the value as a floating point
%o	Formats the value as an expandable DOM element
%O	Formats the value as an expandable JS Object
%c	Applies CSS style rules to the output string

console.log('%c Lets change this to cool', 'font-weight: bold; color: blue; background: cyan');

Did i miss something?, Let me know in the comments below...

Thank you for reading the article. Please let me know in comments how can i improve this and what else do you want me to write about.

How to update an object state in React.Js

Rishabh Jain — Fri, 22 Jan 2021 11:20:31 +0000

This would be a continuation to basic react state change, Let's learn how to modify objects now with similar examples.

Let's learn the correct way to do it today...

Let's take following cases.

Object change
Object inside an Object.
Object inside an array inside an object.

const [user, setUser] = useState({ id: 1, username: 'user01' });

const Component = () => {
    // Method 1 -> Use object destructure
    const method1 = () => {
        const newUser = {
          ...user,
          username: `user02`
        };

        setUser(newUser);
    };

    // Method 2 -> Use Object.assign method.
    const method2 = () => {
        const newUser = Object.assign({}, user, { username: 'user02' });
        setUser(newUser);
    };

    return <pre>{JSON.stringify(user, null, 4)}</pre>;
}

With method 1 we are using object destructuring to copy the original object and then append the property at the last to overwrite it.

With method 2 we are using Object.assign to copy the object and then merging it with a new object. In Object.assign the priority is right to left, right most objects gets the higher priority.

Let's update an object inside an object process is very similar but let's review that as well.

const [user, setUser] = useState({ id: 1, username: 'user01', address: { city: 'Mohali', country: 'India' } });

const Component = () => {
    // Method 1 -> Use object destructure
    const method1 = () => {
      const newUser = {
            ...user,
        address: {
                ...user.address,
                city: 'Chandigarh'
            }
      };

      setUser(newUser);
    };

    // Method 2 -> Use Object.assign method.
    const method2 = () => {
        const newUser = Object.assign({}, user, { address: Object.assign({}, user.address, { city: 'Chandigarh' }) });
      setUser(newUser);
    };

    return <pre>{JSON.stringify(user, null, 4)}</pre>;
}

Lastly let's update an object inside an array inside an object for this we will combine array update and object update together.

const [user, setUser] = useState({ id: 1, username: 'user01', children: [{ id: 1, username: 'child1' }, { id: 2, username: 'child2' } ] });

const Component = () => {
    // Method 1 -> Use object destructure
    const method1 = (childIndex) => {

        // Let's create a copy of the array.
        const child = [...user.children];

        // Updating the {childIndex} of the copy based on the previous methods we discussed.
        child[childIndex] = { ...child[childIndex], username: 'updatedChild' };

      const newUser = {
            ...user,
        children: child
      };

      setUser(newUser);
    };

    // Method 2 -> Using splice method.
    const method2 = (childIndex) => {
        // Let's create a copy of the array.
        const child = [...user.children];

        // Updating the {childIndex} of the copy based on the previous methods we discussed.
        child.splice(childIndex, 1, { ...child[childIndex], username: 'updatedChild' });

      const newUser = {
            ...user,
        children: child
      };

      setUser(newUser);
    };

    return <pre>{JSON.stringify(user, null, 4)}</pre>;
}

How to update an array state in React.Js

Rishabh Jain — Wed, 20 Jan 2021 21:16:08 +0000

Ever tried to update an array in the React and ended up mutating the existing state?
Then you might be wondering why your component didn't update. Well you are not alone i did that too, and turns out a lot of other people face the exact same issue.

Let's learn the correct way to do it today...

Let's take an example of a list.

We will allow addition of a new items to the list.
Deletion of an item.
Adding an item at a specific point in an array.

Addition of an element.


// Method 1 -> Use array destructure
const addUser = () => {
  const newUser = {
    id: Date.now(),
    username: `User ${users.length + 1}`
  };
  const newUsers = [...users, newUser];

  setUsers(newUsers);
};

// Method 2 -> Use slice method with combination of push method.
const addUser = () => {
  const newUser = {
    id: Date.now(),
    username: `User ${users.length + 1}`
  };

  const newUsers = users.slice();
  newUsers.push(newUser);

  setUsers(newUsers);
};

With method one we are simply using ES6 array destructing and appending an element to it. Where as method 2 goes old school using slice and push methods.

Deletion of an element.


// Method 1 -> Use array destructure
const removeUser = (index) => () => {
    const newUsers = [...users];
    newUsers.splice(index, 1);

    setUsers(newUsers);
  };

// Method 2 -> Use slice method.
const removeUser = (index) => () => {
    const newUsers = users.slice();
    newUsers.splice(index, 1);

    setUsers(newUsers);
  };

With method one we are simply using ES6 array destructing to shallow clone the array and then mutating the new array by deleting the element. With method 2 we are using slice to shallow clone the array.

Addition of an element at a specific index.


  // Method 1 -> Use array destrcture.
  const addAfter = (index) => () => {
    const newUser = {
      id: Date.now(),
      username: `User ${users.length + 1}`
    };

    const newUsers = [
      ...users.slice(0, index + 1),
      newUser,
      ...users.slice(index + 1)
    ];

    setUsers(newUsers);
  };

    // Method 2 -> Using splice
  const addAfter = (index) => () => {
    const newUser = {
      id: Date.now(),
      username: `User ${users.length + 1}`
    };
    const newUsers = [...users]; 
    newUsers.splice(index + 1, 0, newUser)

    setUsers(newUsers);
  };

With method one we are using slice , slice(start, length) we grab all the elements till the given index. After that we append the new element, lastly using slice(index + 1) we are taking the remaining items from the original array and concentrate everything using ES6 array destructing.

Method 2 we are taking advantage of a quirk that comes with array [splice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) with splice we can push the elements in array as well using its 3rd argument.

Full Code [https://codesandbox.io/s/objective-rgb-4z4yz?file=/src/App.js]

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [users, setUsers] = useState([
    { id: Date.now() + 1, username: "User 1" },
    { id: Date.now() + 2, username: "User 2" }
  ]);

  const addUser = () => {
    const newUser = {
      id: Date.now(),
      username: `User ${users.length + 1}`
    };
    // Method 1 -> Use array destructure
    const newUsers = [...users, newUser];

    // Method 2 -> Use slice method with combination of push method.
    // const newUsers = users.slice();
    // newUsers.push(newUser);

    setUsers(newUsers);
  };

  const removeUser = (index) => () => {
    // Method 1 -> Use array destrcture.
    const newUsers = [...users];
    newUsers.splice(index, 1);

    // Method 2 -> Use slice method.
    // const newUsers = users.slice();
    // newUsers.splice(index, 1);

    setUsers(newUsers);
  };

  const addAfter = (index) => () => {
    const newUser = {
      id: Date.now(),
      username: `User ${users.length + 1}`
    };
    // Method 1 -> Use array destrcture.
    // const newUsers = [
    //   ...users.slice(0, index + 1),
    //   newUser,
    //   ...users.slice(index + 1)
    // ];

    // Method 2 -> Using splice
    const newUsers = [...users]; 
    newUsers.splice(index + 1, 0, newUser)

    setUsers(newUsers);
  };

  return (
    <>
      <button onClick={addUser}>Add User</button>
      {users.map((user, index) => (
        <div className="user" key={user.id}>
          {user.username}
          <button onClick={removeUser(index)}>Remove User</button>
          <button onClick={addAfter(index)}>Add immediate next User</button>
        </div>
      ))}
    </>
  );
}