Top 10 JavaScript Shorthands for Beginners

JavaScript shorthands not usually speed adult a coding routine though also make scripts shorter, therefore lead to faster page loads. Shorthand codes are usually as current as their longhand versions; they radically stand for a same thing–only in a some-more compress format. They are one of a simplest code optimization techniques.

There are several JavaScript shorthands, however they don’t have an central anxiety guide. Some are unequivocally simple, while others are utterly intimidating even for gifted developers. In this article, we can find 10 JavaScript shorthands for beginners with that we can start out with formula optimization and write some-more obvious code.

1. Decimal numbers

If we frequently work with large decimals this shorthand can be godsend, as we don’t have to form out all a zeros anymore, usually reinstate them with a e notation. For instance, 1e8 means a further of 8 zeros after a 1 digit, it equals to 100000000.

The series after a minute e indicates a series of zeros that come after a digit(s) before e. Likewise, 16e4 is a shorthand for 160000, etc.

/* Shorthand */
var myVar = 1e8;

/* Longhand */
var myVar = 100000000;

2. Increment, decrement

The increment shorthand is done adult of dual + signs, it means that a value of a non-static is to be incremented by one. Similarly, a decrement shorthand consists of dual - signs, and it means that a non-static is to be decremented by one.

These dual shorthands can be used only on numeric information types. They have an indispensable purpose in loops, their many visit use box is a for loop.

/* Shorthand */
i++;
j--;

/* Longhand */
i=i+1;
j=j-1;

3. Add, distract, multiply, divide

There’s a shorthand for any of a four elementary mathematical operations: addition, distraction, multiplication, and division. They work likewise to a increment and decrement operators, usually here, we can change a value of a non-static by any number (not usually by one).

In a instance below, a i non-static is incremented by 5, j is decremented by 3, k is double by 10, and l is divided by 2.

/* Shorthand */
i+=5;
j-=3;
k*=10;
l/=2;

/* Longhand */
i=i+5;
j=j-3;
k=k*10;
l=l/2;

4. Determine impression position

The charAt() method is one of a many frequently used fibre methods, it earnings a character during a specified position (for instance, a 5th impression of a string). There’s a elementary shorthand we can use instead: we supplement a character position enclosed in block brackets after a string.

Pay courtesy that a charAt() process is zero-based. Therefore, myString[4] will lapse a 5th impression in a fibre ("y" in a example).

var myString = "Happy birthday";

/* Shorthand */
myString[4];

/* Longhand */
myString.charAt(4);

5. Declare variables in bulk

If we wish to emanate more than one variables during a same time we don’t have to form them out one by one. It’s sufficient to use a var (or let) keyword only once, afterwards we can usually list a variables we wish to create, separated by a comma.

With this shorthand, we can announce both undefined variables and variables with a value.

/* Shorthand */
var i, j=5, k="Good morning", l, m=false;

/* Longhand */
var i;
var j=5;
var k="Good morning";
var l;
var m=false;

6. Declare an associative array

Declaring an array in JavaScript is a comparatively elementary task, by regulating a var myArray = ["apple", "pear", "orange"] syntax. However, declaring an associative array is a small some-more complicated, as here, we don’t usually have to conclude a values though also a keys (in box of unchanging arrays a keys are 0, 1, 2, 3, etc.).

An associative array is a collection of key-value pairs. The longhand approach is to announce a array, afterwards supplement any component one by one. However, with a shorthand below, we can also declare a associative array and all a elements during a same time.

In a instance below, a myArray associative array assigns their place of birth (values) to famous people (keys).

/* Shorthand */
var myArray  = {
  "Grace Kelly": "Philadelphia",
  "Clint Eastwood": "San Francisco",
  "Humphrey Bogart": "New York City",
  "Sophia Loren": "Rome",
  "Ingrid Bergman": "Stockholm"
}

/* Longhand */
var myArray = new Array();
myArray["Grace Kelly"] = "Philadelphia";
myArray["Clint Eastwood"] = "San Francisco";
myArray["Humphrey Bogart"] = "New York City";
myArray["Sophia Loren"] = "Rome";
myArray["Ingrid Bergman"] = "Stockholm";

7. Declare an object

The shorthand for object declaration works likewise to a one for associative arrays. However here, there are not key-value pairs though property-value pairs that we need to place between a braces {}.

The usually disproportion in a shorthand syntax is that object properties are not enclosed in selection marks (name, placeOfBirth, age, wasJamesBond in a instance below).

/* Shorthand */
var myObj = { name: "Sean Connery", placeOfBirth: "Edinburgh",
age: 86, wasJamesBond: loyal };

/* Longhand */
var myObj = new Object();
myObj.name = "Sean Connery";
myObj.placeOfBirth = "Edinburgh";
myObj.age = 86;
myObj.wasJamesBond = true;

8. Use a redeeming operator

The conditional (ternary) operator is frequently used as a shortcut for a if-else statement. It consists of three parts:

  1. the condition
  2. what happens if a condition is true (if)
  3. what happens if a condition is false (else)

In a instance below, we send a elementary summary (inside a message variable) to people who wish to enter a club. Using a shorthand form, it’s usually one line of formula to run a evaluation.

var age = 17;

/* Shorthand */
var summary = age = 18 ? "Allowed" : "Denied";

/* Longhand */
if( age = 18) {
  var summary = "Allowed";
} else {
  var summary = "Denied";
}

If we wish to exam it usually copy a formula into a web console (F12 in many browsers) and cgange a value of a age non-static a few times.

9. Check presence

It frequently happens that we need to check either a non-static is present or not. The “if presence” shorthand helps we do so with many reduction code.

Beware that many articles on JavaScript shorthands don’t give a correct longhand form, as a if( myVar ) footnote doesn’t simply check if a non-static is not fake though also a handful of other things. Namely, a non-static cannot be undefined, empty, null, and false.

var myVar = 99;

/* Shorthand */
if( myVar ) {
  console.log("The myVar non-static is tangible AND it's not empty
  AND not nothing AND not false.");
}

/* Longhand */
if( typeof myVar !== "undefined"  myVar !==  ""  myVar !== null
 myVar !== 0  myVar !== fake  ) {
  console.log("The myVar non-static is tangible AND it's not empty
  AND not nothing AND not false.");
}

You can exam how a “if presence” shorthand works by inserting a following formula dash into a web console and changing a value of myVar a few times.

To know how this shorthand works, it’s value contrast it with a values of "" (empty string), false, 0, true, a non-empty fibre (e.g. "Hi"), a series (e.g. 99), and when a non-static is uncertain (simply var myVar;).

10. Check absence

The “if presence” shorthand can be used to check a deficiency of a variable by fixation an exclamation symbol before it. The exclamation symbol is a logical not operator in JavaScript (and in many programming languages).

Therefore, with a if( !myVar ) notation, we can check if a myVar non-static is not undefined, empty, null, or false.

var myVar;

/* Shorthand */
if( !myVar ) {
  console.warn("The myVar non-static is uncertain (OR) dull (OR)
  nothing (OR) false.");
}

/* Longhand */
if( typeof myVar === "undefined" || myVar === "" || myVar === null
|| myVar === 0 || myVar === fake  ) {
  console.warn("The myVar non-static is uncertain (OR) dull (OR)
  nothing (OR) false.");
}

Add Comment