JavaScript　コードの省略

JavaScript初心者です。
⑴と⑵のコメント下のコードが同じ記述になっています。
繰り返しすることなく、より簡潔に記述する方法を教えていただきたいです。

JavaScript
1⑴
2const likeButton = document.getElementById("likeButton");
3const like = document.getElementById("like");
4likeButton.addEventListener('click',function(){
5    like.classList.add('show');
6    card01.classList.add('likeNext');
7
8//ここから
9
10    setTimeout(() => {
11        card01.remove()
12    }, 900);
13    const div = document.createElement('div');
14    document.getElementById('person').appendChild(div);    
15});
16
17⑵**ボールドテキスト**
18const nopeButton = document.getElementById('nopeButton');
19const nope = document.getElementById('nope');
20nopeButton.addEventListener('click',function(){
21    nope.classList.add('show');
22    card01.classList.add('nopeNext');
23
24//ここから
25
26    setTimeout(() => {
27        card01.remove()
28    }, 900);
29    const div = document.createElement('div');
30    document.getElementById('person').appendChild(div);    
31});

行動規範の内容に同意します

回答2件

変数を利用する

ポイントは2つだけです。

「変動値」は変数に格納する
「共通処理」は同じコードを使用する

変動値は他所から取ってくれば良いだけなので、手段に制約はありません。

関数の引数で渡す
配列等のiterableデータに格納して、繰り返し処理を行う
data-* 属性で要素に対応する値を格納する
WeakMap で要素ノードと独自データを結びつける

コールバック関数

コールバック関数は毎回、即時定義する必要はありません。

JavaScript
1setTimeout(() => {
2  card01.remove()
3}, 900);
4
5setTimeout(() => {
6  card01.remove()
7}, 900);

同じ処理を繰り返すなら、変数に格納しておけば、関数定義コストを省略できます。

JavaScript
1const timer = () => {
2  card01.remove()
3};
4
5setTimeout(timer, 900);
6setTimeout(timer, 900);

完全に同じ処理でなくても共通処理が多分に含まれるなら、変動値を別の場所においておけば対応できます。

引数で変動値を受け取る
this 値で変動値を受け取る

setTimeout は第三引数以降で仮引数を指定可能であり、addEventListener は第二引数にオブジェクトを指定する事で this 値を束縛できます。

Re: nf10131999 さん

投稿2021/02/21 09:45

編集2021/02/21 09:54

think49

総合スコア18189

ベストアンサー

関数化して引数を取る。

※未確認

js
1
2function hogehoge(card){
3    setTimeout(() => {
4        card.remove()
5    }, 900);
6    const div = document.createElement('div');
7    document.getElementById('person').appendChild(div);    
8}
9