20180811

Today I Learned

  •   for(var i = 0; i < arr.length; i++)
    • 이렇게 할 경우 for 문을 돌 때마다 arr를 확인하여 length를 구해 성능이 떨어진다고 한다.
  • toString.call(result)
    • typeof 보다 조금 더 정확한 타입 체크 메소드.

  • 선언되어 있고, 할당되지 않은 변수는 undefined 값을 가진다.

  • 함수 표현식 var foo = function() { };

  • 함수 선언문 function foo() {}

  • 호이스팅
    • 자바스크립트 파서가 내부적으로 변수들을 모두 끌어올려 선언하는 것.
    • var a = 10; 의 경우
      • var a; a=10; 으로 변수 선언만 가장 위로 하고 값 할당은 원래 위치에서.
    • fucntion foo() {} 의 경우
      • 함수 선언과 할당이 통쨰로 가장 위로 올라간다.
  • 함수에 argument가 없어도 arguments를 사용할 수 있다. 
      function a() {
      console.log(argumnets[2]); //결과는 3이 출력될 것.
  }
  a(1,2,3)
    • 다른 함수의 argument로 사용할 수도 있다.
    • 변경에 약한 코드이기에, 조심히 사용해야한다.
  • arrow function 
      var functionName = (argument) => "string" + argument;
    • functionName 위치에 함수 이름을, argument 위치에 인자값을, 화살표 오른편으로 return 값을 명시한다.

  • DOM(Document Object Model)
    • 브라우저에서 HTML코드를 DOM이라는 객체 형태의 모델로 저장.
    • 이를 DOM Tree 라고 함.
    • 즉, HTML element는 Tree형태로 저장.
    • 브라우저는 DOM API 제공(getElementById(), querySelector(cssSelector) … ).
  • Event
    • HTML element에 addEventListener 함수를 사용해서 이벤트 리스너를 등록 가능.
    • 이벤트 발생 시 정보를 담은 Event 객체가 생성되고, 이 객체를 통해 정보를 획득 가능.
    • event.target이 많이 사용된다.
  • Ajax 기본
    • XMLHTTPRequest 통신.
    • 비동기로 서버로부터 데이터를 가져오는 것.
    • 화면의 다른 부분에 영향을 주지 않고, 필요한 부분만 비동기적으로.
    • 사실상의 표준 JSON 포맷 사용.
      function ajax(data) {
      var oReq = new XMLHttpRequest();
      oReq.addEventListener("load", function() {
          console.log(this.responseText);
      })
      oReq.open("GET", "./json.txt");
      oReq.send();
  }
  • ajax라는 함수는 open, send 메소드를 수행하고 콜스택에서 pop되고,
  • eventlistener의 콜백함수만 남아 해당 이벤트가 발생 시 로직을 수행한다.
  • chrome의 network의 XHR에서 확인할 수 있다.

  • 읽어볼 것 <huns.me/development/1291>

  • 바닐라JS
    • 바닐라. 평범한, 특별한 것이 없는 이라는 뜻을 사용.
    • 즉, 어떤 프레임워크나 라이브러리가 아닌 순수한 javascript를 뜻함.
    • 아주 당연히 가볍고 빠르고 호환성이 좋다.
    • jQuery와 같은 추가 라이브러리 없이 일반 js를 사용한다는 것.
    • 정의 : 순수한 js로, 부가기능을 제외한 기본적인 기능만 구현한 상태.

TO-DO