William Clarkson - JavaScript Hacks: Tips, Tricks, and Techniques for JavaScript

CHAPTER ONE Introduction Introduction
I've been working with code for over 30 years now. I still find new things to learn about coding every day. Here is a small collection of JavaScript tips tricks and techniques that I have picked up over the years. You can download samples of this code at my website, WilliamClarkson.net , and if you have any questions about the code or JavaScript in particular you can contact me there and I'll be happy to do my best to help you. I love talking about code! If you are interested in using JavaScript for game design you might want to check out some of my other books, or my website on game development phasergames.com . function arrayToList(array) { var oString = "

"; var len = array.length; for (var i = 0; i < len; i++) { var word = array[i]; oString += "
1. " + word + "
"; } oString += "

"; return oString; } window.onload = function() { document.getElementById('output').innerHTML = arrayToList(['red', 'blue', 'green']); } Cache the array length Storing an array length in a variable means that the browser will not have to calculate the length of the array every time the loop is executed. function arrayToList(array) { var oString = "

"; var len = array.length; for (var i = 0; i < len; i++) { var word = array[i]; oString += "
1. " + word + "
"; } oString += "

"; return oString; } window.onload = function() { document.getElementById('output').innerHTML = arrayToList(['red', 'blue', 'green']); } Cache the array length Storing an array length in a variable means that the browser will not have to calculate the length of the array every time the loop is executed.

I've seen good performance results on my own code over the years. Some research seems to suggest that the browser makers realizing that the array had to be calculated every time have now done workarounds to cache the array length for you, however, I still like to do it. It is also a good practice because you never know how old the browser that your user is using. not cached for (i = 0; i < array.length; i++) { //do stuff } cached var len = array.length; for (var i = 0; i < len; i++) { //do stuff } Binary search This is a trick I used way back in the 80s when computers were a lot slower than they are today. It works only on arrays that are alphabetically sorted but you could also modify this code where you have an array of objects it's alphabetically sorted on a key. It works like this: imagine that you have a telephone book and you want to find a certain name.

You don't start at the letter A and work your way through until you find the name that you are looking for. However, that's how we often do it in programming with just a for Loop going through every name until we find the one that we want. With the phone book, we open it to a random page and then turn forwards or backward depending on where we landed. This code looks at the element in the middle or halfway through the array. It did either discards the last half or the first half of the array depending on if the name that is looking for is greater than or less than the value of that middle element. var array = [11, 22, 33, 44, 55, 66]; // console.log(array); //set length to zero // array.length=0; // console.log(array); Truncate array Just as setting an array length 0 will clear the array, you can also truncate the array by setting the length to the number of elements you want to keep. var array = [11, 22, 33, 44, 55, 66]; // console.log(array); //set length to zero // array.length=3; // console.log(array); Output [11,22,33] Slice vs Delete Deleting an element on an array will set that element to undefined. var array = [11, 22, 33, 44, 55, 66]; // console.log(array); //set length to zero // array.length=3; // console.log(array); Output [11,22,33] Slice vs Delete Deleting an element on an array will set that element to undefined.

Slice will simply remove it. //array.splice(index,delete_count) array.splice(position, 1); delete array[1]; delete output [ 'a', undefined, 'c' ] splice output [ 'a', 'c' ] Shuffle The shuffle array function will take two random elements of an array and swap their values. I use this function a lot in card games. var array = [1, 2, 3, 4, 5, 6, 7]; for (var i = 0; i < 20; i++) { array = shuffleArray(array); } function shuffleArray(arr) { var index1 = Math.floor(Math.random() * arr.length); var index2 = Math.floor(Math.random() * arr.length); // // var temp = arr[index1]; arr[index1] = arr[index2]; arr[index2] = temp; return arr; } Get last element Use the built-in array slice function to be able to get a list of elements from the end of an array. var array = [1, 2, 3, 4, 5, 6,7,8,9]; get last element console.log(array.slice(-1)); // [9] get last two elements console.log(array.slice(-2)); // [8,9] Join 2 arrays If you want to join two arrays together take the array that you want to go at the beginning and then concat the second array to it var array1 = [1, 2, 3]; var array2 = [4, 5, 6]; var array3=array1.concat(array2); console.log(array3); Output [1,2,3,4,5,6]; Using Array.find Use the array built-in find function to quickly search through an array of objects. var items=['fishes','cats','dogs','elephants']; var randItem = items[Math.floor(Math.random() * items.length)]; Get unique values There are two methods listed here to be able to get unique elements from an array the first one is an older one that I've used over the years the second one is a new way of accomplishing the task with functionality more recently added to JavaScript. //old method function getUniques(array) { var uArray = []; var len = array.length; for (var i = 0; i < len; i++) { uArray[array[i]] = 1; } var nArray = []; for (var key in uArray) { nArray.push(key); } return nArray; } console.log(getUniques([1, 2, 3, 'fish', 3, 'cake', 'cake', 'cake', 1, 2, 3, 4, 'fish'])); //ES6 -newer shorter method var arr = [...new Set([1, 2, 3, 'fish', 3, 'cake', 'cake', 'cake', 1, 2, 3, 4, 'fish'])]; console.log(arr); Output [1,2,3,'fish','cake',4] CHAPTER THREE conditionals Conditinal shortcurt Instead of using an if statement to call a function you can simply take the condition and use the and (&&) to call the function if the conditional is true. old way if (conected) { login(); } new way conected && login(); Ternary operator Using a ternary operator can shorten several lines of if-then code into one old way var age = 19; var canDrink; if (age > 20) { canDrink = true; } else { canDrink = false; } new way var age = 19 canDrink=(age>20)?true:false; Console.log(canDrink); The formula for this is: variable=(condition)?meetsCondition:doesNotMeetCondition Ternary operator with methods You can also use ternary operators to call a method. old way if (success) { avatar.start(); } else { avatar.stop(); } new way success ? avatar.start() : avatar.stop(); Switch vs If Using a switch statement instead of a series of if-then statements will make your code more readable and in some cases speed up the execution. old way if (color == "red") { //do stuff } if (color == "blue") { //do stuff } if (color == "green") { //do stuff } if (color == "brown") { //do stuff } if (color == "yellow") { //do stuff } new way switch (color) { case "red": //do stuff break; case "blue": //do stuff break; case "green": //do stuff break; case "brown": //do stuff break; case "yellow": //do stuff break; } CHAPTER FOUR functions Assumed Arguments If you want to be able to send an unfixed amount of arguments to a function, you can just leave the argument section blank and then use the arguments keyword to access any parameters past. old way if (color == "red") { //do stuff } if (color == "blue") { //do stuff } if (color == "green") { //do stuff } if (color == "brown") { //do stuff } if (color == "yellow") { //do stuff } new way switch (color) { case "red": //do stuff break; case "blue": //do stuff break; case "green": //do stuff break; case "brown": //do stuff break; case "yellow": //do stuff break; } CHAPTER FOUR functions Assumed Arguments If you want to be able to send an unfixed amount of arguments to a function, you can just leave the argument section blank and then use the arguments keyword to access any parameters past.