12-advanced-functions.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Advanced Functions</title>
</head>
<body>
  <button onclick="" class="js-button">Click</button>
  <script>
    const buttonElement = document.querySelector('.js-button');

    const eventListener = () => {
      connsole.log('click');
    }
    // does same thing as onclick but allows you to add multiple listeners 
    buttonElement.addEventListener('click', ()=>{
      console.log('click');
    });

    buttonElement.removeEventListener('click', () => {})

    buttonElement.addEventListener('click', ()=>{
      console.log('click2');
    });


    /*
    const nums = 2;
    // anonymous function (function with no name)
    const function1 = function() {
      console.log('hello2');
    }

    console.log(function1);
    console.log(typeof function1);

    // functions are values in javascript
    // so we can store values in objects

    const object1 = {
      num: 2,
      fun: function() {
        console.log('hello3');
      }
    };
    object1.fun();

    function display(param) {
      console.log(param);
    }
    display(2);

    // passing in a function inside a function
    // the following regular function syntax allows hoisting which means that the function can be used anywhere before it is actually made.
    function run(param) {

    }
    run(function() {
      console.log('hello4');
    });

    */

    /*

// asynchronous Code: computer wont wait for the following line to finish to continue
    setTimeout(function(){
      console.log('timeout')
    }, 3000);

    console.log('next line');

    // will keep running function every 3 seconds
    setInterval(function(){
      console.log('interval')
    }, 3000);

    */
/*
    [
      'make dinner',
      'wash dishes',
      'watch youtube'
    ].forEach((value, index) => {
      if (value === 'wash dishes'){
        return;
      }
      console.log(index);
      console.log(value);
    });

    const regularFunction = function(param, param2) {
      console.log('Hello');
      return 5;
    }


    const arrowFunction = (param, param2) => {
      console.log('hello');
      return 5;
    };
    arrowFunction();
    
    const oneParam = (param) => {
      console.log(param +1);
    };
    oneParam(2);

    const oneLine = () => 2+3;
    console.log(oneLine());

    */

// in filter if the return value is true then the value is added to new array otherwise it isn't.
    [1,-3,5].filter((value, index) => {
      /*
      if (value >= 0){
        return true;
      }
      else{
        return false;s
      }
      */
      return value >= 0;
    })

    // map will transform an array into another array based on return values
    [1,1,3].map((value, index) => {
      return value *2;
    });

    // closure= if a function has access to a value it will always have access to that function. so even if an index value is deleted after a loop the function will still have access to the index. 

  </script>
</body>
</html>