Mastering JavaScript Shorthands In 2023
Tags: javascript, programming, webdev, beginners
Published: 2023-08-04 16:55:00

Hey there, fellow JavaScript enthusiasts!


Today, we'll explore the art of JavaScript shorthands - nifty techniques that make your code more concise and elegant.

We'll dive into real use case examples in both vanilla JavaScript and the shorthand form.

So buckle up, and let's elevate your JavaScript skills to new heights!

## 1. The Ternary Operator:

**Use Case**: Conditional Assignment


Normal JavaScript:

```
let isAdmin;
if (user.role === 'admin') {
  isAdmin = true;
} else {
  isAdmin = false;
}
```

Shorthand:

```
const isAdmin = user.role === 'admin' ? true : false;
```

Shorterhand:

```
const isAdmin = user.role === 'admin';
```


## 2. Object Property Shorthand:

**Use Case**: Creating Objects with Variables


Normal JavaScript:

```
const name = 'Leandro';
const age = 30;

const person = {
  name: name,
  age: age
};
```

Shorthand:

```
const name = 'Leandro';
const age = 30;

const person = {
  name,
  age
};
```


## 3. Default Parameter Values:

**Use Case**: Providing Default Values to Function Parameters


Normal JavaScript:

```
function greet(name) {
  name = name || 'Guest';
  return `Hello, ${name}!`;
}
```

Shorthand:

```
function greet(name = 'Guest') {
  return `Hello, ${name}!`;
}
```


**4. Short-Circuit Evaluation:**

**Use Case**: Fallback for Undefined or Null Values


Normal JavaScript:

```
const username = getUsernameFromAPI();
const displayName = username ? username : 'Anonymous';
```

Shorthand:

```
const username = getUsernameFromAPI();
const displayName = username || 'Anonymous';
```


## 5. Array Destructuring:

**Use Case**: Swapping Variables


Normal JavaScript:

```
let a = 5;
let b = 10;

const temp = a;
a = b;
b = temp;
```

Shorthand:

```
let a = 5;
let b = 10;

[a, b] = [b, a];
```


## 6. Template Literals:

**Use Case**: Dynamic String Concatenation


Normal JavaScript:

```
const name = 'Leandro';
const greeting = 'Hello, ' + name + '!';
```

Shorthand:

```
const name = 'Leandro';
const greeting = `Hello, ${name}!`;
```


**7. Arrow Functions:**

**Use Case:** Concise Function Definitions


Normal JavaScript:

```
function add(a, b) {
  return a + b;
}

```
Shorthand:

```
const add = (a, b) => a + b;
```


## 8. Nullish Coalescing Operator:

**Use Case**: Providing Default Values for Null or Undefined Variables


Normal JavaScript:

```
const fetchUserData = () => {
	return 'leandro' // change to null or undefined to see the behavior
};

const data = fetchUserData();
const username = data !== null && data !== undefined ? data : 'Guest';
```

Shorthand:

```
const fetchUserData = () => {
	return 'leandro' // change to null or undefined to see the behavior
};

const data = fetchUserData();
const username = data ?? 'Guest';
```


## 9. Object Destructuring:

**Use Case**: Extracting Object Properties into Variables


Normal JavaScript:

```
const user = {
  name: 'Cristain',
  age: 21,
  country: 'Bangladesh'
};

const name = user.name;
const age = user.age;
const country = user.country;
```

Shorthand:

```
const user = {
  name: 'Cristain',
  age: 21,
  country: 'Bangladesh'
};

const { name, age, country } = user;
```


## 10. Spread Operator:

**Use Case**: Merging Arrays or Objects


Normal JavaScript:

```
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const mergedArray = arr1.concat(arr2);
```

Shorthand:

```
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const mergedArray = [...arr1, ...arr2];
```


## 11. Logical OR Assignment:

**Use Case**: Assigning a Default Value to a Variable


Normal JavaScript:

```
let count;
if (!count) {
  count = 0;
}

```
Shorthand:

```
let count;
count ||= 0;
```


## 12. Short-Circuit Evaluation for Function Call:

**Use Case**: Avoiding Unnecessary Function Execution


Normal JavaScript:

```
function fetchData() {
  if (shouldFetchData) {
    return fetchDataFromAPI();
  } else {
    return null;
  }
}

```
Shorthand:

```
function fetchData() {
  return shouldFetchData && fetchDataFromAPI();
}
```

There you have it!


JavaScript shorthands continue to impress with their elegance and efficiency. Incorporate these concise examples into your codebase, and watch your JavaScript skills soar to new heights.


Happy coding and enjoy unleashing the power of JavaScript shorthands in your projects!