7월18일42일차 - 함수, 호이스팅

함수에서 아무런 값을 입력받지 않았을 때 대신해서 입력할 값을 지정할 수 있습니다.
원하는 위치의 변수에 할당을 해두면 됩니다.
      function 이름(a, b = 1000) {
        console.log(a, b);
      }
      이름(1, 1); // 1 1
      이름(1); // 1 1000
      

      
호이스팅은 script를 다 읽어들여 function이나 변수를 위로 끌어 올려 순서가 달라도 실행시키는 것을 말합니다.
        이름(1, 1);
      function 이름(a, b = 1000) {
        console.log(a, b);
      }    
    
      //함수표현식   변수에 담긴 함수는 호이스팅되지 않습니다. *실행 불가능
      이름2();
      const 이름2 = function () {
        console.log("이름2");
      };

      //화살표 함수 표현식 arrow function
      const 이름3 = (a) => {
        console.log(a);
      };
      이름3("화살표 함수");      
      
      
      화살표함수를 한줄로 표현할 수 있습니다. const 이름 = (a,b) => console.log(a, b);
      const 한줄화살표함수 = (a, b = "변수여러개") => console.log(a, b);
      한줄화살표함수("한줄arrowFunction");
      
      
      
      
이벤트에 함수를 바로 넣게 되면 클릭에 반응하여 실행되는 것이 아니라, 스스로 실행이 되어버립니다.
      const DIV = document.getElementById("App");
      const div = (a) => {
        DIV.innerText = a;
      };
      DIV.addEventListener("click", div("abc"));

이벤트에 반응하여 실행되도록 하려면 콜백함수 안에서 펑션을 실행시키도록 해야합니다.
      const DIV = document.getElementById("App");
      const div = (a) => {
        DIV.innerText = a;
      };
      DIV.addEventListener("click", function () {
        div("콜백함수");
      });
      
      


event를 출력해보면 target과 currentTarget을 찾을 수 있습니다.
      App.addEventListener("click", (event) => {
        console.log(event);
      });
PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}

target을 이용하면 App에 이벤트를 주고 App 안의 span과 a 각각에 펑션을 실행하도록 할 수 있습니다.
    <div id="App">
      <span>스팬</span>
      <a href="#">타겟</a>
    </div>
    
target을 출력하도록 하면
      App.addEventListener("click", (event) => {
        console.log(event.target);
      });
출력결과 : 클릭한 span과, a 각각을 한 번에 하나씩 출력합니다.
<span>스팬</span>
<a href="#">타겟</a>

currentTarger을 출력하도록 하면
      App.addEventListener("click", (event) => {
        console.log(event.currentTarget);
      });
출력결과 : 이벤트가 지정된 div#App 과 하위의 element가 모두 출력됩니다.
    <div id="App">
      <span>스팬</span>
      <a href="#">타겟</a>
    </div>



콜백지옥(Callback Hell)이란 콜백함수 안에서 또 다시 콜백 함수를 부르는 것이 반복되는 것을 말합니다.
이로 인해 가독성이 떨어지게 되며 promise then, es6 이후부터는 promise async await를 이용하여 콜백 지옥에서 벗어납니다.