10 Hidden JavaScript Concepts: Every Developer Should Know

Introduction

JavaScript is one of the most widely used programming languages in the world today. It is a powerful language that is capable of creating dynamic and interactive web applications. Although JavaScript has been around for many years, there are still hidden concepts that many developers may not be aware of. In this article, we will be discussing 10 hidden JavaScript concepts that every developer should know.

Currying

Currying is a functional programming concept that involves transforming a function that takes multiple arguments into a series of functions that each take a single argument. This makes it possible to create more specialized functions from a general function.

Here is an example of how currying works:

function add(x) {
  return function(y) {
    return x + y;
  }
}

var addFive = add(5);
console.log(addFive(3)); // Output: 8

In this example, the add function takes a single argument x, and returns another function that takes a single argument y. The returned function adds x and y and returns the result. The addFive variable is assigned the result of calling add with argument 5. addFive is now a function that takes a single argument y and adds 5 to it. When addFive is called with argument 3, it outputs the result 8.

Memoization

Memoization is a technique for caching the results of expensive function calls and returning the cached result when the same inputs occur again. This can greatly improve the performance of functions that are called frequently with the same arguments.

Here is an example of how memoization works:

function memoize(func) {

var cache = {}; return function() { var args = JSON.stringify(arguments); if (cache[args]) { return cache[args]; } else { var result = func.apply(this, arguments); cache[args] = result; return result; } }; } function fibonacci(n) { if (n === 0 || n === 1) { return n; } else { return fibonacci(n - 1) + fibonacci(n - 2); } } var memoizedFibonacci = memoize(fibonacci); console.log(memoizedFibonacci(10)); // Output: 55

In this example, the memoize function takes a function func as an argument and returns another function that caches the results of func. The cache variable is used to store the results of previous calls to func. The JSON.stringify function is used to convert the arguments of the function call into a string that can be used as a key in the cache object. If the cached result is available, it is returned directly. Otherwise, the func is called with the arguments and the result is stored in the cache object before returning it.

The fibonacci function is a classic example of a function that can benefit from memoization. It calculates the nth number in the Fibonacci sequence recursively by adding the two previous numbers in the sequence. The memoizedFibonacci variable is assigned the result of calling memoize with the fibonacci function as an argument. When memoizedFibonacci is called with the argument 10, it outputs the result 55.

Prototypal Inheritance

Prototypal inheritance is a fundamental concept in JavaScript that allows objects to inherit properties and methods from other objects. Every object in JavaScript has a prototype object, which is another object from which the current object inherits properties and methods.

Here is an example of how prototypal inheritance works:

var person = {
  name: 'John Doe',
  sayName: function() {
    console.log(this.name);
  }
};

var student = Object.create(person);
student.name = 'Jane Doe';

student.sayName(); // Output: Jane Doe

In this example, the person object has a name property and a sayName method. The student object is created using the Object.create method with the person object as its prototype. This means that the student object inherits the name property and the sayName method from the person object. However, the name property of the student object is overridden with the value ‘Jane Doe’. When student.sayName() is called, it outputs the value of the name property of the student object, which is ‘Jane Doe’.

Function Binding

Function binding is a technique for creating a new function that has a fixed this value. This can be useful in situations where you need to pass a method as a callback function and you want to ensure that the this value is set correctly.

Here is an example of how function binding works:

var person = {
  name: 'John Doe',
  sayName: function() {
    console.log(this.name);
  }
};

var boundSayName = person.sayName.bind(person);
boundSayName(); // Output: John Doe

In this example, the person object has a sayName method that outputs the name property of the object. The bind method is called on the sayName method with the person object as its argument. This creates a new function boundSayName that has a fixed this value of the person object. When boundSayName is called, it outputs the name property of the person object, which is ‘John Doe’.

Promises in JavaScript Concepts

Promises are a powerful concept in JavaScript that can be used to handle asynchronous operations. A promise represents the eventual completion or failure of an asynchronous operation and can be used to chain multiple asynchronous operations together.

Here is an example of how promises work:

function fetchData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      var data = 'Some data';
      if (data) {
        resolve(data);
      } else {
        reject('Error: No data');
      }
    }, 1000);
  });
}

fetchData().then(function(data) {
  console.log(data);
}).catch(function(error) {
  console.error(error);
});

In this example, the fetchData function returns a new Promise object. This object represents the eventual completion or failure of the asynchronous operation. The Promise constructor takes a callback function with two arguments: resolve and reject. The resolve function is called with the data when the asynchronous operation is successful, and the reject function is called with an error message when the asynchronous operation fails.

The fetchData function uses the setTimeout function to simulate an asynchronous operation that takes 1 second to complete. If the operation is successful, the resolve function is called with the string ‘Some data’. If the operation fails, the reject function is called with the error message ‘Error: No data’.

The then method is called on the Promise object returned by fetchData. This method takes a callback function that is called when the asynchronous operation is successful. In this example, the callback function simply outputs the data to the console.

