45 Tips Tricks and Javascript Practitioner
One evening there is nothing to do, flipping through the white pages of the Internet, in search of anything I’ll read for the next one, I came across an interesting little article on an unknown resource I don’t know from the author of which I didn’t hear. Fiction turned out to be quite interesting, given the fact that it is close in the nature of the activity, in form and its content.
True, he didn’t very much agree with the author directly in the stated material, besides a lot of basic things are affected, but he thought that it deserves the attention of the population - who is too lazy to read, but he likes to briefly, sensibly, with arrangement and in the case without too much literary.
Naturally, everything stated below is not at all the truth of last resort, as in the Bible, I would not advise you to swear on it. But maybe someone will open what things from the new side, and someone will criticize, expressing his CHSVeshnoe: "Fi fi, fa fa fa!".
However, about everything in order in my willful on behalf of the first ...
As you know, JavaScript is number one among other programming languages in the world: it is a language for the web, a language for writing mobile applications (note - dropped the word hybrid: mobile hybrid apps) with PhoneGap and Appcelerator , for development on the server side with NodeJS and Wakanda , and many other uses. It is also a starting point for many newcomers to the world of programming: it can be used both to display a simple alert in the browser and to control the robot (using nodebot , nodruino ).
')
Developers with excellent knowledge of JavaScript, who write clear and productive code, are among the most sought-after in the labor market.
In this article I would like to acquaint you with various tricks and practices that should be known to every JavaScript developer, regardless of browser internals (browser / engine), as well as the server side javascript interpreter (Server Side JavaScript interpreter).
All code samples were tested in Google Chrome version 30, which
uses the V8 JavaScript Engine (V8 3.20.17.15).
1 - Do not forget the `var` keyword when you assign a value to a variable
first time :
The assignment of a variable that was not previously declared will result in this variable being created in global space. Avoid this.
(note - the author hints that when you create variables, you can
forget the keyword, respectively, create an extra variable in
global space window)
2 - Use `===` instead of `==`:
Using `== (! =)` Performs type conversion if necessary. While `===` does not do this conversion. The
the operator compares not only the values, but also the type that resolves faster than `==`. Examples:
3 - `undefined, null, 0, false, NaN, ''`:
All of the above will always be a lie in logical expressions.
4 - Do not forget `;`:
Using `;` to complete expressions is good practice. You will not be warned if you miss it, as the JavaScript parser will insert it for you.
5 - Object through the constructor:
6 - Be careful when using `typeof, instanceOf, constructor`:
7 - Use self-calling functions:
They are often called self-invoking anonymous functions (Self-Invoked Anonymous Function) or immediately called function expressions (Immediately Invoked Function Expression (IIFE)). This is a function that starts directly at creation and has the following form:
(note - in this paragraph it was difficult to translate, so I left the original usage in the language of the carrier, how to correctly translate them
In Russian mental, alas, I do not know. I think the author is trying to hint that in this way you will hide your implementations inside an anonymous function that you call directly at the moment of its definition)
8 - Getting an arbitrary array value:
9 - Getting an arbitrary number in a certain range:
This example can be used when it is necessary to generate any fake data in order to test something, for example, salaries between the minimum and maximum values:
10 - Generation of a numerical array from 0 to max:
11 - Generation of arbitrary character set:
12 - Mixing an array:
13 - The `trim ()` function for strings:
The classic `trim ()` function, which is found in Java, C #, PHP, and many other programming languages, which removes whitespace, is not contained in JavaScript. However, you can add it to the `String` object:
(comment - could not resist, but it is strange that the author uses this technique
as though `trim ()` is already in javascript)
14 - Add one array to another:
15 - Convert the `arguments` object to an array:
16 - Check whether the given argument is a number:
17 - Check whether the given argument is an array:
Note that if the `toString ()` method is overridden, the result will not be as expected when using this trick.
Or use ...
You can also use `instanceof` if you are not working with multiple frames. However, if you use a lot of contexts, then
get the wrong result:
18 - Get the maximum, minimum value of a numerical array:
19 - Making the array empty:
20 - Do not use `delete` to remove from an array:
Use `split` instead of` delete` to remove the entry from the array. Using `delete` does not delete, but replaces the element with` undefined`.
Instead of this…
Use this one ...
However, `delete` should be used to delete object properties.
21 - Trim the array using `length`:
As in the previous example with an empty array, to truncate the array, use the `length` property:
Bonus, if you set the length of the array more than its current, then the length of the array will be changed, and the new values will be set
as `undefined`. The array length property is not just to read it.
22 - Using logical `AND / OR` for conditional expressions:
The logical OR can also be used to set a default value for a function argument.
23 - Use the `map ()` method to loop through the array:
24 - Rounding the number to N numbers after the comma:
25 - Floating point problem:
Why it happens? 0.1 + 0.2 equals 0.30000000000000004. What you need to know is that all numbers in JavaScript with a floating point inside are represented as 64 bits in binary form according to the IEEE 754 standard.
If you want more examples, check out this blog .
You can use the `toFixed ()` and `toPrecision ()` methods to avoid such problems.
26 - Check the properties of the object when using the `for-in` loop:
This code example can be used to avoid iterations on the properties of the prototype object.
27 - Operator comma:
28 - Cache variables that are needed for calculations or queries:
Using the example of jQuery selectors, we can cache their result - DOM elements.
29 - Check the argument before sending it to isFinite () `:
30 - Avoid negative indices in arrays:
Make sure the arguments passed to `indexOf` are not negative.
31 - Serialization and deserialization (for JSON):
32 - Avoid the `eval ()` or `Function` constructor:
Using the `eval` or` Function` constructor is an expensive operation since every time they cause the source code to be converted into javascript engine.
33 - Avoid `with` (Good stuff):
Using `with` defines a variable in global space. If any variable has the same name, then it will create certain problems, as overwriting the value may occur.
34 - Avoid for-in looping for arrays:
Instead…
... this is better ...
The bonus assignment for `i` and` len` will be made only once since this is the first expression of the loop construction. It is faster than ...
Why? The length of the array `arrayNumbers` is calculated at each iteration of the loop.
35 - Pass functions, not strings for `setTimeout ()` and `setInterval ()`:
If you pass strings to `setTimeout ()` or `setInterval ()`, they will be processed in the same way as with `eval`, this is slow.
Instead of using ...
... use ...
36 - Use `switch / case` instead of a series of` if / else`:
Using `switch / case` works quickly when there are more than two conditions, it is more elegant and better for organizing code. Avoid this
expressions when there are more than 10 conditional expressions.
37 - Use the `switch / case` expression with numerical ranges:
Using a `switch / case` expression with a numerical range makes the following trick possible.
38 - Create an object whose prototype is a specified object:
It is possible to create a function that creates an object whose prototype will be an object that is passed in the function argument ...
39 - HTML escaper:
40 - Avoid using `try-catch-finally` inside loops:
`try-catch-finally` creates a new variable in the current execution space each time an exception is thrown and it is associated with the variable.
Instead of this…
... use it ...
41 - Set latencies for `XMLHttpRequests`:
You may lose the connection if XHR takes too long (for example, network problems), use `setTimeout ()` with calls
Xhr.
As a bonus, you should avoid synchronous Ajax requests.
42 - Deal with WebSocket timeout
Normally, when a connection is established, the server can reset the connection by timeout after 30 seconds of inactivity. The firewall may also, after a certain period, reset the connection on timeout due to inactivity.
This problem can be solved by sending empty messages to the server. To do this, you should add two functions to your code: one to maintain the connection and the other to cancel this support.
Using this trick, you will manage the timeout.
Adding `timerID` ...
`keepAlive ()` should be added to the end of the `onOpen ()` method for webSocket
connections and `cancelKeepAlive ()` to the end of the `onClose ()` method.
43 - Remember that primitives work faster than function calls.
Take advantage of VanillaJS
For example, instead ...
... use it ...
44 - Do not forget to use the tools for formatting and style code.
Use JSLint and minimization (JSMin, for example) before the code starts to live.
45 - Javascript Just Shiiikaaaren: Best Resources To Learn JavaScript.
Naturally, there are many tips and tricks and practices. Therefore, if you have something to add, get some feedback or make adjustments - write in the comments.
When writing this article, I used my examples for the code, but some examples were inspired from other articles and forums:
Each may relate differently to what is written and stated in this material. It was enough whether it was good or not, how deeply the questions were revealed, the results were highlighted, how clever and interesting the examples were.
My task, as a translator, was to deliver it to the court of a speaking, boiling public synapse from work. And why does he need it specifically - everyone decides for himself.
Who wants to talk to the author, read the comments - follow the links. Go over the original article. I hope that my humble copy has brought you good, did not take much time.
Thanks for attention!
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Original text
Original Text Author: Saad Musliki ( Watch Hero )
* December 23, 2013 *
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
True, he didn’t very much agree with the author directly in the stated material, besides a lot of basic things are affected, but he thought that it deserves the attention of the population - who is too lazy to read, but he likes to briefly, sensibly, with arrangement and in the case without too much literary.
Naturally, everything stated below is not at all the truth of last resort, as in the Bible, I would not advise you to swear on it. But maybe someone will open what things from the new side, and someone will criticize, expressing his CHSVeshnoe: "Fi fi, fa fa fa!".
However, about everything in order in my willful on behalf of the first ...
Frame first, introductory
As you know, JavaScript is number one among other programming languages in the world: it is a language for the web, a language for writing mobile applications (note - dropped the word hybrid: mobile hybrid apps) with PhoneGap and Appcelerator , for development on the server side with NodeJS and Wakanda , and many other uses. It is also a starting point for many newcomers to the world of programming: it can be used both to display a simple alert in the browser and to control the robot (using nodebot , nodruino ).
')
Developers with excellent knowledge of JavaScript, who write clear and productive code, are among the most sought-after in the labor market.
In this article I would like to acquaint you with various tricks and practices that should be known to every JavaScript developer, regardless of browser internals (browser / engine), as well as the server side javascript interpreter (Server Side JavaScript interpreter).
All code samples were tested in Google Chrome version 30, which
uses the V8 JavaScript Engine (V8 3.20.17.15).
Frame two, instructive and advisory
1 - Do not forget the `var` keyword when you assign a value to a variable
first time :
The assignment of a variable that was not previously declared will result in this variable being created in global space. Avoid this.
(note - the author hints that when you create variables, you can
forget the keyword, respectively, create an extra variable in
global space window)
2 - Use `===` instead of `==`:
Using `== (! =)` Performs type conversion if necessary. While `===` does not do this conversion. The
the operator compares not only the values, but also the type that resolves faster than `==`. Examples:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ [10] === 10 // is false [10] == 10 // is true '10' == 10 // is true '10' === 10 // is false [] == 0 // is true [] === 0 // is false '' == false // is true but true == "a" is false '' === false // is false ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 3 - `undefined, null, 0, false, NaN, ''`:
All of the above will always be a lie in logical expressions.
4 - Do not forget `;`:
Using `;` to complete expressions is good practice. You will not be warned if you miss it, as the JavaScript parser will insert it for you.
5 - Object through the constructor:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ function Person(firstName, lastName){ this.firstName = firstName; this.lastName = lastName; } var Saad = new Person("Saad", "Mousliki"); ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 6 - Be careful when using `typeof, instanceOf, constructor`:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var arr = ["a", "b", "c"]; typeof arr; // return "object" arr instanceof Array // true arr.constructor(); //[] ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 7 - Use self-calling functions:
They are often called self-invoking anonymous functions (Self-Invoked Anonymous Function) or immediately called function expressions (Immediately Invoked Function Expression (IIFE)). This is a function that starts directly at creation and has the following form:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ (function(){ // some private code that will be executed automatically })(); (function(a,b){ var result = a+b; return result; })(10,20); ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ (note - in this paragraph it was difficult to translate, so I left the original usage in the language of the carrier, how to correctly translate them
In Russian mental, alas, I do not know. I think the author is trying to hint that in this way you will hide your implementations inside an anonymous function that you call directly at the moment of its definition)
8 - Getting an arbitrary array value:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var items = [12,548,'a',2,5478,'foo',8852,'Doe',2145,119]; var randomItem = items[Math.floor(Math.random() * items.length)]; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 9 - Getting an arbitrary number in a certain range:
This example can be used when it is necessary to generate any fake data in order to test something, for example, salaries between the minimum and maximum values:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var x = Math.floor(Math.random() * (max - min + 1)) + min; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 10 - Generation of a numerical array from 0 to max:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var numbersArray = [] , max = 100; // numbers = [0,1,2,3 ... 100] for( var i=1; numbersArray.push(i++) < max;); ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 11 - Generation of arbitrary character set:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ function generateRandomAlphaNum(len) { var rdmstring = ""; for( ; rdmString.length < len; rdmString += Math.random().toString(36).substr(2)); return rdmString.substr(0, len); } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 12 - Mixing an array:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; numbers = numbers.sort(function(){ return Math.random() - 0.5}); /* the array numbers will be equal for example to [120, 5, 228, -215, 400, 458, -85411, 122205] */ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 13 - The `trim ()` function for strings:
The classic `trim ()` function, which is found in Java, C #, PHP, and many other programming languages, which removes whitespace, is not contained in JavaScript. However, you can add it to the `String` object:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ String.prototype.trim = function(){ return this.replace(/^\s+|\s+$/g, ""); }; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ (comment - could not resist, but it is strange that the author uses this technique
as though `trim ()` is already in javascript)
14 - Add one array to another:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 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 - Convert the `arguments` object to an array:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var argArray = Array.prototype.slice.call(arguments); ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 16 - Check whether the given argument is a number:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ function isNumber(n){ return !isNaN(parseFloat(n)) && isFinite(n); } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 17 - Check whether the given argument is an array:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ function isArray(obj){ return Object.prototype.toString.call(obj) === '[object Array]' ; } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Note that if the `toString ()` method is overridden, the result will not be as expected when using this trick.
Or use ...
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Array.isArray(obj); // its a new Array method ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ You can also use `instanceof` if you are not working with multiple frames. However, if you use a lot of contexts, then
get the wrong result:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var myFrame = document.createElement('iframe'); document.body.appendChild(myFrame); var myArray = window.frames[window.frames.length-1].Array; var arr = new myArray(a,b,10); // [a,b,10] // instanceof will not work correctly, myArray loses his constructor // constructor is not shared between frames arr instanceof Array; // false ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 18 - Get the maximum, minimum value of a numerical array:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; var maxInNumbers = Math.max.apply(Math, numbers); var minInNumbers = Math.min.apply(Math, numbers); ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 19 - Making the array empty:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var myArray = [12 , 222 , 1000 ]; myArray.length = 0; // myArray will be equal to []. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 20 - Do not use `delete` to remove from an array:
Use `split` instead of` delete` to remove the entry from the array. Using `delete` does not delete, but replaces the element with` undefined`.
Instead of this…
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; items.length; // return 11 delete items[3]; // return true items.length; // return 11 /* items will be equal to [12, 548, "a", undefined × 1, 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] */ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Use this one ...
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; items.length; // return 11 items.splice(3,1) ; items.length; // return 10 /* items will be equal to [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] */ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ However, `delete` should be used to delete object properties.
21 - Trim the array using `length`:
As in the previous example with an empty array, to truncate the array, use the `length` property:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var myArray = [12 , 222 , 1000 , 124 , 98 , 10 ]; myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124]. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Bonus, if you set the length of the array more than its current, then the length of the array will be changed, and the new values will be set
as `undefined`. The array length property is not just to read it.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ myArray.length = 10; // the new array length is 10 myArray[myArray.length - 1] ; // undefined ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 22 - Using logical `AND / OR` for conditional expressions:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var foo = 10; foo == 10 && doSomething(); // is the same thing as if (foo == 10) doSomething(); foo == 5 || doSomething(); // is the same thing as if (foo != 5) doSomething(); ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ The logical OR can also be used to set a default value for a function argument.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Function doSomething(arg1){ Arg1 = arg1 || 10; // arg1 will have 10 as a default value if it's not already set } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 23 - Use the `map ()` method to loop through the array:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var squares = [1,2,3,4].map(function (val) { return val * val; }); // squares will be equal to [1, 4, 9, 16] ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 24 - Rounding the number to N numbers after the comma:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var num =2.443242342; num = num.toFixed(4); // num will be equal to 2.4432 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 25 - Floating point problem:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 0.1 + 0.2 === 0.3 // is false 9007199254740992 + 1 // is equal to 9007199254740992 9007199254740992 + 2 // is equal to 9007199254740994 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Why it happens? 0.1 + 0.2 equals 0.30000000000000004. What you need to know is that all numbers in JavaScript with a floating point inside are represented as 64 bits in binary form according to the IEEE 754 standard.
If you want more examples, check out this blog .
You can use the `toFixed ()` and `toPrecision ()` methods to avoid such problems.
26 - Check the properties of the object when using the `for-in` loop:
This code example can be used to avoid iterations on the properties of the prototype object.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ for (var name in object) { if (object.hasOwnProperty(name)) { // do something with name } } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 27 - Operator comma:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var a = 0; var b = ( a++, 99 ); console.log(a); // a will be equal to 1 console.log(b); // b is equal to 99 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 28 - Cache variables that are needed for calculations or queries:
Using the example of jQuery selectors, we can cache their result - DOM elements.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var navright = document.querySelector('#right'); var navleft = document.querySelector('#left'); var navup = document.querySelector('#up'); var navdown = document.querySelector('#down'); ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 29 - Check the argument before sending it to isFinite () `:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ isFinite(0/0) ; // false isFinite("foo"); // false isFinite("10"); // true isFinite(10); // true isFinite(undifined); // false isFinite(); // false isFinite(null); // true !!! ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 30 - Avoid negative indices in arrays:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var numbersArray = [1,2,3,4,5]; var from = numbersArray.indexOf("foo") ; // from is equal to -1 numbersArray.splice(from,2); // will return [5] ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Make sure the arguments passed to `indexOf` are not negative.
31 - Serialization and deserialization (for JSON):
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} }; var stringFromPerson = JSON.stringify(person); /* stringFromPerson is equal to "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}" */ var personFromString = JSON.parse(stringFromPerson); /* personFromString is equal to person object */ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 32 - Avoid the `eval ()` or `Function` constructor:
Using the `eval` or` Function` constructor is an expensive operation since every time they cause the source code to be converted into javascript engine.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var func1 = new Function(functionCode); var func2 = eval(functionCode); ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 33 - Avoid `with` (Good stuff):
Using `with` defines a variable in global space. If any variable has the same name, then it will create certain problems, as overwriting the value may occur.
34 - Avoid for-in looping for arrays:
Instead…
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var sum = 0; for (var i in arrayNumbers) { sum += arrayNumbers[i]; } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ... this is better ...
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var sum = 0; for (var i = 0, len = arrayNumbers.length; i < len; i++) { sum += arrayNumbers[i]; } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ The bonus assignment for `i` and` len` will be made only once since this is the first expression of the loop construction. It is faster than ...
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ for (var i = 0; i < arrayNumbers.length; i++) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Why? The length of the array `arrayNumbers` is calculated at each iteration of the loop.
35 - Pass functions, not strings for `setTimeout ()` and `setInterval ()`:
If you pass strings to `setTimeout ()` or `setInterval ()`, they will be processed in the same way as with `eval`, this is slow.
Instead of using ...
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ setInterval('doSomethingPeriodically()', 1000); setTimeOut('doSomethingAfterFiveSeconds()', 5000); ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ... use ...
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ setInterval(doSomethingPeriodically, 1000); setTimeOut(doSomethingAfterFiveSeconds, 5000); ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 36 - Use `switch / case` instead of a series of` if / else`:
Using `switch / case` works quickly when there are more than two conditions, it is more elegant and better for organizing code. Avoid this
expressions when there are more than 10 conditional expressions.
37 - Use the `switch / case` expression with numerical ranges:
Using a `switch / case` expression with a numerical range makes the following trick possible.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ function getCategory(age) { var category = ""; switch (true) { case isNaN(age): category = "not an age"; break; case (age >= 50): category = "Old"; break; case (age <= 20): category = "Baby"; break; default: category = "Young"; break; }; return category; } getCategory(5); // will return "Baby" ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 38 - Create an object whose prototype is a specified object:
It is possible to create a function that creates an object whose prototype will be an object that is passed in the function argument ...
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ function clone(object) { function OneShotConstructor(){}; OneShotConstructor.prototype= object; return new OneShotConstructor(); } clone(Array).prototype ; // [] ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 39 - HTML escaper:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ function escapeHTML(text) { var replacements= {"<": "<", ">": ">","&": "&", "\"": """}; return text.replace(/[<>&"]/g, function(character) { return replacements[character]; }); } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 40 - Avoid using `try-catch-finally` inside loops:
`try-catch-finally` creates a new variable in the current execution space each time an exception is thrown and it is associated with the variable.
Instead of this…
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var object = ['foo', 'bar'], i; for (i = 0, len = object.length; i <len; i++) { try { // do something that throws an exception } catch (e) { // handle exception } } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ... use it ...
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var object = ['foo', 'bar'], i; try { for (i = 0, len = object.length; i <len; i++) { // do something that throws an exception } } catch (e) { // handle exception } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 41 - Set latencies for `XMLHttpRequests`:
You may lose the connection if XHR takes too long (for example, network problems), use `setTimeout ()` with calls
Xhr.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var xhr = new XMLHttpRequest (); xhr.onreadystatechange = function () { if (this.readyState == 4) { clearTimeout(timeout); // do something with response data } } var timeout = setTimeout( function () { xhr.abort(); // call error callback }, 60*1000 /* timeout after a minute */ ); xhr.open('GET', url, true); xhr.send(); ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ As a bonus, you should avoid synchronous Ajax requests.
42 - Deal with WebSocket timeout
Normally, when a connection is established, the server can reset the connection by timeout after 30 seconds of inactivity. The firewall may also, after a certain period, reset the connection on timeout due to inactivity.
This problem can be solved by sending empty messages to the server. To do this, you should add two functions to your code: one to maintain the connection and the other to cancel this support.
Using this trick, you will manage the timeout.
Adding `timerID` ...
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var timerID = 0; function keepAlive() { var timeout = 15000; if (webSocket.readyState == webSocket.OPEN) { webSocket.send(''); } timerId = setTimeout(keepAlive, timeout); } function cancelKeepAlive() { if (timerId) { cancelTimeout(timerId); } } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ `keepAlive ()` should be added to the end of the `onOpen ()` method for webSocket
connections and `cancelKeepAlive ()` to the end of the `onClose ()` method.
43 - Remember that primitives work faster than function calls.
Take advantage of VanillaJS
For example, instead ...
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var min = Math.min(a,b); A.push(v); ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ... use it ...
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var min = a < b ? ab; A[A.length] = v; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 44 - Do not forget to use the tools for formatting and style code.
Use JSLint and minimization (JSMin, for example) before the code starts to live.
45 - Javascript Just Shiiikaaaren: Best Resources To Learn JavaScript.
Conclusion
Naturally, there are many tips and tricks and practices. Therefore, if you have something to add, get some feedback or make adjustments - write in the comments.
References
When writing this article, I used my examples for the code, but some examples were inspired from other articles and forums:
- JavaScript Performance Best Practices ( CC )
- Google Code JavaScript tips
- StackOverFlow tips and tricks
- TimeOut for XHR
And here is the end of a fairy tale ....
Each may relate differently to what is written and stated in this material. It was enough whether it was good or not, how deeply the questions were revealed, the results were highlighted, how clever and interesting the examples were.
My task, as a translator, was to deliver it to the court of a speaking, boiling public synapse from work. And why does he need it specifically - everyone decides for himself.
Who wants to talk to the author, read the comments - follow the links. Go over the original article. I hope that my humble copy has brought you good, did not take much time.
Thanks for attention!
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Original text
Original Text Author: Saad Musliki ( Watch Hero )
* December 23, 2013 *
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Source: https://habr.com/ru/post/208570/
All Articles