javascript

01. 함수 : 선언적 함수

선언적 함수의 예시입니다.

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

선언적함수는 호이스팅이 발생하기 때문에, 함수가 선언되기 전에 호출할 수 있습니다.

02. 함수 : 익명 함수

익명 함수의 예시입니다.

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

익명 함수(Anonymous Function)는 이름 없이 정의된 함수로, 함수 선언 시 함수의 이름이 없는 함수입니다.
익명 함수는 주로 다른 함수의 매개변수로 전달하거나 변수에 할당되어 사용되는 경우가 많습니다.

03. 함수 : 매개변수 함수

매개변수 함수의 예시입니다.

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

매개변수란 프로그래밍에서 특정 작업이나 계산을 수행하는 데 사용되는 함수나 매서드에 전달되는 입력값입니다.
이러한 매개변수는 함수의 동작을 정의하고 전달된 값을 기반으로 출력을 결정합니다.
함수를 호출할 때 괄호 안에 적는 것을 "매개변수" 라고한다.

04. 함수 : 리턴값 함수

리턴값 함수의 예시입니다.

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

리턴값이 있는 함수는 return 제어문을 사용해서 함수의 연산 결과 중 원하는 값을 지정해서 호출위치로 복구시키는 기능을 말한다.
함수의 최종 결과를 "리턴값"이라고 부른다.

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

매개변수 + 리턴값 함수의 예시입니다.

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

function func(str){ } : 하나의 매개변수를 취하는 이름의 함수를 선언합니다 'str'
return str; : 함수 내부에서는 단순히 str매개변수의 값을 반환합니다.

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

선언적 함수를 화살표 함수로 나타낸 예시입니다.

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

화살표 함수로 변경

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

익명 함수를 화살표 함수로 나타낸 예시입니다.

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

화살표 함수로 변경

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

매개변수 함수를 화살표 함수로 나타낸 예시입니다.

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

화살표 함수로 변경

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

리턴값 함수를 화살표 함수로 나타낸 예시입니다.

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

화살표 함수로 변경

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

매개변수 + 리턴값 + 익명 함수로 표현한뒤 괄호생략, 리턴생략, 선언적 함수로 표현한 예시입니다.

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

    // 괄호 생략
    const func2 = str => {
        return str;
    }
    console.log(func2("10-2. 함수가 실행되었습니다."));

    // 리턴 생략
    const func3 = str => str;
    console.log(func3("10-3. 함수가 실행되었습니다."));

    // 선언적(가독성x)
    func4 = str => str;
    console.log(func4("10-4. 함수가 실행되었습니다."));
}

이러한 함수는 모두 입력 문자열을 있는 그대로 반환하는 동일한 작업을 수행합니다.
다양한 구문 스타일은 JavaScript에서 화살표 함수의 다양성을 보여 주며, 함수 본문이 단일 표현식으로 구성된 경우 간결한 코드를 작성할 수 있습니다.

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

함수와 매개변수를 이용한 형태 예시입니다.

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

    func(11, "함수가 실행되었습니다.");
}

num: 이 매개변수는 숫자를 나타내며, 출력될 문자열의 앞에 숫자로 표시됩니다.
str: 이 매개변수는 문자열을 나타내며, 출력될 문자열의 내용입니다.
func(11, "함수가 실행되었습니다."); 이 호출은 num에 11이라는 숫자와 str에 "함수가 실행되었습니다."라는 문자열을 전달합니다.

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

함수와 변수를 이용한 형태 예시입니다.

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

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

    func(num, str);
}

num 변수에는 12라는 숫자가 할당되었습니다.
str 변수에는 "함수가 실행되었습니다."라는 문자열이 할당되었습니다.
func(num, str); 이 호출에서는 미리 정의된 변수 num과 str을 함수에 전달합니다.
함수의 매개변수 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]);
}

num 배열에는 두 개의 숫자, 13과 14가 포함되어 있습니다.
str 배열에는 두 개의 문자열, "함수가 실행되었습니다."가 두 번 포함되어 있습니다.
func 함수가 두 번 호출됩니다. 각 호출에서는 배열에서 요소를 추출하여 함수에 전달합니다:
첫번째 호출에서는 num[0]과 str[0]이 함수에 전달됩니다. 이는 숫자 13과 문자열 "함수가 실행되었습니다."를 전달합니다.
두번째 호출에서는 num[1]과 str[1]이 함수에 전달됩니다. 이는 숫자 14와 문자열 "함수가 실행되었습니다."를 전달합니다.

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

