Index

JavaScript

  1. The Console

    2. To interact, test and understand JS, we use the browser console.

    cmd + option + J - Chrome Console

  2. Primitives

    3. There are 5 primitive data types

  3. Variables

    4. Variables are containers that store values

    There are different conventions to write variables in js:

    1. camelCase (most common)
    2. snake_case
    3. kebab-case

    var myVariable = myValue;

    They can store any kind of value

          
        var name = "juan";
        var age = 33;
        var isMarried = false;

    We can recall a stored value by calling the variable name:

          
        var name = "Thom";
        "Hello " + name; // "Hello Thom"

        var num = 42;
        num + 3; // 45

    We can also update a value in axisting variables:

          
        var name = "Juan";
        name; // "Juan"

        name = "Jack";
        name; // "Jack"

    Variables can change their type (Dynamic typing)

    ES6 added new variable types

  4. Built-in Methods

    5. There are a lot of methods, but the most common built-in methods in the browser are:

          
        var userName = prompt("Hello, what's your name?");
        console.log("I'm Console, nice to meet you " + userName);
        alert("I'm Alert, also nice to meet you " + userName);

        // EXERCISE
        // prompt age
        var age = prompt("What's your age");

        // eval age in days + leap years
        var ageInDays = age * 365.25;

        // print years in days
        console.log("You've lived roughly: " + ageInDays + " days");

  5. Including JS files

    6. We can write JS directly between script tags, but it can become difficult to mantain.

          
          <script>
            // your JS code
          </script>

    Most of the time we include a separate JS file with the HTML script tag.

          
        <script src="path/to/file" type="text/javascript"></script>

  6. Control Flow

    7. Boolean Logic

    Statements –or a combination of statements– that evaluate to either true or false.

  7. Functions

    8. Wrap bits of code into reusable packages. One of the building blocks of JS.

          
        // Function Declaration
        function doSomething() {
          console.log('Do it!');
        }

        // Function Expression
        var doSomething = function() {
          console.log('Do it!');
        }

        // Referring a fn()
        doSomething;

        // Calling/Executing a fn()
        doSomething();

    Arguments

    A value we pass to a fn(val).

          
        // With one argument
        function square(num) {
          console.log(num * num);
        }

        square(10); // 100
        square(3); // 9 

        // Multiple arguments
        function area(length, width) {
          console.log(length * width);
        }

        area(9,2) // 18

    The Return keyword

    Sending back the output value of a fn().

    Input -> function() -> Output 

          
        function square(n) {
          return n * n;
        }

        "The square of 101 is: " + square(101);
        // "The square of 101 is: 10201"

        // fn() that capitalizes the first char of a given string
        function capitalize(str) {
          if(typeof str === "number") {
            return "That's not a string!"
          }
          return str.charAt(0).toUpperCase() + str.slice(1);
        }

        var city = "quito";
        capitalize(city); // "Quito"
        capitalize(22); // "That's not a string!"

        // Ex.
        function isEven(n) {
          if(n%2===0) {
            return true;
          } else {
            return false;
          }
        }
        
        // Ex shortcut
        function isEven(n) {
          return n % 2 === 0;
        }

        // Ex2
        function factorial(num) {
          var result = 1;
          for(var i = 2; i <= num; i++) {
            result *= i;
          }
          return result;
        }

        // Ex3
        function kebabToSnake(str){
          var nuStr str.replace(/-/g, "_");
          return nuStr;
        }

    Scope

    The context the code is executed in.

    Global Scope vs. Local Scope 

          
        // Global Scope
        var x = 10;

        function someMath() {
          console.log(x);
        }

        someMath(); // 10

        // Local Scope
        var x = 10;
        function moreMath() {
          var x = 99;
          console.log(x);
        }

        moreMath(); // 99

    Global scopes can be used inside a fn() but local scopes cannot be used outside a fn().


    Higher Order Functions

    Functions that take a fn() as an argument, or return another fn().

          
        // setInterval();
        function sing() {
          console.log('🎶');
          console.log('lalala! lala! la!');
          console.log('🎶');
        }

        // we pass the sing fn() without parens, because we don't execute the fn(). setInterval() does.
        setInterval(sing, 2000);

        // We can also define the function inside setInterval() as an anonymous fn()
        setInterval(function() {
          console.log("I'm an anonymous function!");
        }, 3000);

  8. Arrays

    9. [Data Structure] - Group data in comma-separated lists.

    Arrays are zero-indexed.

          
        // Initialize an empty array
        var friends = [];
        var friends = new Array();
        // Define the array
        var friends = ["Tron", "Morlis", "Alvaro", "Irene", "Carlos"];

        console.log(friends[1]); // "Morlis"

        // Update or add values
        friends[0] = "Jose";
        var friends = ["Jose", "Morlis", "Alvaro", "Irene", "Carlos"];

        // Length Property
        friends.length; // 5

        // Can contain any type of data
        var randomArr = [11, "Hello", true, {object: 1}, ["otherArrays"], null];

    Built-in Methods

    JS has many built-in methods to manipulate arrays.


    Array Iteration