1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

function()関数をアロー関数に書き換えよう

Last updated at Posted at 2022-03-03

主旨

学習メモの記事にコメントを頂き、その中で、、、
「function()使ったり、letで変数宣言してるけど、もっと簡単な書き方あるよ〜」
と教えていただき、その内容を自分なりにまとめてみたもの

やること

1、変数定義letの省略
2、アロー関数への書き換え

今回の問題となる僕の元コードがこちら、、、

0padding.js
const twoDigital = function(num) {
  let digit = String(num).padStart(2,0);
  return digit;
}

↑をスッキリした記述にすると↓になる。

0padding.js

const twoDigital = num => String(num).padStart(2, '0');

(ちなみにこれは2桁のゼロパディング関数の宣言と定義に関するコード numを引数)

1,letの変数宣言無くす

そもそも、変数を表示させるほどの複雑さではないし、
padStartしたString(num)をそのまま返せば良い。
ので、letで宣言した「digit」に関する記述を削除

js.0padding.js
const twoDigital = function(num) {
  return String(num).padStart(2,0);
}

2,アロー関数への書き換え

この記事の書き替え手順により、行ってみる

書き替え前(constの部分は省略)
function(num) {
  return String(num).padStart(2,0);
}
1、functionを削除 引数と中身定義する中カッコの間に「=>」を入れる
(num) => {
  return String(num).padStart(2,0);
}
2、中括弧削除、returnは記述省略可能 (改行も解消しました)
(num) => String(num).padStart(2,0);
3、引数の括弧を削除 → 完成!!
num => String(num).padStart(2,0);

感想

現在は基本的にアロー関数で記述できるものはアロー関数を使うのが主流のようなので、慣れたい。
書き直しを行って、引数の理解もちょっと深まったような気がする。
わからない事ばかりだけど、ちょっとずつ頑張ろう。

今回コメントでアドバイスいただいた、、、、
@shiracamus様、@ris292様、@juner様 
ありがとうございます。

参考URL

 アロー関数の説明がわかりやすい(とっつきやすい)

 function関数からの書き替え

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?