Mastering JavaScript Shorthands
Tags: javascript, ecmascript, programming, beginners
Published: 2023-07-26 21:19:29

Hey there, fellow JavaScript enthusiasts! 

Leandro Nuñez, your trusty software engineer, is back with some JavaScript magic. 

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:**
```javascript
let isAdmin;
if (user.role === 'admin') {
  isAdmin = true;
} else {
  isAdmin = false;
}
```

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

**Shorterhand** thanks @jonrandy 
```javascript
const isAdmin = user.role === 'admin';
```

### 2. Object Property Shorthand:

**Use Case:** Creating Objects with Variables

**Normal JavaScript:**
```javascript
const name = 'Leandro';
const age = 30;

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

**Shorthand:**
```javascript
const name = 'Leandro';
const age = 30;

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

### 3. Default Parameter Values:

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

**Normal JavaScript:**
```javascript
function greet(name) {
  name = name || 'Guest';
  return `Hello, ${name}!`;
}
```

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

**Caution:** be careful with this one. Check out this comment by @efpage [here](https://dev.to/efpage/comment/2875h)

### 4. Short-Circuit Evaluation:

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

**Normal JavaScript:**
```javascript
const username = getUsernameFromAPI();
const displayName = username ? username : 'Anonymous';
```

**Shorthand:**
```javascript
const username = getUsernameFromAPI();
const displayName = username || 'Anonymous';
```

### 5. Array Destructuring:

**Use Case:** Swapping Variables

**Normal JavaScript:**
```javascript
let a = 5;
let b = 10;

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

**Shorthand:**
```javascript
let a = 5;
let b = 10;

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

### 6. Template Literals:

**Use Case:** Dynamic String Concatenation

**Normal JavaScript:**
```javascript
const name = 'Leandro';
const greeting = 'Hello, ' + name + '!';
```

**Shorthand:**
```javascript
const name = 'Leandro';
const greeting = `Hello, ${name}!`;
```

### 7. Arrow Functions:

**Use Case:** Concise Function Definitions

**Normal JavaScript:**
```javascript
function add(a, b) {
  return a + b;
}
```

**Shorthand:**
```javascript
const add = (a, b) => a + b;
```

### 8. Nullish Coalescing Operator:

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

**Normal JavaScript:**
```javascript
const data = fetchUserData();
const username = data !== null && data !== undefined ? data.username : 'Guest';
```

**Shorthand:**
```javascript
const data = fetchUserData();
const username = data ?? 'Guest';
```

### 9. Object Destructuring:

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

**Normal JavaScript:**
```javascript
const user = {
  name: 'Leandro',
  age: 30,
  country: 'USA'
};

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

**Shorthand:**
```javascript
const user = {
  name: 'Leandro',
  age: 30,
  country: 'USA'
};

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

### 10. Spread Operator:

**Use Case:** Merging Arrays or Objects

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

**Shorthand:**
```javascript
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:**
```javascript
let count;
if (!count) {
  count = 0;
}
```

**Shorthand:**
```javascript
let count;
count ||= 0;
```

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

**Use Case:** Avoiding Unnecessary Function Execution

**Normal JavaScript:**
```javascript
function fetchData() {
  if (shouldFetchData) {
    return fetchDataFromAPI();
  } else {
    return null;
  }
}
```

**Shorthand:**
```javascript
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! 🚀