When I began learning JavaScript, I make a list trick I had found in other people's code, on the website or anywhere. Those things helped me a lot in writing code and improving working performance.
And in this article, I will share with you 7-tips that strike me as particularly clever and useful. This post suitable for beginners with JavaScript, but I hope to bring new knowledge to experienced people too.
Let's Start!
1. Not-Not Operator | !!
When function returns a falsy value (Could be null, undefined, NaN, empty string or 0, ...), and then you want to transfer that falsy value to Boolean (true/false), you can use !!
.
There is no official name for it, but everyone often called "Non-inverted Boolean".
const val1 = null;
console.log(!val1)
>> true
console.log(!!val1)
>> false
const val2 = [];
console.log(!val2)
>> false
console.log(!!val2)
>> true
const val3 = '';
console.log(!val3)
>> true
console.log(!!val3)
>> false
NaN is falsy, but it is not really False. typeof NaN = "number"
2. Convert to String
To quickly convert a number to a string, we can use the concatenation operator +
follow by an empty set of quotation marks ""
.
const value = 1 + "";
console.log(value);
>> "1"
console.log(typeof value);
>> "string"
Even though I typically do it like this for simple convenience, over 1,000s of iterations it appears for raw speed there is an advantage for .toString()
3. Convert to Number
To quickly convert a string to number, we can use addition operator:
let value = "10";
value = +value;
console.log(value);
>> 10
console.log(typeof value);
>> "number"
There may be context where +
will be understood as the concatenation operator rather than the addition operator. When that happens ( And in case you want to convert a float number to int number ), you can use ~~
(two tildes) operator:
console.log(~~"10")
>> 10
console.log(~~"10.5")
>> 10
How this work ?
A tilde, called as the "bitwise NOT operator", is an operator equivalent to-n — 1
. So, for example, ~10
is equal to -11
When you using two tildes in a row effectively negates the operation, because
(~n = -n-1) => ~~n = -(-n-1)-1 <=> ~~n = n
4. Quick Float to Number
If you want to convert float to number, you can use Math.floor()
, Math.ceil()
or Math.round()
. But, there is a faster way truncate float to an integer use |
, the "bitwise OR operator".
console.log(10.5 | 0)
>> 10
console.log(-10.5 | 0)
>> -10
5. Remove final digits (base on bitwise OR operator)
The "bitwise OR operator" can also be used to remove any amount of final digits from the end of an integer number. This means you don't need write code like this to transfer and remove a final digit from a string number:
const value = "1234"
Number(value.substring(0, value.length - 1));
>> Result: 123
Instead, shorten code with the "bitwise OR operator":
console.log(1234 / 1000 | 0)
>> 1
console.log(1234 / 100 | 0)
>> 12
console.log(1234 / 10 | 0)
>> 123
6. Get Unique Values of an Array
Since started learning JavaScript, I met a lot case have to retrieve unique values from an array with JavaScript, and we can easy way of unique value management using objects like this.
/Make sure an array called "foundKeywords" was defined above
if(shouldSave(keyword)) {
foundKeywords.push(keyword);
}
// The result of foundKeywords when done will be
["keywork1", "keywork2", "keywork3", ...]
And now, with ES6, we can use new JavaScript spread operator with Set:
var result1 = [...new Set([1, 2, 3, 3])]
>> [1, 2, 3]
var result2 = Array.from(new Set([1, 2, 3, 3]))
>> [1, 2, 3]
Awesome ! I love the mixture of rest expression and Set
!
7. Get the Last Item(s) in an Array
The array method slice()
can take negative integers, and if provided it will take values from the end of the array rather than the beginning.
let array = [0, 1, 2, 3, 4, 5];
console.log(array.slice(-1));
>> [5]
console.log(array.slice(-2));
>> [4, 5]
console.log(array.slice(-3));
>> [3, 4, 5]
Hope you like this article!