Agile approaches are not usually standards-driven, so issues of standards compliance are not usually considered. Taking the initiative to refactor code relies on (and, should be) individual responsibility. The following pointers apply to both JavaScript usage in frameworks and plain native JavaScript.

---

( a ) Substitute directly evaluated expressions with descriptive variables

While considering performance, the ideal approach would be to use fewer variables and thus reduce overall memory requirements. While working with jQuery, I find myself using the following code more than often:

$(‘.some-el’).click((event) => {
    $(‘.’+$(this).attr(‘id’)).addClass(‘some-css-class’);
});

At the time I’m writing this code, I know that the HTML element with the class **'some-el'** has an **id** that represents a target element, and a click event on this element should modify _that _target. It gets the job done, but it’s messy. Not so easy for future maintenance. This once, we can forego performance in favor of legibility. Besides, this is 2020, computers can handle a few variables! I, therefore (almost always) resolve to use the following:

$(‘.some-el’).click(() => {
    let target = $(this).attr(‘id’);
    $(‘.’+target).addClass(‘some-css-class’);
});

( b ) Simplify regularly used methods with references

We might find ourselves using the **console** object, usually for logging, while developing an app or writing JavaScript code. Consider the following references to the console object methods:

/*This has negligible impact on performance*/
let log = console.log, warn = console.warn, error = console.error;

log, warn and error can now be used in place of **console.log**, **console.warn**, and **console.error**respectively:

Logging JSON objects can also be hectic at times, therefore, I use the following:

let _o(e) {
    return JSON.stringify(e);
}

/* LOG objects by combining log with _o: */
log(_o(someJSONObject);

If you’ve used the jQuery framework before, you might be familiar with the **$** function that references the HTML element selectors: e.g:

**$**('.some-el')

implements

**document**.**getElementByClassName**('some-el')

under the hood. When working with the framework, selecting elements using **$** now becomes simplified instead of having to use the default **document**methods.

#development #code-optimization #programming #javascript