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

2020年4月19日

kenjimorita

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

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.user は nullになりうることがある({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シグネチャの読み方
・環境変数の話
・いちごタルトの作り方
・フロントエンドエンジニア豚汁の作り方