Logical AND, OR, Ternary, Nullish Operators

youhoc

Pages
- Home
- Modern App Guidelines
- Linux
  Day 1: Linux Distributions & Navigation
  Day 2: User Management
  Day 3: File Permission & Ownership
  Day 4: Package Management
  Day 5: Services Management
- Javascript
  JS The Weird Part
  Execution Context
  Types & Operators
  Objects & Functions
  Error Handling & Strict Mode
  Typescript, ES6, Tra
  Modern JS
  JS in the Browser
  Data Storage JSON
  Modern JS
  Advanced Objects & Methods
  Webpack & Babel
  Async
  jQuery
  In-depth Analysis of jQuery
  React-ready JS
  Arrow Function
  Template Literals
  Logical AND, OR, Ternary, Nullish Operators
  Destructuring & Rest Operator
  Array Method
  Immutability and Spread Operator
  Promises, Async/Await, Callback
- PHP
  gruntJS
  composer
  MySQL
- Docker
  Container Basics
  Container Networking
  Container Image
  Container Volume & Persistent Data
  Dockerfile
  Docker Compose
  Docker Registry
- Node.js
  1. Installing & Exploring
  2. Core Modules
  3. Get User Input
  File System & Input Arguments
  5. Express Web Server
  6. Deploy to Heroku & Github
  Authentication
  7. Databases
  8. Rest API
- ReactJS
  React from Andrew
  Summary from Next
  1. Basics
  2. React Components
  3. Webpack
  4. Styling with SCSS
  5. React Router
  6. React Hook
  Modern React From The Beginning
  Intro to JSX
  Vite Build Tools
  Basic Component Creation
  Component State
  Props & Component Composition
  useState with Inputs & Form Submission
  useEffect, useRef & Local Storage
  Async / Await and Http Request in React
  React Router: Declarative Mode
  ContextAPI
  React Router: Framework Mode
  File-routing & HTML Layouts
  Server-side Data Query
  Links & Navigation
  Loaders
- Typescript
  Type User vs UserProp
- Payload CMS

...

Đều là xử lý “Conditional Rendering” ngắn gọn, đặc biệt là cho các UI Component dựa trên "Status" (in progress / completed, loggedin / register...)

Tenary Operator: viết ngắn gọn điều kiện IF, xử lý cả TRUE lẫn FALSE

Logical AND Operator (Short Circuit Rendering): giống IF nhưng không ELSE, chỉ xử lý TRUE, lấy giá trị sau &&

Optional Chaining: không xử lý gì cả, chỉ đơn giản là kiểm tra an toàn xem một prop có tồn tại trong object không, nếu không thì trả lại undefined

Nullish Coalescing Operator: chỉ trả lại giá trị ở bên phải khi bên trái là null hoặc undefined

Logical OR Operator: lấy giá trị TRUTHY đầu tiên

Ternary Operator

The ternary operator (?) is a concise way to write an `if` statement in JavaScript.

It's used a lot in React because it allows you to write conditional logic in a single line.

React components return JSX, and you can't use long form `if` statements inside JSX.

Ví dụ thực tế:

⁠

Logical AND Operator (Short Circuit Rendering)

Short-circuit rendering is another way to conditionally render components in React. It's based on the concept of short-circuit evaluation in JavaScript.

In short-circuit evaluation, the second operand is only evaluated if the first operand is not falsy.

We us it in React as sort of a ternary operator without the else part.

⁠

Optional Chaining

Optional chaining (`?.`) is a modern operator in JavaScript that allows you to safely access nested properties of an object without having to explicitly check if each property exists.

It short-circuits the evaluation if a property is `null` or `undefined` and returns `undefined` instead of throwing an error.

⁠

Nullish Coalescing Operator

The nullish coalescing operator (`??`) is a modern operator in JavaScript that provides a way to handle default values for `null` or `undefined` values.

It's similar to the logical OR (`||`) operator, but it only returns the right-hand side operand if the left-hand side operand is `null` or `undefined`.

It doesn't return the right-hand side operand for falsy values like `0`, '' (empty string), `false`, or `NaN`.

Using Optional Chaining & Nullish Coalescing Together

Optional chaining can be used in combination with other operators like the nullish coalescing operator (`??`) to provide default values for missing properties.

bởi vì Optional Chaining luôn trả lại null hoặc undefined nếu không tồn tại

còn Nullist Coalescing Operator thì trả ra giá trị mặc định nếu vế trái là null hoặc undefined (chứ không phải là ‘false’ hoàn toàn)

Cách kết hợp này ngắn gọn hơn là IF ELSE hay Tenary Operator.

⁠