TIPS & TRICKS OF JAVASCRIPT & REACT

TIPS 1: Easiest way of string to integer conversion.

const value_1 = "1" 

const value_2 = "2"

function add(field_1, field_2){

  return field_1 + field_2;
}


add(+value_1, +value_2); 

TIPS 2: Easiest way of float to integer conversion.

const floatToInt = 23.9 | 0;

TIPS 3: Use Global object always should not need localStorage

Note[if data is is static then you should use it. and don’t use any kind secret or confidential data here..]

const user = {

  first_name: "Rowan",

  last_name: "Atkinson"
}

window.user=user

TIPS 3: Don’t use if not necessary ternary (?:)

const DemoComponent = ()=>{

const [show, setShow] = useState(false)

   return (<div>

     {show? <Message/>: ''}

</div>)
}

Right way with (&&)

const DemoComponent = ()=>{
const [show, setShow] = useState(false)

   return (<div>
     {show && <Message/>}
    </div>)
}

TIPS 4: Don’t do it

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
     let variable2 = variable1;
}

Do this short and simple

const variable2 = variable1  || 'new';

TIPS 5: Don’t do it

Math.floor(4.9) === 4 // true

Do this short and simple

~~4.9 === 4 // true

TIPS 6: Don’t do it

switch (something) {

  case 1:
    doSomething();

  break;
case 2:
    doSomethingElse();
  break;
case 3:
    doSomethingElseAndOver();
  break;
  // And so on...
}

Do this short and simple

const cases = {
  1: doSomething(),

  2: doSomethingElse(),

  3: doSomethingElseAndOver()
};

[Note: This one has performance issue I prefer use this one when you have crying need. Switch statement is more faster than this solution

TIPS 7: Don’t do it

if(x == 1 || x == 5 || x == 7)  {
  console.log('X has some value');
}

Do this short and simple

([1,5,7].indexOf(x) !=- 1) && console.log('X has some value!');

TIPS 8: Don't do it

const param1 =1;
const param2 = 2;
const param3 = 3;
const param4 = 4;


function MyFunc =(param1, param2, param3, param4)=>{
  console.log(param1, param2, param3, param4)
}

MyFunc(param1, param2, param3, param4)

Do this short and simple

const params = {param1: 1, param2: 2, param3: 3, param4: 4}

function MyFunc =({param1, param2, param3, param4})=>{
  console.log(param1, param2, param3, param4)

}

MyFunc(params)

TIPS 9: Don’t do it

function Myfunc(value){
   if(value){
     console.log("you have a value")
   }else{
      throw new Error("You don't have a value")
   }
}

Do this short and simple

NOTE: If you check error first then it’s don’t go else block but if you do first one it will check first value is exist then if not found it will go the else block.

function Myfunc(value){
   return !value ? throw new Error("You don't have a value") : console.log("you have a value")
}

Comments

[Mike Talbot ⭐]

Nice list :)

I'd just say on Tip 7: [1,5,7].includes(x) is neater as there's no magic -1 (and it's shorter)

Tip 8: can work, but functions with few parameters can benefit from not having to force names on the user.

[Nipu Chakraborty]

Thanks for your feedback

[Valentin Baca]

I agree with your detailed comment. There are more readable built-in functions for many of these tricks. Some of these tricks don't handle all the cases well (like using || for default breaks if zero is given and should be considered a valid input).

These are more "cute" tricks or "hacks" than ones you should be pulling into your production code.

[Valentin Baca]

For Tip #5, the ~~ trick is more like Math.trunc rather than Math.floor

See the behavior on negative numbers:

Math.floor(-2.2)
-3
Math.trunc(-2.2)
-2
~~(-2.2)
-2

[Itay Schechner]

This is some useful piece of content

[Nipu Chakraborty]

Thanks

[Samuel Lee]

I read your detailed comments and completely agree with the points mentioned.
I think the author should be open to the community's feedback. It's not even offensive but rather can help the author and the community to learn.

[Prabhu]

Nice

[Vladimir]

Totally agree with you. Had the same feelings when was reading those "tips". The comment is constructive and not offensive at all. I'm supporting you on the concern.

[Abhighyaa Jain]

Hey, how does logical or(|) turns a floating no to integer?