intro-to-coding.md

Repl

https://repl.it/@ianmstew/FrightenedFlusteredExam

Codesandbox

• Users App (exercise): https://codesandbox.io/s/wo6yo6o0kk
• Users App (completed): https://codesandbox.io/s/508yx02q3l

Intro to Coding

1. Expression (value)

   1. Syntax that resolves to a value
   2. Like nouns: "Fox," "Dog"
   3. Like nouns with modifiers: "The quick brown fox," "The lazy dog"
   4. Like numbers: 1, 2, 3
   5. Like arithmetic with numbers: 1 * 2 + 3
   6. Like a placeholder for a value: "tomorrowsTemperatre"

   "Hello"
   

2. Statement (action)

   1. Syntax that describes an action
   2. Made up of expressions
   3. Like sentences: "The fox jumped," "The quick brown fox jumped over the lazy dog"
   4. Like algorithm: Calculate the average of 1, 2, 3
   5. Like a command: "Check the temperature for tomorrow"

   console.log("Hello");
   

3. Primitive values

   1. Series of letters/words, numbers, true/false

   console.log("Hello");
   console.log(1);
   console.log(true);
   

4. Operators

   1. Combine primitive values
   2. "Hello " + "Jane" -> "Hello Jane"
   3. 1 + 2 -> 3
   4. !true -> false
   5. true || false -> true
   6. true && false -> false

   console.log("Hello " + "Jane");
   console.log(1 + 2);
   console.log(!true);
   console.log(true || false);
   console.log(true && false);
   

5. Variables

   1. Containers for a value
   2. E.g., mini post-it inside of a larger post-it
   3. Age = 10, Name = "Jane"

   var name = "Jane";
   console.log(name);
   
   var janeAge = 12;
   var johnAge = 18;
   console.log(janeAge + johnAge);
   

6. Conditional statement

   1. Perform some action only if a certain condition is met
   2. "If the user's age is less than 13, then the price is $15; else, the price is $20"

   var janeAge = 12;
   
   if (janeAge >= 18) {
      console.log('Jane is an adult');
   } else {
      console.log('Jane is a youth');
   }
   

7. Functions (named set of actions)

   1. A sequence of statements you want to use multiple times
   2. Like a recipe: Take 1 egg, boil for 10 minutes, cool under cold water, and you will have a hard boiled egg.
   3. Like an algorithm: Take a set of numbers, add them up, divide by the count of the numbers, and you will have the average.
   4. Like a service request: What is the forecasted temperature for tomorrow?

   function logIsJaneAdult(age) {
      if (age >= 18) {
         console.log('Jane is an adult');
      } else {
         console.log('Jane is a youth');
      }
   }
   
   var janeAge = 12;
   logIsJaneAdult(janeAge);
   
   function isAdult(age) {
      if (age >= 18) {
         return true;
      } else {
         return false;
      }
   }
   
   var janeAge = 12;
   var isJaneAdult = isAdult(janeAge);
   if (isJaneAdult) {
      console.log('Jane is an adult');
   } else {
      console.log('Jane is a youth');
   }
   
   var johnAge = 18;
   var isJohnAdult = isAdult(johnAge);
   if (isJohnAdult) {
      console.log('John is an adult');
   } else {
      console.log('John is a youth');
   }
   

8. Arrays

   1. Sequences of values
   2. E.g., mini post-its inside of a rectangle on a piece of paper
   3. Ages = 10, 50
   4. Names = "Jane", "John"

9. Loops

   1. Run a sequence of statements multiple times.
   2. "Add up the price for all the users"

10. Objects

    1. Set of named values
    2. Almost like a variable of variables
    3. E.g., post-it with name and age followed by mini post-its containing values
    4. People = Name: "Jane", Age: 10; Name: "John", Age:

11. Array of objects

    1. Sequence of objects
    2. E.g., post-its inside of a rectange of a piece of paper