Top 10 Features of JavaScript

// Destructuring an array
const numbers = [1, 2, 3, 4];
const [a, b, ...rest] = numbers;
console.log(a); // Output: 1
console.log(b); // Output: 2
console.log(rest); // Output: [3, 4]

// Destructuring an object
const person = { name: 'John', age: 30, city: 'New York' };
const { name: username, age } = person;
console.log(username); // Output: John
console.log(age); // Output: 30

// Spread elements of an array
const oddNumbers = [1, 3, 5];
const evenNumbers = [2, 4, 6];
const combinedNumbers = [...oddNumbers, ...evenNumbers];
console.log(combinedNumbers); // Output: [1, 3, 5, 2, 4, 6]

// Copying an object with spread syntax
const originalBookObject = { tite: 'Learn JavaScript', price: 12.8 };
const copiedBookObject = { ...originalBookObject };
console.log(copiedBookObject); // Output: {tite: "Learn JavaScript", price: 12.8}

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

// Arrow function
const add = (a, b) => a + b;

// Using Promises
function fetchData() {
  return new Promise((resolve, reject) => {
    // Asynchronous operation (e.g., fetching data from an API)
    setTimeout(() => {
      const data = { name: 'John Doe', age: 25};
      resolve(data);
    }, 2000);
  });
}

fetchData()
  .then((data) => {
    console.log(data); // Output: { name: 'John Doe', age: 25 }
  })
  .catch((error) => {
    console.error(error);
  });

Promise() methods are difficult to understand when they are nested. Let's see how to rewrite this code using async/await.

// Using Async/Await
async function fetchData() {
  // Simulating an API call with a delay
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

try {
  const result = await fetchData();
  console.log(result);
} catch (error) {
  console.error(error);
}

5. Map(), Filter(), and Reduce()

These array methods are essential for data manipulation and transformation, helping you write more concise and expressive code.

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

// Using map to double each number
const doubledNumbers = numbers.map((num) => num * 2);
console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]

// Using filter to get even numbers
const evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]

// Using reduce to calculate the sum of numbers
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 15

6. Template Literals

Template literals allow for more readable and flexible string formatting by embedding expressions directly within backticks (`). They support multi-line strings and string interpolation.

const name = 'John Doe';
const age = 25;

// Using template literals for string interpolation
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting);
// Output: "Hello, my name is John Doe and I am 25 years old."

7. Object-oriented Programming (OOP) with Classes

Classes in JavaScript provide a way to create reusable blueprints for objects, enabling object-oriented programming.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const person = new Person('John Doe', 25);
person.sayHello();
// Output: "Hello, my name is John Doe and I am 25 years old."

8. Modules

ES6 introduced the concept of modules, which allows you to organize your code into separate files and import/export functionality. Understanding JavaScript modules is very important before you are going to start learning Angular and React.

// math.js (module)
export function add(a, b) {
  return a + b;
}

// main.js
import { add } from './math.js';
console.log(add(2, 3)); // Output: 5

9. ES6 Array Methods

ES6 introduced various JavaScript Array Methods, making common array operations more straightforward and concise.

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

// Using find to get the first even number using JaaScript modulus (%) operator
const evenNumber = numbers.find((num) => num % 2 === 0);
console.log(evenNumber); // Output: 2

// Using some to check if there's at least one even number
const hasEvenNumber = numbers.some((num) => num % 2 === 0);
console.log(hasEvenNumber); // Output: true

10. Error Handling with Try...Catch

Try...Catch blocks help you gracefully handle errors and prevent application crashes.

function divide(a, b) {
  try {
    if (b === 0) {
      throw new Error('Division by zero is not allowed.');
    }
    return a / b;
  } catch (error) {
    console.error(error.message);
    return null;
  }
}

console.log(divide(10, 2)); // Output: 5
console.log(divide(5, 0)); // Output: "Division by zero is not allowed."

Conclusion

In this blog post, we covered ten useful JavaScript techniques that can enhance your coding abilities. You learned how to use destructuring assignments, spread syntax, arrow functions, and how to handle asynchronous operations with Promises and Async/Await. You also learned how to use map, filter, and reduce for effective data manipulation and how to use template literals for more readable strings.

Additionally, we delved into Object-Oriented Programming (OOP) with Classes, learned how to organize our code with modules, and used ES6 array methods for easier array operations. And lastly, we learned how to use try...catch blocks for essential error handling and to keep our applications robust and error-free.

As you continue your JavaScript journey, remember that knowledge is most powerful when shared. Use these techniques and apply them confidently in your projects. The more you practice, the more proficient you'll become, and soon you'll be able to write maintainable and efficient code with ease.