[JavaScript] 4. JS의 함수

1. JS의 함수란?

- 일급(first-class) 객체

- 변수, 객체, 배열 등에 저장 가능

- 함수의 인자 혹은 반환값으로 사용 가능

- 프로그램 실행 중, 동적으로 생성 가능

 

 

 

2. 함수 정의 방법

방법1) 함수 선언문

function 함수이름(매개변수1, ... ){
    //실행 코드
}

 

방법2) 함수 표현식

let 함수이름 = function(매개변수1, ... ){
    //실행 코드
}

 

방법3) Function 생성자 함수(잘 안씀)

let 함수이름 = new Function("매개변수1", "매개변수2", ..., "함수내용");

let sum = new Function("n1", "n2", "console.log(n1+n2);");
sum(1, 2);//3

 

[함수 호출]

함수이름(매개변수1, ... , 매개변수n);

 

 

 

3. 함수 호이스팅

- JS는 var, function을 호이스팅함

 

1. 함수 선언문

- 선언 위치와 상관없이 어디서든 호출 가능

- 함수 선언, 초기화, 할당이 한번에 이루어진다.

- 스크립트(js파일)이 로딩될 때 변수객체에 저장됨.

console.log(plus(1, 2));//3

function plus(n1, n2){
    return n1+n2;
}

 

 

2. 함수 표현식, Function 생성자 함수

- 함수 호이스팅이 아닌 변수 호이스팅이 발생

- 나중에 할당해줘야지 쓸 수 있음

plus(1, 2);//error

var plus = function(n1, n2){
    return n1+n2;
};

 

 

 

4. 매개변수

- 함수 정의 시 매개변수 타입을 명시하지 않음

- 매개변수 개수가 일치하지 않아도 호출 가능

function sum(x, y){//1, 2가 들어옴
    console.log(x+y);
}

sum(1, 2, 3);//3
sum(1)//NaN = 1 + undefined

 

 

 

5. 콜백함수

- 이벤트가 발생했을 때 시스템에 의해 호출되는 함수

- 개발자가 명시적으로 호출하는 함수가 아님

- 비동기 함수

<!--예시1 : Event Handler-->
let btn = document.querySelect<button class="btn">버튼</button>
<script>
    let btn = document.querySelector(".btn");
    btn.addEventListener("click", function(){//이 함수가 비동기
        console.log("버튼을 눌렀습니다.");
    });
</script>

<!--예시2 : Timeout-->
<script>
    //setTimeout은 동기
    setTimeout(function(){//이 함수가 비동기
        console.log("5초 후, 실행");
    }, 5000);
</script>