営業時間の変数があるとします。

let businessHours = {
  mon: { open: "10:00", close: "18:00" },
  wed: { open: "11:00", close: "19:00" },
  fri: { open: "10:00", close: "18:00" },
}

例えば、火曜日の営業時間にアクセスしてみます。

console.log(businessHours.tue)

image2

火曜日は設定されていないので、undefined で返ってきました。

では、火曜日の営業開始時間にアクセスしてみます。

console.log(businessHours.tue.open)

image3

今度は、undefined ではなく、エラーが返ってきました。

一つ前の『tue』が undefined なので、さらに深い場所にある open へ接続できなかったことを表しています。

このエラーを回避するために、オプショナルチェーンを利用します。

オプショナルチェーンとは、値があるかどうかわからない場所をオプションにし、より深いところにあるプロパティにアクセスできる様にすることです。

書き方は、値があるかどうかわからないプロパティに『?』をつけます。

例えば、businessHours.tue.openの場合は、businessHours.tue?.openとします。

console.log(businessHours.tue?.open)

image4

エラーが回避できました。

例えば、曜日毎の営業時間を表示したい場合、

const days = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"]

const youbi = [
  "月曜日",
  "火曜日",
  "水曜日",
  "木曜日",
  "金曜日",
  "土曜日",
  "日曜日",
]

for (let day of days.entries()) {
  let storeDay = businessHours[day[1]]
  console.log(`${youbi[day[0]]}:営業時間${storeDay?.open}〜${storeDay?.close}`)
}

とすると、

image5

月曜日から日曜日まで表示できました。

営業時間が undefined の場合、『定休日』と表示する様にしてみます。

for (let day of days.entries()) {
  let storeDay = businessHours[day[1]]
  console.log(
    storeDay
      ? `${youbi[day[0]]}:営業時間${storeDay?.open}〜${storeDay?.close}`
      : `${youbi[day[0]]}:定休日`
  )
}

image6

営業時間が設定されていない日は、定休日になりました。

ブログ一覧