Avoid using lexical declarations in case clauses JS-0054
Anti-pattern
8 months ago
—
8 months old
Unexpected lexical declaration in case block.
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;
Description
Declarations in switch cases are visible to all blocks. It is recommended not to have such declarations.
Writing lexical declarations (let, const, function and class) within case/default clauses is not a good practice.
Such declarations are hoisted into the scope of the entire switch expression, meaning they are visible to all case clauses in that switch block.
Though the declaration is visible to all cases, it is only initialized in the clause that it was declared in.
It will be undefined if used in any other clause.
To ensure that the lexical declaration only applies to the current case clause, wrap your clauses in blocks.
Bad Practice
switch (points) {
case 1:
let x = 1;
break;
case 2:
const y = 2;
break;
case 3:
function f() {}
break;
default:
class C {}
}
Recommended
// Declarations outside switch-statements are valid
const a = 0;
switch (points) {
// The following case clauses are wrapped into blocks using brackets
case 1: {
let x = 1;
break;
}
case 2: {
const y = 2;
break;
}
case 3: {
function f() {}
break;
}
case 4:
// Declarations using var without brackets are valid due to function-scope hoisting
var z = 4;
break;
default: {
class C {}
}
}