Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

146
Views
How do I write less code and get more done?

Using ES6 classes is great and all, but I find myself using this.variable everywhere, and it is always referring to my class. Is there a way to have implied globals within my class be implied this.variable instead?

jQuery(document).ready(function () {
         jQuery.get('https://ipapi.co/currency/', function(data){      
            
           if (data == 'USD')
           {
                jQuery(".agency-usd, .studio-usd, .small-usd, .price-USD").removeClass("hide");
                jQuery(".agency-eur, .studio-eur, .small-eur, .price-EUR").addClass("hide");
                jQuery(".agency-gbp, .studio-gbp, .small-gbp, .price-GBP").addClass("hide");
                jQuery(".agency-aud, .studio-aud, .small-aud, .price-AUD").addClass("hide");
           }
           else if(data == 'EUR')
           {
                jQuery(".agency-eur, .studio-eur, .small-eur, .price-EUR").removeClass("hide");
                jQuery(".agency-usd, .studio-usd, .small-usd, .price-USD").addClass("hide");
                jQuery(".agency-gbp, .studio-gbp, .small-gbp, .price-GBP").addClass("hide");
                jQuery(".agency-aud, .studio-aud, .small-aud, .price-AUD").addClass("hide"); 
           }
           else if(data == 'GBP')
           {
                jQuery(".agency-gbp, .studio-gbp, .small-gbp, .price-GBP").removeClass("hide");
                jQuery(".agency-eur, .studio-eur, .small-eur, .price-EUR").addClass("hide");
                jQuery(".agency-usd, .studio-usd, .small-usd, .price-USD").addClass("hide");
                jQuery(".agency-aud, .studio-aud, .small-aud, .price-AUD").addClass("hide");
           }
            else if(data == 'AUD')
           {

                jQuery(".agency-aud, .studio-aud, .small-aud, .price-AUD").removeClass("hide");
                jQuery(".agency-gbp, .studio-gbp, .small-gbp, .price-GBP").addClass("hide");
                jQuery(".agency-eur, .studio-eur, .small-eur, .price-EUR").addClass("hide");
                jQuery(".agency-usd, .studio-usd, .small-usd, .price-USD").addClass("hide");
           }
           else{
                jQuery(".agency-usd, .studio-usd, .small-usd, .price-USD").removeClass("hide");
                jQuery(".agency-eur, .studio-eur, .small-eur, .price-EUR").addClass("hide");
                jQuery(".agency-gbp, .studio-gbp, .small-gbp, .price-GBP").addClass("hide");
                jQuery(".agency-aud, .studio-aud, .small-aud, .price-AUD").addClass("hide");

           }
         
          }); 
        });
about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

How do I write less code and get more done?

You can certainly write less code by making the code you show table driven and eliminating all the repeated code (often called DRY for "don't repeat yourself"):

const currencyTable = {
    USD: ".agency-usd, .studio-usd, .small-usd, .price-USD",
    EUR: ".agency-eur, .studio-eur, .small-eur, .price-EUR",
    GBP: ".agency-gbp, .studio-gbp, .small-gbp, .price-GBP",
    AUD: ".agency-aud, .studio-aud, .small-aud, .price-AUD"
};

jQuery(document).ready(function() {
    jQuery.get('https://ipapi.co/currency/', function(data) {

        // hide all by default
        Object.values(currencyTable).forEach(cls => jQuery(cls).addClass("hide"));

        // see which one to show
        const showClass = currencyTable[data] || currencyTable["USD"];
        jQuery(showClass).removeClass("hide");
    });
});

Note this code is also automatically extensible. If you want to add another currency, all you do is add one line to the currencyTable and add the corresponding HTML to your page and it is automatically supported by this code.


You don't show any code that uses ES6 classes or this.something so it's hard to know exactly what you're asking about that. Javascript used to have the with keyword that would let you skip some typing, but for a number of reasons, it is no longer recommended and is not even available in strict mode code which includes ES6 methods.

about 4 years ago · Juan Pablo Isaza Report

0

First one goes after similar and/or repetitive main tasks and implements them as properly named functions.

Within such functions one looks for further improvements like not always querying one and the same field again and agin. Instead, like with the currencies, one could access/query such fields exactly once and store them in a map like object.

Thus one can target each currency-specific field directly by its currency label.

If done properly one finally has come up with a lot of functions, each with a name that describes its dedicated purpose. The main code then is very short and can be read like prose ...

// the module or globally scoped map like object.
const currencyFields = {};

function assignCurrencyFields() {
  // access/query each currency-specific field
  // exactly once and store it in a module or
  // globally scoped map like object.
  Object.assign(currencyFields, {
    USD: $(".agency-usd, .studio-usd, .small-usd, .price-USD"),
    EUR: $(".agency-eur, .studio-eur, .small-eur, .price-EUR"),
    GBP: $(".agency-gbp, .studio-gbp, .small-gbp, .price-GBP"),
    AUD: $(".agency-aud, .studio-aud, .small-aud, .price-AUD"),
  });
}

function hideAnyCurrencyField() {
  Object
    .values(currencyFields)
    .forEach(field =>
      field.addClass("hide");
    );
}
function showCurrencyField(label) {
  // usage of the Nullish Coalescing operator ... `??` ...
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
  (currencyFields[label] ?? currencyFields['USD']).removeClass("hide");
}

function updateCurrencyFields(currencyLabel) {
  hideAnyCurrencyField();
  showCurrencyField(currencyLabel);
}


$(document).ready(function () {

  assignCurrencyFields();

  $.get('https://ipapi.co/currency/', updateCurrencyFields);
});
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!