DEV Community

Cover image for "Mastering JavaScript: 8 Easy Shortcuts for Awesome Code!"
Sahil Upadhyay
Sahil Upadhyay

Posted on

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

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! 🚀

  1. 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".

Enter fullscreen mode Exit fullscreen mode

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'."
Enter fullscreen mode Exit fullscreen mode

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.
}

Enter fullscreen mode Exit fullscreen mode

Short Hand Technique :

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


 let number = x ≥ 9 ? true : false;

Enter fullscreen mode Exit fullscreen mode

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..

Enter fullscreen mode Exit fullscreen mode

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."

Enter fullscreen mode Exit fullscreen mode

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;
}


Enter fullscreen mode Exit fullscreen mode

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.
};

Enter fullscreen mode Exit fullscreen mode

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.
}


Enter fullscreen mode Exit fullscreen mode

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.
}

Enter fullscreen mode Exit fullscreen mode

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);
}


Enter fullscreen mode Exit fullscreen mode

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);

Enter fullscreen mode Exit fullscreen mode

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);


Enter fullscreen mode Exit fullscreen mode

Short Hand Technique :

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

"myString"[0];

Enter fullscreen mode Exit fullscreen mode

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";

Enter fullscreen mode Exit fullscreen mode

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"];

Enter fullscreen mode Exit fullscreen mode

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! 🌟👩‍💻👨‍💻

Top comments (8)

Collapse
 
cjcheshire profile image
Chris Cheshire

Thanks for taking the time to share.

Whilst this demonstrated a ternary condition:

let number = x ≥ 9 ? true : false;

It’s even shorter to:

let number = x ≥ 9

For good measure I wouldn’t call a variable number if it’s a boolean 🙈

Collapse
 
big_smoke profile image
Sahil Upadhyay

Whoops, my bad! 😅 Thanks for pointing that out.

Collapse
 
cjcheshire profile image
Chris Cheshire

I did see it as a demo but thought I’d mention. No need to feel bad, you put yourself out there and wrote something to help others 🙌

Thread Thread
 
big_smoke profile image
Sahil Upadhyay

It was nice of you for mentioning it, as it also corrected me. I'm here to help, and I appreciate your understanding! 🙌

Collapse
 
devgancode profile image
Ganesh Patil

Well explain ✨

Collapse
 
big_smoke profile image
Sahil Upadhyay

Thank you!!

Collapse
 
jeffchavez_dev profile image
Jeff Chavez

Sweet and simple. I'll apply these to my next projects!

Collapse
 
big_smoke profile image
Sahil Upadhyay

Sure!!