함수와 객체를 이용한 형태 예시입니다.

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

    func(info.num, info.str);
}

이 객체에는 두 개의 속성이 있습니다
num: 값으로 15를 가지고 있습니다.
str: 값으로 "함수가 실행되었습니다."라는 문자열을 가지고 있습니다.
func 함수가 호출됩니다. 이 호출에서는 객체 info의 속성을 함수에 전달합니다
여기서 info.num은 객체 info의 num 속성을 나타내고, info.str은 객체 info의 str 속성을 나타냅니다. 즉, 함수에는 객체 info의 속성 값이 전달됩니다.
객체를 사용하면 관련된 정보를 하나의 단위로 관리하고 함수에 전달하기가 더 편리해집니다.

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);
}

info 배열은 두 개의 객체로 구성되어 있습니다. 각 객체에는 num과 str라는 두 개의 속성이 있습니다. num 속성은 숫자이고, str 속성은 문자열입니다. 이 배열은 두 개의 메시지를 저장하고 있습니다.
func라는 함수가 정의되어 있습니다. 이 함수는 두 개의 매개변수 num과 str을 받고, 이 두 매개변수를 사용하여 메시지를 콘솔에 출력합니다. 출력되는 메시지의 형식은 ${num}. ${str}입니다.
그런 다음, func 함수가 두 번 호출됩니다. 첫 번째 호출에서는 info 배열의 첫 번째 객체의 num과 str 속성을 전달하여 "16. 함수가 실행되었습니다."라는 메시지를 콘솔에 출력합니다.
두 번째 호출에서는 info 배열의 두 번째 객체의 num과 str 속성을 전달하여 "17. 함수가 실행되었습니다."라는 메시지를 콘솔에 출력합니다.

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

객체 안에 함수를 이용한 형태 예시입니다.

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

info 객체는 세 개의 속성을 가지고 있습니다
num: 숫자 18을 저장하는 속성입니다.
str: 문자열 "함수가 실행되었습니다."를 저장하는 속성입니다.
result: 함수 표현식을 저장하는 속성입니다.
result 속성은 함수 표현식으로 정의되어 있습니다. 이 함수는 객체 info의 다른 속성인 num과 str을 사용하여 메시지를 콘솔에 출력합니다.
info.result()는 result 속성에 저장된 함수를 호출합니다. 이 함수가 호출되면, num과 str 속성을 사용하여 "18. 함수가 실행되었습니다."라는 메시지가 콘솔에 출력됩니다.

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

객체 생성자 함수 예시입니다.

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

    // 인스턴스 생성
    const info = new Func(19, "함수가 실행되었습니다.");
    const info2 = new Func(20, "함수가 실행되었습니다.");

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

Func이라는 생성자 함수가 정의되어 있습니다. 이 함수는 두 개의 매개변수 num과 str을 받습니다. 생성자 함수 내에서는 다음 작업을 수행합니다:
this.num 및 this.str: num과 str 매개변수를 인스턴스의 속성으로 설정합니다.
this.result 메서드: 화살표 함수로 정의되어 있으며, 객체 인스턴스의 num과 str 속성을 사용하여 메시지를 콘솔에 출력합니다.
info와 info2라는 두 개의 객체 인스턴스를 생성합니다. 각각은 Func 생성자 함수를 사용하여 생성되며, 생성자 함수를 호출할 때 num과 str 값을 전달합니다. 이렇게 하면 각 인스턴스는 자체적으로 num과 str 속성을 가지게 됩니다.
info.result() 및 info2.result()를 호출합니다. 이 호출은 각 객체 인스턴스의 result 메서드를 실행합니다. 메서드 내에서는 해당 인스턴스의 num 및 str 값을 사용하여 메시지를 콘솔에 출력합니다.

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

프로토타입 함수 예시입니다.

