"Mastering JavaScript: 8 Easy Shortcuts for Awesome Code!"
Tags: webdev, javascript, beginners, programming
Published: 2023-12-15 17:04:30

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. <u>**Declaring Variable**</u>:--
  
    _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.<u>**Ternary Operator**</u>:--
  
   _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.<u>**Assignment Operator**</u>:--
  
   _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.<u>**Switch Case**</u>:--
  
   _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.<u>**If Presence**</u>:--
  
   _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.<u>**Arrow Functions**</u>:--
  
   _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.<u>**charAt()**</u>:--
  
   _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.<u>**Object Array Notation**</u>:--
  
   _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! 🌟👩‍💻👨‍💻