TWIL 2021-7 (4)

1. Double Not(!!)

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

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

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

• Boolean operator 대신 사용할 수 있다.

🔗 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).

• ?. 기호 왼쪽의 데이터가 undiefined 또는 null이면, ?. 이후의 표현을 읽지 않고 undefined를 리턴한다.

🔗 How To Safely Work With Nested Objects in JavaScript

3. CSS Flexbox란?

Flexbox가 기능을 말하는지, 프레임워크 같은 개념인지 정확한 정의가 궁금해서 찾아본 글. W3C CSS Flexbox(CSS Flexible Box Layout Module) 명세서 첫문단의 내용이다.

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 model에 대해 기술한다. flex layout model에서, flex 컨테이너 내의 자식 요소는 방향 배치가 자유롭고, 빈 공간을 채우기 위해 늘어나거나 부모 요소를 벗어나지 않도록 줄어드는 등 사이즈도 "유연하게" 맞춰진다. 자식 요소의 수직, 수평 정렬 또한 쉽게 맞출 수 있다.

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