Sahil Upadhyay

Posted on Dec 15, 2023

"Mastering JavaScript: 8 Easy Shortcuts for Awesome Code!"

#webdev #javascript #beginners #programming

Hey there,👋 coding pals! Ever felt like there's gotta be a quicker way to write JavaScript? Well, you're in for a treat! Today, we're talking about cool JavaScript shortcuts – like secret codes that make your web code way snazzier.

Imagine you're a coding superhero,🦸‍♂️ and these shortcuts are your special powers. They're like magic spells that help you write less and do more. Plus, they make your code look super pro. Some of you may be aware of these shortcuts but for others this could be relatively new.

So, buckle up, because we're about to explore eight awesome JavaScript shortcuts that will turn you into a coding wizard. Let's dive in and make your code-writing journey a whole lot smoother! 🚀

Declaring Variable:--

Long Hand Technique :

Imagine you're telling a story in detail. In
JavaScript, longhand is like that detailed
storytelling. For example:

let x;  // You're saying, "Hey, I want a variable named x."
let y;  // And here, you're saying, "Give me another variable, and I'll call it y."
let z = "a";  // Finally, you're setting a variable z and giving it the value "a".

Short Hand Technique :

Now, think of shorthand as the shortcut or summary of
that story. Instead of saying it all step by step, you
express it in a compact way:

 let x, y, z="a";  // Boom! You're telling the whole story 
 in one sentence. "I want variables x and y, and 
 z is 'a'."

2.Ternary Operator:--

Long Hand Technique :

Imagine you have a friend named "x," and you want to
decide if x is greater than 9. If it is, you want to
say "true"; if not, you want to say "false." In
longhand, it's like having a conversation:

let number;  // Imagine you have a box named "number."
if (x > 9) {
  number = true;  // If your friend x is greater than 9, you put "true" in the box.
} else {
  number = false;  // If not, you put "false" in the box.
}

Short Hand Technique :

Now, let's use a quick, shortcut way to express the same thing:


 let number = x ≥ 9 ? true : false;

3.Assignment Operator:--

Long Hand Technique :

Think of it like counting candy. You have a bag of
candy represented by a variable "x," and you want to
add more candy ("y") to it. The longhand way is like
saying:

x = x + y;  // Take the current candies in the bag, add more candies, and put the total back in the bag.
x = x-y;     // Take the current candies in the bag, subtract candies, and put the remaining back in the bag..

Short Hand Technique :

Now, the shorthand way is like finding a quicker way to express the same idea:

x += y;  // It's like saying "Add these candies to the bag and keep them there."
x -= y;   // It's like saying "Subtract these candies from the bag and keep the remaining there."

4.Switch Case:--

Long Hand Technique :

Imagine you have a remote control, and there are
different buttons on it. Each button does a specific
thing when you press it. In longhand, using a switch
statement is like checking which button you pressed:

switch (something) {
  case 1:
    doSomething();      // If you pressed button 1, do something.
    break;
  case 2:
    doSomethingElse();  // If you pressed button 2, do something else.
    break;
}

Short Hand Technique :

Now, let's imagine a magical drawer where you have
different objects, and each object represents an
action. The shorthand version is like having a drawer
full of actions and simply grabbing the right action
based on the value of 'something':

var cases = {
  1: doSomething,      // If 'something' is 1, grab the 'doSomething' action.
  2: doSomethingElse   // If 'something' is 2, grab the 'doSomethingElse' action.
};

The shorthand uses an object as a lookup table, making it a neat and efficient way to handle different cases without the need for repetitive case statements.

5.If Presence:--

Long Hand Technique :

Imagine you have a light switch, and you want to check
if the light is turned on. In longhand JavaScript, it's
like saying:


if (boolGoesHere === true) {
  // If the light is truly on, do something.
}

Short Hand Technique :

Now, let's use a more straightforward way to express
the same idea:

if (boolGoesHere) {
  // If the light is on, do something.
}

Here, it's like saying, "If the light is on, do something." The shorthand version takes advantage of the fact that if boolGoesHere is already true, you don't need to explicitly compare it to true. It's like checking if the light is on without asking, "Is it truly on?"

6.Arrow Functions:--

Long Hand Technique :

Imagine you have a friend, and you want to greet them
in a traditional way. In longhand JavaScript, defining
a function is like saying:


function sayHello(name) {
  console.log('Hello', name);
}

It's a bit like saying, "Okay, let's create a way to say hello to a friend. When I call this 'sayHello' function and give it a 'name,' it will print 'Hello, name.'"

Short Hand Technique :

Now, let's imagine you found a quicker, more modern way
to greet your friend:

sayHello = name => console.log('Hello', name);

The shorthand version is a more concise way to define a simple function. It's like using a quicker, more efficient method to achieve the same result.

7.charAt():--

Long Hand Technique :

Imagine you have a book, and you want to know the first
letter on the first page. In longhand JavaScript, using
the charAt() method is like saying:


"myString".charAt(0);

Short Hand Technique :

Now, let's imagine you found a quicker way to grab that first
letter:

"myString"[0];

It's like saying, "I know there's a first letter in this string
'myString.' I'll just grab it directly using [0]."

8.Object Array Notation:--

Long Hand Technique :

Imagine you have a backpack, and you want to put three
different things in it, labeling each item with a
number. In longhand JavaScript, it's like saying:


let a = new Array();
a[0] = "myString1";
a[1] = "myString2";
a[2] = "myString3";

It's a bit like saying, "I have a backpack called 'a.' In the first slot (index 0), I'm putting 'myString1.' In the second slot (index 1), I'm putting 'myString2.' And in the third slot (index 2), I'm putting 'myString3.'"

Short Hand Technique :

Now, let's imagine you found a quicker way to pack your
backpack:

let a = ["myString1", "myString2", "myString3"];

It's like saying, "I have a backpack called 'a,' and I'm putting 'myString1' in the first slot, 'myString2' in the second slot, and 'myString3' in the third slot."

The shorthand version is a more concise way to create an array with values.

CONCLUSION

Congratulations, fellow coders! You've just unlocked the secret codes that can transform your JavaScript game from good to superhero-level greatness. With these eight awesome shortcuts, you're now equipped with the magical spells to write more efficient and professional-looking code.

Remember, coding is not just about making things work; it's about doing it with style and elegance. These JavaScript shortcuts are your secret weapons to achieve just that – elegant, concise, and powerful code that makes you stand out in the coding realm.

Follow Me for More:
If you enjoyed this journey through JavaScript shortcuts and want more coding magic in your life, follow me for future posts! Together, we'll uncover more secrets, explore new tricks, and level up our coding skills. Stay tuned for more coding adventures, and let's continue this exciting journey of becoming coding wizards! 🌟👩‍💻👨‍💻