Do you know these JS Hacks | Tricks

//Edit ✏️
javascript

While developing application I feel that these are some hacks which we can add in our code to make it little smart with less number of…

Do you know these JS Hacks | Tricks

ES6 & ES7 Tips and Tricks || Hacks in Javascript
_Hack with Javascript Array_medium.com

Immutability in Javascript | Array and Objects
_In object-oriented and functional programming, an immutable object (unchangeable object) is an object whose state…_medium.com

While developing application I feel that these are some hacks which we can add in our code to make it little smart with less number of lines — some of these you might be using already

  • Use Promise Object. finally ()

When you use the somePromise.then(x).catch(y).finally(z) pattern, your business logic is generally happening in the then callback (x, above - what you want to do once somePromise has resolved) or in the catch callback (y above - returns what you want to pass along in case something goes horribly wrong). You might never have even used finally in your code - and that's fine.

According to the MDN docs, a finally callback allows you to execute logic once your Promise has been settled - resolved or rejected - one way or the other.

p.finally(onFinally);  
  
p.finally(function() {  
  // settled (fulfilled or rejected)  
   // reset loading state   
   // reset object or application state   
});
  • Using Destructuring with Array.prototype Methods()
const arr = [{ name : 'tks'}, {name : 'kumar'}]  
  
arr.map( ({name}, index) => {  
console.log(name, index);  
return name;  
})
const arr = [{ name : 'tks'}, {name : 'kumar'}]  
arr.filter( ({name}, index) => {  
   return true;    
})
  • Removing a Property from Object using … operator
const obj = {a :10, b:40, c:70}  
const {a,...finalObj} = obj;
  • Deep Copy of Object (can we write Code for this ? )
const obj = {a :10, b:40, c:70}

object.assign -- Shallow Copy (not capable for deep copy of nested properties)
JSON.parse and stringify just a workaround to create deep copy
The spread syntax and Object.assign() allow us to make only
shallow copies of objects in JavaScript. Deeply nested values are // in fact put there just as a reference to the source object. return Promise.resolve and Promise.reject instead of creating new Promise(cbk)

function getData(){  
return new Promise((resolve,reject) => {   
 return axios.get('').then(data => {  
      resolve(null)})  
 }) // else reject   
}
function getData(){  
return axios.get().then(data => Promise.resolve(data))  
}// else reject   
// Both functions are returning promise Object
  • Become fully obsessed with destructuring {}
function getAvengers() {  
  return ['Ironman', 'Captain America', 'Thor', 'Hulk']  
}  
const [ a, , , b ] = getAvengers();  
// Notice that I created two commas in the middle. This means that I'm skipping both Captain America and Thor  
console.log(a); // 'Ironman'  
console.log(b); // 'Hulk'

function CategoryBanner({ category }) {}  
function CategoryBanner({ data, id, ...rest }) {}
  • update object property using {…} better option then Object.assign
const obj = {x :80};  
const anotherObj = {c :80}  
const newObj  = {...obj, x:700, y:600, ...anotherObj}  
// works same as Object.assign // sort and simple   
const veryNewObj = {  
...newObj,  
X:90  
}
  • Destructuring with spread operator, get what you need rest put in …rest
function CategoryBanner({ data, id, ...rest }) {  
   console.log(data,id,rest)  
// rest will be {x:80, y :70}  
}
const newobj = {data : [], id :80, x:80, y:70}  
CategoryBanner(newobj)
  • Using length to delete/ empty in an array
const array = [1,,3,4,56,7,8];  
array.length =  2;  
// Now array will have only two values rest all will be vanished ..
  • values using || operator to get rid of null value errors
const data = somemethod(data) || [];  
const env = process.env.NODE_ENV || 'DEV'
  • Strict null checks
if(!data || !Array.isArray(data.list) || data.list.length === 0){  
   console.log('array is null or data is null')  
}

const data = {x :80}

if(data &&  data.x) {console.log('yes i do have value x in data')}

Comments