Conditionally rendering in React with ternary operator

Nguyen Trong Duc Luong — Fri, 28 Aug 2020 03:58:36 +0000

This is a common technique when you want to render one out of two components based on a condition (for example when a state or a prop changes). If you have multiple conditions i advise you to use switch.

In the below example, you can change the greeting text by clicking the button which will change the state of buttonClicked.

Link to the live demo

What are immediately invoked function expressions (IIFEs) ?

Nguyen Trong Duc Luong — Wed, 19 Aug 2020 09:26:44 +0000

In Javascript it is possible for a function to call itself when it is defined. This technique is called immediately invoked function expression (abbreviated IIFE), though it sounds like the definition of recursion but its main purpose is to encapsulate modules (this was a popular technique before ES6).

See the below example to have a better understanding

var counter = (function () {
  var num = 0;

  function increaseNumber() {
    num++;
  }

  function decreaseNumber() {
    num--;
  }

  return {
    getNum: function () {
      return num;
    },

    inc: increaseNumber,
    dec: decreaseNumber,
  };
})();

// the inital value of num is 0
console.log(counter.getNum());

counter.inc(); // num is 1
counter.inc(); // num is 2
counter.inc(); // num is 3

// this technique gives you the ability to hide 
// state inside the function closure
console.log(counter.getNum());

Reference book:
Programming Javascript applications of Eric Elliot

Forem: Nguyen Trong Duc Luong

Conditionally rendering in React with ternary operator

What are immediately invoked function expressions (IIFEs) ?