Detailed explanation of the advanced concepts and usage of JavaScript

The JavaScript language continues to release some new features, and it feels like it is going to be at the pace of heaven. This article has collected and compiled some of its advanced concepts and usages to see if you understand them all? Is it more elegant to write code like this?

1. Closure

Closures are an important technique in Javascript, and internal functions can always access variables and parameters of their external functions, even after the external function returns. We use closures to protect data that we do not want to expose to external scopes.

//
&lt;button onclick=”increaseCounter()”&gt;Increase Counter&lt;/button&gt;
//1. Global variables, variables will be modified unexpectedlylet counter = 0;
function increaseCounter() {
  counter++;
}
//2. Local variables, reset to 0 every time you callfunction increaseCounter() {
  let counter = 0;
  counter++;
}
//3. Closure function, meets the requirementsconst increaseCounter = (function() {
  let counter = 0;
 
  return function() {
    counter = counter + 1;
    (counter);
  };
})();

2. Function binding

When the context is lost, this will not be determined and can be solved by function binding.

// 1. Not consistent with expectations, get undefinedlet book = {
  title: ‘Learn JavaScript',
  printTitle() {
    (`Book's title: ${}`);
  }
}
setTimeout(, 1000); // Book's title: undefined

// 2. Use function binding to meet expectationslet book = {
  title: ‘Learn JavaScript',
  printTitle() {
    (`Book's title: ${}`);
  }
}
let printTitle = (book);
setTimeout(printTitle, 1000); // Book's title: JavaScript

3. Use namespace

Using namespaces can prevent code conflicts.

