[10.18]JavaScript 정리

실행 컨텍스트

• 자바스크립트가 왜 그렇게 동작하는지를 알려줌
• 처음 코드를 생성하는 순간 전역컨텍스트가 생김
• 함수 컨텍스트는 함수를 호출할 때마다 하나씩 생긴다.
• 컨택스트 생성 시 컨텍스트 안에 변수객체 scope chain, this 가 생성된다.
• 컨텍스트 생성 후 함수가 실행되는데 사용되는 변수들은 변수 객체 안에서 값을 찾고 없다면 스코프 체인을 따라 올라가며 찾습니다.
• 함수 실행이 마무리되면 해당 컨텍스트는 사라집니다.
• 전역컨텍스트 에서의 this는 window이다.(따로 설정이 없다면)
• 컨텍스트의 구조

함수이름 컨텍스트 {
    변수 객체: {
        arguments : 전역일 경우 null 함수일경우 인자 확인
        variable : null 혹은 변수 값
    },
    scopechain : 변수를 찾지 못햇을때 다음 컨텍스트로 어디를 가야하는지
    this : 무엇을 가리키는지
 }

호이스팅

• 호이스팅이란 변수를 선언, 초기화 했을때 선언부분이 최상단으로 끌어올려지는 현상을 의미함

    console.log(zero);
    sayWow();
    finction sayWow() {
        console.log('wow');
    }
    var zero = 'zero';

이 코드와같이 sayWow 함수의 선언 전에 호출을 해도 호이스팅 덕분에 선언이 최상단으로 끌어올려져 호출에 아무 문제가 없다.

함수 표현식과 선언식의 차이

선언식

    function a() {
        구문
    }

표현식

    var function a() {
        구문
    }

선언식은 호이스팅의 영향 받음 표현식은 영향 안 받음

그래서 클로저나 콜백으로 표현식을 씀

클로저

• 인자없이 var로 선언된 변수를 비공개 변수라고 한다.
• 이러한 비공개 변수를 이용해서 자바스크립트의 사용자를 통제한다.
• 비공개 변수를 담은 함수에서 반환값으로 클로저에게 scope chain을 제공하면서 클로저로 하여금 비공개변수에 간접적으로 접근할 수 있게끔 만들어짐

JSON

• 자바스크립트의 문법을 빌린 데이터 교환 형식이다
• 객체를 사용해서 데이터를 표현하는 것.
• 다른 표현식은 다 들어가도 되지만 함수는 안된다.
• stingify, parse 메소드를 통해 문자열로 바꿨다가 다시 json으로 바꿔주는 과정이 있다. (json자체를 이해하지 못하는 서버를 위해 문자열로 바꿔줌.)

이벤트 리스너

• 이벤트에 대해 항상 대기중인 것. onclick(클릭 시), onblur(객체를 잃었을 시), onchange(객체 내용바뀌고 focus를 잃었을 시), ondbclick(더블 클릭 시), onerror(에러 발생 시), onfocus(객체에 focus가 되었을 시), onkeydown(키를 눌렀을 시), onkeypress(키를 누르고 있을 시), onkeyup(키를 눌렀다 뗐을 시), onload(문서나 객체가 로딩되었을 떄), onmouseover(마우스가 객체 위에 올라왔을 시), onmouseout(마우스가 객체 바깥으로 나갔을 시), onreset(reset버튼을 눌렀을 시), onresize(크기가 바뀌었을 시), onscroll(스크롤바를 조작할 시), onsubmit(폼이 전송될 시)
• addEventListener(인자, 함수)도 좋은 방법중 하나이다.

콜백

• 이벤트 시 function부분을 부르는 것을 콜백이라고 함.
• 비동기 처리를 이용하여 효율적인 동작이 가능하다.

이벤트 리스너 사용 예

    <button onclick="showResult()">
    클릭
    </button>

이렇게 자바스크립트와 html을 섞어서 사용하는것 보다

    <button id="clicker">
    클릭
    </button>
    <script>
        document.getElementById('clicker').onclick = showResult();
    </script>

이렇게 자바스크립트와 html을 분리해주는것이 유지보수 측면에서 우수하기 때문에 이 방법을 원칙으로 한다.

함수의 메소드

• call, apply, bind가 중요한 메소드
• 함수를 호출하는 방법으로는 함수명(), call, apply 가 있음 example(1, 2, 3); example.call(null, 1, 2, 3); example.apply(null, [1, 2, 3]); null자리는 기본적으로 window를 가리키는 this를 조작하기위해 쓴다.

함수형 프로그래밍

• 입출력이 순수해야한다.
• 부작용이 없어야한다.
• 함수와 데이터를 중점으로 생각한다.

입출력이 순수하다는 의미는 반드시 하나이상의 인자를 받고 받은인자를 처리하여 반드시 결과물을 돌려주어야 한다는 것.

• 대표적 함수들 map, filter, reduce

    var arr = [1, 2, 3, 4, 5];
    var map = arr.map(function(x) {
        return x * 2;
    })

이런식으로 받은 인자만을 가지고 출력을 만들어내는것이 순수함수. 함수형 프로그래밍에 적합한 코드라고 볼 수 있다.

• 함수형 프로그래밍에서의 반복문

    function add(sum, count) {
        sum += count;
        if(count > 0) {
            return add(sum, count -1);
        } else {
            return sum;
        }
    }
    add(0, 10);

이런식으로 return에서 add를 다시 한 번 불러주면서 add라는 함수의 재사용성을 높인다. 이게 함수형 프로그래밍의 장점이다.