Multiple javascript hacks for hipsters

JavaScript is an interesting programming language.

Constant fears to make mistakes in the code make you think all the time. Programming skills are improved due to the fact that you have to constantly execute code in your mind, there is no other way.

That is why it is important that the code is neat, compact and elegant. One that you can fall in love with. Otherwise, javascript can scare away.
')
I picked up some interesting snippets for you that please me and which I use instead of boring code that takes up a lot of space. Some of them make the code shorter, others are clearer and clearer. A couple more are hacks for debugging.

I learned all this while studying projects with source code, but here I am writing as if I had invented them.

Hipster hack # 1 - function call

I really hate the if / else block, a useful trick will help us to get rid of it. It allows us to make a function call based on a boolean value.

//  if (success) { obj.start(); } else { obj.stop(); } //   var method = (success ? 'start' : 'stop'); obj[method](); 

Hipster hack # 2 - string connection

A well-known fact - strings are friendly with other strings. Sooner or later you will need to concatenate several of them. I don't really like using "+", so join comes to the rescue:

 ['first', 'name'].join(' '); // = 'first name'; ['milk', 'coffee', 'suger'].join(', '); // = 'milk, coffee, suger' 

Hipster hack # 3 - default operator ||

In JavaScript, you never know exactly what is in the object. Sometimes you get it as a function argument, sometimes it is passed to you over the network, or you read it in the config file. In any case, you can use the convenient operator || which returns the second value if the first one is false.

 //  'No name'  myName  (null  undefined) var name = myName || 'No name'; //  options  ,      var doStuff = function(options) { options = options || {}; // ... }; 

Hipster hack # 4 - security operator &&

Like the default operator, it is extremely useful. It allows you to get rid of almost all IF and makes the code much more pleasant.

 //  if (isThisAwesome) { alert('yes'); // it's not } //  isThisAwesome && alert('yes'); //      var aCoolFunction = undefined; aCoolFunction && aCoolFunction(); //  ,       

Hipster hack # 5 - operator XXX

This operator is fully subject to copyright law. When I write code and for some reason I need to go to the web or edit another piece of code, I add a line with the xxx operator. The code in this place will be interrupted and you can finish what you started later. Line xxx is perfectly looked up, since it is not found in normal code, and you don’t have to bother with a comment in TODO at all.

 var z = 15; doSomeMath(z, 10); xxx //  .  ,     TODO doSomeMoreMath(z, 15); 

Hipster hack # 6 - time measurement

It is interesting for you to find out which is faster: a loop with i ++ or with i--. I personally do not. Those who are interested can use the output of the measurement time in the console. This is useful if you need to know the speed of operations that block the event cycle.

 var a = [1,2,3,4,5,6,7,8,9,10]; console.time('testing_forward'); for (var i = 0; i < a.length; i++); console.timeEnd('testing_forward'); // : testing_forward: 0.041ms console.time('testing_backwards'); for (var i = a.length - 1; i >= 0; i--); console.timeEnd('testing_backwards'); // : testing_backwards: 0.030ms 

Hipster Hack # 7 - Debugging

I learned this trick from a Java developer. Absolutely can not imagine why he knew about him, but I did not. But, be that as it may, since then I use it constantly. Just enter the debugger in the code and the debugger will stop at this line.

 var x = 1; debugger; //    x++; var x = Math.random(2); if (x > 0.5) { debugger; //   ... } x--; 

Hipster Hack # 8 - Debugging Old School

I always liked to display the values ​​of variables in some places of the code, instead of line-by-line debugging. If you are like me, you may need to bring some private variables to the global scope. The main thing is not to forget to clean up the code before transferring to production.

 var deeplyNestedFunction = function() { var private_object = { year: '2013' }; //    : pub = private_object; }; //     (Chrome dev tools, firefox tools,  ..) pub.year; 

Hipster hack # 9 - ultra-light template engine

Are you still using "+" for string concatenation? There is a better way to connect data strings. It is called templating, and here you have a great 2.5 lines of code framework.

 var firstName = 'Tal'; var screenName = 'ketacode' //   'Hi, my name is ' + firstName + ' and my twitter screen name is @' + screenName; //  var template = 'Hi, my name is {first-name} and my twitter screen name is @{screen-name}'; var txt = template.replace('{first-name}', firstName) .replace('{screen-name}', screenName); 

Did you all know that already?

And even the operator XXX invented by me personally? Yes, you're just a real hipster hacker!