JavaScript超初心者向け filterメソッドを使い、配列からfalsyな値(nullなど)を取り除く

1 min read読了の目安(約1500字

今回学べること

・配列からfalsyな値を取り除く
(array.filter(Boolean))

こんな感じで空行が配列に入らないようにする。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>textareaに入力された文字列を変換する</title>
</head>

<body>
  <textarea id="js-area"></textarea>
  <button id="js-output-console">Consoleへ表示する</button>
  <script src="./convert-textarea.js"></script>
</body>

</html>

convert-textarea.js
/* 
  textareaを取得する関数。
  もしtextareaが増えたときでも使い回せるようにidを引数に取ることにした。
*/
const getTextarea = (id) => {
  return document.getElementById(id).value;
};

/*
  クリックされたときに実行される。
  改行でsplitした配列から、空の(というかfalsyな)要素を取り除く。
  それをconsole.logで表示する。
 */
document.getElementById('js-output-console').onclick = () => {
  const textareaValue = getTextarea('js-area');
  const splitTextareaArray = splitStringLinefeed(textareaValue);
  const falsyDeletedTextareaArray = deleteErrorLine(splitTextareaArray);
  console.log(falsyDeletedTextareaArray);
};

//ある文字列(string)を与えられると、改行して配列に入れる関数。
const splitStringLinefeed = (string) => {
  return string.split(/\r\n|\r|\n/);
};

/*
  配列のなかにある空要素(null,undefined,"",0,-0,false)などを取り除いてくれる関数。
  引数として受け取った配列にfilterメソッドを適用。
  今回はBoolean、つまりtrueとなったものだけが残る。
  falseになるのはnull,undefined,"",0など。
  これらが配列に含まれていると自動的に削除してくれる関数。
  もし0の数値を消さなくても良いなら
  array.filter(element => element);で良い。
  今回は0が文字(string)として拾われるので、0は消えない。
*/
const deleteErrorLine = (array) => {
  return array.filter(Boolean);
};