{
    function Func(num, str){
        this.num = num;
        this.str = str;
    }
    Func.prototype.result = function (){        //밖으로 빼면 화살표 함수 x
        console.log(`${this.num}. ${this.str}`);
    }

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

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

Func이라는 생성자 함수가 정의되어 있습니다. 이 함수는 두 개의 매개변수 num과 str을 받습니다. 생성자 함수 내에서는 다음 작업을 수행합니다
this.num 및 this.str: num과 str 매개변수를 인스턴스의 속성으로 설정합니다.
Func.prototype.result는 생성자 함수 Func의 프로토타입 객체에 메서드로 추가됩니다. 이 메서드는 화살표 함수가 아닌 일반 함수로 정의되어 있으며, 프로토타입 객체에 추가되면 모든 Func 인스턴스에서 공유됩니다. 이 메서드는 해당 인스턴스의 num 및 str 속성을 사용하여 메시지를 콘솔에 출력합니다.
info1과 info2라는 두 개의 객체 인스턴스를 생성합니다. 각각은 Func 생성자 함수를 사용하여 생성되며, 생성자 함수를 호출할 때 num과 str 값을 전달합니다. 이렇게 하면 각 인스턴스는 자체적으로 num과 str 속성을 가지게 됩니다.
info1.result() 및 info2.result()를 호출합니다. 이 호출은 각 객체 인스턴스의 result 메서드를 실행합니다. 메서드 내에서는 해당 인스턴스의 num 및 str 값을 사용하여 메시지를 콘솔에 출력합니다.

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();
}

Func이라는 생성자 함수가 정의되어 있습니다. 이 함수는 두 개의 매개변수 num과 str을 받습니다. 생성자 함수 내에서는 다음 작업을 수행합니다:
this.num 및 this.str: num과 str 매개변수를 인스턴스의 속성으로 설정합니다.
Func.prototype 객체는 기본적으로 result1 및 result2 두 개의 메서드로 구성되어 있습니다. 이러한 메서드는 객체 인스턴스에서 호출될 수 있으며, this.num과 this.str 속성을 사용하여 메시지를 콘솔에 출력합니다.
info1과 info2라는 두 개의 객체 인스턴스를 생성합니다. 각각은 Func 생성자 함수를 사용하여 생성되며, 생성자 함수를 호출할 때 num과 str 값을 전달합니다. 이렇게 하면 각 인스턴스는 자체적으로 num과 str 속성을 가지게 됩니다.
info1.result1() 및 info2.result2()를 호출합니다. 이 호출은 각 객체 인스턴스의 result1 및 result2 메서드를 실행합니다. 메서드 내에서는 해당 인스턴스의 num 및 str 값을 사용하여 메시지를 콘솔에 출력합니다.

20. 함수 : 즉시실행 함수

즉시실행함수 예시입니다.

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

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

함수는 (function () { /* ... */ })()와 같은 형태로 감싸져 있습니다. 이 형태는 함수를 선언하고 즉시 실행하는 패턴입니다.

21. 함수 : 파라미터 함수

파라미터함수 예시입니다.

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

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

두 함수는 기본값이 지정된 str 매개변수를 가지며, 함수를 호출할 때 인자를 제공하지 않으면 해당 기본값이 사용됩니다. 따라서 두 함수 호출에서는 각각의 기본값인 "27. 함수가 실행되었습니다."와 "28. 함수가 실행되었습니다."가 출력됩니다.

22. 함수 : 재귀 함수

재귀함수 예시입니다.

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

    function func1(num){
        if(num < 1) return;

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

1. 이 함수는 반복문을 사용하여 num 횟수만큼 "29. 함수가 실행되었습니다."라는 메시지를 출력합니다.
2. func(10)을 호출하면 이 함수가 10번 실행되므로 "29. 함수가 실행되었습니다."가 10번 출력됩니다.
3. 이 함수는 재귀적으로 호출됩니다. 함수 내에서 num이 1보다 작으면 (즉, 0 또는 음수) 함수가 종료됩니다.
4. 그렇지 않으면 "30. 함수가 실행되었습니다."를 출력하고 func1(num - 1)을 호출합니다. 이 호출로 함수가 자기 자신을 호출하게 되어 반복됩니다.

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);
}

1. addEventListener 메서드를 사용하여 "click" 이벤트에 대한 콜백 함수로 func 함수를 등록합니다. 따라서 btn 요소가 클릭될 때 func 함수가 실행됩니다.
2. func2(func1)을 호출하면 func1 함수가 func2 함수의 callback 매개변수에 전달되고, callback()을 통해 func1 함수가 실행됩니다.
3. func4(func3)을 호출하면 func3 함수가 func4 함수의 callback 매개변수에 전달되고, func4 함수 내에서 반복문을 사용하여 33부터 38까지의 값을 callback 함수에 전달합니다. 따라서 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(callback){
        setTimeout(() => {
            console.log("funcD가 실행되었습니다.");
        }, 1000);
    }

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

