Correct way to toggle between two string values with ternary expression

Question

I am trying to have a string that toggle between two values. I have declared as ternary

public position: string = (this.position == "positionOne" ? "positionOne" : "positionTwo");

What I would like to have a function for directly toggle from "positionOne" to "positionTwo" (value of the string). Something like `

togglePosition = function() 
     {this.position = !this.position}

and then it takes the opposite string as value. Or I need to do the complete evaluation also if declared as ternary? and then see if (position = "positionOne")... do whatever.. or else the upside down. You know what I mean? :) What solution you suggest to me?

Thanks a lot from now

do you really mean javascript? or java? if javascript, why do you use a typed variable? — Nina Scholz, Apr 08 '17 at 19:15
Your ternary operation is fine, except that you should swap the final two values, otherwise you don't change anything. — trincot, Apr 08 '17 at 19:20

score 8 · Accepted Answer · answered Apr 08 '17 at 19:20

8

You could use an object and the keys as the wanted value.

function toggle(v) {
    return { positionOne: 'positionTwo', positionTwo: 'positionOne' }[v];
}
 
var position = 'positionOne';
console.log(position);
position = toggle(position);
console.log(position);
position = toggle(position);
console.log(position);

answered Apr 08 '17 at 19:20

Nina Scholz

376,160
25
347
392

You hit the nail, great. It is what I was looking for. So usefull. With your permise I pick this snippet with me. – Sam Apr 08 '17 at 19:25
1

you can use it. you may have a look [here](http://stackoverflow.com/a/31028514/1447675) for a extended use of the same style. – Nina Scholz Apr 08 '17 at 19:29

score 3 · Answer 2 · answered Apr 08 '17 at 19:26

3

As an alternative you could use this (in cases where the values do not match "half-way"):

function toggle(pos) {
    return 'positionOnepositionTwo'.replace(pos, '');
}

pos = 'positionOne';
console.log(pos = toggle(pos));
console.log(pos = toggle(pos));
console.log(pos = toggle(pos));

Alternative with `find`

function toggle(pos) {
    return ['positionOne','positionTwo'].find(x => x !== pos);
}

pos = 'positionOne';
console.log(pos = toggle(pos));
console.log(pos = toggle(pos));
console.log(pos = toggle(pos));

answered Apr 08 '17 at 19:26

trincot

317,000
35
244
286

You are jumping to conclusions. – trincot Apr 08 '17 at 19:37
You seem a little agitated. When I say you are jumping to conclusions, I refer to *"poaching one other person's solution"*. Although I understand you may interpret it that way, I posted this solution without being aware that you were having the same idea. It is not unusual that different people come up with the same idea at about the same time. – trincot Apr 08 '17 at 19:49

vol7ron · Answer 3 · 2017-04-08T19:34:33.770

2

Of course, you could use Array.find to do the same thing Nina mentioned:

var log = console.log;
function toggle(v) {
   return ['positionOne','positionTwo'].find(s=>s!=v);
}
 
var position = 'positionOne';
log( position );

position = toggle(position);
log( position );

position = toggle(position);
log( position );

edited Apr 08 '17 at 19:34

answered Apr 08 '17 at 19:27

vol7ron

40,809
21
119
172

user3658510 · Answer 4 · 2018-01-23T07:45:30.937

I think that the 'correct way' will depend on the person and project. For simple problems i prefer the ternary way or the answer by @Nina Scholz.

You can also use ES6 destructuring:

({ [position]: position } = { positionOne: "positionTwo", positionTwo: "positionOne" });

<!DOCTYPE html>
<html>

<body>

  <button onclick="myFunction()">Click me</button>

  <p id="demo"></p>

  <script>
    var position = "positionOne";

    function myFunction() {
      ({
        [position]: position
      } = {
        positionOne: "positionTwo",
        positionTwo: "positionOne"
      });
      document.getElementById("demo").innerHTML = position;
    }
  </script>

</body>

</html>

An interesting alternative using destructuring, although probably not the best for this use case, can be obtained by toggling the values of two variables:

var positionA = "positionOne";
var positionB = "positionTwo";
[positionA, positionB] = [positionB, positionA];

<!DOCTYPE html>
<html>

<body>

  <button onclick="myFunction()">Click me</button>

  <p id="demo"></p>

  <script>
    var positionA = "positionOne";
    var positionB = "positionTwo";

    function myFunction() {
      [positionA, positionB] = [positionB, positionA];
      document.getElementById("demo").innerHTML = positionA;
    }
  </script>

</body>

</html>

Or just use an object:

var position = {a: 'positionOne', b: 'positionTwo'};    
[position.a, position.b] = [position.b, position.a];

The advantage of this solution is that enable one to change between multiple values and not just two (However for this you should probably use the solution mentioned earlier in its extensive form).

<!DOCTYPE html>
<html>

<body>

  <button onclick="myFunction()">Click me</button>

  <p id="demo"></p>

  <script>
    var positionA = "positionOne";
    var positionB = "positionTwo";
    var positionC = "positionThree";
    var positionD = "positionFour";

    function myFunction() {
      [positionA, positionB, positionC, positionD] = [positionB, positionC, positionD, positionA];
      document.getElementById("demo").innerHTML = positionA;
    }
  </script>

</body>

</html>

score 1 · Answer 5 · answered Apr 08 '17 at 19:18

1

It might make more sense to store the state of which string to display in a boolean variable, which you can easily toggle, then write a method that returns the appropriate string based on the boolean variable.

answered Apr 08 '17 at 19:18

Simon Bosley

1,114
3
18
41

Usefull comment with yours and other answers I have now it much more clear. Thank you. – Sam Apr 08 '17 at 19:26

Correct way to toggle between two string values with ternary expression

5 Answers5

Alternative with find

Alternative with `find`