JavaScript Shorthand Techniques — Ultimate Cheat-Sheet

You can learn a lot from this collection, so check it out✨

JavaScript Shorthand Techniques — Ultimate Cheat-Sheet

JavaScript shorthand techniques are concise ways to write code that can simplify and streamline your programming tasks. Here are some common shorthand techniques with examples:

1. Ternary Operator (Conditional Operator):

The Ternary Operator, also known as the Conditional Operator, is a shorthand way of writing an if-else statement in some programming languages. It takes three operands: a condition to be evaluated, a value to be returned if the condition is true, and a value to be returned if the condition is false.

Example:

// Longhand if-else statement
let age = 20;
let message;

if (age >= 18) {
  message = 'You are an adult.';
} else {
  message = 'You are a minor.';
}

// Shorthand ternary operator
let age = 20;
let message = (age >= 18) ? 'You are an adult.' : 'You are a minor.';
console.log(message);

2. Short-circuit Evaluation:

Short-circuit evaluation takes advantage of the logical operators && (AND) and || (OR) to evaluate conditions more concisely.

Example:

// Longhand if statement
if (array && array.length > 0) {
  // Do something with the array
}

// Shorthand short-circuit evaluation
array && array.length > 0 && doSomething(array);

3. Default Parameter Values:

A default parameter value is a value that is used when a function is called without passing a value for a specific parameter.

Default parameter values were introduced in ECMAScript 2015 (ES6) and are a convenient way to avoid errors when a function is called with missing or undefined arguments.

Example:

// Longhand default parameter values
function greet(name) {
  name = name || 'Guest';
  console.log('Hello, ' + name + '!');
}

// Shorthand default parameter values
function greet(name = 'Guest') {
  console.log('Hello, ' + name + '!');
}

greet(); // Output: Hello, Guest!
greet('Lokesh'); // Output: Hello, Lokesh!

4. Object Property Shorthand:

When creating objects, we can use shorthand notation to assign variables as object properties with the same name.

Example:

// Longhand object property assignment
let name = 'Lokesh';
let age = 30;

let person = {
  name: name,
  age: age
};

// Shorthand object property assignment
let name = 'Lokesh';
let age = 30;

let person = {
  name,
  age
};

5. Destructuring Assignment:

Destructuring assignment is a feature introduced in JavaScript ES6 (ECMAScript 2015) that allows you to extract values from arrays or properties from objects and assign them to variables in a more concise and convenient way. It simplifies the process of extracting data from complex structures, making your code more readable and expressive.

Destructuring assignment syntax uses a set of curly braces {} for objects and square brackets [] for arrays. Let's explore how it works in different scenarios:

Example:

// Longhand array destructuring assignment
let numbers = [1, 2, 3];
let a = numbers[0];
let b = numbers[1];
let c = numbers[2];

// Shorthand array destructuring assignment
let numbers = [1, 2, 3];
let [a, b, c] = numbers;

// Longhand object destructuring assignment
let person = { name: 'John', age: 30 };
let name = person.name;
let age = person.age;

// Shorthand object destructuring assignment
let person = { name: 'John', age: 30 };
let { name, age } = person;

6. Arrow Functions:

Arrow functions provide a concise syntax for writing function expressions. They are especially useful for writing shorter and more readable callback functions.

// Longhand function expression
let add = function(a, b) {
  return a + b;
};

// Shorthand arrow function
let add = (a, b) => a + b;

7. Template Literals:

Template literals are a shorthand way to concatenate strings and embed expressions within backticks (`) instead of using concatenation operators or string interpolation.

Example:

// Longhand string concatenation
let name = 'Lokesh';
let greeting = 'Hello, ' + name + '!';

// Shorthand template literal
let name = 'Lokesh';
let greeting = `Hello, ${name}!`;

8. Array Methods (map, filter, reduce):

JavaScript provides array methods like map(), filter(), and reduce() that allow you to perform common operations on arrays in a concise and expressive manner.

Example:

let numbers = [1, 2, 3, 4, 5];

// Longhand map
let doubled = numbers.map(function(num) {
  return num * 2;
});

// Shorthand map with arrow function
let doubled = numbers.map(num => num * 2);

// Longhand filter
let evens = numbers.filter(function(num) {
  return num % 2 === 0;
});

// Shorthand filter with arrow function
let evens = numbers.filter(num => num % 2 === 0);

// Longhand reduce
let sum = numbers.reduce(function(acc, num) {
  return acc + num;
}, 0);

// Shorthand reduce with arrow function
let sum = numbers.reduce((acc, num) => acc + num, 0);

Mastering CSS: Unveiling Hidden Tips and Tricks with Practical Examples

10+ Killer JavaScript One Liners 🔥

✍ JavaScript concepts that every developer should know 🦾

Thank You For Reading This Post

Thank you for your unwavering support and engagement. Your presence and contributions mean the world to us. We value your feedback and appreciate the time you spend with us. You inspire us to improve and create a better experience. We are grateful to have you as part of our community.