2

I am quite new to JavaScript, and so am still coming into small things that I don't quite understand and don't seem to appear when I search for them. Please could somebody point me out what the ? : syntax is doing below.

var chCode = ('charCode' in event) ? event.charCode : event.keyCode;
Damien Golding
  • 1,003
  • 4
  • 15
  • 28

6 Answers6

9

This is called the ternary operator. It's a short if...else statement.

Basically, your code can be expanded to this.

var chCode;

if ('charCode' in event) {
    chCode = event.charCode;
} else {
    chCode = event.keyCode;
}
Blender
  • 289,723
  • 53
  • 439
  • 496
1

its the ternary operator

The ?: operator can be used as a shortcut for an if...else statement. It is typically used as part of a larger expression where an if...else statement would be awkward.

var chCode = ('charCode' in event) ? event.charCode : event.keyCode;

same as

var chCode;

if ('charCode' in event) {
    chCode = event.charCode;
} else {
    chCode = event.keyCode;
}

test ? expression1 : expression2

expression1 =An expression returned if test is true
expression2 = when false

NullPoiиteя
  • 56,591
  • 22
  • 125
  • 143
  • `It is typically used as part of a larger expression where an if...else statement would be awkward.` How would a larger expression make an if/else "awkward"? And more importantly, how would using a ternary operator make it any less awkward? – sachleen Oct 22 '12 at 06:35
  • 1
    @sachleen - you can't use an `if/else` in the middle of an expression. For assigning a variable to one of two values an `if/else` isn't too awkward, but you can use the ternary operator in _any_ expression, e.g., `someFunc(someCondition ? 12 : 19)` or `var greeting = "Hello " + (sex==="M"?"Mr":"Ms") + surname` or whatever. – nnnnnn Oct 22 '12 at 06:50
1

Is a ternary operator.

your code instead using ? should look like

var chCode = ('charCode' in event) ? event.charCode : event.keyCode;


if('charCode' in event){
 chCode = event.charCode;
} else {
 chCode = event.keyCode;
}
Snake Eyes
  • 16,287
  • 34
  • 113
  • 221
1

As others have said, it's a ternary.

You could make it terser with...

var chCode = event.charCode || event.keyCode;
alex
  • 479,566
  • 201
  • 878
  • 984
  • 1
    not equivalent. `charCode` could be present but falsy – John Dvorak Oct 22 '12 at 06:35
  • @JanDvorak Just like the `in` could find `charCode` on `Object.prototype`. For 99.9% of cases, it's finer to use this shorter code. There is no keycode for `0` as it's a control character that can't be typed. – alex Oct 22 '12 at 06:36
  • You should not assume the browser does not set `charCode` to `null` if the key is not a character. – John Dvorak Oct 22 '12 at 06:39
  • @JanDvorak: jQuery seems to do just that without causing problems: https://github.com/jquery/jquery/blob/master/src/event.js#L465 – Blender Oct 22 '12 at 06:42
  • Given the OP _seems_ to be asking more about what the ternary operator does than how to use key and character codes I think Jan's point is correct that `||` is not equivalent. But yes, for key and character codes `||` is a reasonable shortcut. – nnnnnn Oct 22 '12 at 06:47
  • @Blender jQuery (from the code you linked) checks if the `original.charCode` is weakly equal to null. `undefined == null`. This suggests the _code by OP_ is incorrect because it assumes the charCode cannot be null. – John Dvorak Oct 22 '12 at 06:47
0

Translation:

var chCode;
if ('charCode' in event) chCode = event.charCode
else chCode = event.keyCode;
ronalchn
  • 12,225
  • 10
  • 51
  • 61
0

event.keyCode: Returns the Unicode value of a non-character key in a keypress event or any key in any other type of keyboard event.

event.charCode: Returns the Unicode value of a character key pressed during a keypress event.

--

LInk for event.KeyCode

Community
  • 1
  • 1
riti
  • 255
  • 2
  • 11