Local variable name shadows variable in outer scope JS-0123
Bug risk
Minor
15 days ago
—
3 years old
'spacing' is already declared in the upper scope on line 104 column 17
109
110 // Sign up for the eventbus notifications
111 EventBus.get().on(EventBus.UPDATE_GRID_SIZE, () => {
112 let spacing = Registry.viewManager.getGridSize();113 this.gridSizeValue = spacing;
114 this.ignoreUpdate = true;
115 this.$refs.gridslider.noUiSlider.set(spacing);'target' is already declared in the upper scope on line 899 column 20
1359 if (touch) {
1360 // Returns true if a touch originated on the target.
1361 var isTouchOnTarget = function (checkTouch) {
1362 var target = checkTouch.target;1363 return (target === eventTarget ||
1364 eventTarget.contains(target) ||
1365 (e.composed && e.composedPath().shift() === eventTarget));'pips' is already declared in the upper scope on line 1270 column 18
1267 scope_Pips = null;
1268 }
1269 }
1270 function pips(pips) {1271 // Fix #669
1272 removePips();
1273 var spread = generateSpread(pips);'offset' is already declared in the upper scope on line 51 column 14
1256 }
1257 }
1258 // Append all points.
1259 Object.keys(spread).forEach(function (offset) {1260 addSpread(offset, spread[offset][0], spread[offset][1]);
1261 });
1262 return element;'offset' is already declared in the upper scope on line 51 column 14
1236 var sizeClasses = a ? valueSizeClasses : markerSizeClasses;
1237 return source + " " + orientationClasses[options.ort] + " " + sizeClasses[type];
1238 }
1239 function addSpread(offset, value, type) {1240 // Apply the filter function, if it is set.
1241 type = filterFunc ? filterFunc(value, type) : type;
1242 if (type === exports.PipsType.None) {
Description
Two variables can have the same name if they're declared in different scopes.
In the example below, the parameter x is said to "shadow" the variable x declared above it.
The outer x can no longer be accessed inside the sum function.
const x = 1
function add(x, y) {
return x + y
}
While shadowing does not cause any problems most of the time, it does make the code harder to read and understand. We highly recommend against shadowing. However, if you want to shadow some variable name and don't want DeepSource to flag it, add a skipcq comment alongside an explanation:
const x = 1
function add(x, y) { // skipcq: JS-0123 - `x` can be safely shadowed
return x + y
}
If you want to disable this issue project-wide, you can add it to the list of disabled issues in the project dashboard.
Bad Practice
const file = "data.txt"
function readFile(file) {
// The parameter `file` shadows the toplevel variable `file`.
if (fs.existsSync(file)) {
return fs.readFileSync(file)
}
return null
}
Recommended
// Prefer variable names that are distinct and convey as much
// meaning as possible.
const dataFile = "data.txt"
function readFile(filePath) {
if (fs.existsSync(filePath)) {
return fs.readFileSync(filePath)
}
return null
}
Alternatively:
const file = "data.txt"
function readFile(file) { // skipcq: JS-0123 - Shadowing is safe here
// ...
}