You Dont Know JS Coercion

1 2 Kyle Simpson @getify http://getify.me • • • LABjs grips asynquence 3 Kyle Simpson @getify http://getify.me h...

0 downloads 160 Views 6MB Size
1

2

Kyle Simpson @getify http://getify.me • • •

LABjs grips asynquence

3

Kyle Simpson @getify http://getify.me

http://speakerdeck.com/getify

4

http://YouDontKnowJS.com

5

6

https://developer.mozilla.org/en-US/docs/JavaScript https://github.com/rwldrn/idiomatic.js http://www.ecma-international.org/ecma-262/5.1/ https://github.com/tc39/ecma262#current-proposals

7

8

Agenda Values & Types • • •

Primitive Types Natives Coercion

9

• • • • • • •

undefined string number boolean object function null Primitive Types

10

Primitive Types (literals)

11

Primitive Types (literals)

Quiz

12

Primitive Types

Quiz

13

Primitive Types

14

• • • • •

NaN (“not a number”) Infinity, -Infinity null undefined (void) +0, -0 Primitive Types: special values

NaN

15

Primitive Types: special values

NaN

16

Primitive Types: special values

NaN

17

Primitive Types: special values

Negative Zero

18

Primitive Types: special values

Negative Zero

19

Primitive Types: special values

ES6: Object.is(..)

20

Primitive Types: special values

Quiz

21

Primitive Types: special values

Quiz

22

Primitive Types: special values

23

• • • • • • • • •

String Number Boolean Function Object Array RegExp Date Error

Native Types? Native Objects?

Natives

24

• • • • • • • • •

String() Number() Boolean() Function() Object() Array() RegExp() Date() Error()

Native Functions?

Natives

25

• • • • • • • • •

new new new new new new new new new

String() Number() Boolean() Function() Object() Array() RegExp() Date() Error()

Native Constructors

Natives

Quiz

26

Natives

Quiz

27

Natives

28

Natives: literals

29

Natives: literals

30

Coercion

31

Abstract Operations

Coercion

32

ToString

Coercion: Abstract Operations

33

null undefined true false 3.14159 0 -0

"null" "undefined" "true" "false" "3.14159" "0" "0" Coercion: ToString

34

ToString: toString()

Coercion: ToString

35

[] [1,2,3] [null,undefined] [[[],[],[]],[]] [,,,,]

"" "1,2,3" "," ",,," ",,,"

Coercion: ToString (Array)

36

{} "[object Object]" {a:2} "[object Object]"

Coercion: ToString (Object)

37

ToNumber

Coercion: Abstract Operations

"" "0" "-0" " 009 " "3.14159" "0." ".0" "." "0xaf"

0 0 -0 9 3.14159 0 0 NaN 175

38

Coercion: ToNumber

39

false true null undefined

0 1 0 NaN

Coercion: ToNumber

40

ToNumber (object): ToPrimitive (number)

Coercion: ToNumber (Array/Object)

41

ToPrimitive

Coercion: Abstract Operations

42

valueOf() toString()

Coercion: ToPrimitive

43

[""] ["0"] ["-0"] [null] [undefined] [1,2,3] [[[[]]]]

0 0 -0 0 0 NaN 0

Coercion: ToNumber/ToPrimitive (Array)

44

ToBoolean

Coercion: Abstract Operations

Falsy

Truthy

“” 0, +0, -0 null NaN false undefined

“foo” 23 { a:1 } [1,3] true function(){..} ...

45

Coercion: ToBoolean

46

Explicit

Implicit

Coercion

47

Explicit: it’s obvious from the code that you’re doing it.

Explicit Coercion

48

string

number

Explicit Coercion

49

Explicit Coercion

50

*

boolean

Explicit Coercion

51

Explicit Coercion

52

Explicit (or Implicit?) Coercion

53

Implicit: happens as a side effect of some other operation

Implicit Coercion

54

Implicit: evil?

Implicit Coercion

55

Implicit Coercion

56

Implicit Coercion

57

Implicit Coercion

58

7/24 17/24

Implicit Coercion

59

NEVER use == false or == true!

Implicit Coercion: The Bad Parts

60

Ask Yourself: 1. Can either value be true or false? 2. Can either value ever be [], “”, or 0?

Implicit vs Explicit Coercion

61

Implicit Coercion: The Safe Parts

62

Primitive

Native

Implicit Coercion

63

Implicit Coercion

64

"Any sufficiently advanced technology is indistinguishable from magic." --Arthur C. Clarke

Implicit Coercion

65

"Any sufficiently complex technology is indistinguishable from magic." --many devs

Implicit Coercion

66

"Any sufficiently confusing technology is indistinguishable from magic." --many devs

Implicit Coercion

67

== vs. === Implicit Coercion

68

== checks value === checks value and type

== allows coercion === disallows coercion Implicit Coercion

69

Implicit Coercion: == vs. ===

70

Implicit Coercion

71

http://davidwalsh.name/fixing-coercion Number("") === 0 Number(false) === 0 Number(true) === 1 Number(null) === 0 String([]) === "" String([null]) === "" String([undefined]) === "" Value Coercion: The Bad Parts

72

http://getify.github.io/coercions-grid/

Value Coercion: The Bad Parts

73

but... but... Implicit Coercion: == helpful?

74

Implicit Coercion: == helpful?

75

Implicit Coercion: == helpful?

76

What about the performance of == or ===?

Implicit Coercion: == vs. ===

http://jsperf.com/triple-equals-vs-double-equals/5

77

Implicit Coercion: == vs. === performance

78

Implicit Coercion: == vs. === performance

79

#FUD: using == in your code is dangerous. Avoid it!

Implicit Coercion: == vs. ===

80

#protip: use === where it’s safer and use == where it’s more helpful.

Implicit Coercion: == vs. ===

81

#FUD: JavaScript’s implicit coercion is a flaw in the design of the language. Avoid it!

Coercion

82

#protip: use explicit coercion where it’s safer and use implicit coercion where it’s more helpful.

Coercion

83

http://jscoercion.qfox.nl/

Coercion

84

85

Kyle Simpson @getify http://getify.me Thanks! Questions?