5 frequently used Javascript concepts

This article discusses various key JavaScript concepts and provides code examples to illustrate how to use them :

Object Destructuring:

Object destructuring is a technique to extract values from objects succinctly. All we are doing here is instead of using the dot notation we are using {} to access object properties. Here's an example:


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

In the example above, we extract the name, age, and city properties from the person object using object destructuring.

// Function using object destructuring
function feedAnimal({ type, name, food }) {
  return `${name} the ${type} likes to eat ${food}.`;
}

const animal = { type: 'dog', name: 'Max', food: 'bones' };
console.log(feedAnimal(animal));

In the provided code, the feedAnimal function takes an object as an argument. When the function is called with the animal object, object destructuring automatically extracts the type, name, and food properties from the animal object and assigns them to variables within the function scope.

Template Literals:

Template literals allow for more readable and maintainable string concatenation. Here's an example:

const animal = { type: 'cat', name: 'Whiskers', age: 3 };

// String interpolation using template literals
const message = `My ${animal.type} ${animal.name} is ${animal.age} years old.`;
console.log(message);

Spread Syntax:

The spread syntax is used to spread elements from arrays or objects into other arrays or objects. Here are examples of arrays and objects:

// Spreading elements from arrays
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinedArray = [...arr1, ...arr2];
console.log(combinedArray);

// Spreading properties from objects
const obj1 = { name: 'John' };
const obj2 = { age: 25 };
const mergedObject = { ...obj1, ...obj2 };
console.log(mergedObject);

Async/Await:

Async/await simplifies asynchronous code by allowing the use of a synchronous-like syntax. Here's an example:

// Asynchronous function
function getRandomNumber() {
  return new Promise((resolve) => {
    setTimeout(() => {
      const randomNumber = Math.floor(Math.random() * 100);
      resolve(randomNumber);
    }, 1000);
  });
}

// Async/await usage
async function fetchRandomNumbers() {
  const number1 = await getRandomNumber();
  const number2 = await getRandomNumber();
  const number3 = await getRandomNumber();

  const sum = number1 + number2 + number3;
  console.log('Sum:', sum);
}

fetchRandomNumbers();

Debugging JavaScript with console.log():

Consider a case where you have 3 objects and you want to console.log to see the results, a simple console.log won't tell you which object output you are viewing. Here's an example of how you can use console.log() in the case of more than one object:

const obj1 = { name: 'John' };
const obj2 = { age: 25 };
const obj3 = { job: 'Developer' };

// Logging objects using computed property names
console.log({ obj1, obj2, obj3 });

// Adding custom CSS styling to console.log()
console.log('%c Important data', 'color: orange; font-weight: bold', obj1);