Tech blog to share information.

April 30, 2018

JavaScript tricks you should know :)

April 30, 2018 Posted by tj cool , , , No comments

If Presence Shorthand

While doing “if checks”, assignment operators can sometimes be omitted. Below is the quick example.
if (isValidSession=== true)
if (likeJavaScript)

Convert values types

In Js another common problem is conversion.Say you have a number in string format i.e '1234' and you want to convert it to the number.  Have a look at this example:

Note: It only works with string numbers, otherwise, it will return NaN (Not a Number).

function ConvertToNumber(strNumber) {
    return +strNumber;
}
console.log(ConvertToNumber("1234")); // 1234
console.log(ConvertToNumber("ACB")); // NaN

Assign default values using || operator

Today in ES6 there is the default argument feature. In order to simulate this feature in old browsers you can use the || (OR operator) by including the default value as a second parameter to be used. If the first parameter returns false the second one will be used as a default value. See this example:
function Car(modelname, modelnumber) {
    this.name = modelname || "Audi";
    this.modelnumber = modelnumber || V6;
}
var _car1 = new Car();
console.log(_car1 .name); // Audi
console.log(_car1 .modelnumber ); // V6

var _car2 = new User("Audi","V6");
console.log(_car2 .name); // Audi
console.log(_car2 .modelnumber ); // V6

Check if properties exist of in an object

This trick is very useful when you need to check if some attribute exists and it avoids running undefined functions or attributes. If you are planning to write cross-browser code, probably you will use this technique too.

if ('querySelector' in document) {
    document.querySelector("#id");
} else {
    document.getElementById("id");
}

The Ternary Operator

When you want to write an if..else statement in just one line.
const inRange=9; 
if (x > 10) {
    inRange= false;
}
else {
    inRange= true;
}
const inRange= x > 10 ? false : true;

Accessing the last item in an array

The Array.prototype.slice(begin, end) helps you to cut arrays when you set the begin and end arguments. But if you don’t set the end argument, this function will automatically set the max value for the array.This function can accept negative values, and if you set a negative number as begin argument you will get the last elements from the array:
var array = [1,2,3,4,5,6];
console.log(array.slice(-1)); // [6]
console.log(array.slice(-2)); // [5,6]
console.log(array.slice(-3)); // [4,5,6]

Merging arrays

If you need to merge two arrays you can use the Array.concat().
var array1 = [1,2,3];
var array2 = [4,5,6];
console.log(array1.concat(array2)); // [1,2,3,4,5,6];
To merge large arrays you can use Array.push.apply(arr1, arr2) which will create a new array – it will merge the second array in the first one reducing the memory usage
var array1 = [1,2,3];
var array2 = [4,5,6];
console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6]; 

Convert Value to Boolean using !! operator

Very standard activity in programming is checked if some variable exists or if it has a valid value, to consider them as the true value. In JS This type of validation can be done via !! (Double negation operator) A simple !!variable- name, which will automatically convert any kind of data to boolean. Now this variable will return false only if it has some of these values: 0, null, "", undefined or NaN, otherwise it will return true.
To understand it in practice, take a look this simple example:
function Student(_std) {
    this.name= _std;
    this.failed = !!_std;
}
var _student= new Student(100.50);
console.log(_student.name); // 100.50
console.log(_student.failed); // true
 
var _student= new Student(0);
console.log(_student.name); // 0
console.log(_student.failed); // false


References : JScrambler.

0 comments: