01. 선언적 함수 (기본 함수)

선언적 함수는 가장 기본적인 함수 입니다.

{
    function func( ) {
            document.write("실행되었습니다
");
    }
    func( );
}
결과 확인하기
실행 되었습니다.

선언적 함수

선언적 함수는 함수를 호출할 때 함수의 앞 또는 뒤에서 호출 가능함.

자바스크립트는 인터프리터 언어로 순서대로 읽어들이기 때문에 원래는 선언 후 호출하여야 하지만

var로 선언한 변수와 선언적 함수는 선언 이전에 호출하여도 에러를 발생 시키지 않음.

이를 호이스팅이라고 함.

02. 익명 함수

함수에 변수 데이터를 저장하여 변수를 마치 함수처럼 사용할 수 있도록 만들어줍니다.

{
    const func = function( ) {
        document.write("실행되었습니다(2)
");
    }
    func( );
}
결과 확인하기
실행 되었습니다.(2)

익명 함수

익명 함수는 변수 선언 이후에 호출 해야함.

익명 함수 중에는 필요에 따라 일회성으로 사용되는 함수도 존재.

즉시 실행함수는 선언과 동시에 함수가 실행됨.

함수명이 없기 때문에 재호출이 불가능함.

그러한 익명함수는 보통 처음에 한 번만 실행하는 초기화 코드에 사용됨.

03. 매개변수 함수

함수를 호출할 때 전달하는 변수를 '매개변수'라고 함.

{
    function func(str) {
            document.write(str);
    }
    func("실행되었습니다(3)");
}
결과 확인하기
실행 되었습니다.(3)

매개변수 함수

값을 전달하는 '매개체'라서 '매개변수 함수'라고 생각하는 게 도움이 될 듯.

함수 이름 옆의 소괄호( ) 안에 매개변수 이름을 넣어주어야 함.

매개변수의 이름을 붙이는 방법은 일반적인 변수 이름을 붙이는 방법과 같음.

여러 개의 매개변수를 작성해야 할 시에는 "," (쉼표)를 넣어주면서 나열하면 됨.

그러한 익명함수는 보통 처음에 한 번만 실행하는 초기화 코드에 사용됨.

04. 리턴값 함수

return은 함수를 통해 처리된 결과를 반환시켜주는 명령어입니다.

{
    function func( ) {
        const str = "함수가 실행되었습니다
";
        return str;
    }
    document.write(func( ));
}
결과 확인하기
함수가 실행되었습니다

return 값 함수

함수에서 실행한 후 결과까지 처리할 수도 있지만 함수의 실행 결과를 받아 또 다시 처리해야할 경우도 있음.

함수의 실행 결과를 실행한 시점으로 넘겨주는 것을 return(함수값을 반환함)이라고 함.

결괏값을 반환할 때에는 예약어 return 다음에 넘겨줄 값이나 변수를 지정하면 됨.

함수 안에서 return을 만나면 해당 함수를 호출한 곳으로 결과 데이터를 반환해주고 함수는 종료됨.

05. 화살표 함수 : 선언적 함수 (기본 함수)

에크마스크립트 2015부터 추가된 내용으로 '=>'를 이용하여 함수를 간결하게 표현한 것.

{
    func = ( ) => {
        document.write("실행되었습니다");
    }
    func ( );
}
결과 확인하기
실행되었습니다

화살표 함수 : 선언적 함수

function 키워드를 생략하고 부등호 "="와 ">"를 합쳐 코딩함.

항상 익명 함수 형식으로 표현함.

단일 명령문일 경우에는 함수의 중괄호{ }와 return을 생략할 수 있음.

06. 화살표 함수 : 익명 함수

에크마스크립트 2015부터 추가된 내용으로 '=>'를 이용하여 함수를 간결하게 표현한 것.

{
    const func = ( ) => {
        document.write("실행되었습니다");
    }
    func ( );
}
결과 확인하기
실행되었습니다

화살표 함수 : 선언적 함수

function 키워드를 생략하고 부등호 "="와 ">"를 합쳐 코딩함.

항상 익명 함수 형식으로 표현함.

단일 명령문일 경우에는 함수의 중괄호{ }와 return을 생략할 수 있음.

07. 화살표 함수 : 매개변수 함수

에크마스크립트 2015부터 추가된 내용으로 '=>'를 이용하여 함수를 간결하게 표현한 것.

{
    func = (str) => {
        document.write(str);
    }
    func("실행되었습니다");
}
결과 확인하기
실행되었습니다

화살표 함수 : 선언적 함수

function 키워드를 생략하고 부등호 "="와 ">"를 합쳐 코딩함.

항상 익명 함수 형식으로 표현함.

단일 명령문일 경우에는 함수의 중괄호{ }와 return을 생략할 수 있음.

08. 화살표 함수 : 리턴값 함수

에크마스크립트 2015부터 추가된 내용으로 '=>'를 이용하여 함수를 간결하게 표현한 것.

{
    func = ( ) => {
        const str = "실행되었습니다(7)
";
        return str;
    }
    document.write(func( ));
}
결과 확인하기
실행되었습니다(7)

화살표 함수 : 선언적 함수

function 키워드를 생략하고 부등호 "="와 ">"를 합쳐 코딩함.

항상 익명 함수 형식으로 표현함.

단일 명령문일 경우에는 함수의 중괄호{ }와 return을 생략할 수 있음.

09. 화살표 함수 : 익명 함수 + 매개변수 함수 + 리턴값 함수

화살표 함수를 통하여 익명 함수, 매개변수, 리턴값 함수를 한꺼번에 사용할 수 있다.

{ 
    const func = (str) => {
        return str;
    };
    document.write(func("실행되었습니다"))
}
결과 확인하기
실행되었습니다

화살표 함수 : 익명 함수 + 매개변수 함수 + 리턴값 함수

function 키워드를 생략하고 부등호 "="와 ">"를 합쳐 코딩함.

항상 익명 함수 형식으로 표현함.

단일 명령문일 경우에는 함수의 중괄호{ }와 return을 생략할 수 있음.

10. 화살표 함수 : 익명 함수 + 매개변수 함수 + 리턴값 함수 + 괄호생략

화살표 함수를 통하여 익명 함수, 매개변수 함수, 리턴값 함수를 한꺼번에 사용하면서 괄호도 생략할 수 있다.

{
    const func = str => {
    return str;
    }
    document.write(func("실행되었습니다"))
}
결과 확인하기
실행되었습니다

화살표 함수 : 익명 함수 + 매개변수 함수 + 리턴값 함수

function 키워드를 생략하고 부등호 "="와 ">"를 합쳐 코딩함.

항상 익명 함수 형식으로 표현함.

단일 명령문일 경우에는 함수의 중괄호{ }와 return을 생략할 수 있음.

11. 화살표 함수 : 익명 함수 + 매개변수 함수 + 리턴값 함수 + 괄호생략 + 리턴 생략

화살표 함수를 통하여 익명 함수, 매개변수 함수, 리턴값 함수를 한꺼번에 사용하면서 괄호와 리턴까지 생략할 수 있다.

{
    const func = str => str;
    document.write(func("실행되었습니다"))
}
결과 확인하기
실행되었습니다

화살표 함수 : 익명 함수 + 매개변수 함수 + 리턴값 함수

function 키워드를 생략하고 부등호 "="와 ">"를 합쳐 코딩함.

항상 익명 함수 형식으로 표현함.

단일 명령문일 경우에는 함수의 중괄호{ }와 return을 생략할 수 있음.

12. 화살표 함수 : 선언적 함수 + 매개변수 함수 + 리턴값 함수 + 괄호생략 + 리턴 생략

화살표 함수를 선언적 함수의 형식으로 사용하면서 익명 함수, 매개변수 함수, 리턴값 함수를 한꺼번에 사용하면서 괄호와 리턴까지 생략할 수 있다.

{
    func = str => str;
    document.write(func("실행되었습니다."));
}
결과 확인하기
실행되었습니다

화살표 함수 : 익명 함수 + 매개변수 함수 + 리턴값 함수

function 키워드를 생략하고 부등호 "="와 ">"를 합쳐 코딩함.

항상 익명 함수 형식으로 표현함.

단일 명령문일 경우에는 함수의 중괄호{ }와 return을 생략할 수 있음.

13. 함수 유형 : 함수와 매개변수를 이용한 형태

함수와 매개변수를 사용하여 데이터를 실행하는 방법

{
    function func(num, str1, str2) {
        document.write(num + ". " + str1 + "가 " + str2 + "되었습니다", "<br>");
    }
    func("1", "함수", "실행");
    func("2", "자바스크립트", "실행");
    func("3", "리액트", "실행");
}
document.write("<br>",1,"<br>");
결과 확인하기
1. 함수가 실행되었습니다
2. 자바스크립트가 실행되었습니다
3. 리액트가 실행되었습니다

함수 유형 : 함수와 매개변수를 이용한 형태

func()를 정의하고 func()를 세 번 호출 하는 코드이다.

func() 함수는 세 개의 변수 (num1, str1, str2)를 받아서 이를 조합하여 문자열을 만든 후

document.write()를 사용하여 출력합니다.

14. 함수 유형 : 함수와 변수를 이용한 형태

함수와 변수를 사용하여 데이터를 실행하는 방법.

{ 
    function func(num, str1, str2) {
        document.write(num + ". " + str1 + "가 " + str2 + "되었습니다", "<br>");
    }
    const youNum1 = 1;
    const youNum2 = 2;
    const youNum3 = 3;

    const youStr1 = "함수";
    const youStr2 = "자바스크립트";
    const youStr3 = "리액트";

    const youCom1 = "실행 ";

    func(youNum1, youStr1, youCom1);
    func(youNum2, youStr2, youCom1);
    func(youNum3, youStr3, youCom1);
}
결과 확인하기
1. 함수가 실행되었습니다
2. 자바스크립트가 실행되었습니다
3. 리액트가 실행되었습니다

14. 함수 유형 : 함수와 변수를 이용한 형태

func()는 num, str1, str2까지 총 세 개의 매개변수를 가지며, 각각 숫자와 문자열 속성을 가진다.

주어진 매개변수를 사용하여 문장을 생성하고 이 문장을 document.write를 사용하여 웹 페이지에 출력한다.

이 함수를 사용하기 위해 youNum1, youStr1 등이 상수로 선언되어 있으며, 각각 숫자와 문자열을 저장하는데 사용된다.

func()함수를 호출하여 출력할 문장을 생성한다.

각각의 호출은 num으로 숫자열을, str1로 첫번째 문자열을, str2로 두번째 문자열을 전달한다.

이렇게 전달된 매개변수들은 함수에 의해 문장으로 조합되어 출력된다.

15. 함수 유형 : 함수와 배열을 이용한 형태

함수와 배열을 이용하여 데이터를 실행하는 방법.

{
    function func(num, str1, str2) {
        document.write(num + ". " + str1 + "가 " + str2 + "되었습니다", "<br>");
    }
    const num = [1, 2, 3];
    const info = ["함수", "자바스크립트", "리액트", "실행"];

    func(num[0], info[0], info[3]);
    func(num[1], info[1], info[3]);
    func(num[2], info[2], info[3]);
}
결과 확인하기
1. 함수가 실행되었습니다
2. 자바스크립트가 실행되었습니다
3. 리액트가 실행되었습니다

15. 함수 유형 : 함수와 배열을 이용한 형태

함수 func()는 세 개의 매개변수를 가지며, 문장을 생성하고 출력한다.

매개변수 num은 숫자, str1과 str2는 문자열 타입이다.

상수(const) num은 [1,2,3] 배열을 할당 받으며, 상수 info는 ["함수", "자바스크립트", "리액트","실행"] 배열을 할당받는다.

이 배열들은 각각 숫자와 문자열을 저장하는데 사용된다.

함수 func()를 호출할 때, 배열의 인덱스(키)를 사용하여 각가의 매개변수를 전달한다.

첫번째 호출에서는 num[0], info[0], info[3]을 전달하고,

두번째 호출에서는 num[1], info[1], info[3]을 전달한다. 같은 방식으로 인덱스만 바뀌어 세번째 호출도 수행된다.

함수 func()는 이러한 매개변수를 사용하여 문장을 생성하고, 문장은 document.write를 사용하여 출력된다.

출력된 문장은 "숫자. 문자열1 이 문자열2 가 되었습니다"의 형태를 갖는다.

16. 함수 유형 : 함수와 객체를 이용한 형태

함수와 객체를 이용하여 데이터를 실행하는 방법

{
    function func(num, str1, str2) {
        document.write(num + ". " + str1 + "가 " + str2 + "되었습니다", "<br>");
    }
    const info = {
        num1: 1,
        name1: "함수",
        num2: 2,
        name2: "자바스크립트",
        num3: 3,
        name3: "리액트",
        word: "실행"
    }
    func(info.num1, info.name1, info.word);
    func(info.num2, info.name2, info.word);
    func(info.num3, info.name3, info.word);
}
결과 확인하기
1. 함수가 실행되었습니다
2. 자바스크립트가 실행되었습니다
3. 리액트가 실행되었습니다

함수 유형 : 함수와 객체를 이용한 형태

상수(const)info는 객체 형태를 띄며 num1, num2, num3, name1, name2, name3, word까지 7개의 속성을 가진다.

이 속성들을 각각 숫자와 문자열을 저장하며, 이들은 함수 호출 시에 매개변수로 사용된다.

함수 func()를 호출할 때는, 객체 info의 속성에 접근하여 각각의 매개변수를 전달한다.

첫번째 호출에서는 info.num1, info.name1, info.word를 전달하고,

두번째 호출에서는 info.num2, info.name2, info.word를 전달한다. 같은 방식으로 세번째 호출도 실행된다.

객체를 불러오는 방식으로 .(온점)을 찍어 속성에 접근하여 매개변수를 전달할 수 있게 한다.

17. 함수 유형 : 함수와 배열, 객체를 이용한 형태

함수와 배열, 객체를 사용하여 데이터를 실행하는 방법.

{ 
    function func(num, str1, str2) {
        document.write(num + ". " + str1 + "가 " + str2 + "되었습니다", "
");
    }
    const info = [
        {
            num: 1,
            name: "함수",
        }, {
            num2: 2,
            name: "자바스크립트"
        }, {
            num3: 3,
            name: "리액트",
            word: "실행"
        }
    ]
    func(info[0].num, info[0].name, info[2].word);
    func(info[1].num2, info[1].name, info[2].word);
    func(info[2].num3, info[2].name, info[2].word);
}
결과 확인하기
1. 함수가 실행되었습니다
2. 자바스크립트가 실행되었습니다
3. 리액트가 실행되었습니다

함수 유형 : 함수와 배열, 객체를 이용한 형태

상수(const)info는 배열 형태를 띄며, 배열 안에는 세 개의 객체가 저장되어 있다.

객체마다 숫자와 문자열을 저장하며, 세번째 객체는 word라는 속성도 추가로 갖는다.

함수 func를 호출할 때는, 배열 info의 각 객체에 접근하여 각각의 매개변수를 전달한다.

배열의 값에 접근하기 위해 [] 대괄호를 사용하고 객체의 값에 접근하기 위해 .(온점)을 사용한다.

배열 안에 객체가 있는 형태를 갖추고 있기 때문에 배열의 값에 접근하는 방법과 객체의 값에 접근하는 방법 두 가지 모두를 사용한다.

18. 함수 유형 : 객체 안에 함수를 이용한 형태

객체 안에 함수를 이용하여 데이터를 실행시키는 방법.

{ 
    const info = {
        num1: 1,
        name1: "함수",
        num2: 2,
        name2: "자바스크립트",
        num3: 3,
        name3: "리액트",
        word: "실행",
        result1: function(){
            document.write(info.num1 + ". " + info.name1 + "가 " + info.word + "되었습니다", "<br>");
        },
        result2: function(){
            document.write(info.num2 + ". " + info.name2 + "가 " + info.word + "되었습니다", "<br>");
        },
        result3: function(){
            document.write(info.num3 + ". " + info.name3 + "가 " + info.word + "되었습니다", "<br>");
        }
    }
    info.result1();
    info.result2();
    info.result3();
}
결과 확인하기
1. 함수가 실행되었습니다
2. 자바스크립트가 실행되었습니다
3. 리액트가 실행되었습니다

객체 안에 함수를 이용한 형태

상수 info는 객체를 나타내며, 속성으로 숫자와 문자열을 저장한다.

또한 result1~3까지 속성으로 추가되어 있다.

이들 속성은 함수를 나타내며, 문장을 생성하고 출력한다.

result1, result2, result3이 전부 객체의 속성이기 때문에 info 뒤에 온점을 찍어 객체 안에 저장되어 있는 result에 접근한다.



객체를 사용하여 함수를 호출하는 이유

1. 객체를 사용하면 함수와 데이터를 모두 저장하고 관리할 수 있다.

2. 코드의 가독성과 유지보수성을 높일 수 있다.

3. 객체의 속성에 함수를 할당하면 일종의 메서드(method)를 생성할 수 있다.

이 메서드를 호출하면 객체의 상태를 변경하거나 객체를 조작하는 등의 동작을 수행할 수 있다.

메서드를 호출할 때에는 객체 이름 뒤에 속성 이름과 괄호를 써서 호출한다.

19. 함수 유형 : 객체생성자 함수

객체생성자 함수를 사용하여 데이터를 실행 시키는 방법.

{ 
    function Func (num, name, word) {
        this.num = num;                 //함수 안의 this는 함수를 통하여 생성되는 객체를 의미한다.
        this.name = name;
        this.word = word;

        this. result = function () {
            document.write(this.num + ". " + this.name + "가 " + this.word + "되었습니다", "<br>");
    }
    }
    //인스턴스 생성
    const info1 = new Func(1,"함수","실행");             
    const info2 = new Func(2,"자바스크립트","실행");  
    const info3 = new Func(3,"리액트","실행"); 

    info1.result();
    info2.result();
    info3.result();
}
결과 확인하기
1. 함수가 실행되었습니다
2. 자바스크립트가 실행되었습니다
3. 리액트가 실행되었습니다

객체생성자 함수

Func라는 생성자 함수를 정의하고, 해당 함수를 통해 객체를 생성하는 방식이다.

생성자 함수는 num, name, word 3개의 인자를 받아서 해당 인자를 프로퍼티로 가지는 객체를 생성한다.

this 키워드를 통해 생성된 객체의 프로퍼티를 저장한다.

result라는 메서드는 생성자 함수 Func를 통해 생성된 객체에 포함되는 함수로, 프로퍼티를 참조하여 결과값을 출력하는 역할을 한다.

생성자 함수는 일반 함수와 차이를 두기 위해 함수명의 첫 문자를 대문자로 표현한다.

생성자 함수로 생성된 객체의 속성 추가, 삭제, 변경은 다른 객체의 속성에 영향을 주지 않는다.



프로퍼티

기본적으로 property는 어떤 값을 나타낸다. 그런데 이 값이 다른 값과 연관되어 있을 때 property라고 부른다.

20. 함수 유형 : 프로토타입 함수

프로토타입 함수를 사용하여 데이터를 실행 시키는 방법.

{ 
    function Func(num, name, word) {
        this.num = num;
        this.name = name;
        this.word = word;
    }
    Func.prototype.result = function (){
        document.write(this.num + ". " + this.name + "가 " + this.word + "되었습니다", "
");
    }
    const info1 = new Func(1,"함수","실행");             
    const info2 = new Func(2,"자바스크립트","실행");  
    const info3 = new Func(3,"리액트","실행");

    info1.result();
    info2.result();
    info3.result(); 
}
결과 확인하기
1. 함수가 실행되었습니다
2. 자바스크립트가 실행되었습니다
3. 리액트가 실행되었습니다

프로토타입 함수

생성자 함수 Func를 정의하고 Func.prototype 객체에 result 메서드를 추가한 후, "new" 연산자를 사용하여 생성자 함수를 호출하여

객체 인스턴스를 생성하고, 생성된 인스턴스에서 result 메서드를 호출한다.

Func 생성자 함수는 num, name, word 3개의 인자를 받아서 객체의 프로퍼티로 할당한다.

Func.prototype.result 메서드는 생성된 객체 인스턴스에서 호출될 수 있도록 프로토타입 체인에 추가된다.

result 메서드는 this를 통해 함수 안에 생성된 데이터를 이용하여 문장을 만들고 이를 document.write를 이용하여 출력한다.

생성자 함수에서 정의한 속성을 그대로 상속받는다.

생성자 함수 내에 정의하지 않고도 생성된 객체에서 호출하여 사용할 수 있다.

21. 함수 유형 : 객체 리터럴 함수

객체리터럴 함수를 사용하여 데이터를 실행 시키는 방법.

{ 
    function func(num, name, com){
        this.num = num;
        this.name = name;
        this.com = com;
    }

    func.prototype = {
        result1: function(){
            document.write(`${this.num}. ${this.name}가 ${this.com} 되었습니다.
`);
        },
        result2: function(){
            document.write(`${this.num}. ${this.name}가 ${this.com} 되었습니다.
`);
        },
        result3: function(){
            document.write(`${this.num}. ${this.name}가 ${this.com} 되었습니다.
`);
        }
    }

    const info1 = new func("1", "함수", "실행");
    const info2 = new func("2", "자바스크립트", "실행");
    const info3 = new func("3", "리액트", "실행");

    info1.result1();
    info2.result2();
    info3.result3();
}
결과 확인하기
1. 함수가 실행되었습니다
2. 자바스크립트가 실행되었습니다
3. 리액트가 실행되었습니다

객체 리터럴 함수

함수 표현식 안에 중괄호{}를 사용하여 객체를 생성하는 함수이다.

생성된 객체는 해당 함수 안에서 정의된 프로퍼티와 메서드를 가진다.

'func'라는 객체 생성자 함수를 정의하고 'func'의 프로토타입에

'result1', 'result2', 'result3' 메서드를 정의한다.

'func' 생성자 함수를 통해 'info1','info2', 'info3' 객체를 생성하고,

각 객체에는 'num', 'name', 'com' 프로퍼티가 있다.

'result1', 'result2', 'result3' 메서드는 'this'를 통해 객체의 프로퍼티를 참조하고, 출력문을 생성한다.

이 메서드들은 생성된 객체에서 호출할 수 있으며, 각 객체의 'num', 'name', 'com' 프로퍼티 값을 사용하여 출력한다.

'info.result1()', 'info.result2()', 'info.result3()'은 각 객체의 메서드를 호출하여 출력한다.

22. 함수 종류 : 즉시 실행 함수

함수를 정의하고 즉시 실행하는 함수

{ 
    //원래 함수 형태 
    function func(){                            
        document.write("함수가 실행되었습니다.");
    }
    func();                      

    //즉시 실행 함수 기본 
    (function (){
        document.write("함수가 실행되었습니다.");
    })();                              

    //즉시 실행 함수 화살표
    (() => {
        document.write("함수가 실행되었습니다.");
    })();                       
}
결과 확인하기
함수가 실행되었습니다.

즉시 실행 함수

함수를 선언함과 동시에 실행하기 때문에 실행문을 생락하여 작성할 수 있다.

함수를 감싸는 소괄호( )는 함수를 값으로 감싸고,

마지막의 또 다른 괄호( )는 함수를 즉시 실행 시키는 역할을 한다.

즉시 실행 함수는 함수 내에 정의된 변수들과 함수들이 함수 안에서만 유지되므로,

지역 변수로 변수와 함수를 사용할 수 있다.

23. 함수 종류 : 파라미터 함수

다른 함수의 인자로 전달되는 함수

{ 
    //기존 매개변수 함수
    function func(str){
        document.write(str);
    }
    func("함수가 실행되었습니다.");  
    
    //파라미터 함수                
    function func(str = "함수가 실행되었습니다."){
        document.write(str);
    }
    func();                           
}
결과 확인하기
함수가 실행되었습니다.

파라미터 함수

다른 함수에 인자로 전달되어 실행되는 함수이다.

코드의 재사용성을 높이고, 함수의 동작을 다양하게 구현할 수 있다.

함수 내부에서 'str' 매개변수에 대한 기본값으로 "함수가 실행되었습니다."를 할당하고 있다.

따라서 함수를 아무런 인자 없이 호출하면 'str' 매개변수에는 기본값인 "함수가 실행되었습니다."가 할당된다.

24. 함수 종류 : 아규먼트 함수

인덱스 번호를 통해 함수에 전달된 모든 인자를 참조할 수 있다.

{ 
    function func(str1, str2){
        document.write(arguments[0]);
        document.write(arguments[1]);
    }
    func("함수가 ", "실행되었습니다."); 
}
결과 확인하기
함수가 실행되었습니다.

아규먼트 함수

arguments 객체는 함수 내에서 사용 가능한 지역 변수이다.

이 객체는 인덱스 번호를 통해 함수에 전달된 모든 인자를 참조할 수 있다.

arguments[0]은 첫 번째 인자인 "함수가"를, arguments[1]은 두 번째 인자인 "실행되었습니다."를 참조한다.

따라서 위 함수를 실행하면 "함수가 실행되었습니다."라는 문자열이 출력된다.

25. 함수 종류 : 재귀 함수 (반복해서 쓰는 것)

인덱스 번호를 통해 함수에 전달된 모든 인자를 참조할 수 있다.

{ 
    function func(num){
        if(num<=1){
            document.write("함수가 실행되었습니다.1");
        } else {
            document.write("함수가 실행되었습니다.2");
            func(num-1);
        }
    }
    func(3);
}
결과 확인하기
함수가 실행되었습니다.2
함수가 실행되었습니다.2
함수가 실행되었습니다.1

재귀 함수

자기 자신을 호출하는 함수를 말한다.

일반적으로 반복문을 사용하여 구현할 수 있는 문제들을 해결할 때 사용된다.

재귀 함수는 두 가지 요소 구성되는데, 첫째는 종료 조건이며 둘째는 재귀 호출이다.

종료 조건이 만족되면 재귀 호출이 중단된고, 재귀 호출은 종료 조건이 만족되지 않은 경우에만 수행된다.

재귀함수 사용 시에는 종료 조건을 명확하게 설정해야 한다.

그렇지 않으면 함수가 무한히 호출될 수 있기 때문이다.

func 함수는 숫자 하나(num)을 인자로 받는다.

함수는 먼저 if문을 사용하여 num이 1보다 작거나 같으면 "함수가 실행되었습니다.1"이라는 문자열을 출력한다.

이때 함수는 더 이상 자신을 호출하지 않고 종료된다.

그러나 num이 1보다 크다면, "함수가 실행되었습니다.2"라는 문자열을 출력한 후 num-1을 인자로 자기 자신(func)를 호출한다.

이 과정이 반복되면서 num이 1보다 작아질 때까지 함수가 반복적으로 호출된다.

func(3)을 호출하면 "함수가 실행되었습니다.2"가 출력되며,

func(2)가 호출되어 "함수가 실행되었습니다.2"가 출력되고,

func(1)이 호출되어 "함수가 실행되었습니다.1"이 출력된 후 함수는 종료된다.

따라서 최종적으로는 "함수가 실행되었습니다.2"가 2번 실행된 후 "함수가 실행되었습니다.1"이 차례로 출력된다.

26. 함수 종류 : 콜백 함수

다른 함수의 인자로 전달되어 그 함수 안에서 호출되는 함수를 말한다.

{ 
    function func(){
        document.write("함수가 실행되었습니다.1");
    }
    function callback(str){
        document.write("함수가 실행되었습니다.2");
        str();
    }
    callback(func);
}
결과 확인하기
함수가 실행되었습니다.

콜백 함수

다른 함수에 인자로 전달되어, 해당 함수의 동작이 완료된 후 호출되는 함수이다.

어떤 함수를 a라고 쳤을 때, a가 완료된 후 어떤 작업을 수행하고자 할 때 콜백 함수를 사용한다.

이때 콜백함수는 a가 실행되는 동안에도 다른 작업을 수행할 수 있다.

callback 함수가 인자로 전달된 func 함수를 실행한다.

func 함수는 document.write를 사용하여 "함수가 실행되었습니다.1"이라는 문자열을 출력한다.

callback 함수는 인자로 전달된 함수 str을 실행한다.

먼저 document.write를 사용하여 "함수가 실행되었습니다.2"라는 문자열을 출력한 후, sr()을 호출한다.

이때 str은 함수 이므로 str()을 호출하면 func 함수가 실행된다.

따라서 "함수가 실행되었습니다.2"와 "함수가 실행되었습니다.1"이 차례로 출력된다.