제어권

• 제어권과 관련이 깊음 (인자로 넘겨줌으로써 제어권을 인자로 넘겨받은 코드에게 제어권 넘어감)

• 인수/인자

  바보같이 계속 혼용해서 쓰고 헷갈리더라고요.

  인수(Argument): 실제 넣는 값

  인자(Parameter, 매개변수): 함수에서 정의되어 사용하는 변수

setInterval 은..

• 첫번째 파라미터로 익명함수를 받고 두번째 파라미터의 interval 마다 호출하는 대표적인 함수

var count = 0;
var timer = setInterval(function() {
    console.log(count);
    if (++count > 4) clearInterval(timer);
}, 300 )

Array.prototype.map

Array.prototype.map(callback[, thisArg])
callback: function(currentValue, index, array)

• 생략 가능한 두 번째 파라미터로 콜백함수 내에서 this 로 인식할 대상 특정, 생략시 전역객체 바인딩
• 모든 요소들을 처음부터 끝까지 꺼내 콜백함수 호출, 그 결과를 모아 새로운 배열을 생성 (모두 다 아시죠?)
• 인자의 순서를 임의로 바꿀 경우 다른 결과가 나옴. 메서드에 정의된 규칙에 따라 콜백 함수 인자의 값, 순서를 정의해줘야 함. (당연히..)

thisArg 를 이해하기 위해 map 메서드를 직접 구현해보아요.

    Array.prototype.map = function (callback, thisArg) {
        var mappedArr = [];
        for (var i = 0; i < this.length; i++) { // this는 Array를 가리킨다.
            var mappedValue = callback.call(thisArg || window, this[i], i, this);
            mappedArr[i] = mappedValue;
        }
        return mappedArr;
    }

• call/apply 메서드를 이용해 thisArg 값이 있을 경우 그것을, 없을 경우 전역 객체를 지정해 인자들과 함께 호출

여러 예시로 이해하는 콜백 함수 내의 this

setTimeout(function () {console.log(this); }, 300); // (1)

[1,2,3,4,5].forEach(function (x) { console.log(this); // (2) });

document.body.innerHTML += '<button id="a">클릭</button>';
document.body.querySelector("#a")
    .addEventListener('click', function (e) {
        console.log(this, e); // (3)
    }
);

• (1) setTimeout은 콜백 함수를 호출할 때 call의 첫번째 인자로 전역 객체를 넘김 ⇒ this는 전역 객체

• (2) forEach 는 별도의 인자로 this를 받지만 별도로 넘겨주지 않음 ⇒ this 는 전역 객체

• (3) addEventListener 는 콜백 함수를 호출할 때 call의 첫번째 인자로 해당 메서드의 this 를 그대로 넘김 ⇒ this 는 HTML Element