Skip to main content

JavaScript

About 1 min

JavaScript

みんな大好きJavaScript

JDoc

JSDocいいね！ - なーんだ、ただの水たまりじゃないか

関数はreturns。

Use JSDoc: returns

/**
 * Returns the sum of a and b
 * @param {number} a
 * @param {number} b
 * @returns {number}
 */
function sum(a, b) {
    return a + b;
}

Arrayのfilterをasyncで使うのが難しい

javascript - How to use Array.prototype.filter with async? - Stack Overflow

信じがたいけれど、本当にこんな事しないといけないのかね。

ブックマークレット

とりあえずここに置いておく。 markdownのリンクとして、けれど縦棒をハイフンに置き換えるブックマークレット。

javascript:(function(){const e=document.createElement('input');const title = document.title.replaceAll('|', '-'); e.value=`[${title}](${location.href})`;document.querySelector('body').append(e);e.select();document.execCommand('copy');e.remove(); alert(`${title} copied!`)})();

jsonc, json5

JavaScript関係無いがjson関連。

コメントが入れられるのがjsonc、trailing commaとかもありなのがjson5か。json5でいいのでは感。

Paji's Blog - What is JSONC, what is JSON5.

prismjs

Prism

JS製のシンタックスハイライト。小さい。

TeFWikiのAndroid版はassetsにprismjsを入れている。こういう用途には小さくて良い。

MFGのシンタックスハイライトも以下に用意した。＞MFG/tools/prism-mfg at main · karino2/MFG

Optional Chain

ちょっと予想と違う事があったのでメモ。

Optional chaining (?.) - JavaScript - MDN

普通はある変数がnullかどうかで効果の出るものだが、これはプロパティアクセスに限定されている。 だからメソッド呼び出しが以下のようにドットが必要になる。

const const adventurer = { name: "Alice" };
console.log(adventurer.someNonExistentMethod?.());

また、以下のようには書けるが、

const dogName = adventurer.dog?.name;

以下のようには書けない。

// NG!
const mayDog = adventurer.dog?;

考えてみれば adventurer.dog は無ければundefinedなのだからJSの振る舞い的にはこれが正しいが、

kotlinとかの言語に慣れていれば、 メソッド呼び出しは hoge?.ika() とhogeの方にはてなをつけそうなものだけど、良く考えるとこれは意味が違う。 JSの例ではhogeがnullかどうかではなく、ikaがあるかどうか、という話をしている。

でも、例えばインデクサも以下のようになる。

const propName = "x";
const nestedProp = obj?.[propName];

これはobjがnullかどうかでは無く、propNameがあるかどうか、というoptionalになっている。配列の範囲外アクセスをundefinedにする感じだ。

JavaScriptのOptional Chainはnullに対してでは無くundefinedに対してで、undefinedとはそのプロパティが「存在しない」という場合なのでこうした違いがある訳だな。

Arrow function expression

Arrow function expressions - JavaScript - MDN

いろいろな言語で似たような機能があるが微妙に違うので毎回迷う。

  • アローは =>
  • expressionならreturnはいらない
  • 中括弧をつけてstatementを並べる場合はreturnがいる（中括弧をつけると強制的にstatementsとみなされる）

Destructuringのassignment

TypeScriptHandbookを読んでいて、以下の文は既にJavaScriptで存在してしまうので、 以下のようなdestructuringの型指定は出来ない、と書いてあった。

function draw({ shape: Shape, xPos: number = 100 /*...*/ }) {
// ...
}

へ、どういう意味？と思って見ると、MDNのBinding and assignmentのassignmentの方がその話題だ。

Destructuring - JavaScript - MDN

const numbers = [];
const obj = { a: 1, b: 2 };
({ a: numbers[0], b: numbers[1] } = obj);
// The properties `a` and `b` are assigned to properties of `numbers`

なるほど、変数に代入する感じになるのか。 そしてカッコが無いとブロックになっちゃってオブジェクト式にならないとか。うへぇ。