Examples of Bad Javascript Variable Names

examples-bad-variables.js

// Bad
var sync1 = jQuery("#sync1");
sync1.owlCarousel({
  items: 1,
  slideSpeed: 2000
});

// Good
let productPageMainSlider = jQuery(".product-page__main-slider");
productPageMainSlider.owlCarousel({
  items: 1,
  slideSpeed: 2000
});

// ############################################## //
// Bad
jQuery(".tour-box").each(function () {
  // ... something
});

// Good
// Use native JS foreach loop function and document.querySelectorAll

// ############################################## //
// Bad
// don't use jquery .text()
// http://api.jquery.com/text/
var price = jQuery(this).find(".tour-item-price").text();

// Do use native JS methods like .innerText()
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText
let price = jQuery(this).find(".tour-item-price").text();

// Don't use .change()
jQuery("#tour_sort").change(function () {
  // ... something
});
// Use .addEventListener() 
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

// Question: Why was the below code used within custom.js? Why not embed data-name and data-price attribute via PHP file?
jQuery(".tour-box").each(function () {
  var price = jQuery(this).find(".tour-item-price").text();
  var new_price = parseInt(price.replace("$", ""));
  if( !new_price ) { new_price = 0; }
  var tr_title = jQuery(this).find(".tour-box-item-title h4").text();
  jQuery(this).attr("data-name", tr_title);
  jQuery(this).attr("data-price", new_price);
});

// PHP method below:
<a class="ht-latest-products__single" href="<?php echo get_permalink($all_product_id); ?>" data-price="<?php echo $product_object->get_price(); ?>" data-name="<?php echo $product_object->get_name(); ?>">

// Bad
foreach ( $all_product_ids as $all_product_id ):

// good
foreach ( $all_product_ids as $single_product_id ):

// don't use JS variable names like this `tax_product_desc` instead do `taxonomyPageDescription`