// 1. The move and jump functions need to be called through () in the animal namespacelet animal = {
  move: () =&gt; {
    (‘Move!');
  },
  jump: () =&gt; {
    (‘Jump!');
  }
};

// 2. In real projects, namespaces may be used as followsif (typeof APP === "undefined") {
  APP = {};
   = {};
}
 = () =&gt; {
  (‘Move');
};
 = () =&gt; {
  (‘Jump');
};
(); // Move
(); // Jump

4. Determine whether the attribute exists

Use the in keyword to determine whether there is a certain attribute in the object.

const person = {
  id: "123",
  name: "Zhang San"
}
("id" in person) //true
("age" in person) //false

5. Deconstruction and assignment

Using deconstructed assignment expressions, properties and values can be taken from objects and arrays and assigned to other variables, which is very convenient.

const { address: addressLine } = { address: "No. 20 Chang'an Street", postcode: "518118" };
(addressLine); // No. 20 Chang'an Streetconst [first, second] = [1, 2, 3, 4]
(first, second) // 1 2
//Dynamic deconstructionconst extractKey = "postcode"
const { [extractKey]: youbian } = { address: "No. 20 Chang'an Street", postcode: "518118" };
(youbian) //518118

6. Iterate over object properties

Use properties and values that can traverse the object.

const data = { address: "No. 20 Chang'an Street", postcode: "518118" };
(data).forEach(([key,value]) =&gt; {
  if (["address", "postcode"].includes(key)) {
    ('key:', key , 'value:', value)
  }
})
//The output result is as followskey: address value: Chang'an Street20Number
key: postcode value: 518118

7. Filter the array

Use the filter and some of the array to filter the array.

const fruits = ["apple", null, "mongo", undefined, ""]
const filted = (Boolean)
(filted) //(2) ["apple", "mongo"]
const any = (Boolean)
(any) //true

8. Eliminate duplicate values

const fruits = ["apple", null, "mongo", "apple", ""]
const uniqued = [...new Set(fruits)]
(uniqued) //(4) ["apple", null, "mongo", ""]

9. Determine whether an array is

Utilize, not typeof judgment.

const fruits = ["apple", null, "mongo", "apple", ""]
(typeof fruits) //object
((fruits)) //true

10. Convert numbers and strings

const text = "12345"
("text:", +text, "typeof:", typeof(+text)) //text:12345 typeof:number
const num = 123456
("number:", num+"", "typeof:", typeof(num+"")) //number:123456 typeof:string

11. Convert to boolean

Use the !! operator to convert other types to Boolean types.

(!!null, typeof(!!null)) //false, boolean
(!!"", typeof(!!"")) //false, boolean
(!!undefined, typeof(!!undefined)) //false, boolean
(!!null, typeof(!!null)) //false, boolean
(!!true, typeof(!!true)) //true, boolean
(!!false, typeof(!!false)) //false, boolean
(!!{id:"", name:""}, typeof(!!{id:"", name:""})) //true, boolean

12. Optional link

Optional chain ?. is a safe way to access nested object properties, avoiding throwing exceptions when an object or property is unavailable. Since JavaScript is not a typed language, this feature is still very useful.

//No optional link is used, an exception will be thrownconst contactInfos = { address: "No. 20 Chang'an Street" };
()
// The above statement will report an error: Cannot read properties of undefined (reading 'phoneNumber')//Use optional link to print undefinedconst contactInfos = { address: "No. 20 Chang'an Street" };
(?.phoneNumber) // undefined

13. Merge operator

The merge operator is written as two question marks. For the two parameters connected by this operator, if the first parameter is not null or undefined, the first parameter is returned, otherwise the second parameter is returned.

const contactInfos = { address: "No. 20 Chang'an Street" };
(?.phoneNumber ?? "") // ""
const contactInfos = { address: "No. 20 Chang'an Street", addressNumber: 0 };
( || undefined) // undefined
( ?? undefined) // 0

14. Add properties conditionally

Using the...extended syntax, you can add a property to an object only if a condition is true.

const moreInfos = { info: "Please drive there." }
return {
  address: "No. 20 Chang'an Street",
  postcode: "518118",
  ...(moreInfos !== undefined &amp;&amp; { moreInfos }) //Add moreInfos attribute only if moreInfos is not undefined}

15. Asynchronous call exception capture

The following writing method makes the code for handling asynchronous call exceptions simpler.

const results = await getPosts().catch((err) => {
  return {
    type: "error",
    message: 
  }
});
(results) // { type: "error", message: "cannot get posts from this endpoint" }

16. Weak reference Map

Weakmap is different from Map. Its key must be a reference object, not a basic type. If no reference is made to the key object, the object will be removed from the map and memory.

const videoSegments = new WeakMap()
let options = { id: "1234", timeStart: 1653831957378, size: 10000 }
const segment = { data: new Uint8Array(200) }
(options, segment)
((options)) // { data: new Uint8Array(200) }
//The following object will be removed and recycled when options are assigned to nulloptions = null
((options)) // false, the `options` key object is deleted from the WeakMap

17. Reflection

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

const person = { 
  name: 'Bob', 
  [Symbol('email')]: 'bob@' 
};
(person, 'name'); // = Bob
(person, 'email'); // = true
(person, 'phone'); // = false
(person); // = { constructor ... }
( person, 'name'); // = { value: 'Bob', writable: true, enumerable: true, configurable: true }
(person); // name, Symbol(email)
(person, 'phone', { writable: true });
(person, 'phone'); // = true
(person, 'phone', '123456789');
(person, 'phone');
(person, 'phone'); // = false

18. Curry

Currying is a higher-order technique about functions, which refers to converting a function from callable f(a, b, c) to callable f(a)(b)(c). Curry does not call functions, it just converts functions.

// Complete bank transfer transaction function, balance + transfer amount - feeconst transaction = (fee, balance, amount) =&gt; (
  balance + amout - fee;
);
// Simple Curry function implementedconst curry = (fn, ...args) =&gt; (
  (..._arg) =&gt; (
    fn(...args, ..._arg)
  )
);
// Free transaction fee function that reused transaction functionconst freeTransaction = curry(transaction, 0);
freeTransaction(10, 90); // = 100

19. Combination

Combination is a technique in which the result of one function is passed to the next function, the function is passed to the next function, and so on... until the final function is executed and some results are calculated. Function combinations can be composed of any number of functions.

//f and g are functions, x is the value transferred between them through a "pipeline"var compose = function(f,g) {
  return function(x) {
    return f(g(x));
  };
};
var toUpperCase = function(x) { return (); };
var exclaim = function(x) { return x + '!'; };
var shout = compose(exclaim, toUpperCase);
shout("send in the clowns"); //=&gt; "SEND IN THE CLOWNS!"

// Combination functionsconst compose = (...fns) =&gt; x =&gt; ((y, f) =&gt; f(y), x); 
// Original functionconst addFee = amount =&gt; amount + 2;
const addDiscount = amount =&gt; amount - 5;
// Function combinationconst composition = compose(addFee, addDiscount)(100);
(composition) //97

This is the end of this article about the advanced concepts and usage of JavaScript. For more related content on advanced usage of js, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!