The catch method is called on the Promise object returned by fetchData. This method takes a callback function that is called when the asynchronous operation fails. In this example, the callback function simply outputs the error message to the console.

Higher-Order Functions

In JavaScript, functions are first-class objects. This means that they can be passed as arguments to other functions and returned as values from functions. Functions that take other functions as arguments or return functions as values are called higher-order functions.

Here is an example of a higher-order function that takes a function f and applies it n times:

function repeat(f, n) {
  for (var i = 0; i < n; i++) {
    f(i);
  }
}

function printNumber(n) {
  console.log(n);
}

repeat(printNumber, 5);

In this example, the repeat function takes a function f and a number n. It then calls the function f n times, passing in the current iteration index as an argument. The printNumber function simply outputs its argument to the console. The repeat function is called with printNumber and 5 as arguments, which outputs the numbers 0 to 4 to the console.

Higher-order functions can be used to implement various functional programming patterns such as mapping, filtering, and reducing.

Function Composition

Function composition is the process of combining two or more functions to produce a new function. This can be useful in situations where you need to apply a series of transformations to some data.

Here is an example of function composition:

function compose(f, g) {
  return function(x) {
    return f(g(x));
  };
}

function addOne(x) {
  return x + 1;
}

function double(x) {
  return x * 2;
}

var addOneAndDouble = compose(double, addOne);
var result = addOneAndDouble(5); // Output: 12

In this example, the compose function takes two functions f and g. It returns a new function that applies g to its argument and then applies f to the result. The addOne and double functions simply add 1 to their argument and double their argument, respectively. The addOneAndDouble variable is assigned to the result of composing double and addOne. When addOneAndDouble is called with 5 as an argument, it first applies addOne to 5, which produces 6. It then applies double to 6, which produces 12.

Function composition can be used to create complex functions from smaller, reusable functions. It is a fundamental concept in functional programming.

Async/Await in JavaScript Concepts

Async/await is a way to write asynchronous code in a synchronous style. It is built on top of promises and makes it easier to write and reason about asynchronous code. The async keyword is used to define a function that returns a promise, and the await keyword is used to wait for a promise to resolve before continuing execution.

Here is an example of a simple async/await function:

function wait(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function hello() {
  await wait(1000);
  console.log("Hello, world!");
}

hello();

In this example, the wait function returns a promise that resolves after a given number of milliseconds. The hello function is defined as an async function that waits for the wait promise to resolve before continuing execution. After waiting for 1 second, the function outputs “Hello, world!” to the console.

Async/await can make asynchronous code easier to write and understand. It allows developers to write asynchronous code in a similar style to synchronous code.

RDX infotech

Hoisting in JavaScript Concepts

Hoisting is a term used to describe how JavaScript variables and functions are treated during runtime. In JavaScript, variable and function declarations are moved to the top of their respective scopes during compilation. This means that variables and functions can be used before they are declared.

Here is an example of hoisting:

console.log(myVariable); // Output: undefined
var myVariable = "Hello, world!";

In this example, the myVariable variable is declared after it is used in the console.log statement. However, since variable declarations are hoisted to the top of their scope, the variable is defined as undefined before the assignment statement.

Hoisting can lead to unexpected behavior if developers are not aware of how it works. It is generally recommended to declare all variables and functions at the top of their respective scopes to avoid hoisting-related bugs.

Spread Syntax in JavaScript Concepts

This is a way to spread the elements of an array or an object into a new array or object. Spread syntax is defined using the spread operator (…).

Spread syntax can be used to concatenate arrays, copy arrays, and add elements to arrays.

Here is an example of spread syntax used to concatenate arrays:

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const newArray = [...array1, ...array2];

console.log(newArray); // Output: [1, 2, 3, 4, 5, 6]

In this example, the spread operator is used to spread the elements of array1 and array2 into a new array called newArray. The resulting array contains all the elements from both arrays.

Here is an example of spread syntax used to copy an array:

const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];

console.log(copiedArray); // Output: [1, 2, 3]

In this example, the spread operator is used to spread the elements of originalArray into a new array called copiedArray. Since the elements are copied into a new array, any modifications made to copiedArray will not affect originalArray.

Here is an example of spread syntax used to add elements to an array:

const originalArray = [1, 2, 3];
const newArray = [...originalArray, 4, 5];

console.log(newArray); // Output: [1, 2, 3, 4, 5]

In this example, the spread operator is used to spread the elements of an originalArray into a new array called newArray, and the values 4 and 5 are added to the end of the array.

Spread syntax can also be used with objects to spread their properties into a new object.

const object1 = { name: "John", age: 30 };
const object2 = { city: "New York", country: "USA" };
const newObject = { ...object1, ...object2 };

console.log(newObject); // Output: { name: "John", age: 30, city: "New York", country: "USA" }

In this example, the spread operator is used to spread the properties of object1 and object2 into a new object called newObject. The resulting object contains all the properties of both objects.

Spread syntax is a powerful feature of JavaScript that can simplify the syntax of code and make it more readable. It is commonly used in modern JavaScript frameworks and libraries.