One month and a half were born Js Tips with the concept of "One tip per day", 46 tips after these are my thoughts...

One tip day was an ambitious goal, even more, when the objective was a good quality and a useful tip.

We had really good tips for these days, excellent tips, but for the received feedback (and you can see that in the issues) show me that by follow the goal of one tip per day, I merged tips that maybe required more review.

This kind of things make me rethink that if we want to keep JsTips like "the source of the truth" we have to review the concept of "one tip per day, maybe we can merge one tip per day, but maybe another days not, because maybe there aren't a really good tip ready to merge.

Seriously, this is not about the pass tips and the people that sent his tips, I'm pretty sure that without his tips this project should be dead, this is only about improve and make more useful the project.

What do you think about this?

Thanks

Joel

There are many JS developers in China, and I, a tech discussion/sharing community host, want to help translate this great series of tips to a Chinese version.

Do we have any official guidelines for this?

How about keep one tip per file instead one page for all ? In the future can do view tips like tldr ? can generate the one page tips with each tip .

Helpful Console Logging Tips

TL;DR;

Helpful logging techniques using coercion and conditonal breakpoints.

Username

@zthall]

Extra

Using conditional breakpoints to log data

If you wanted to log to the console a value each time a function is called, you can use conditional break points to do this. Open up your dev tools, find the function where you'd like to log data to the console and set a breakpoint with the following condition:

console.log(data.value) && false

This always evaluates to false, so it will not pause the page thread when it's hit, but it will log data to the console. This can also be used to count how many times a function or callback is called.

Printing a function variable to console

Have you ever logged a function variable to the console and weren't able to just view the function's code? The quickest way to see the function's code is to coerce it to a string using concatenation with an empty string.

console.log(funcVariable + '');

Hi @loverajoel： I very like jstips！That's simple and useful！ So I want to translate to Chinese Translation for my friends and other peoples for learning. I will complete other config and something.

Easiest way to extract Unix timestamps

TL;DR;

In Javascript you can easily get the unix timestamp

Username

@nmrony

Extra

Converting miliseconds to seconds as Unix timestamp is calculaed in seconds

In example you have this object

var myObject = {
  name: '@tips_js'
};

and this check

if (typeof myObject['name'] !== 'undefined') { ... }

and then these words saying that that kind of check is ok.

Thats ok, but you have to know that there are two native methods for this kind of thing

Actually it is not ok, consider this example:

var myObject = {
  name: '@tips_js'
}

console.log(typeof myObject['name'] === 'undefined') // false
myObject.name = undefined
console.log(typeof myObject['name'] === 'undefined') // true

Which clearly shows that typeof myObject['name'] === 'undefined' is not checking existence of property, but checks type of that property value

First, awesome repository; I love it!

Now my suggestion for another tip: In my opinion, one of the best things about JS is the lax and kind of lazy way in which the logical operators || (logical OR, "default operator") and && (logical AND, "guard operator") work. Basically: OR will yield the left value if truthy, otherwise the right value; AND will yield the right value if both are truthy, otherwise the falsy is yielded. So to say: the value that matters, that makes or breaks the comparison, is yielded. They don't convert to boolean, because of JS's inherent way of handling truthy/falsy values. You can use them in some very fantastic ways. This would make for a very interesting article.

console.log( 0 || 1 || 2 ); // 1 == true
console.log( 0 && 1 && 2 ); // 0 == false
console.log( "foobar" || "default value" ); // "foobar" == true
console.log( null || "default value" ); // "default value" == true
console.log( false && "guarded value" ); // false == false
console.log( true && "guarded value" ); // "guarded value" == true
console.log( null || true && "guarded value" || null ); // "guarded value" == true

var debug = function(){console.log(arguments);};

Model 1:
function class1(){
    this.name="github1";
}
obj1 = new class1();
debug(obj1.name);
Model 2:
var class2 = function(){
    this.name= "github2";
}
obj2 = new class2();
debug(obj2.name);

Model 3:
function class3(){
    var _this = this;
    _this.name="github3";
}
obj3 = new class3();
debug(obj3.name);

Model 4:
var class4 = function (){
    var _this = this;
    _this.name="github4";
}
obj4 = new class4();
debug(obj4.name);

Please update if you feel any other format? Make sure, If you prefer using prototype Why?

thnx.

Hey,

I highly suggest you read these:

http://mrale.ph/blog/2014/02/23/the-black-cat-of-microbenchmarks.html http://mrale.ph/blog/2012/12/15/microbenchmarks-fairy-tale.html http://jsperf.com/string-concat-fast/9#comment-1

Most of those microbenchmarks are illusions, I suggest you shift from those performance tips killing code readability to some actually useful tips, I really like the idea of repository :+1:, but not like this.

To my understanding, this microbenchmark is an illusion:

var arr = [1,2,3,4,5];

arr.unshift(0);
[0].concat(arr); // 98% faster in Chrome 47.0.2526.106 on Mac OS X 10.11.1

Why? because [0].concat(arr) is generating a new array which is not used, so the VM doesn't run it at all! That's why it's 98 percent faster, because it's not running anything. Most probably if you are using this in some real-life example, they run at the same speed.

JavaScript engines are too smart to require us to use such tricks in order to make them run fast, these tricks just making our code hard to understand.

the (cache[n]=cache[n-1]+cache[n-2]) part can't work, because the values arent't computed first if you don't call the function for every number smaller than the one you want.

this works: var fibonacci = (function(){ var cache = { 0: 0, 1: 1 }; return function(n){ return n <= 1 ? cache[n] : (cache[n] = (cache[n-1] || fibonacci(n-1) + cache[n-2] || fibonacci(n-2))); } })();

Swapping 2 values without temp variable

TL;DR;

With array destructuring it's really easy to swap two values in a single expression without need of a temporary variable.

let foo = 10, bar = 5;
[foo, bar] = [bar, foo]

That's it, now foo is 5 and bar is 10.

JS first evaluates newly created array on the right of the assignment operator and then destructures it according to the order of vars on the left and since they are the same but in reverse order their values are swapped.

Works for array's items as well:

let foo = [1,2,3,4,5];
[foo[0], foo[4]] = [foo[4],foo[0]]

And objects:

let foo = {a:1,b:2,c:3};
[foo.a,foo.b]=[foo.b,foo.a]

👻

@gk3000

Extra

@loverajoel

Files added:

_posts/pt_BR/ images/flags/pt_BR.png pt_BR/about.md pt_BR/index.html CONTRIBUTING_pt_BR.md

Edit edited:

_config.yml

I already translate three tips, soon I will do the others.

Best

JavaScript tips in Spanish

Translation and localization of the content in the repo and the tips.

frikinside

frikinside

Extra

It would be progress slowly but constant, hope anyone find it useful! Please feel free to critic the translation if you think I do it something wrong or if it could be done better :D

Pull request for the translation of the tips

Done:

• 2015-12-29-inserire-un-elemento-in-un-array.md
• 2016-01-01-angularjs-digest-vs-apply.md
• 2016-01-05-differenze-tra-undefined-e-null.md
• 2016-01-13-consiglio-per-misurare-le-prestazioni-di-un-blocco-di-codice-javascript.md
• 2016-01-19-concatenazione-stringhe-sicura.md
• 2016-01-20-restituire-oggetti-per-permettere-il-concatenamento-di-funzioni.md
• 2016-01-21-mescolare-un-array.md
• 2016-01-23-metodo-veloce-per-convertire-stringhe-in-numero.md

Unfinished:

• 2016-01-03-migliorare-condizioni-nidificate.md