TWIL 2021-7 (4)

1. Double Not(!!)

const state1 = "";
const state2 = "X";

!!state1 // false
!!state2 // true

Boolean(state1) // false
Boolean(state2) // true

Booleanオペレータの代わりに使用できます.

🔗 What is the Double bang (!!) operator in JavaScript?

2. Optional chaning(?.)

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// expected output: undefined

console.log(adventurer.someNonExistentMethod?.());
// expected output: undefined

The ?. causes the expression to short-circuit (i.e. if the data to the left of ?. is undefined or null, it returns undefined and doesn’t evaluate the expression further).

?. シンボルの左側のデータが未定義またはnullの場合?後続の式を読み込まずにundefinedを返します.

🔗 How To Safely Work With Nested Objects in JavaScript

CSS Flexboxとは?

Flexboxとは機能なのか、フレームワークなのかといった概念なのか、正確な定義を知りたいので探した文章です.W 3 C CSS Flexbox(CSS Flexible Boxモジュール)リストの第1段の内容.
The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated.

この詳細は、ユーザインタフェース設計において最適化されたCSS boxモデルを記述する.flex layoutモデルでは、flexコンテナ内のサブエレメントを自由に指向して配置したり、空きスペースを埋めるために伸ばしたり縮小したりして、親エレメントなどの寸法から離れずに「柔軟に」位置合わせすることができます.サブエレメントの垂直方向と水平方向の位置合わせも簡単です.

🔗 Flexbox is a framework?
🔗 CSS Flexible Box Layout Module Level1