JavaScriptをやっている絵

JavaScript問題集を更新しました(ECMAScript2020)

JavaScript問題集を更新しました(ECMAScript2020)

Let's JavaScript
Let's JavaScript

結構日を開けてしまった。1ヶ月毎ぐらいに更新したい。

2020年6月からECMAScript2020の仕様にのるらしいが
TypeScript3.7の方では実装されているやつ。
Chrome80から(最新ならok)ならECMAScript2020をコンソール上で試せます

optional chain (オプショナルチェイン)

  • nullかundefinedのプロパティにアクセスした場合、エラーにせずundefindを返す

nullish coalescing opearator (ヌリッシュコアレシングオペレーター)

  • falsyの中からnullかundefinedの場合を区別する

globalThis

  • どの環境で使われるかわからないglobalオブジェクトに対して使うことができる

What is globalThis, and why should you start using it?
これが詳しくて、面白い記事
globalオブジェクトへのアクセスの仕方は
windowやらthis(non-strict mode時)とかあったけど、framesもそうだしselfっていう(コンテキストが違うWeb Workers, WorkerGlobalScope.self)のオブジェクトからだったりnodeのglobal複数ある。それらの環境によって変わるアクセス名を統合するために作られた

ので、
練習問題

(というかECMAScript2019の問題を作っていない気がしている...)

では〜

問題382

const res = {user: {name: 'kenji'}}res.usernullになりうることがある({user: null})。
nameの値が欲しい時、 nullの場合はundefined、nameがある場合はその値を下記のように
const name = res.user && res.user.name ではなく、
端的に(optional chain。オプショナルチェーンで)書いてください

const a = res.user?.name // undefined or "kenji"。 エラーにはならない

// optional chain
// ?の左がnullになり得る場合、もしnull or undefinedだったら.(ドットアクセス)でエラーにせず、undefinedを返し、そうでない場合はその先を返すというものです
// つまり res.user == null ? undefined : res.user.name と res.user?.nameは同じです。端的に書けることがわかります

問題383

下記

const a = 0
const b = false
const c = undefined
const  d = null

のような変数がある
nullとundefinedの場合は文字列 "null or undefined"を返し、そうでない場合はその値を返す
関数isNullishを実装してください

また、Nullish coalescing Operator(ヌリッシュコアレングオペレーター)とはどんなものですか?

const a = 0
const b = false
const c = undefined
const  d = null
const isNullish = (value) => value ?? "null or undefined"
isNullish(a) // 0
isNullish(b) // false
isNullish(c) // "null or undefined"
isNullish(d) // "null or undefined"

// また、Nullish coalescing Operator(ヌリッシュコアレシングオペレーター)とはどんなものですか?
// nullish coalescing opearator は もし左がnull か undefinedなら 右 を返す || の代替です

問題384

ECMASCript2020で追加されたglobalThisとはなんですか?

ブラウザがもつグローバルオブジェクトである`window`とNode.jsのグローバルオブジェクト`global`はJavaScript実行環境が違うため分けられていた。
`globalThis`はブラウザ、Node.jsがもつ共通のグローバルオブジェクトです

// use browser
// open console.log and then
// globalThis

// use node with lts version
// node -v
// v12.16.2
// > node
// Welcome to Node.js v12.16.2.
// Type ".help" for more information.
// > globalThis
// Object [global] {
//   global: [Circular],
//   clearInterval: [Function: clearInterval],
//   clearTimeout: [Function: clearTimeout],
//   setInterval: [Function: setInterval],
//   setTimeout: [Function: setTimeout] {
//     [Symbol(nodejs.util.promisify.custom)]: [Function]
//   },
//   queueMicrotask: [Function: queueMicrotask],
//   clearImmediate: [Function: clearImmediate],
//   setImmediate: [Function: setImmediate] {
//     [Symbol(nodejs.util.promisify.custom)]: [Function]
//   }
// }

全問題はこちら


「武骨日記の」プライバシーポリシーに関して
プライバシーポリシー
個人情報取り扱いに関して

サイトTOP
私は何者か
29歳よしもと芸人がWebデザイナー未経験で学校に通い5年後フリーランスのフロントエンドエンジニアになるためにやった9つのこと
フロント記事
フロントエンドエンジニア
フロントエンド記事(タグ)
TypeScript
TypeScript練習問題集
【TypeScript】TypeSript中級者になる為に知っておくと良い108個のこと
JavaScript練習問題
styled-componentsの使い方
SCSS問題集
GraphQL「Apollo x Relay-Style-Cursor-Pagination(リレースタイルカーソルページネーション)」
recomposeと仲良くなりたい
機動戦士FlowType
初めてReactNativeWebを触ってみて
Ramda.jsシグネチャの読み方
環境変数の話
いちごタルトの作り方
フロントエンドエンジニア豚汁の作り方


「武骨日記の」プライバシーポリシーに関して
プライバシーポリシー

株式会社TerraceTechについて
最近起業しました。
株式会社TerraceTech

SNS
しずかなインターネット kenjimorita
インド旅 instagram
適当な日常写真 instagram
シュールさーん instagram
シュールさーん LINEスタンプ
もりたけんじTwitter
ネタ帳Twitter
note

FaceBook -kennji.morita-

わたしが結成しているWebチームではWeb未経験者、フリーランスの方へのお仕事を紹介しています。
また個人レッスンしてほしい生徒も募集中です。
もしご興味ある方はチャットからご連絡ください。

※業務連絡やお久しぶり連絡もチャットからお願いします。