javascript if..else statement to ? :

Question

newbie here. Thanks for your helps.

I'm wondering can I change if ...else ... to ? : statement in following codes:

https://codepen.io/lgtits/pen/MWoqPBX?editors=1010

list.addEventListener('click', function (event) {
  let target = event.target
  if (target.classList.contains('delete')) {
    let parentElement = target.parentElement
    parentElement.remove()
  } else if (target.tagName === 'LABEL') { 
    target.classList.toggle('checked')
  }
})

just like this:

let a = 1

let b = 2

if(a>b) {
  console.log('bigger')
} else if (a === b) {
  console.log('equal')
} else {
  console.log('smaller')
}

a > b ? console.log('bigger') : 
      a === b ? console.log('equal') :
      console.log('smaller')

There's no `else` there, so `?:` doesn't make much sense. That code also doesn't produce a value like `?:` does, so it's inappropriate. — deceze, Sep 24 '21 at 07:04
There is no else in your first example, but you could do `target.classList.contains('delete') && target.parentElement.remove()` — dave, Sep 24 '21 at 07:05
Does this answer your question? [Multiple Ternary Operators](https://stackoverflow.com/questions/7757549/multiple-ternary-operators) — Beller, Sep 24 '21 at 07:05
Check out [Ternary Operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) — D.Schaller, Sep 24 '21 at 07:05
there are multiple line in the codes example 1, but in the sample below , it's much more easier. — lgtits, Sep 24 '21 at 07:08
Before asking if you _could_, you should consider if you _should_... Shorter isn't necessarily better. Ternary statements can make short assignments more compact, but for longer blocks like that, just use `if`/`else`. — Cerbrus, Sep 24 '21 at 07:08
The answer is **no**. Ternary statements are used to return a _value_. Since you're not producing a value, but executing a function, this is not appropriate to use in this case. — Nsevens, Sep 24 '21 at 07:09
yes I know it won't be more readable, but I try many times but it didn't work...so I came here to ask for some solution. — lgtits, Sep 24 '21 at 07:10
@Nsevens Well, you *can*: ` ? : null`. It just doesn't make much sense. — deceze, Sep 24 '21 at 07:27
here my codepen: https://codepen.io/lgtits/pen/MWoqPBX?editors=1010 — lgtits, Sep 24 '21 at 07:42
Javascript needs something like in kotlin, that is const foo = if () ... else .... Javascript doesn't have that but easily reproducible with a ternary: const foo = ... ? ... : ... . Better than let foo; if ()... foo = ... else foo = ... Other than that, I agree with the others, the ternary expression wasn't meant to replace if else completely. Also, you should avoid nesting ternary expressions whenever possible. — jperl, Nov 28 '21 at 18:17

phentnil · Accepted Answer · 2021-11-28T18:00:58.060

1

You could change the first block if...else if to the following:

list.addEventListener("click", function (event) {
  let target = event.target;
  // set this ahead of time if needed
  let parentElement = target.parentElement;
  target.classList.contains("delete")
    ? parentElement.remove()
    : target.tagName === "LABEL"
      ? target.classList.toggle("checked")
      : void 0;
});

It can tend to get clunky if you have too many different things to check for, but it's doable if you're only doing one operation each in if and else blocks. Just remember to make sure it is readable.

edited Nov 28 '21 at 18:00

answered Sep 24 '21 at 07:35

phentnil

2,195
2
14
22

1

sorry, but it doesn't work in my project. it can't delete the item.. – lgtits Sep 24 '21 at 07:41
https://codepen.io/lgtits/pen/MWoqPBX?editors=1010 – lgtits Sep 24 '21 at 07:41
My mistake. I forgot the `.remove()` in my code. It should work with that in there. – phentnil Sep 24 '21 at 07:43
can I put these in one line ? let parentElement = target.parentElement & parentElement.remove() – lgtits Sep 24 '21 at 07:49
If you're deleting the element shortly after, don't bother assigning it to a variable. I think that `parentElement` would be undefined after that line executes and would not be helpful to you anyway. – phentnil Sep 24 '21 at 07:57
Be sure to read [Conditional Chains](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator#conditional_chains) for further reading. – phentnil Sep 24 '21 at 08:17
Actually, attempting to reference a variable before it has been set will throw a `ReferenceError` (for `parentElement.remove()` before it has been assigned). Also, make sure you use the logical AND (`&&`) as the single ampersand is considered the bitwise AND (`&`) and may not yield the results you think it will. Using `target.parentElement && target.parentElement.remove();` will work fine if you just want to remove the parentElement. – phentnil Nov 20 '21 at 20:41

javascript if..else statement to ? :

1 Answers1