Hello developers, I would like to show you javascript codes that you may not be familiar with that will sometimes help you in writing better javascript codes.

Let's Start!

Separate your large numbers with underscore for easy reading

As a person who always looks at code, I'm sure you will get a headache if you read a value like this directly 141512464653, so we separate each 3 digits of the number to make it easy to read by using underscore _ to be like this 141_512_464_653 .

How is it easier to read right? Here is an example:

let myMoney = 100_000_000;
const mySalary = 1_000_000;

myMoney += mySalary;

console.log(myMoney) // output: 101000000

Special key variable declaration that does not need to be repeated

Just like declaring a normal variable with var, let, or const. However, we don't need to repeat it and just write the variable name and add a comma , to declare another variable.

// from this
const num1 = 1;
const num2 = 2; 
const num3 = 3;

// to be like this
const num1 = 1,
      num2 = 2,
      num3 = 3;

For variable usage, it is the same as the general variable rules, the only difference is the removal of keywords for repeated variable declarations and reducing the byte size, here is an example:

const 
  pi = 22/7,
  e = 2.71828,
  goldenRatio = 1.61803,
  /** add more as you wish */
  speedOfLight = 299792458 /* m/s */;

let r = 7,
  /** You can use "r" var directly */
    circleArea = pi * (r * r);

console.table([
  { name: 'π', value: pi },
  { name: 'r', value: r } ,
  { name: 'Circle Area', value: `${circleArea} m^2` },
  { name: 'e', value: e },
  { name: 'Speed of Light', value: `${speedOfLight} m/s` },
]);

Output:

Stores the remaining destructured properties into a single property key

In this section I use this method a lot in react.js when dealing with many destructured properties and only call the property keys that I will use and the rest I unite in one key, I will give an example for a regular javascript function and its use in react.js components.

Here is an example for vanilla javascript:

function printInfo({
  name,
  title,
  ...otherArguments
}) {
  console.log(`My name is ${name}. I'm ${otherArguments.age} years old. I'm a ${title}.`);
  // The keys `name` and `title` will no longer exist in `otherArguments`
  console.log("Unused destructured keys:", Object.keys(otherArguments));
}

printInfo({
  name: "Deri Kurniawan",
  age: new Date().getFullYear() - 2001,
  married: false,
  title: "Full Stack Developer",
  country: "Indonesia",
});

/**
Output:
My name is Deri Kurniawan. I'm 23 years old. I'm a Full Stack Developer.
Unused destructured keys: (3) ["age", "married", "country"]
*/

The following is an example in react.js javascript to parse other props on a desctructured argument:

// Save the rest object with the spread operator
// and collect it with one name, in this case we call it ...rest
const Button = ({ children = null, className = "", ...rest }) => (
  <button 
    className={`default-button-style ${className}`}
    // assign the remaining properties to the button
    {...rest}
  >
   {children}
  </button>
);

<Button 
   type="button"
   className="rounded-xl"
   // more properties that can be matched with "button" element attributes
>
 My Button
</Button>

I have other information like this that might help you when writing your own code. What did you find out from this post? please leave a comment.

I will update this post next time. So, stay tuned!😁👍