JS-0239 @ c5a29d6 • CIDARLAB / 3DuF

Run summary

2 years ago

2240cb1..c5a29d6

41 s

Consider using let or const instead of var JS-0239

Anti-pattern

Major

347 occurrences in this check

Unexpected var, use let or const instead.

src/app/view/ui/parameterMenu.js

345
346export function generateTableFunction(tableID, typeString, setString, isTranslucent) {
347    return function(event) {
348        var table = document.getElementById(tableID);349        if (table) {
350            table.parentElement.removeChild(table);
351        } else {

Unexpected var, use let or const instead.

src/app/view/ui/parameterMenu.js

337    return table;
338}
339
340var createCloseButton = function() {341    var button = createButton("close");342    button.style.color = "#313131";343    return button;344};345
346export function generateTableFunction(tableID, typeString, setString, isTranslucent) {
347    return function(event) {

Unexpected var, use let or const instead.

src/app/view/ui/parameterMenu.js

338}
339
340var createCloseButton = function() {
341    var button = createButton("close");342    button.style.color = "#313131";
343    return button;
344};

Unexpected var, use let or const instead.

src/app/view/ui/parameterMenu.js

324    table.appendChild(head);
325    var body = createFeatureTableBody(typeString, setString);
326    table.appendChild(body);
327    var closeButton = createCloseButton();328    closeButton.style.position = "absolute";
329    closeButton.style.right = "0px";
330    closeButton.style.top = "0px";

Unexpected var, use let or const instead.

src/app/view/ui/parameterMenu.js

322    table.className = "mdl-data-table mdl-js-data-table mdl-shadow--2dp feature-table fade-transition";
323    var head = createFeatureTableHeaders(typeString);
324    table.appendChild(head);
325    var body = createFeatureTableBody(typeString, setString);326    table.appendChild(body);
327    var closeButton = createCloseButton();
328    closeButton.style.position = "absolute";

Unexpected var, use let or const instead.

src/app/view/ui/parameterMenu.js

320export function createFeatureTable(typeString, setString, position) {
321    var table = document.createElement("table");
322    table.className = "mdl-data-table mdl-js-data-table mdl-shadow--2dp feature-table fade-transition";
323    var head = createFeatureTableHeaders(typeString);324    table.appendChild(head);
325    var body = createFeatureTableBody(typeString, setString);
326    table.appendChild(body);

Unexpected var, use let or const instead.

src/app/view/ui/parameterMenu.js

318};
319
320export function createFeatureTable(typeString, setString, position) {
321    var table = document.createElement("table");322    table.className = "mdl-data-table mdl-js-data-table mdl-shadow--2dp feature-table fade-transition";
323    var head = createFeatureTableHeaders(typeString);
324    table.appendChild(head);

Unexpected var, use let or const instead.

src/app/view/ui/parameterMenu.js

307    return thead;
308};
309
310var createFeatureTableBody = function(typeString, setString) {311    var body = document.createElement("tbody");312    body.setAttribute("id", "featureTable");313    var rows = createFeatureTableRows(typeString, setString);314    for (var i = 0; i < rows.length; i++) {315        body.appendChild(rows[i]);316    }317    return body;318};319
320export function createFeatureTable(typeString, setString, position) {
321    var table = document.createElement("table");

Unexpected var, use let or const instead.

src/app/view/ui/parameterMenu.js

311    var body = document.createElement("tbody");
312    body.setAttribute("id", "featureTable");
313    var rows = createFeatureTableRows(typeString, setString);
314    for (var i = 0; i < rows.length; i++) {315        body.appendChild(rows[i]);
316    }
317    return body;

Unexpected var, use let or const instead.

src/app/view/ui/parameterMenu.js

310var createFeatureTableBody = function(typeString, setString) {
311    var body = document.createElement("tbody");
312    body.setAttribute("id", "featureTable");
313    var rows = createFeatureTableRows(typeString, setString);314    for (var i = 0; i < rows.length; i++) {
315        body.appendChild(rows[i]);
316    }

Unexpected var, use let or const instead.

src/app/view/ui/parameterMenu.js

308};
309
310var createFeatureTableBody = function(typeString, setString) {
311    var body = document.createElement("tbody");312    body.setAttribute("id", "featureTable");
313    var rows = createFeatureTableRows(typeString, setString);
314    for (var i = 0; i < rows.length; i++) {

Unexpected var, use let or const instead.

src/app/view/ui/parameterMenu.js

285    return rows;
286};
287
288var createFeatureTableHeaders = function(typeString) {289    var thead = document.createElement("thead");290    var tr = document.createElement("tr");291    thead.appendChild(tr);292    var param = document.createElement("th");293    param.className = "mdl-data-table__cell--non-numeric";294    param.innerHTML = "Parameter &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;";295    var value = document.createElement("th");296    value.className = "mdl-data-table__cell--non-numeric";297    value.innerHTML = "Value";298    var type = document.createElement("th");299    type.className = "mdl-data-table__cell--non-numeric";300    type.innerHTML = "Parameters";301    type.style.fontSize = "18px";302    type.style.color = "#000000";303    //type.style.right = "35px";304    tr.appendChild(type);305    tr.appendChild(param);306    tr.appendChild(value);307    return thead;308};309
310var createFeatureTableBody = function(typeString, setString) {
311    var body = document.createElement("tbody");

Unexpected var, use let or const instead.

src/app/view/ui/parameterMenu.js

295    var value = document.createElement("th");
296    value.className = "mdl-data-table__cell--non-numeric";
297    value.innerHTML = "Value";
298    var type = document.createElement("th");299    type.className = "mdl-data-table__cell--non-numeric";
300    type.innerHTML = "Parameters";
301    type.style.fontSize = "18px";

Unexpected var, use let or const instead.

src/app/view/ui/parameterMenu.js

292    var param = document.createElement("th");
293    param.className = "mdl-data-table__cell--non-numeric";
294    param.innerHTML = "Parameter &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;";
295    var value = document.createElement("th");296    value.className = "mdl-data-table__cell--non-numeric";
297    value.innerHTML = "Value";
298    var type = document.createElement("th");

Unexpected var, use let or const instead.

src/app/view/ui/parameterMenu.js

289    var thead = document.createElement("thead");
290    var tr = document.createElement("tr");
291    thead.appendChild(tr);
292    var param = document.createElement("th");293    param.className = "mdl-data-table__cell--non-numeric";
294    param.innerHTML = "Parameter &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;";
295    var value = document.createElement("th");

Unexpected var, use let or const instead.

src/app/view/ui/parameterMenu.js

287
288var createFeatureTableHeaders = function(typeString) {
289    var thead = document.createElement("thead");
290    var tr = document.createElement("tr");291    thead.appendChild(tr);
292    var param = document.createElement("th");
293    param.className = "mdl-data-table__cell--non-numeric";

Unexpected var, use let or const instead.

src/app/view/ui/parameterMenu.js

286};
287
288var createFeatureTableHeaders = function(typeString) {
289    var thead = document.createElement("thead");290    var tr = document.createElement("tr");
291    thead.appendChild(tr);
292    var param = document.createElement("th");

Unexpected var, use let or const instead.

src/app/view/ui/parameterMenu.js

265    return row;
266};
267
268var createFeatureTableRows = function(typeString, setString) {269    let def = FeatureSets.getDefinition(typeString, setString);270    let heritable = def.heritable;271    let id = "fake_ID";272    let rows = [];273    for (let key in heritable) {274        let row;275        let type = heritable[key];276        if (type === "Float" || type === "Integer") {277            row = createSliderRow(id, typeString, setString, key);278        } else if (key === "orientation") {279            row = createCheckboxRow(id, typeString, setString, key);280        } else if (key === "direction") {281            row = createInOutRow(id, typeString, setString, key);282        }283        rows.push(row);284    }285    return rows;286};287
288var createFeatureTableHeaders = function(typeString) {
289    var thead = document.createElement("thead");

Unexpected var, use let or const instead.

src/app/view/ui/parameterMenu.js

247    return row;
248};
249
250var createInOutRow = function(featureID, typeString, setString, key) {251    var title = createSpan(key);252    var checkID = featureID + "_" + key + "_checkbox";253    var spanID = featureID + "_" + key + "_span";254    var value = Feature.getDefaultsForType(typeString, setString)[key];255    var checkBox = createCheckbox(value, checkID);256    var spanValue = value;257    //if (value == "IN") spanValue = "IN";258    //else spanValue = "OUT";259    var span = createSpan(spanValue, spanID);260    var titleContainer = createTableElement(title);261    var checkContainer = createTableElement(checkBox);262    var spanContainer = createTableElement(span);263    var row = createTableRow(checkContainer, titleContainer, spanContainer);264    checkBox.onchange = generateCheckFunctionDir(checkID, spanID, typeString, setString, key);265    return row;266};267
268var createFeatureTableRows = function(typeString, setString) {
269    let def = FeatureSets.getDefinition(typeString, setString);

Unexpected var, use let or const instead.

src/app/view/ui/parameterMenu.js

260    var titleContainer = createTableElement(title);
261    var checkContainer = createTableElement(checkBox);
262    var spanContainer = createTableElement(span);
263    var row = createTableRow(checkContainer, titleContainer, spanContainer);264    checkBox.onchange = generateCheckFunctionDir(checkID, spanID, typeString, setString, key);
265    return row;
266};

Unexpected var, use let or const instead.

src/app/view/ui/parameterMenu.js

259    var span = createSpan(spanValue, spanID);
260    var titleContainer = createTableElement(title);
261    var checkContainer = createTableElement(checkBox);
262    var spanContainer = createTableElement(span);263    var row = createTableRow(checkContainer, titleContainer, spanContainer);
264    checkBox.onchange = generateCheckFunctionDir(checkID, spanID, typeString, setString, key);
265    return row;

Unexpected var, use let or const instead.

src/app/view/ui/parameterMenu.js

258    //else spanValue = "OUT";
259    var span = createSpan(spanValue, spanID);
260    var titleContainer = createTableElement(title);
261    var checkContainer = createTableElement(checkBox);262    var spanContainer = createTableElement(span);
263    var row = createTableRow(checkContainer, titleContainer, spanContainer);
264    checkBox.onchange = generateCheckFunctionDir(checkID, spanID, typeString, setString, key);

Unexpected var, use let or const instead.

src/app/view/ui/parameterMenu.js

257    //if (value == "IN") spanValue = "IN";
258    //else spanValue = "OUT";
259    var span = createSpan(spanValue, spanID);
260    var titleContainer = createTableElement(title);261    var checkContainer = createTableElement(checkBox);
262    var spanContainer = createTableElement(span);
263    var row = createTableRow(checkContainer, titleContainer, spanContainer);

Unexpected var, use let or const instead.

src/app/view/ui/parameterMenu.js

256    var spanValue = value;
257    //if (value == "IN") spanValue = "IN";
258    //else spanValue = "OUT";
259    var span = createSpan(spanValue, spanID);260    var titleContainer = createTableElement(title);
261    var checkContainer = createTableElement(checkBox);
262    var spanContainer = createTableElement(span);

Unexpected var, use let or const instead.

src/app/view/ui/parameterMenu.js

253    var spanID = featureID + "_" + key + "_span";
254    var value = Feature.getDefaultsForType(typeString, setString)[key];
255    var checkBox = createCheckbox(value, checkID);
256    var spanValue = value;257    //if (value == "IN") spanValue = "IN";
258    //else spanValue = "OUT";
259    var span = createSpan(spanValue, spanID);

Description

It is recommended to use let or const over var. This will help prevent re-declaration of variables that are in the global scope when using var.

ES6 allows programmers to create variables with block scope instead of function scope using the let and const keywords. Block scope is common in many other programming languages and helps programmers avoid mistakes such as this one:

var count = people.length;
var enoughFood = count > sandwiches.length;

if (enoughFood) {
    var count = sandwiches.length; // accidentally overriding the count variable
    console.log("We have " + count + " sandwiches for everyone. Plenty for all!");
}

// our count variable is no longer accurate
console.log("We have " + count + " people and " + sandwiches.length + " sandwiches!");

Block scoped variables shadow outer declarations instead of writing to them.

NOTE: There are certain edge cases where users might want to consider var. Consider this example:

var lib = lib || { run: () => {} }

Here, lib might be a library that is exposed to an HTML file using a <script> tag. The var keyword helps avoid re-writing lib if it has already been declared via an injected script that was executed before this one. Ideally, you should let bundlers worry about cases like this. But if you want to use var anyway, consider using a skipcq comment, or disabling the issue altogether.

Bad Practice

var x = "y";
var CONFIG = {};

CIDARLAB / 3DuF

Bad Practice

Recommended