javascript

01. 함수 : 선언적함수

선언적 함수는 함수를 선언하는 가장 일반적인 방식입니다.

{
    function func() {
        document.write("실행되었습니다.1");
    };
    func();           
}

함수의 장점
1. 코드의 재사용성
2. 유지보수 용이
함수를 사용하면 특정 작업을 수행하는 코드를 논리적으로 묶어서 호출하고 실행할 수 있습니다.★

중요한 점은 함수를 선언한 후에 실행하려면 실행문을 입력해주어야 합니다.★★★

2줄 : func의 이름을 가진 함수를 선언합니다.
3줄 : document.write()를 이용해 "실행되었습니다." 문자열을 출력해줍니다.
5줄 : func()함수를 실행해줍니다.

02. 익명 함수

익명 함수는 함수의 이름이 없는 함수입니다.

{
    //익명 함수의 구조
    //let variableName = function(parameters) {};

    const func = function () {
        console.log("실행되었습니다.2");
    };
    func();
}

익명 함수는 이름이 없기 때문에 코드의 가독성을 해치지 않고도 유연한 사용이 가능합니다.
익명 함수는 주로 다른 함수의 매개변수로 전달하거나, 변수에 할당하여 사용됩니다.
매개변수는 함수의 괄호안에 넣어지는 변수입니다.★ 참조) 3. 매개변수 함수 5. 매개변수 + 리턴값 함수

2줄 : 상수 func에 함수를 선언합니다.
3줄 : console.log()를 이용해 "실행되었습니다." 문자열을 콘솔로 출력합니다.
5줄 : 상수 이름을 이용해 함수를 실행합니다.

03. 매개변수 함수

매개변수 함수(Parameter Function)란 다른 함수의 매개변수로 전달되어 특정 작업을 수행하는 함수를 말합니다.
11. 함수와 매개변수를 이용한 형태와 같은 예제입니다.

{
    function func(str) {  // str이 매개변수로 넣어져있다.
        console.log(str);
    };
    func("실행되었습니다.3");  // "실행되었습니다."문자열이 str변수로 들어감★★★
}

주로 콜백 함수로 사용되며, 다른 함수 내에서 호출되거나 실행될 때 필요한 작업을 정의하는 역할을 합니다.

콜백 함수: 다른 함수의 인자로 전달되어 특정 상황이나 이벤트 발생 시 호출되는 함수입니다.★

2줄 : func이름에 매개변수 str을 받는 함수를 선언합니다.
3줄 : console.log을 이용해 받은 매개변수 str의 값을 그대로 콘솔에 출력합니다.
5줄 : func함수에 "실행되었습니다."를 str 매개변수의 값으로 넣어 실행합니다.

04. 함수 : 리턴값(결과/종료) 함수

리턴값이(결과/종료)이 있는 함수는 return 제어문을 사용해서 함수의 연산 결과 중 원하는 값을 지정해서 호출위치로 복구시키는 기능을 말합니다.

{
    function func() {
        return "실행되었습니다.4";   //결과 종료
    };
    console.log(func());
}

함수의 리턴값을 설정하기 위해 return 키워드를 사용합니다.
return 키워드를 만나면 함수는 즉시 종료되며, 지정된 값이나 표현식을 리턴합니다.★
만약 return문이 없거나 값을 지정하지 않으면 함수는 암묵적으로 undefined 값을 리턴합니다.
리턴값의 중요한 점은 return값을 반환하는 함수를 출력하려면 console.log()문이나 document.write()와 같은 출력 명령어를 사용하여 출력해주어야 합니다.★★★

2줄 : func()함수를 선언합니다.
3줄 : return값으로 "실행되었습니다." 문자열을 반환값으로 전해줍니다.
5줄 : console.log()를 이용해 안에 func()함수를 실행시켜 func()함수의 리턴값을 출력시킵니다.

05. 함수 : 매개변수 + 리턴값 함수

매개변수 함수와 리턴값 함수를 합친 함수로 가장 많이 사용됩니다.

{
    function func(str) {
        return str;
    }
    console.log(func("실행되었습니다.5"));
}

리턴값과 매개변수가 둘다 있는 함수는 두개 모두의 특성을 가진다.

2줄 : func에 매개변수str을 받는 함수를 선언합니다.
3줄 : return문을 이용해 받은 매개변수 str 값을 그대로 반환해줍니다.
5줄 : console.log()를 이용해 func에 "실행되었습니다." 문자열을 매개변수로 전달하고 실행합니다.

06. 화살표 함수 : 선언적 함수

선언적 함수를 새로운 함수 표현 방식인 화살표 함수로 나타냅니다.

{
    // 원래 함수 구조 : function 함수이름(매개변수){};    
    // 화살표 함수 구조 : 함수이름 = () => {};

    func = () => {
        console.log("실행되었습니다.6");
    };
    func();
}

함수를 보다 간결하게 작성할 수 있도록 설계되었으며, 주로 함수 표현식을 더 간결하게 표현하거나, 콜백 함수를 다루는 데 많이 사용됩니다.

5줄 : func함수를 화살표함수로 선언합니다.
6줄 : console.log()를 이용해 "실행되었습니다."문자열을 출력하는 문장을 넣습니다.
8줄 : func()을 이용해 함수를 실행합니다.

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

화살표 함수 문법을 이용해 익명 함수를 화살표 함수로 표현한것입니다.

{
    const func = () => {
        const x = 700;
        console.log(x);
    }
    func();
}

2줄 : 익명함수 func을 화살표 함수로 선언합니다.
3줄 : 상수 x의 값으로 700을 입력합니다.
4줄 : console.log()를 이용해 x의 값을 콘솔로 출력하는 문장을 입력합니다.
6줄 : func이름의 함수를 실행합니다.

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

화살표 함수 문법을 이용해 매개변수 함수를 화살표 함수로 표현한것입니다.

{
    func = (x) => {
        console.log(x);
    }
    func(800);
}

2줄 : 매개변수 함수를 화살표함수로 선언합니다.
3줄 : console.log를 이용해 매개변수의 값을 콘솔에 출력합니다.
5줄 : func()함수에 800값을 넣어 함수를 실행합니다.

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

화살표 함수 문법을 이용해 리턴값 함수를 화살표 함수로 표현한것입니다.

{
    func = () => {
        const x = 900;
        return x;
    };
    console.log(func());
}

2줄 : func()함수를 화살표함수로 선언합니다.
3줄 : 상수 x에 900의 값을 넣습니다.
4줄 : x의 값을 반환해줍니다.
6줄 : console.log()를 이용해 func()함수 실행 결과값을 콘솔로 나타냅니다.

10. 화살표 함수(익명 함수 + 매개변수 + 리턴값 함수)

화살표 함수 문법을 이용해 매개변수와 리턴값이 합쳐진 함수를 화살표 함수로 표현한것입니다.

{
    const func = (str) => {
        return str;
    }
    console.log(func("10. 함수가 실행되었습니다."));
}

화살표 함수는 익명 함수 (anonymous function)를 간결하게 정의하는 데 주로 사용합니다.

2줄 : 변수 func()에 매개변수 str를 넣어 화살표함수로 선언합니다.
3줄 : return으로 매개변수 str의 값을 그대로 반환해줍니다.
5줄 : console.log()를 이용해 func()함수에 매개변수로 10. 함수가 실행되었습니다. 문자열을 넣어 실행 결과값을 콘솔로 나타냅니다.

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

03. 매개변수 함수입니다.
동일한 예제이지만 매개변수가 2개 사용되며, 백틱을 이용해 출력합니다.

{
    function func(num, str){
        console.log(`${num}. ${str}`);
    }
    func(11, "함수가 실행되었습니다.");
}

백틱(backtick)은 프로그래밍에서 문자열을 정의하는 데 사용되는 특수한 문자입니다.
백틱은 일반적으로 따옴표(작은 따옴표 또는 큰 따옴표) 대신 문자열을 감싸는 데 사용됩니다.

2줄 : 함수 func에 매개변수 num, str을 받습니다.
3줄 : console.log()를 이용하여 벡틱을 사용해 매개변수로 받은 num과 str을 출력합니다.
5줄 : 함수 func에 매개변수 11, "함수가 실행되었습니다." 매개변수를 넣어 함수를 실행합니다.

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

전역변수(외부 변수)를 만들고 함수에서 전역변수을 가지고 출력하는 예제입니다.

{
    const num = 12;
    const str = "함수가 실행되었습니다.";

    function func(num, str){
        console.log(`${num}. ${str}`);
    }
    func(num, str);
}

지역변수와 전역변수의 차이는 ++ 지역변수/전역변수를 참조하세요.

2줄 : 상수 변수 num에 값 12를 넣습니다.
3줄 : 상수 변수 str에 "함수가 실행되었습니다." 문자열을 넣습니다.
5줄 : 함수 func()에 매개변수로 num과 str을 받습니다.
6줄 : console.log()를 이용해 백틱을 활용한 num과 str 매개변수 값을 받아 출력합니다.
8줄 : func()함수에 전역 변수 num과 str의 값을 매개변수로 넣어 실행합니다.

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

전역 변수에 배열을 선언하고 배열을 이용하는 함수의 형태입니다.

{
    const num = [13, 14];
    const str = ["함수가 실행되었습니다.", "함수가 실행되었습니다."];

    function func(num, str){
        console.log(`${num}. ${str}`);
    }
    func(num[0], str[0]);
    func(num[1], str[1]);
}

어려워 보이지만 배열을 선언해 그 배열을 출력하는 함수를 만든 것이다.
03. 매개변수 함수의 업그레이드 버전

2줄 : 상수 num에 배열을 선언해 13, 14 값을 저장합니다.
3줄 : 상수 str에 배열얼 선언해 "함수가 실행되었습니다.", "함수가 실행되었습니다." 문자열 값을 저장합니다.
5줄 : num과 str을 매개변수로 갖는 함수 func을 선언합니다.
6줄 : console.log()를 이용하여 백틱기호를 이용해 매개변수로 받은 num값과 str값을 출력합니다.
8줄 : num[0], str[0]값을 매개변수로 갖는 func 함수를 실행합니다.
9줄 : num[1], str[1]값을 매개변수로 갖는 func 함수를 실행합니다.

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

객체를 이용한 함수의 형태입니다.

{
    const info = {
        num: 15,
        str : "함수가 실행되었습니다."
    };
    function func(num, str){
        console.log(`${num}. ${str}`);
    }
    func(info.num, info.str);
}

앞에 본 배열을 이용한 함수에서 배열이 아닌 객체를 이용했다는 점이 다른 점입니다.

2줄 : 상수 객체 info를 선언합니다.
3줄 : num키에 15값을 넣습니다.
4줄 : str키에 "함수가 실행되었습니다." 문자열 값을 넣습니다.
6줄 : num, str 값을 매개변수로 갖는 func함수를 선언합니다
7줄 : console.log()를 이용해 백틱기호를 이용하여 매개변수로 받은 num값과 str값을 출력합니다.
9줄 : info객체의 num값과 info객체의 str값을 func함수의 매개변수로 넣어 실행합니다.

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

배열안에 객체가 들어있는 데이터 형태를 가지고 함수로 표현하는 방법입니다.

{
        const info = [
        {
            num: 16,
            str: "함수가 실행되었습니다."
        },
        {
            num: 17,
            str: "함수가 실행되었습니다."
        }
    ];
    function func(num, str){
        console.log(`${num}. ${str}`);
    }
    func(info[0].num, info[0].str);
    func(info[1].num, info[1].str);
}

배열안에 객체가 들어가는 데이터의 예시로는
1. 제품 목록 배열
2. 학생 목록 배열
3. 게시물 배열
정도가 있으며 이 데이터의 특징은 각각 같은 데이터 속성을 가지고 있다는 점이다.
예를 들어 학생 목록은
학생당 이름, 반, 번호, 성적과 같은 동일한 데이터 속성이 들어가는 형태이다.

2줄 : 상수 배열 info를 선언합니다.
3줄 : 배열안에 객체를 선언합니다.
4줄 : num키의 값으로 16을 저장합니다.
5줄 : str키의 값으로 "함수가 실행되었습니다."를 저장합니다.
6줄 : 첫번째 객체를 닫습니다.
7줄 : 두번째 객체를 입력합니다.
8줄 : num키의 값으로 17을 저장합니다.
9줄 : str키의 값으로 "함수가 실행되었습니다."를 저장합니다.
10줄 : 두번째 객체를 닫습니다.
11줄 : 배열을 닫습니다.
12줄 : num과 str 매개변수를 받는 함수 func을 선언합니다.
13줄 : console.log()를 이용해 백틱문자열로 매개변수로 받은 num값과 str값을 형식에 맞게 출력합니다.
15줄 : func함수에 매개변수로 info의 배열 0번째의 객체에서 num키값과 str키값을 전달하고 실행합니다.
16줄 : func함수에 매개변수로 info의 배열 1번째의 객체에서 num키값과 str키값을 전달하고 실행합니다.

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

객체 안에 함수가 들어가 있는 데이터를 출력하는 방법입니다.

{
    const info = {
        num: 18,
        str: "함수가 실행되었습니다.",
        result: () => console.log(`${info.num}. ${info.str}`)
    }
    info.result();
}

전의 예제에서는 따로 데이터를 저장하고 따로 함수를 선언해 저장한 데이터를 가져오는 함수를 만들어 함수를 실행하는 형태였으며,
이번 예제에서는 데이터 안에 함수를 선언하고 만들며 밖에서 함수를 실행하는 형태입니다.

2줄 : 상수 객체 info를 선언합니다.
3줄 : num키에 값 18을 저장합니다.
4줄 : str키에 값 "함수가 실행되었습니다."를 저장합니다.
5줄 : result키에 화살표함수를 선언해 console.log()로 백틱문자열 형태로 info객체의 num키 값과 str키 값을 출력하는 함수를 만듭니다.
7줄 : info객체의 result함수를 실행합니다.

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

데이터가 객체 형태로 된 함수를 만들어 생성자를 이용해 실행하는 예제입니다.

{
    function Func(num, str){
        this.num = num;
        this.str = str;
        this.result = () => console.log(`${this.num}. ${this.str}`);
    }
    // 인스턴스 생성
    const info1 = new Func(19, "함수가 실행되었습니다.");
    const info2 = new Func(20, "함수가 실행되었습니다.");

    // 호출
    info1.result();
    info2.result();
}

실행 중인 코드의 문맥에 따른 this의 뜻
1. 전역 컨텍스트(전역 스코프)에서는 this가 브러우저 환경에서는 window객체를 가리킵니다.
2. 함수 내부에서는 두가지 의미가 있는데 함수로 호출 할때 this는 함수가 속한 객체를 가리키며, 그렇지 않으면 전역 객체를 가리킵니다.
따라서 예제에서 this.num은 Func함수가 가지고 있는 생성자 객체 num을 가리킵니다.

인스턴스란
원래 인스턴스란 클래스를 기반으로 생성된 객체입니다.
여기서 사용된 인스턴스는 함수 Func을 바탕으로 매개변수를 받는 객체를 생성하였습니다.

2줄 : 매개변수 num과 str을 받는 함수 Func을 선언합니다.
3줄 : Func함수의 객체 num에 매개변수로 받은 num값을 넣어줍니다.
4줄 : Func함수의 객체 str에 매개변수로 받은 str값을 넣어줍니다.
5줄 : Func함수의 객체 result에 함수를 넣어주는데 이 함수는 console.log()로 매개변수를 통해 받은 this.num값과 this.str값을 출력합니다.
8줄 : 매개변수 19와 "함수가 실행되었습니다."를 전달하는 함수 Func를 실행하는 상수 info1를 만듭니다.
9줄 : 매개변수 20와 "함수가 실행되었습니다."를 전달하는 함수 Func를 실행하는 상수 info2를 만듭니다.
12줄 : 상수 info1의 객체 result()함수를 실행합니다.
13줄 : 상수 info2의 객체 result()함수를 실행합니다.

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

프로토타입이란 객체를 만들 때 해당 객체의 기능을 정의하는 데 사용됩니다.

{
    function Func(num, str){
        this.num = num;
        this.str = str;
    }
    Func.prototype.result = function(){
        console.log(`${this.num}. ${this.str}`);
    }

    const info1 = new Func(21, "함수가 실행되었습니다.");
    const info2 = new Func(22, "함수가 실행되었습니다.");

    info1.result();
    info2.result();
}

javascript에서 프로토타입 메서드를 추가하는 방법 :
함수이름.prototype.메서드이름 = function(){메서드내용};

2줄 : 매개변수 num과 str을 받는 함수 Func를 선언합니다.
3줄 : num키로 매개변수로 받은 num 데이터를 저장합니다.
4줄 : str키로 매개변수로 받은 str 데이터를 저장합니다.
6줄 : Func함수의 프로토타입으로 result키로 함수를 넣습니다.
7줄 : console.log()를 이용해 Func함수의 num키과 str키의 값을 출력합니다.
10줄 : 21과 "함수가 실행되었습니다."를 매개변수로 받는 Func함수를 상수 info1로 저장합니다.
11줄 : 22과 "함수가 실행되었습니다."를 매개변수로 받는 Func함수를 상수 info2로 저장합니다.
13줄 : info1의 객체 result()함수를 실행합니다.
14줄 : info2의 객체 result()함수를 실행합니다.

19. 함수 유형 : 프로토타입 객체 리터럴 함수

프로토타입 메서드를 객체방식으로 여러개 생성할 수 있습니다.

{
    function Func(num, str){
        this.num = num;
        this.str = str;
    }
    Func.prototype = {
        result1 : function(){
            console.log(`${this.num}. ${this.str}`);
        },
        result2 : function(){
            console.log(`${this.num}. ${this.str}`);  
        },
    }

    const info1 = new Func(23, "함수가 실행되었습니다.");
    const info2 = new Func(24, "함수가 실행되었습니다.");

    info1.result1();
    info2.result2();
}

프로토타입 메서드를 객체로 받는 방법 :
함수이름.prototype = {
메서드이름1 : function(){메서드내용},
메서드이름2 : function(){메서드내용},
}

2줄 : 매개변수 num과 str을 받는 함수 Func를 선언합니다.
3줄 : num키로 매개변수로 받은 num 데이터를 저장합니다.
4줄 : str키로 매개변수로 받은 str 데이터를 저장합니다.
6줄 : Func함수의 프로토 메서드를 지정합니다.
7줄 : result1객체로 함수를 선언합니다.
8줄 : console.log()를 이용해 num키과 str키의 값을 출력합니다.
10줄 : result2객체로 함수를 선언합니다.
11줄 : console.log()를 이용해 num키과 str키의 값을 출력합니다.
15줄 : 23과 "함수가 실행되었습니다."를 매개변수로 받는 Func함수를 상수 info1로 저장합니다.
16줄 : 24과 "함수가 실행되었습니다."를 매개변수로 받는 Func함수를 상수 info2로 저장합니다.
19줄 : info1의 객체 result1()함수를 실행합니다.
19줄 : info2의 객체 result2()함수를 실행합니다.

20. 함수 : 즉시실행함수

함수를 정의하자마자 즉시 호출합니다.

{
(function (){
    console.log("25. 함수가 실행되었습니다.");
})();

(() => {
    console.log("26. 함수가 실행되었습니다.");
})();
}

즉시 실행 함수(IIFE, Immediately Invoked Function Expression)
함수구조
(function() {
// 함수 내부 코드
})();
혹은
(() => {
// 함수 내부 코드
})();

2줄 : 즉시실행함수를 선언합니다.
3줄 : console.log()로 25. 함수가 실행되었습니다를 출력합니다.

6줄 : 즉시실행함수를 선업하니다.
7줄 : console.log()로 26. 함수가 실행되었습니다를 출력합니다.

21. 함수 : 파라미터 함수

파라미터는 매개변수를 뜻하며 매개변수를 가진 함수를 말합니다.

{
function func(str = "27. 함수가 실행되었습니다."){
    console.log(str);
}
func();

const func1 = (str = "27. 함수가 실행되었습니다.") => {
    console.log(str);
}
func1();
}

2줄 : str값으로 27.함수가 실행되었습니다 문자열을 받는 함수 func를 선언합니다.
3줄 : console.log()로 매개변수 str의 값을 출력합니다.
5줄 : func함수를 실행합니다.

7줄 : str값으로 27.함수가 실행되었습니다 문자열을 받는 함수 func1를 화살표 함수로 선언합니다.
8줄 : console.log()로 매개변수 str의 값을 출력합니다.
9줄 : func함수를 실행합니다.

22. 함수 : 재귀함수 : 자기 자신을 호출하는 함수

재귀 함수(Recursive Function)는 함수가 자기 자신을 호출하는 함수입니다.

{
function func(num){
    for(let i=1; i<=num; i++){
        console.log("29. 함수가 실행되었습니다."+ i);
    }   
}
func(10)            

function func1(num){
    if(num <= 0) return;

    console.log("30. 함수가 실행되었습니다.");
    func1(num-1);
}
func1(10);
}

2줄 : num이라는 매개변수를 받는 함수 func을 선언합니다.
3줄 : i의 값이 1부터 num의 값까지 1씩증가하는 for문을 만듭니다.
4줄 : console.log()를 이용해 29. 함수가 실행되었습니다. 문자열과 i값을 출력합니다.
7줄 : func함수에 매개변수 10을 넣어 실행합니다.

9줄 : num이라는 매개변수를 받는 함수 func1을 선언합니다.
10줄 : if문을 이용해 num

23. 콜백 함수 : 다른 함수로 실행되는 함수

{
// 01 이벤트 콜백 함수
function func(){
    console.log("31. 함수가 실행되었습니다.")
}
btn.addEventListerner("click", func);

//02 함수를 다른 함수의 인자로 전달
function func1(){
    console.log("32. 함수가 실행되었습니다.");
}

function func2(callback){
    callback();
    // func1();
}
func2(func1);

// 03 반복문으로 콜백함수 만들기
function func3(num){
    console.log(num + ". 함수가 실행되었습니다.");
}
function func4(callback){
    for(let i=33; i<=38; i++){
        callback(i);
    }
}
func4(func3);
}

24. 함수 : 비동기 함수 : 콜백 함수

{
// 01 동기적인 함수 호출
function func1(){
    console.log("39. 함수가 실행되었습니다.");
}
function func2(){
    console.log("40. 함수가 실행되었습니다.");
}
func1();
func2();

// 02 비동기적인 함수 호출
function func3(){
    setTimeout(() => {
        console.log("41. 함수가 실행되었습니다.");
    }, 1000)
}
function func4(){
    console.log("42. 함수가 실행되었습니다.");
}
func3();
func4();

// 03 비동기적인 콜백 함수 호출
function func5(callback){
    setTimeout(() => {
        console.log("43. 함수가 실행되었습니다.");
        callback();
    }, 1000)
}
function func6(){
    console.log("44. 함수가 실행되었습니다.");
}
func5(function(){
    func6();
});

// 콜백 지옥
{
    function funcA(callback){
        setTimeout(() => {
            console.log("funcA가 실행되었습니다.");
            callback();
        }, 1000);
    }
    function funcB(callback){
        setTimeout(() => {
            console.log("funcB가 실행되었습니다.");
            callback();
        }, 1000)
    }
    function funcC(callback){
        setTimeout(() => {
            console.log("funcC가 실행되었습니다.");
            callback();
        }, 1000)
    }
    function funcD(){
        setTimeout(() => {
            console.log("funcD가 실행되었습니다.");
        }, 1000)
    }

    funcA(function(){
        funcB(function(){
            funcC(function(){
                funcD();
            });
        });
    });
}
}

25. 함수 : 비동기 함수 : 프로미스

{
let data = true;

const func = new Promise((resolve, reject) => {
if(data){
    resolve("45. 함수가 실행되었습니다.");
}else{
    reject("45. 함수가 실행되지 않았습니다.");
}
});

func
.then(
    result => console.log(result)
)
.catch (
    error => console.log(error)
)

//콜백 지옥 -> 프로미스
function funcA(){
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("funcA가 실행되었습니다.");
            resolve();
        }, 1000);
    })
}
function funcB(){
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("funcB가 실행되었습니다.");
            resolve();
        }, 1000);
    })
}
function funcC(){
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("funcC가 실행되었습니다.");
            resolve();
        }, 1000);
    })
}
function funcD(){
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("funcD가 실행되었습니다.");
            resolve();
        }, 1000);
    })
}
funcA()
    .then(funcB)
    .then(funcC)
    .then(funcD)
    .catch((error) => {
        console.log(error);
    });
}

26. 함수 : 비동기 함수 : asyne/await

{
// 01
function func(){
    console.log("46. 함수가 실행되었습니다.");
}
func();

// 02
async function func2(){
    console.log("47. 함수가 실행되었습니다.");
}
func2();

// 03
async function func3(){
    const result = await fetch('https://webstoryboy.github.io/webs2024/json/gineungsaJC2011_05.json');
    const data = await result.json();
    console.log(data)
}
func3();

// 04
async function func4(){
    try {
        const result = await fetch('https://webstoryboy.github.io/webs2024/json/gineungsaJC2011_05.json');
        const data = await result.json();
        console.log(data)
    }catch (error){
        console.log(error);
    }
}
func3();
}