Powerful JavaScript Tips and Best Practices

Powerful JavaScript Tips and Best Practices

• 1.
  Powerful JavaScript TipsPowerfulJavaScript Tips Techniques that all JavaScript programmers can use now you needn’t be an advanced JavaScript developer to benefit from these tips
• 2.
  Powerful JavaScript TipsPowerfulJavaScript Tips 1. “short circuting” method To set default values, instead of this: function fileName(name) ​ if (!name) { name = "unknown_name"; } return name; } Use this: function fileName(name) name = name || "unknown_name"; return name; }
• 3.
  Powerful JavaScript TipsPowerfulJavaScript Tips 2. “short circuting” with && (AND) Instead of this: function isAdult(age) { if (age && age > 17) { return true; } ​else { return false; } } Use this: function isAdult(age) { return age && age > 17 ; }
• 4.
  Powerful JavaScript TipsPowerfulJavaScript Tips 3. It gets more exciting! Instead of this: if (userName) { logIn(userName); } else { signUp(); } Use this: userName && logIn (userName) || signUp ();
• 5.
  Powerful JavaScript TipsPowerfulJavaScript Tips 4. powerful uses of immediately invoked function expressions Immediately and after invoke (showName = function (name) { console.log(name || "No Name") }) (); // No Name​ ​ showName ("Mike"); // Mike
• 6.
  Powerful JavaScript TipsPowerfulJavaScript Tips 5. when to use immediately invoked function expressions? All the code is wrapped in the IIFE​ (function () { ​var firstName = “Dragos”, concatenated = undefined; function init () { doStuff (firstName); // code to start the application​ } ​ ​function doStuff (firstName) { concatenated = firstName + 'Developer'; doMoreStuff(); } ​ ​function doMoreStuff () { console.log('Concatenated = ', concatenated; } ​ ​// Start the application init (); }) ();
• 7.
  BONUSJavaScript Best Practices
• 8.
  JavaScript Best Practices 1– Don’t forget var keyword when assigning a variable’s value for the first time.
• 9.
  JavaScript Best Practices 1– Don’t forget var keyword when assigning a variable’s value for the first time. 2 – use === instead of ==
• 10.
  JavaScript Best Practices 1– Don’t forget var keyword when assigning a variable’s value for the first time. 2 – use === instead of == 3 – undefined, null, 0, false, NaN, '' (empty string) are all falsy.
• 11.
  JavaScript Best Practices 1– Don’t forget var keyword when assigning a variable’s value for the first time. 2 – use === instead of == 3 – undefined, null, 0, false, NaN, '' (empty string) are all falsy. 4 – Be careful when using typeof, instanceof and constructor. typeof : a JavaScript unary operator used to return a string that represents the primitive type of a variable, don’t forget that typeof null will return “object”, and for the majority of object types (Array, Date, and others) will return also “object”. constructor : is a property of the internal prototype property, which could be overridden by code. instanceof : is another JavaScript operator that check in all the prototypes chain the constructor it returns true if it’s found and false if not.
• 12.
  JavaScript Best Practices 1– Don’t forget var keyword when assigning a variable’s value for the first time. 2 – use === instead of == 3 – undefined, null, 0, false, NaN, '' (empty string) are all falsy. 4 – Be careful when using typeof, instanceof and constructor. typeof : a JavaScript unary operator used to return a string that represents the primitive type of a variable, don’t forget that typeof null will return “object”, and for the majority of object types (Array, Date, and others) will return also “object”. constructor : is a property of the internal prototype property, which could be overridden by code. instanceof : is another JavaScript operator that check in all the prototypes chain the constructor it returns true if it’s found and false if not. 5 – Get a random item from an array 3 – undefined, null, 0, false, NaN, '' (empty string) are all falsy. var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119]; var randomItem = items[Math.floor(Math.random() * items.length)];
• 13.
  JavaScript Best Practices 1– Don’t forget var keyword when assigning a variable’s value for the first time. 2 – use === instead of == 3 – undefined, null, 0, false, NaN, '' (empty string) are all falsy. 4 – Be careful when using typeof, instanceof and constructor. typeof : a JavaScript unary operator used to return a string that represents the primitive type of a variable, don’t forget that typeof null will return “object”, and for the majority of object types (Array, Date, and others) will return also “object”. constructor : is a property of the internal prototype property, which could be overridden by code. instanceof : is another JavaScript operator that check in all the prototypes chain the constructor it returns true if it’s found and false if not. 5 – Get a random item from an array 3 – undefined, null, 0, false, NaN, '' (empty string) are all falsy. var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119]; var randomItem = items[Math.floor(Math.random() * items.length)]; 6 – Generate an array of numbers with numbers from 0 to max var numbersArray = [] , max = 100; for( var i=1; numbersArray.push(i++) < max;); // numbers = [1,2,3 ... 100]
• 14.
  JavaScript Best Practices 7– Append an array to another array var array1 = [12 , "foo" , {name "Joe"} , -2458]; var array2 = ["Doe" , 555 , 100]; Array.prototype.push.apply(array1, array2); /* array1 will be equal to [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */
• 15.
  JavaScript Best Practices 7– Append an array to another array` var array1 = [12 , "foo" , {name "Joe"} , -2458]; var array2 = ["Doe" , 555 , 100]; Array.prototype.push.apply(array1, array2); /* array1 will be equal to [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */ 8 – Transform the arguments object into an array var argArray = Array.prototype.slice.call(arguments);
• 16.
  JavaScript Best Practices 7– Append an array to another array` var array1 = [12 , "foo" , {name "Joe"} , -2458]; var array2 = ["Doe" , 555 , 100]; Array.prototype.push.apply(array1, array2); /* array1 will be equal to [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */ 8 – Transform the arguments object into an array var argArray = Array.prototype.slice.call(arguments); 9 – Verify that a given argument is a number function isNumber(n){ return !isNaN(parseFloat(n)) && isFinite(n); }
• 17.
  JavaScript Best Practices 7– Append an array to another array` var array1 = [12 , "foo" , {name "Joe"} , -2458]; var array2 = ["Doe" , 555 , 100]; Array.prototype.push.apply(array1, array2); /* array1 will be equal to [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */ 8 – Transform the arguments object into an array var argArray = Array.prototype.slice.call(arguments); 9 – Verify that a given argument is a number function isNumber(n){ return !isNaN(parseFloat(n)) && isFinite(n); } 10 – Verify that a given argument is an array function isArray(obj){ return Object.prototype.toString.call(obj) === '[object Array]' ; }
• 18.
  JavaScript Best Practices 7– Append an array to another array var array1 = [12 , "foo" , {name "Joe"} , -2458]; var array2 = ["Doe" , 555 , 100]; Array.prototype.push.apply(array1, array2); /* array1 will be equal to [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */ 8 – Transform the arguments object into an array var argArray = Array.prototype.slice.call(arguments); 9 – Verify that a given argument is a number function isNumber(n){ return !isNaN(parseFloat(n)) && isFinite(n); } 10 – Verify that a given argument is an array function isArray(obj){ return Object.prototype.toString.call(obj) === '[object Array]' ; } 11 – Don’t use delete to remove an item from array Use splice instead of using delete to delete an item from an array. Using delete replaces the item with undefined instead of the removing it from the array.
• 19.
  Dragos Ionita Software Engineer https://ro.linkedin.com/in/dragos-ionita-8ab20756 DragosIonita Software Engineer https://ro.linkedin.com/in/dragos-ionita-8ab20756 Thanks for watching!Thanks for watching!