2 0

Here We are gonna show you the Top 5 Advance JavaScript Concepts That Will Make You A Better Developer along with the Examples

Top 5 Advance JavaScript Concepts:

1. Currying
2. Composition
3. Closures
4. Coalescing
5. Reflect

1. Currying in JavaScript

Currying is a process in functional programming in which we can transform a function with multiple arguments into a sequence of nesting functions. It returns a new function that expects the next argument inline.

function addition(a) {
    return (b) => {
        return (c) => {
            return a + b + c;
        }
    }
}

console.log(addition(1)(2)(3)); //6

2. Composition

Composition is a technique where the result of one function is passed on to the next function, Which is passed on to the next function, and so on… Until the final function is executed and some result is computed. Function compositions can be composed of any number of functions.

The composition also helps split function into smaller reusable functions with a single responsibility.

let composition = function(f,g) {
    return function(x) {
        return f(g(x));
    }
}
let add = function(number) {
    return number + 50;
}
let multiply=function(number){
    return number * 50;
}
let answer = composition(multiply, add);

console.log(answer(5)); // 2750

3. Closures

A closure is a function that preserves access to variables and arguments (the scopes) of the outer function, even after the outer function has finished executing. Closures are useful for hiding implementation detail in JavaScript. In other words, it can be useful to create private variables or functions like so:

function counter() {
    let count = 0;

    function  increment() {
        return count += 1;
    }

    return increment;
}

const generateId = counter();

console.log(generateId()+ '\t' + generateId() + '\t' + generateId()+ '\t' + generateId()); //1 2 3 4

4. Coalescing

The nullish coalescing operator “??” is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand. The Nullish coalescing operator is handy when you want to use falsy values as default. Or simply when you treat the falsy values as valid ones.

//falsy values
const value = 0 ?? 100; //0
const value = false ?? true; //false

//default values
const value = null ?? 100; //100
const value = undefined ?? 100; //100

5. Reflect

Reflect is a global object that provides some useful methods for metaprogramming.

It is not a function nor it is constructible. Its only job is to provide static methods for reflection.

These methods are classified into two types.

• Introspection methods which are non-destructive methods
• Modification methods are destructive since they mutate the object or its behavior

Let us understand by example:

const person = {
    name: 'Akash'
    [Symbol('email')]:'akash@demo.com'
}

Reflect.get(person, 'name'); //Akash
Reflect.has(person, 'email'); //true
Reflect.has(person, 'phone'); //false
Reflect.getPrototypeof(person); //{ constructor ... }
Reflect.ownKeys(person); // name, Symbol(email)

Reflect.defineProperty(person, 'phone', { writable: true });
Reflect.has(person, 'phone'); //true
Reflect.set(person, 'phone', '1234567890');
Reflect.get(person, 'phone'); //1234567890

Reflect.deleteProperty(person, 'phone');
Reflect.has(person, 'phone'); //false

Also Read: Useful Libraries to use in your next ReactJs project

Happy

1 100 %

Sad

0 0 %

Excited

0 0 %

Sleepy

0 0 %

Angry

0 0 %

Surprise

0 0 %

Akash Kothari

I am passionate about my work. Because I love what I do, I have a steady source of motivation that drives me to do my best. In my last job, this passion led me to challenge myself daily and learn new skills that helped me to do better work

www.techdevil.in