Embed Size (px)
Citation preview
Powerful JavaScript Tips Powerful JavaScript Tips Techniques that all JavaScript programmers can use now
you needn’t be an advanced JavaScript developer to benefit from these tips
Powerful JavaScript Tips Powerful JavaScript 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;}
Powerful JavaScript Tips Powerful JavaScript 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 ;}
Powerful JavaScript Tips Powerful JavaScript Tips 3. It gets more exciting!
Instead of this:
if (userName) { logIn(userName);} else { signUp();}
Use this:
userName && logIn (userName) || signUp ();
Powerful JavaScript Tips Powerful JavaScript 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
Powerful JavaScript Tips Powerful JavaScript 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 applicationinit ();}) ();
BONUSJavaScript Best Practices
JavaScript Best Practices1 – Don’t forget var keyword when assigning a variable’s value for the first time.
JavaScript Best Practices1 – Don’t forget var keyword when assigning a variable’s value for the first time.2 – use === instead of ==
JavaScript Best Practices1 – 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.
JavaScript Best Practices1 – 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.
JavaScript Best Practices1 – 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)];
JavaScript Best Practices1 – 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]
JavaScript Best Practices7 – 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] */
JavaScript Best Practices7 – 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);
JavaScript Best Practices7 – 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);}
JavaScript Best Practices7 – 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]' ;}
JavaScript Best Practices7 – 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 arrayUse 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.
Dragos IonitaSoftware Engineerhttps://ro.linkedin.com/in/dragos-ionita-8ab20756
Dragos IonitaSoftware Engineerhttps://ro.linkedin.com/in/dragos-ionita-8ab20756
Thanks for watching!Thanks for watching!
