4

TIPS & TRICKS OF JAVASCRIPT & REACT

 3 years ago
source link: https://dev.to/nipu/tips-tricks-of-javascript-react-3ncc
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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);
Enter fullscreen modeExit fullscreen mode

TIPS 2: Easiest way of float to integer conversion. 

const floatToInt = 23.9 | 0;
Enter fullscreen modeExit fullscreen mode

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
Enter fullscreen modeExit fullscreen mode

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

const DemoComponent = ()=>{

const [show, setShow] = useState(false)

   return (<div>

     {show? <Message/>: ''}

</div>)
}
Enter fullscreen modeExit fullscreen mode

Right way with (&&) 

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

   return (<div>
     {show && <Message/>}
    </div>)
}
Enter fullscreen modeExit fullscreen mode

TIPS 4: Don’t do it 

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
     let variable2 = variable1;
}
Enter fullscreen modeExit fullscreen mode

Do this short and simple 

const variable2 = variable1  || 'new';
Enter fullscreen modeExit fullscreen mode

TIPS 5: Don’t do it 

Math.floor(4.9) === 4 // true
Enter fullscreen modeExit fullscreen mode

Do this short and simple 

~~4.9 === 4 // true
Enter fullscreen modeExit fullscreen mode

TIPS 6: Don’t do it 

switch (something) {

  case 1:
    doSomething();

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

Do this short and simple 

const cases = {
  1: doSomething,

  2: doSomethingElse,

  3: doSomethingElseAndOver
};
Enter fullscreen modeExit fullscreen mode

TIPS 7: Don’t do it 

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

Do this short and simple 

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

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)
Enter fullscreen modeExit fullscreen mode

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)
Enter fullscreen modeExit fullscreen mode

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")
   }
}
Enter fullscreen modeExit fullscreen mode

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")
}
Enter fullscreen modeExit fullscreen mode

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK