I wrote some code...you won't believe what happened next

Have you ever been confused about why the code you wrote doesn’t do what you expect? Are you learning to code and don’t want to get caught out? Many people learn to code by example without understanding why the code works – or doesn’t! I hope to inspire and equip you to learn more about what your code is doing.

I will use interactive examples and plain language to explain how learning coding principles can help debugging, help you understand documentation, and make you a better developer. And we’ll learn some basic but invaluable principles that will help de-mystify your code and solve problems faster.

Transcript

1. I tried writing
   some code…
   …you won’t believe what happened next
   

   View Slide

2. Hi!
   I’m Ross
   @magicroundabout
   

   View Slide

3. Let’s talk
   about code
   

   View Slide

4. Coding is easy
   

   View Slide

5. Computers are
   stupid
   

   View Slide

6. Computers are
   stupid
   The only understand 0 and 1
   

   View Slide

7. So…
   Let’s start writing some code
   

   View Slide

8. +
   

   View Slide

9. It isn’t
   

   View Slide

10. Don’t do it!
    

    View Slide

11. WAT?!
    Gary Bernhardt’s Geeky 5min talk

    https://www.destroyallsoftware.com/talks/wat
    

    View Slide

12. Hmm…
    This isn’t as easy as we thought!
    

    View Slide

13. What does + do?
    https://developer.mozilla.org/en-US/docs/Web/
    JavaScript/Reference/Operators/Arithmetic_Operators
    

    View Slide

14. What does + do?
    https://developer.mozilla.org/en-US/docs/Web/
    JavaScript/Reference/Operators/Arithmetic_Operators
    

    View Slide

15. What does + do?
    https://developer.mozilla.org/en-US/docs/Web/
    JavaScript/Reference/Operators/Arithmetic_Operators
    

    View Slide

16. People come to
    coding from all
    sorts of backgrounds
    

    View Slide

17. Introducing
    • Language/terminology
    
    • Concepts
    
    • Tools
    

    View Slide

18. To help you
    • Code better
    
    • Fix problems faster
    
    • Learn more quickly
    
    • Understand documentation
    
    • Become curious!
    

    View Slide

19. Note
    We will focus on PHP and JavaScript
    

    View Slide

20. Note
    I will avoid talking about object oriented
    programming
    

    View Slide

21. Note to developers
    I’m simplifying!!
    

    View Slide

22. But first…
    Some terminology
    

    View Slide

23. Expressions
    Code that has value
    

    View Slide

24. View Slide

25. Expressions
    “Evaluate”
    
    “What is…”
    

    View Slide

26. Expressions
    • 2
    • "Hello World!"
    • $home or home
    

    View Slide

27. Expressions
    • 2
    • "Hello World!"
    • $home or home
    • [ 1, 2, 3 ]
    • { post_title: "Programming principles" }
    • $posts[0]
    • $post->post_title or post.post_title
    

    View Slide

28. Expressions
    • 2
    • "Hello World!"
    • [ 1, 2, 3 ]
    • { post_title: "Programming principles" }
    Literals: Exactly what you type
    

    View Slide

29. Expressions
    • $home or home
    • $posts[0]
    • $post->post_title or post.post_title
    Variables: Names for other things
    

    View Slide

30. Expressions
    • get_the_title();
    • get_post(123);
    • $the_query->have_posts();
    Functions (and methods): named blocks of code
    

    View Slide

31. Combining Expressions
    2 + 2
    

    View Slide

32. Combining Expressions
    2 + 2
    Expression Expression
    

    View Slide

33. Combining Expressions
    2 + 2
    Expression Expression
    Operator
    

    View Slide

34. Combining Expressions
    2 + 2
    Expression Expression
    Operator
    Expression
    

    View Slide

35. Combining Expressions
    is_archive() or is_search()
    

    View Slide

36. Combining Expressions
    is_archive() or is_search()
    Expression Expression
    

    View Slide

37. Combining Expressions
    is_archive() or is_search()
    Expression Expression
    Operator
    

    View Slide

38. Combining Expressions
    is_archive() or is_search()
    Expression Expression
    Operator
    Expression
    

    View Slide

39. Combining Expressions
    "The first landing was " + currentYear - moonLandingYear + " years ago"
    

    View Slide

40. Combining Expressions
    "The first landing was " + currentYear - moonLandingYear + " years ago"
    Expression Expression
    Operator Operator
    Expression
    Operator
    Expression
    Operator
    Expression Expression
    Operator
    Expression
    Expression
    Operator
    Expression
    Expression
    

    View Slide

41. You may be thinking…
    …what else is there?
    

    View Slide

42. Statements
    

    View Slide

43. Statements
    do stuff…
    
    …but don’t have value
    
    

    View Slide

44. Statements
    do stuff…
    
    …but don’t have value
    
    (normally)
    

    View Slide

45. Statements
    Control flow/order/execution
    if ( $have_posts() ) {

    the_post();

    ...

    }
    while ( $have_posts() ) {

    the_post();

    ...

    }
    foreach ( $posts as $post ) {

    echo $post->post_title;

    }
    

    View Slide

46. Statements
    Define or “declare” that things exist
    var my_variable;
    function sum( $items ) {

    ...

    }
    

    View Slide

47. Statements
    “Do” other things
    echo “Hello World” return $my_variable;
    exit;
    

    View Slide

48. Putting it all together
    if ( bored_now() and hometime() ) {
    exit;
    }
    

    View Slide

49. Putting it all together
    if ( bored_now() and hometime() ) {
    Expression Expression
    Operator
    Expression
    exit;
    } Statement
    Statement
    

    View Slide

50. Expressions
    Operators
    Statements
    The building blocks of your code
    

    View Slide

51. Variables
    Named “boxes” that can hold values
    

    View Slide

52. Variables
    $name
    

    View Slide

53. Variables
    $name
    “Ross”
    

    View Slide

54. Variables
    $name
    “Ross”
    

    View Slide

55. Variables
    $name
    “Ross”
    Assignment
    $name = “Ross”
    

    View Slide

56. Variables
    $name
    “Ross”
    Assignment has value
    $me = $name = “Ross”
    

    View Slide

57. Variables
    $name
    “Ross”
    Assignment has value
    if ($name = “Ross”)

    {

    echo $name;

    }
    

    View Slide

58. I wrote this code…
    $a is [1,2] … but what is $b?
    $a = [1,2,3];
    $b = $a;
    array_pop($a);
    (PHP)
    

    View Slide

59. I wrote this code…
    $a is [1,2] … but what is $b?
    $a = [1,2,3];
    $b = $a;
    array_pop($a);
    (PHP)
    

    View Slide

60. I wrote this code…
    $a is [1,2] … but what is $b?
    $a = [1,2,3];
    $b = $a;
    array_pop($a);
    (PHP)
    

    View Slide

61. I wrote this code…
    $a is [1,2] … but what is $b?
    $a = [1,2,3];
    $b = $a;
    array_pop($a);
    (PHP)
    

    View Slide

62. [1,2,3]
    $b is
    

    View Slide

63. I wrote this SAME code…
    a is [1,2] … what is b?
    var a = [1,2,3];
    var b = a;
    a.pop();
    (JavaScript)
    

    View Slide

64. [1,2]
    b is
    

    View Slide

65. WAT?!
    

    View Slide

66. Copy by reference
    and
    Copy by value
    

    View Slide

67. Copy by value (PHP)
    $a
    [1,2,3]
    $a = [1,2,3]
    

    View Slide

68. Copy by value (PHP)
    $a
    [1,2,3]
    $b
    [1,2,3]
    $b = $a
    

    View Slide

69. Copy by value (PHP)
    $a
    [1,2]
    $b
    [1,2,3]
    array_pop($a)
    

    View Slide

70. Copy by reference (JavaScript)
    a [1,2,3]
    var a = [1,2,3]
    

    View Slide

71. Copy by reference (JavaScript)
    a [1,2,3] b
    var b = a
    

    View Slide

72. Copy by reference (JavaScript)
    a [1,2] b
    a.pop()
    

    View Slide

73. JavaScript
    Objects are copied

    by reference
    
    Arrays are copied

    by reference
    

    View Slide

74. PHP
    Objects are assigned

    by reference
    
    Arrays are assigned

    by value
    

    View Slide

75. References (with objects)
    Which side is anakin?
    var anakin = { side: "light" };
    var vader = anakin;
    vader.side = 'dark'
    (JavaScript)
    

    View Slide

76. One more
    thing!
    

    View Slide

77. I wrote this code…
    …what happened next?
    $number = 1;
    if ($number = 5) {
    echo “It’s five”;
    }
    (PHP)
    

    View Slide

78. I wrote this code…
    …what happened next?
    $number = 1;
    if ($number = 5) {
    echo “It’s five”;
    }
    (PHP)
    

    View Slide

79. I wrote this code…
    …what happened next?
    $number = 1;
    if ($number = 5) {
    echo “It’s five”;
    }
    (PHP)
    

    View Slide

80. I wrote this code…
    …what happened next?
    $number = 1;
    if ($number = 5) {
    echo “It’s five”;
    }
    (PHP)
    

    View Slide

81. “It’s five”
    

    View Slide

82. $number = 1;
    if ($number = 5) {
    echo “It’s 5”;
    }
    

    View Slide

83. $number = 1;
    if ($number = 5) {
    echo “It’s 5”;
    }
    

    View Slide

84. $number = 1;
    if ($number == 5) {
    echo “It’s 5”;
    }
    

    View Slide

85. $number = 1;
    if ($number === 5) {
    echo “It’s 5”;
    }
    

    View Slide

86. $number = 1;
    if ( 5 == $number ) {
    echo “It’s 5”;
    }
    

    View Slide

87. $number = 1;
    if ( 5 = $number ) {
    echo “It’s 5”;
    }
    PHP Parse error: Syntax error, unexpected '='
    

    View Slide

88. $number = 1;
    if ( 5 = $number ) {
    echo “It’s 5”;
    }
    Yoda notation
    

    View Slide

89. Variables
    Assignment
    References
    Storing and moving values around
    

    View Slide

90. Types
    Categories of “things” that have

    similar properties…
    

    View Slide

91. Types
    abcdefgh
    ijklmnop
    qrstuvwxyz
    1 2 3 4 5
    6 7 8 9 10
    11 12 13 14
    

    View Slide

92. Types
    in programming
    Numbers
    0
    1
    2
    3
    0
    -1
    -2
    -3
    0
    0.1
    0.2
    0.3
    Strings
    “Hello world”
    “Ross”
    “WordCamps are amazing”
    “42”
    Booleans
    true
    false
    In PHP:
    • Integers
    • Floats
    

    View Slide

93. Types
    in programming
    Objects Arrays
    Make your own types Lists of things
    Note: In JavaScript Arrays
    are a kind of object
    

    View Slide

94. Types
    Values have types, not variables
    

    View Slide

95. Types
    Values have types, not variables
    In some other languages

    VARIABLES are typed
    $number

    (Integer)
    “Hello World”
    

    View Slide

96. Types
    Values have types, not variables
    In PHP and JS

    VALUES are typed
    $number
    “Hello World”
    (string)
    42
    (integer)
    

    View Slide

97. I wrote this code…
    …what happened next?
    prompt(‘Give me a number’) + 1
    (JavaScript)
    

    View Slide

98. “5” + 1
    

    View Slide

99. “51”
    

    View Slide

100. WAT?!
     

     View Slide

101. Type conversion
     Changing one type to another
     “Casting” - “Coercion” - “Juggling”
     

     View Slide

102. “5” + 1
     

     View Slide

103. “5” + 1
     String Number
     

     View Slide

104. “5” + “1”
     String String
     

     View Slide

105. “51”
     String
     

     View Slide

106. Implicit (automatic) type conversion
     • Is really complicated
     
     • Sometimes does it just right
     
     • Often very confusing
     

     View Slide

107. Implicit (automatic) type conversion
     https://getify.github.io/coercions-grid/ - thanks Belinda!!
     

     View Slide

108. Explicit (manual) type conversion
     “5” + 1
     

     View Slide

109. Explicit (manual) type conversion
     parseInt(“5”) + 1
     

     View Slide

110. Explicit (manual) type conversion
     5 + 1
     

     View Slide

111. Explicit (manual) type conversion
     6
     

     View Slide

112. Anything to a number
     
     Number("5")
     Explicit (manual) type conversion
     Anything to a string
     
     String(5)
     Anything to a Boolean
     
     Boolean(5)
     Many other ways!
     JavaScript
     Better string to number:

     parseInt("3.141", 10)

     parseFloat("3.141")
     

     View Slide

113. Anything to a whole number
     
     (int)”3.141”
     Explicit (manual) type conversion
     Anything to a decimal number
     
     (float)”3.141”
     Anything to a Boolean
     
     (bool)”yes”
     Many other ways!
     PHP
     Anything to a string

     

     (string)3.141
     

     View Slide

114. Checking types
     • typeof thing

     (JavaScript)
     
     • getType(thing)

     (PHP)
     
     • is_bool() / is_int() / is_string() / is_array()
     (PHP)
     

     View Slide

115. Comparing types
     a == b
     compare and let the language sort the types out
     
     a === b
     compare both values AND types are the same
     

     View Slide

116. Types
     • Be aware!
     
     • Know how to test or check the type
     
     • Know how to convert types
     
     • Know the difference between `==` and `===`
     

     View Slide

117. Operators
     again…
     

     View Slide

118. I wrote this code…
     …what happened next?
     "I am " + 2019 - 2000 + " years old"
     (JavaScript)
     

     View Slide

119. "NaN years old"
     

     View Slide

120. WAT?!
     

     View Slide

121. "NaN years old"
     Not A Number
     (JavaScript thing)
     

     View Slide

122. View Slide

123. View Slide

124. View Slide

125. “BODMAS”
     Brackets, Order, Division,

     Multiplication, Addition, Subtraction
     

     View Slide

126. Operator
     Precedence and
     Associativity
     The order in which operators are evaluated
     

     View Slide

127. 1 + 20 * 4 = ?
     Operator Precedence
     

     View Slide

128. 1 + (20 * 4) = ?
     Operator Precedence
     

     View Slide

129. 1 + 80 = ?
     Operator Precedence
     

     View Slide

130. 81
     Operator Precedence
     

     View Slide

131. Operator Precedence
     https://www.php.net/manual/en/
     language.operators.precedence.php
     

     View Slide

132. Operator Associativity
     https://www.php.net/manual/en/
     language.operators.precedence.php
     

     View Slide

133. "I am " + 2019 - 2000 + " years old"
     Operator Associativity
     

     View Slide

134. ("I am " + 2019) - 2000 + " years old"
     Operator Associativity
     

     View Slide

135. "I am 2019" - 2000 + " years old"
     Operator Associativity
     

     View Slide

136. ("I am 2019" - 2000) + " years old"
     Operator Associativity
     

     View Slide

137. NaN + " years old"
     Operator Associativity
     

     View Slide

138. "NaN years old"
     Operator Associativity
     

     View Slide

139. Operator precedence
     Operator associativity
     Control the order that expressions
     
     are evaluated in
     

     View Slide

140. Functions
     

     View Slide

141. Functions
     Blocks of code Named
     Reusable
     Inputs (optional) Outputs (optional)
     

     View Slide

142. Anatomy of a function
     function getPostTitle( $post ) {
     $title = $post->post_title;
     return $title;
     }
     

     View Slide

143. Anatomy of a function
     function getPostTitle( $post ) {
     $title = $post->post_title;
     return $title;
     }
     Name
     

     View Slide

144. Anatomy of a function
     function getPostTitle( $post ) {
     $title = $post->post_title;
     return $title;
     }
     Parameter(s)
     

     View Slide

145. Anatomy of a function
     function getPostTitle( $post ) {
     $title = $post->post_title;
     return $title;
     }
     Function
     code
     

     View Slide

146. Anatomy of a function
     function getPostTitle( $post ) {
     $title = $post->post_title;
     return $title;
     } Returned value (output)
     

     View Slide

147. Anatomy of a function
     function getPostTitle( $post ) {
     $title = $post->post_title;
     return $title;
     }
     Name Parameter(s)
     Function
     code
     Returned value (output)
     

     View Slide

148. I wrote this code…
     function doubleAll( $array ) {
     foreach( $array as $index => $item ) {
     $array[$index] = $item * 2;
     }
     }
     (PHP)
     

     View Slide

149. I wrote this code…
     function doubleAll( $array ) {
     foreach( $array as $index => $item ) {
     $array[$index] = $item * 2;
     }
     }
     (PHP)
     $a = [1,2,3];
     doubleAll($a);
     

     View Slide

150. I wrote this code…
     function doubleAll( $array ) {
     foreach( $array as $index => $item ) {
     $array[$index] = $item * 2;
     }
     }
     (PHP)
     $a = [1,2,3];
     doubleAll($a);
     

     View Slide

151. I wrote this code…
     function doubleAll( $array ) {
     foreach( $array as $index => $item ) {
     $array[$index] = $item * 2;
     }
     }
     (PHP)
     $a = [1,2,3];
     doubleAll($a);
     …what is $a?
     

     View Slide

152. [1,2,3]
     

     View Slide

153. Parameters work like assignment
     function doubleAll( $array ) {
     foreach( $array as $index => $item ) {
     $array[$index] = $item * 2;
     }
     }

     $a = [1,2,3];
     doubleAll($a);
     

     View Slide

154. function doubleAll( $array ) {
     foreach( $array as $index => $item ) {
     $array[$index] = $item * 2;
     }
     }

     $a = [1,2,3];
     doubleAll($a);
     Parameters work like assignment
     

     View Slide

155. function doubleAll( $array ) {
     foreach( $array as $index => $item ) {
     $array[$index] = $item * 2;
     }
     }

     $a = [1,2,3];
     doubleAll($a);
     Parameters work like assignment
     

     View Slide

156. function doubleAll( $array ) {
     foreach( $array as $index => $item ) {
     $array[$index] = $item * 2;
     }
     return $array;
     }

     $a = [1,2,3];
     $a = doubleAll($a);
     Returns are important!
     

     View Slide

157. Scope
     

     View Slide

158. Scope
     Variables don’t exist everywhere
     They can only be seen in certain places
     

     View Slide

159. Scope
     function getPostTitle() {
     return $post->post_title;
     }

     $post = get_post(123);
     $title = getPostTitle();
     

     View Slide

160. Scope
     function getPostTitle() {
     return $post->post_title;
     }

     $post = get_post(123);
     $title = getPostTitle();
     

     View Slide

161. Scope
     function getPostTitle() {
     return $post->post_title;
     }

     $post = get_post(123);
     $title = getPostTitle();
     

     View Slide

162. Scope
     function getPostTitle() {
     return $post->post_title;
     }

     $post = get_post(123);
     $title = getPostTitle();
     

     View Slide

163. Scope
     Argh!
     

     View Slide

164. PHEW!
     
     

     View Slide

165. WAT?!
     
     

     View Slide

166. ..zzZZ
     
     

     View Slide

167. ARGH!
     
     

     View Slide

168. We learned…
     Expressions
     Statements
     Operators
     Precedence
     Associativity
     Variables
     Assignment
     References
     Values
     Literals
     Types
     Converion/Casting/Coercion
     Functions
     Returns
     Parameters
     Scope
     

     View Slide

169. Which way now?
     

     View Slide

170. Coding is easy
     

     View Slide

171. Coding is easy
     

     View Slide

172. Coding is easy
     HARD
     

     View Slide

173. Coding is easy
     HARD
     

     View Slide

174. Coding is easy
     HARD
     FUN!
     

     View Slide

175. Be curious!
     

     View Slide

176. Be curious!
     Go play!
     

     View Slide

177. Be curious!
     PHP:
     
     • php -a
     
     • psysh
     
     • https://3v4l.org/
     
     • wp-cli shell
     Tools for tinkering
     JavaScript:
     
     • Dev tools
     
     • JSFiddle/JSBin
     
     • node
     

     View Slide

178. Questions?
     Ross Wintle - @magicroundabout
     

     View Slide