Булевы выражения и условный рендеринг в React/JavaScript

// Если слева falsy — возвращает его и останавливается
console.log("" && "World") // '' (пустая строка)
 
// Если слева truthy — возвращает правое значение
console.log("Hello" && "World") // 'World'
console.log(true && "Hello") // 'Hello'

// Если слева truthy — возвращает его и останавливается
console.log("Hello" || "World") // 'Hello'
 
// Если слева falsy — возвращает правое значение
console.log("" || "World") // 'World'
console.log(null || "Backup") // 'Backup'

{
  isLoggedIn && <UserProfile />
}
{
  tasks.length > 0 && <TaskList />
}

{
  tasks.length && <TaskList />
} // Может показать 0!
{
  tasks.length > 0 && <TaskList />
} // Правильно!

{
  isLoading ? <Spinner /> : <Content />
}
// то же самое что:
if (isLoading === true) {
  return <Spinner />
} else return <Content />

// Показываем лоадер когда выбрано, но еще не загружено
{
  selectedTrackId && !selectedTrack && <span>Loading...</span>
}

<div>
  <h3>Details</h3>
  {selectedTrack == null ? (
    "Track is not selected"
  ) : (
    <div>
      <h3>{selectedTrack.attributes.title}</h3>
    </div>
  )}
</div>

<div>
  <h3>Details</h3>
  {!selectedTrack && "Track is not selected"}
  {selectedTrack && (
    <div>
      <h3>{selectedTrack.attributes.title}</h3>
    </div>
  )}
</div>

<div>
  <h3>Details</h3>
  {/*если треков нет и трек не выбран покажем "Track is not selected"*/}
  {!selectedTrack && !selectedTrackId && "Track is not selected"}
  {/*если треков нет, но трек выбран покажем "Loading..."*/}
  {!selectedTrack && selectedTrackId && "Loading..."}
  {selectedTrack && (
    <div>
      <h3>{selectedTrack.attributes.title}</h3>
    </div>
  )}
</div>

<div>
  <h3>Details</h3>
  {!selectedTrack && !selectedTrackId && "Track is not selected"}
  {/*если треков нет, но трек выбран покажем "Loading..."*/}
  {!selectedTrack && selectedTrackId && "Loading..."}
  {/*если треки есть, и трек выбран, но ID не совпадают, покажем "Loading..."*/}
  {selectedTrack && selectedTrackId && selectedTrack.id !== selectedTrackId && "Loading..."}
  {/*если треки есть, трек выбран и ID совпадают, покажем JSX*/}
  {selectedTrack && selectedTrack.id === selectedTrackId && (
    <div>
      <h3>{selectedTrack.attributes.title}</h3>
      <h4>Lyrics</h4>
      <p>{selectedTrack.attributes.lyrics ?? "no lyrics"}</p>
    </div>
  )}
</div>

<div>
  <h3>Details</h3>
  {!selectedTrack && !selectedTrackId && "Track is not selected"}
  {!selectedTrack && selectedTrackId && "Loading..."}
  {selectedTrack && selectedTrackId && selectedTrack.id !== selectedTrackId && "Loading..."}
  {/*если треки есть, покажем JSX*/}
  {selectedTrack && (
    <div>
      <h3>{selectedTrack.attributes.title}</h3>
      <h4>Lyrics</h4>
      <p>{selectedTrack.attributes.lyrics ?? "no lyrics"}</p>
    </div>
  )}
</div>

console.log(true && "Hello") // ?
console.log(false && "World") // ?
console.log("" && "JavaScript") // ?
console.log("React" && "Vue") // ?
console.log(5 && 10) // ?
console.log(0 && 100) // ?
console.log(null && "Test") // ?
console.log(undefined && 42) // ?

console.log("A" && "B" && "C") // ?
console.log("X" && "" && "Z") // ?
console.log(1 && 2 && 0 && 4) // ?
console.log(true && "Yes" && 7) // ?

console.log(false || "Default") // ?
console.log("" || "Fallback") // ?
console.log(null || "Backup") // ?
console.log("First" || "Second") // ?
console.log(0 || 42) // ?
console.log(undefined || "Value") // ?

console.log("" || 0 || "Found") // ?
console.log(false || null || "OK") // ?
console.log(undefined || "" || 0 || "Final") // ?
console.log("Start" || false || "End") // ?

console.log("A" && ("B" || "C")) // ?
console.log(false || ("X" && "Y")) // ?
console.log(("" && "Test") || "Default") // ?
console.log("Hi" || (false && "Bye")) // ?
console.log((true && "Yes") || "No") // ?
console.log(null || (0 && "Zero")) // ?

console.log("A" || ("B" && "C")) // ?
console.log(("A" || "B") && "C") // ?
console.log(("A" && "B") || ("C" && "D")) // ?
console.log((false && true) || (true && "Result")) // ?

function getUserName(user) {
  // Твой код здесь
}
 
// Тесты:
console.log(getUserName({ name: "Анна" })) // "Анна"
console.log(getUserName({})) // "Гость"
console.log(getUserName({ name: "" })) // "Гость"

function canAccess(user, resource) {
  // Твой код здесь
}
 
// Тесты:
console.log(canAccess({ isAuth: true, role: "admin" }, { owner: "user1" })) // true
console.log(canAccess({ isAuth: true, id: "user1" }, { owner: "user1" })) // true
console.log(canAccess({ isAuth: false, role: "admin" }, { owner: "user1" })) // false