How to avoid using repetetive phrasing in javascript single line 'if' statement

javascript best practices 2019
jquery
javascript: best practice pdf
javascript function
settimeout
javascript tutorial
javascript best practices 2020
when to use in javascript

I was writing some code and found this annoying, and couldn't find an answer after some research. Although it works fine it feels very clumsy having to write this.className three times:

this.className != 'selected' ? this.className = 'selected' : this.className = 'unselected';

I found out this works..

this.className = (this.className != 'selected') ? 'unselected' : 'selected';

..however i was wondering if it's possible to achieve the same function but were this.className is only written once, something similar to this:

this.className = 'selected' ? 'unselected' : 'selected';

open to any suggestions.

...however i was wondering if it's possible to achieve the same function but were this.className is only written once, something similar to this

No, you can't do that, your second option is pretty much it in the general case:

this.className = (this.className != 'selected') ? 'unselected' : 'selected';

Your third option would result in it always setting 'unselected' because 'selected' is truthy, so the value of the second operand ('unselected') will always be the result.


Of course, getting into the specifics around DOM elements and classes: You could always just have a selected class and toggle it (perhaps via this.classList.toggle('selected')). Not having the class would be equivalent to having the unselected class.

JavaScript best practices, One trap to avoid is marrying values and functionality in names. Single line comments using // can be problematic if people minify your code However, this means you need to repeat the object name for each property or stupid, but because they are busy, distracted or the wording on your instructions is confusing them. With that in mind, here are seven rules to follow if you want to avoid excessive and annoying repetition in your writing. Always Avoid Alliteration: Starting at the individual words in your writing, try to avoid putting words together that sound similar. Whether they begin with the same sound, they rhyme or they just generally sound alike.

The second one is the best option

this.className = (this.className != 'selected') ? 'unselected' : 'selected';

Third is wrong!

New Perspectives on HTML5, CSS3, and JavaScript, You can supplement these style rules with other styles to create a more pleasing design, but the Avoid spanning rows and columns unless necessary. If you are repeating the same phrase or word within a single row or column, consider  Okay, I just counted, and even though it’s on one line, that’s still the same amount of non-white-space characters. Also, it doesn’t work in any browser that isn’t Firefox.

If you find yourself doing this a lot, you could always write a method to do it

function switchProperty(obj, prop, test, flip){
  obj[prop] = obj[prop] == test ? flip : test;
}

var myObj = {
   foo:"bar"
}

console.log(myObj.foo);
switchProperty(myObj,'foo', 'bar', 'baz');
console.log(myObj.foo);
switchProperty(myObj,'foo', 'bar', 'baz');
console.log(myObj.foo);

JavaScript: Avoiding Repeated Work, One problem I often find with the coding of large sites is repeated operations. There are a few different mistakes I see when looking at their  It's been clearly put, although opinion none the less, that forgoing curly brackets on a single line if statement is not ideal for maintainability and readability. But what about this? if (lemons) { document.write("foo gave me a bar"); } It's even more compressed, and if expanded, the curly brackets won't be forgotten.

State and class names are different things imo.

What about a variable which stores the state like:

this.isSelected = !this.isSelected;
this.className = (this.isSelected ? 'un' : '') + 'selected';

Towards a Synergistic Combination of Research and Practice in , A special pattern can be inserted in front of the actual pattern sought to avoid be expressed using various notations (different delimiters, joined single-line, multi-line). The regular expression dialect implemented in JavaScript is somewhat definition has to be repeated each time, making the expression unnecessarily  The way to put quotation marks inside a string is by using a backslash before the quotation marks. Using the backslash in a string tells JavaScript that the next character is something special and doesn’t mean what it normally would mean. When you add a backslash before a quotation mark in a string, it’s called escaping the quotation mark.

A Dictionary of Music and Musicians (A.D. 1450-1889) by Eminent , Thus Ex. I, which is an instance in point, might, if no repetition had been sometimes occurs when an unaccented note is tied to an accented one, as in Ex. 3. to be played with repetition; and in support of this view it may be mentioned that an in Khineland dialect always called him • Tiedsche,' and who set some lines to  The solution to avoid this problem, is to use the backslash escape character. The backslash ( \ ) escape character turns special characters into string characters: Code

A Dictionary of Music and Musicians (A.D. 1450-1880) by Eminent , Thus Ex. i, which is an instance in point, might, if no repetition had been required, sometimes occurs when an unaccented note is tied to an accented one, as in Ex. 3. 69, and other similar phrases, may have been intended to be played with in Rhineland dialect always called him 'Tiedsche,' and who set some lines to  In this project we are looking at how to read through a text file using JavaScript. We will store a list of pupils in a text file. We are going to read through this list display its content on the webpage, one line at a time. Step 1: Using notepad, create a CSV file called ClassList.csv (Instead of using comma we use a pipe | as a separator) Step 2: Create an HTA application (See our blog post

J.S. Bach's Great Eighteen Organ Chorales, Bach notates the pedal line that carries the hymn tune in the tenor rather than The practice of using a four-foot stop goes all the way back to the alleged Whichever pitch one chooses, the overall tone and balance of the registration In the latter instances, these repeated notes automatically separate the two phrases. In javascript, If i have a text block like so Line 1 Line 2 Line 3 What would i need to do to lets say delete the first line and turn it into: Line 2 Line 3

Comments
  • Nope, that second code block is as short as it gets, aside from the fact that () there ins't necessary.
  • First version is bad (because of the repetitivity), second version is good (because this is exactly why ternary exists), third version is really bad (because you should avoid using the result of an affectation as a boolean test, and is hard to understand).
  • BTW, the ?: syntax is generally called the "ternary" or "conditional" operator.
  • Why not just toggle class?
  • @HereticMonkey - Specifically, it's the conditional operator, which is a ternary operator (an operator accepting three operands). It's currently JavaScript's only ternary operator, but that may not always be true... :-)
  • I am not using it a lot, but thanks for the tip anyway <3