다른 함수(A)의 전달인자(argument)로 넘겨주는 함수(B)
parameter를 넘겨받는 함수(A)는 callback 함수(B)를 필요에 따라 즉시 실행(synchronously: 동시에 일어나게)할 수도 있고, 아니면 나중에(asynchronously: 비동기로) 실행할 수도 있다.
function B(){
console.log('called at the back!');
}
function A(callback) {
callback(); // callback === B
}
A(B);
[1,2,3].map(function(element, index){
return element * element;
});
// 안쪽에 들어가있는 callback function이 반복 실행된다.
// 반복 실행하는 함수는 '배열의 길이' 여기서는 3번 실행하는 것을 알 수 있다.
document.querySelector(`#btn`).addEventListener('click', function(e){
console.log('button clicked');
});
// 문서에서 btn이라는 아이디를 가진 버튼을 찾을건데, 거기다가 click이벤트를 주어서
// 뒤에 나오는 'button clicked'라는 콘솔로그를 찍는 함수를 실행시킨다.
function handleClick() {
console.log('button clicked');
};
1. document.querySelector(`#btn`).onclick = handleClick;
2. document.querySelector(`#btn`).onclick = function() {
handleClick();
}
3. document.querySelector(`#btn`).onclick = handleClick.bind();
4. document.querySelector(`#btn`).onclick = handleClick();
// 1,2,3은 onclick에 붙어있는 것들이 모두 함수 그 자체이다 4번은 틀린 예!
// 1. handleClick을 레퍼런스로 주었다
// 2. 새로운 익명 함수를 만들고 그 안쪽에서 handleClick을 실행하고 있다
// 3. bind는 함수 메소드: 함수 그 자체를 리턴한다
// 4. handleClick을 실행하고 있다. handleClick은 리턴값이 없어서 실행하면 undefined
// onclick에 undefined를 연결한 것
argument
전달인자, 인자, 함수와 메소드의 입력 값(Value)! 함수 혹은 메소드를 호출할 때, 전달 혹은 입력되는 실제 값이다. argument의 실체는 변수이고 argument의 실체는 값이다.
Parameter
매개변수, 함수와 메소드 정의에서 나열되는 변수(Variable) 명!
blocking
non-blocking
"비동기적으로 작동하게 되면,
1과 2의 요청에는 blocking이 없다(손님1과 2는 기다림 없이 주문할 수 있다)
1-1, 1-2, 1-3 그리고 2-1, 2-2, 2-3은 비동기적 영역으로 응답이 비동기적으로 이루어진다."
let request = 'caffelatte';
orderCoffeeAsync(request, function(response) {
// response -> 주문한 커피 결과
drink(response);
});
let request = 'caffelattee'
orderCoffeeAsync(request).onready = function(response) {
// response -> 주문한 커피 결과
drink(response);
};