♻️

JS演習 コールバック関数 ★2~3

2025/02/25に公開

こんばんは。今日はコールバック関数の演習です。作り方が分かれば使い方もより一層わかると思います。

処理の反復 ★★☆☆☆

シンプルなコールバック関数です。関数を繰り返してください。

function
repeat(関数, 回数);// 回数分だけ関数を実行
// ここにコードを書いてね。

repeat(() => {
    console.log('JS');
}, 3);// > 'JS' 'JS' 'JS'

repeat(function() {
    console.log('うさぎ');
}, 0);// なし
ヒント コールバック関数とは

引数に関数を入れる関数のことです。[].forEach()なんかもコールバック関数です。

function callTwice(func) {
    func();
    func();
}

callTwice(() => {
    console.log('abc');
});// > 'abc' 'abc'
仕組み
func = () => {
    console.log('abc');
};

func();// > 'abc'
func();// > 'abc'

オブジェクトでforEach ★★★☆☆

コード自体は短く簡単ですが、混乱します。thisの処理はしなくてもいいです。するなら頑張ってください。
このコードは練習目的です。実際は変わりに配列Mapオブジェクトを使ってください。

const obj = {
    prop1: 7,
    prop2: 12,
    prop3: 2
};

// ここにコードを書いてね。

let sum = 0;
obj.forEach(value => {
    sum += value;
});
console.log(sum);// > 21

obj.forEach((val, key, obj) => {
    obj[key] = val + key;
});
console.log(obj);
// > { prop1: '7prop1', prop2: '12prop2', prop3: '2prop3' }
ヒント 引数ありのコールバック関数

引数ありコールバックの使い方と作り方はこんな感じです。

let flag, message, password;

function check(func) {
    if (flag) {
        func(message, password);
    } else {
        console.error('flagがfalseです。');
    }
}

flag = true;
message = '3201';
password = 'Sc2J1xBe';
check((val, pass) => {
    console.log(`メッセージ: ${val}`);// > メッセージ: 3201
    console.log(`パスワード: ${pass}`);// > パスワード: Sc2J1xBe
});

Discussion