1. 동기 함수 호출(func1 및 func2)
func1func2동기 기능입니다 . 호출되면 즉시 실행되고 완료될 때까지 추가 실행이 차단됩니다.
이 경우에는 func1가 먼저 호출되어 "39. 함수가 실행되었습니다."를 기록합니다. 콘솔에. 그런 다음 가 func2호출되어 "40.가 실행되었습니다."를 기록합니다.
2. 비동기 함수 호출(func3 및 func4)
func3setTimeout실행을 1000밀리초(1초) 지연하는 데 사용되는 비동기 함수입니다
func4은 직후에 호출되는 동기 함수입니다.
func3가 호출 되면 func3타이머를 설정하고 "41. 함수가 실행되었습니다."를 기록합니다. 지연 후 콘솔에. 그 동안에는 완료될 func4때까지 기다리지 않고 계속 실행됩니다
3. 콜백 함수(func5 및 func6)
func5콜백 함수를 인수로 사용하는 비동기 함수입니다. 또한 setTimeout실행을 지연시키는 데 사용됩니다.
호출 되면 func5타이머를 설정하고 "43. 함수가 실행되었습니다."를 기록합니다. 그런 다음 인수로 제공되는 콜백 함수인 를 호출합니다 func6. 그래서 "44. 함수가 실행되었습니다." "43.가 실행되었습니다." 후에 기록됩니다.
4. 콜백 지옥(funcA, funcB, funcC 및 funcD)
funcA, funcB, funcC 및 funcD는 1초 지연을 (setTimeout) 사용하는 비동기 함수입니다.
콜백 지옥의 예에서는 funcA가 콜백으로 호출하고, 이 콜백이 콜백으로 호출되고, 마지막으로 funcB, funcC, funcD가 호출됩니다.
이러한 콜백 중첩은 종종 "콜백 지옥" 또는 "콜백 피라미드"라고 불리는 피라미드형 구조를 초래합니다.
각 함수는 실행될 때 메시지를 기록하고 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)
        })
}

1. func라는 새로운 Promise를 생성합니다. Promise는 resolve및 reject 두 개의 매개변수가 있는 콜백 함수를 사용합니다.
2. Promise 내에서 resolve이면 성공 메시지와 함께 true호출합니다 . reject이면 오류 메시지와 함께 false호출합니다.
3. .then()Promise의 성공적인 해결을 처리하는 데 사용됩니다. 이 경우 결과를 콘솔에 기록합니다.
4. .catch()Promise가 거부된 경우 오류를 처리하는 데 사용됩니다. 콘솔에 오류를 기록합니다.
5. funcB,funcC,funcD 및 setTimeout을 사용하여 각각 실행이 지연된 Promise를 반환하는 함수 funcA를 정의합니다.
6. .then()를 사용하여 이러한 Promise를 연결하면 각 함수가 순서대로 실행됩니다.
7. 약속 중 하나라도 거부되면 .catch()끝에 있는 블록이 오류를 처리합니다.

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

비동기함수 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://kimseung12.github.io/webs2024/json/gineungsaShort.json");
        const data = await result.json();
        console.log(data);
    }
    func3();

    // 04 에러확인
    async function func4(){
        try {
            const result = await fetch("https://kimseung12.github.io/webs2024/json/gineungsaShort.json");
            const data = await result.json();
            console.log(data);
        } catch (error){
            console.log(error);
        }
    }
    func4();
}

1. async라는 함수를 정의합니다 func2.
2. func2()을 호출하면 콘솔에도 메시지가 기록됩니다.
3. 그러나 이전 함수와 달리 func2는 async으로 선언되어 비동기 코드를 포함할 수 있음을 의미합니다. 이 경우에는 실제로 비동기 코드가 포함되어 있지 않으므로 일반 함수처럼 동작합니다.
4. 내부에서는 fetch키워드를 사용하여 await함수를 사용하여 원격 JSON 파일에 대한 비동기 호출을 수행합니다.
5. 키워드 를 사용하면 코드가 요청이 완료되고 JSON 데이터가 검색될 때까지 await일시 중지하고 기다릴 수 있습니다 .fetch
6. JSON 데이터를 요청하거나 구문 분석할 try...catch때 발생할 수 있는 잠재적인 오류를 처리하기 위해 블록을 사용합니다 .fetch
7. 오류가 발생하면 블록에 포착되고 catch오류 메시지가 콘솔에 기록됩니다.

27. 함수 : 중첩 함수

중첩함수 예시입니다.

{
    
}

28. 함수 : 클로저

클로저 예시입니다.

{
    
}

29. 클래스 기본

클래스 기본 예시입니다.

{
    
}

30. 클래스 : 상속

클래스 상속 예시입니다.

{
    
}