자바스크립트 함수

HOISTING

호이스트 : 끌어올리다

무엇을 끌어올리는 것인가? => 변수 ‘선언’, 함수 ‘선언’을 끌어올린다.

할당은 해당 사항이 아니다.

FUNCTION DECLARATION vs FUNCTION EXPRESSION

• 함수선언문
• 기명 함수표현식
• (익명) 함수표현식

예전에는 기명 함수표현식을 쓰는 이점이 있었지만, 최근 브라우저들은 함수명이 비어있을 경우 자동으로 변수명을 네임프로퍼티에 할당하기 때문에 이제는 기명 함수표현식을 거의 사용하지 않고 있다.

‘선언한 함수를 변수에 할당한다’ - 이것이 함수표현식의 개념

함수 선언문과 함수 표현식의 차이는 ‘할당 여부’에 있다.

함수 선언문 대신 함수 표현식을 쓸 것을 권하고 있다. -> 안전하고 예측 가능한 소스를 위해

FUNCTION SCOPE, EXECUTION CONTEXT

스코프 : 유효범위 (변수)

실행 컨텍스트 : 실행되는 코드 덩어리 (추상적 개념)

스코프는 ‘정의’될 때 결정된다!! 실행 컨텍스트는 ‘실행’될 때 생성된다!!

실행 컨텍스트에는 호이스팅, this 바인딩 등의 정보가 담긴다

var a = 1;
function outer() {
    console.log(a); // 1

    function inner() {
        console.log(a); // undefined
        var a = 3;
    }

    inner();

    console.log(a); // 1
}
outer();
console.log(a); // 1

0. 전역 실행컨텍스트 생성[GLOBAL]
1. 변수 a 선언
2. 함수 outer 선언 [GLOBAL > outer]
3. 변수 a에 1 할당
4. outer 함수 호출 -> outer 실행컨텍스트 생성
5. 함수 inner 선언[GLOBAL > outer > inner]
6. outer scope에서 a 탐색 -> global scope에서 a 탐색 -> 1 출력
7. inner 함수 호출 -> inner 실행컨텍스트 생성
8. 변수 a 선언
9. inner scope에서 a 탐색 -> undefined 출력
10. 변수 a에 3 할당
11. inner 실행컨텍스트 종료
12. outer scope에서 a 탐색 -> global scope에서 a 탐색 -> 1 출력
13. outer 실행컨텍스트 종료
14. global scope에서 a 탐색 -> 1 출력
15. 전역 실행컨텍스트 종료

METHOD

함수처럼 생겼는데 앞에 . 붙어있으면 메소드라고 생각하면 됨

함수와 메소드의 차이점은 ‘this를 바인딩 하느냐 안하느냐’의 문제. 메소드는 this를 바인딩 한다.

CALLBACK FUNCTION

Something will call this function back sometime somehow.

‘제어권’을 넘겨준다. 맡긴다. (어떤 대상에게)

// 주기함수 호출 , 인자1 : 콜백함수 , 인자2 : 주기(ms)
setTinterval(function () {
    console.log('1초마다 실행될 겁니다.');
}, 1000);

콜백을 어떤 타이밍에 어떤 형태로 호출하고 그 콜백에게 어떤 데이터를 매개변수를 넘겨줄지까지 foreach문 전체에서 자체적으로 규정하고 있다. 즉 콜백함수의 어떤인자들이 어떤 순서로 나열될지는 전적으로 foreach라는 메소드의 규칙을 따르게 된다. 따라서 사용자는 foreach가 정해놓은 규칙대로 콜백함수를 정의해야 한다.

콜백함수의 특징

• 다른 함수(A)의 매개변수로 콜백함수(B)를 전달하면, A가 B의 제어권을 갖게된다.
• 특별한 요청(bind)이 없는 한 A에 미리 정해진 방식에 따라 B를 호출한다.
• 미리 정해진 방식이란 ‘this’에 무엇을 바인딩할지, ‘매개변수’에는 어떤 값들을 지정할지, 어떤 ‘타이밍’에 콜백을 호출할지 등이다.

주의! 콜백은 ‘함수’다.

출처

인프런 Javascript 핵심 개념 알아보기 - JS Flow