Master JavaScript, you should. It is one of the world’s most popular and powerful programming languages. Due to it being the scripting language of the internet (although it has some alternatives) being used in almost every website and built in to every web browser, it is a viciously sought after skill and is the basis of many widely used web development frameworks. A huge reason why JavaScript won’t be going anywhere anytime soon is the growth in popularity of single page web applications where JavaScript is the primary underlying contributor. These frameworks include Node.js, Angular.js, React.js, Ember.js, and Backbone.js to name a few.

image source

The following list is comprised of tips and tricks to keep in mind when using JavaScript that are often overlooked or unknown, yet remain extremely important. Note that this list is relevant as of ES6, the most recent update to standards of the language.

Master JavaScript: Hoisting

This functionality of JavaScript will help you keep your code organized. Variable declarations and function definitions are hoisted to the top. Essentially this allows you to declare all of your functions and variables at the bottom of your scope to keep them out of the way. Your variables are defined right before you use them.

Are you a developer or a web designer? This is the tool you need in 2017

function doStuff() {

// ReferenceError: notDeclared is undefined

console.log(notDeclared);

// Outputs: undefined

console.log(definedLater);

var definedLater;

definedLater = ‘I am defined!’

// Outputs: ‘I am defined!’

console.log(definedLater)

// Outputs: undefined

console.log(definedSimulateneously);

var definedSimulateneously = ‘I am defined!’

// Outputs: ‘I am defined!’

console.log(definedSimulateneously)

// Outputs: ‘I did it!’

doSomethingElse();

function doSomethingElse(){

console.log(‘I did it!’);

}

// TypeError: undefined is not a function

functionVar();

var functionVar = function(){

console.log(‘I did it!’);

}

}

Master JavaScript: === V.S. == operators

The === (or !==) operator will not perform any type conversion whereas the “== (or !=) operator does. This leaves the === operator to be considered faster as it just compares the value and type. Hence, only use == for checking null or undefined.

Want a better issue tracking and bug fixing workflow with seamless project management? Watch the video

[5] == 5 // is true

[5] === 5 // is false

‘5’ == 5 // is true

‘5’ === 5 // is false

[] == 0 // is true

[] === 0 // is false

‘ ‘ == false // is true BUT true == “a” is false

‘ ‘ === false // is false

Master JavaScript: Template Strings

The ES6 update pumped many time-saving features into the language. Template strings are one of these features and they allow multi-line strings without

and simple logic. This one is easier to show than explain.

var firstName = ‘Tyrese’

var lastName = ‘Jones’

console.log(‘I am the one and only ‘ + firstName + ‘ ‘ + ‘lastName’);

// Output: I am the one and only Tyrese Jones

var firstName = ‘Layla’

var lastName = ‘Mwambo’

console.log(‘Hey, my name is ${firstName} ${lastName} ‘);

// Output: Hey, my name is Layla Mwambo

You can also get fancier and modify the output of template strings with a function. This is called tagged template strings. Read on here to learn more about tagged template strings.

Master JavaScript: Shuffle an array

I doubt you are reading this for a history lesson so I will keep the background information brief and get to the code for this one. The Fisher-Yates shuffle dates back to 1938 when Ronald Fisher and Frank Yates described an algorithm for generating a random permutation of a finite set in a book they wrote about statistics. Below is the algorithm in JavaScript.

Interested in more articles for front end developers? Front-End Libraries and Frameworks – Which to Choose?

function shuffle(arr) {

var i,

j,

temp;

for (i = arr.length – 1; i > 0; i–) {

j = Math.floor(Math.random() * (i + 1));

temp = arr[i];

arr[i] = arr[j];

arr[j] = temp;

}

return arr;

};

Master JavaScript: Measuring the performance of a JavaScript block

This is a very simple yet effective way of determining the performance of your code. It requires the use of two console functions console.time() and console.timeEnd(). All you need to do is put the code in between both functions, respectively. See the snippit below.

console.time(“Array initialize”);

var arr = new Array(100),

len = arr.length,

i;

for (i = 0; i < len; i++) {

arr[i] = new Object();

};

console.timeEnd(“Array initialize”);

// Outputs: Array initialize: 0.652ms

Note that Mozilla suggested not to use this method for production sites, only for development purposes only.

React vs Angular2: A Heavyweight Bout for the JavaScript Title

Master JavaScript: Converting strings to numbers in the fastest possible way

This is an extremely common and easy procedure that is often unknown about JavaScript. The easiest way is by using the + operator. This one is easy to explain with the code as well.

var one = ‘1’;

var numberOne = +one; //numberOne is now an int, 1

You can do the same thing with a – operator to get the negative value of the number within the string.

var one = ‘1’;

var numberOne = -one; //numberOne is now int, -1

Master JavaScript: Strict Mode

When writing code in strict mode you are opting in to a restricted variant of JavaScript. This can be applied to an entire script or just to a function. The first thing strict mode does is change silent errors into throw errors to help you debug more efficiently. Strict mode also fixes mistakes that make it difficult for JavaScript engines to perform optimizations along with the possibility of running strict mode code faster than identical code that is not in strict mode. Here is a short list of specific behaviors to expect when using strict mode.

Variables can only be introduced when preceded with “var” Constructors have to be called with “new” Protects you from using reserved words or future reserved words as variable names Attempting to write to read-only properties generates a noisy error “this” is not implicitly bound to the global object

Something to keep in mind when using strict mode is that browsers that don’t support it run strict mode code differently than browsers that do so make sure to thoroughly test features without strict mode to ensure proper functionality across all browsers.

Although debugging is made a lot easier with strict mode, it also sets a very basic coding standard allowing for better collaboration on projects. But let’s face the facts, to effectively debug a website you need a debugging + bug tracking software.

The makers of DebugMe hope that you like this post and would love it if you follow us on Twitter. We are tweeting about web design, UI/UX and development related topics multiple times a day. DebugMe is an issue tracking, project management and screenshot tool for every website project. Get visual feedback right away and solve front-end problems faster. Try it now for free.