関数内で処理した結果の値が関数外に出せない

Question

こちらだとconsole.log(box_size)の結果が0になってしまい、関数aで処理した結果が関数の外に出ていません。
処理した結果を変数box_sizeの値に代入するにはどうすればいいでしょうか？
returnを使うのはなんとなくわかるのですがうまくいきませんでした。

for文内では処理した分だけbox_sizeに600か1190が加算されています。

var image_size = document.querySelectorAll("figure.wp-block-image");
var image_array_height = [];
let image_array_width = [];
const targetCount = image_size.length; //配列の長さ

var box_size = 0;

const a =()=> {for(let i = 0; i < targetCount; i++){
    image_array_width.push($(image_size[i]).outerWidth());
    image_array_height.push($(image_size[i]).outerHeight());
    if ((image_array_width[i]) < image_array_height[i]){
        box_size += 600;
        $(image_size[i]).css("width", "585px");
    } else if ((image_array_width[i]) > image_array_height[i]){
        $(image_size[i]).css("width", "1185px");
        box_size += 1190;
    };
};}

console.log(box_size);　//0になってしまう 
$(".entry-content").css("width", box_size);

Answer 1

関数式でaという関数を作成しているけど、aを呼び出していないのでbox_sizeは0のままです。
aを呼び出せばよろしいのでは。

a();
console.log(box_size);

Comments

[machaking]

setTimeoutでaを呼び出す記述は元々の文にはあったのですがconsole.logがそれより以前になってたので
呼び出されなかったようです。
ありがとうございました。

Answer 2

関数を引数にbox_sizeをとるようにして、box_sizeを更新するようにするのはいかがでしょうか。

const a =(box_size)=> {for(let i = 0; i < targetCount; i++){
    image_array_width.push($(image_size[i]).outerWidth());
    image_array_height.push($(image_size[i]).outerHeight());
    if ((image_array_width[i]) < image_array_height[i]){
        box_size += 600;
        $(image_size[i]).css("width", "585px");
    } else if ((image_array_width[i]) > image_array_height[i]){
        $(image_size[i]).css("width", "1185px");
        box_size += 1190;
    };
    return box_size;
};}
box_size = a(0);
console.log(box_size);　

Comments

[machaking]

参考になりました。

Answer 3

こちらだとconsole.log(box_size)の結果が0になってしまい、関数aで処理した結果が関数の外に出ていません。

関数aは作っただけで呼んでいないように見えます。