function or var declarations in nested blocks is not preferred JS-0016
Bug risk
8 months ago
—
8 months old
Move function declaration to function body root.
460
461 case 'image':
462
463 function draw(){ 464 pJS.canvas.ctx.drawImage( 465 img_obj, 466 p.x-radius, 467 p.y-radius, 468 radius*2, 469 radius*2 / p.img.ratio 470 ); 471 } 472
473 if(pJS.tmp.img_type == 'svg'){
474 var img_obj = p.img.obj;Move function declaration to function body root.
796 dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse),
797 ratio = 1 - dist_mouse / pJS.interactivity.modes.bubble.distance;
798
799 function init(){ 800 p.opacity_bubble = p.opacity; 801 p.radius_bubble = p.radius; 802 } 803
804 /* mousemove - check ratio */
805 if(dist_mouse <= pJS.interactivity.modes.bubble.distance){Move function declaration to function body root.
878 }
879
880
881 function process(bubble_param, particles_param, p_obj_bubble, p_obj, id){ 882 883 if(bubble_param != particles_param){ 884 885 if(!pJS.tmp.bubble_duration_end){ 886 if(dist_mouse <= pJS.interactivity.modes.bubble.distance){ 887 if(p_obj_bubble != undefined) var obj = p_obj_bubble; 888 else var obj = p_obj; 889 if(obj != bubble_param){ 890 var value = p_obj - (time_spent * (p_obj - bubble_param) / pJS.interactivity.modes.bubble.duration); 891 if(id == 'size') p.radius_bubble = value; 892 if(id == 'opacity') p.opacity_bubble = value; 893 } 894 }else{ 895 if(id == 'size') p.radius_bubble = undefined; 896 if(id == 'opacity') p.opacity_bubble = undefined; 897 } 898 }else{ 899 if(p_obj_bubble != undefined){ 900 var value_tmp = p_obj - (time_spent * (p_obj - bubble_param) / pJS.interactivity.modes.bubble.duration), 901 dif = bubble_param - value_tmp; 902 value = bubble_param + dif; 903 if(id == 'size') p.radius_bubble = value; 904 if(id == 'opacity') p.opacity_bubble = value; 905 } 906 } 907 908 } 909 910 } 911
912 if(pJS.tmp.bubble_clicking){
913 /* size */Move function declaration to function body root.
969
970 var force = -repulseRadius / d * 1;
971
972 function process(){ 973 974 var f = Math.atan2(dy,dx); 975 p.vx = force * Math.cos(f); 976 p.vy = force * Math.sin(f); 977 978 if(pJS.particles.move.out_mode == 'bounce'){ 979 var pos = { 980 x: p.x + p.vx, 981 y: p.y + p.vy 982 } 983 if (pos.x + p.radius > pJS.canvas.w) p.vx = -p.vx; 984 else if (pos.x - p.radius < 0) p.vx = -p.vx; 985 if (pos.y + p.radius > pJS.canvas.h) p.vy = -p.vy; 986 else if (pos.y - p.radius < 0) p.vy = -p.vy; 987 } 988 989 } 990
991 // default
992 if(d <= repulseRadius){
Description
Function declarations (with the function keyword) and variable declarations should preferably be in the root of a program or the body of a function.
Having nested function declarations inside blocks may have unexpected results at runtime due to hoisting.
As a rule of thumb, if you ever find yourself needing to use nested functions:
Prefer
const f = () => ...overfunction f() {...}for functions inside block-statements.When using
functionorvar, do not have any declarations that can possibly be accessed outside the block in which they're declared.
Note: Block bindings (let, const) are not hoisted and therefore they are not affected by this rule.
Bad Practice
function outer(test) {
if (test) {
// the declaration for "inner" can
// be accessed outside the if-statement
// only when `test` is truthy.
function inner() {
return "inner value";
}
inner();
}
// works only if `test` is true.
return inner();
}
outer(true); // "inner value"
outer(false); // TypeError: inner is not a function
Recommended
inner should be moved out of the if block, or be declared with a const keyword.
// When `inner` is needed outside the `if` block:
function outer(test) {
const inner = () => "inner value"
if (test) {
inner();
}
// always works.
return inner();
}
// When `inner` is not needed outside the `if` block:
function outer(test) {
if (test) {
const inner = () => "inner value"
inner();
}
return "outer value"
}