javascript

01. 함수 : 선억적 함수

JavaScript에서 선언적 함수를 사용하는 예시입니다.

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

02. 함수 : 익명 함수

JavaScript에서 익명 함수를 사용하는 예시입니다.

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

03. 함수 : 매개변수 함수

avaScript에서 매개변수를 가지는 함수를 정의하고 호출하는 예제입니다.

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

04. 함수 : 리턴값 함수

JavaScript에서 리턴값을 가지는 함수를 정의하고 호출하는 예제입니다.

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

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

JavaScript에서 매개변수를 받아들이고 값을 반환하는 함수를 정의하고 호출하는 예제입니다.

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

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

JavaScript에서 선언적 화살표 함수(arrow function)를 사용하는 예제입니다.

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

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

JavaScript에서 익명 화살표 함수(anonymous arrow function)를 사용하는 예제입니다.

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

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

JavaScript에서 매개변수를 받아들이는 화살표 함수(arrow function)를 사용하는 예시입니다.

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

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

JavaScript에서 리턴값을 반환하는 화살표 함수(arrow function)를 사용하는 예시입니다.

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

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

JavaScript에서 익명으로 정의된 화살표 함수입니다.

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

    // 매개변수 할개일때 괄호 생략 가능
    const func = (str) => return str;
    console.log(func("10. 함수가 실행되었습니다."));

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

    // 익명 생략 (가독성 나쁨)
    func = (str) => str;
    console.log(func("10. 함수가 실행되었습니다."));
}

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

JavaScript에서 함수와 매개변수를 사용하는 예제입니다

{
    function func(num, str){
        console.log(num + ". " + str);
        console.log(`${num}. ${str}`); // 템플릿 리터럴
    }
    func(11, "함수가 실행되었습니다.");
}

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

JavaScript에서 함수와 변수를 사용하는 예제입니다.

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

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

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

JavaScript에서 함수와 배열을 사용하는 예제입니다.

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

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

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

JavaScript에서 함수와 객체를 사용하는 예제입니다.

{
    const info = {
        num: 14,
        str: "함수가 실행되었습니다.",
    };

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

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

JavaScript에서 함수와 객체 배열을 사용하는 예제입니다.

{
    const info = [
        {num: 15, str: "함수가 실행되었습니다."},
        {num: "15-1", str: "함수가 실행되었습니다."},
    ];

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

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

JavaScript에서 함수와 객체 내부에 함수를 정의하고 호출하는 예제입니다.

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

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

JavaScript에서 객체 생성자 함수를 사용하여 객체를 생성하고 메서드를 포함시키는 예제입니다.

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

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

JavaScript에서 프로토타입 함수를 사용하여 객체를 생성하는 예제입니다.

{
    function Func(num, str){
        this.num = num;
        this.str = str;
    }

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

    // Func.prototype.result = () => {
    //     console.log(`${this.num}. ${this.str}`); 
    // }
    // 여기서 문제는 Func.prototype.result에 화살표 함수(arrow function)를 사용한 부분입니다.
    // 화살표 함수는 자신만의 this 컨텍스트를 가지지 않고, 주변 스코프의 this 값을 가져옵니다. 따라서 this.num과 this.str은 undefined가 될 것입니다.
    
    const info1 = new Func(18, "함수가 실행되었습니다.");
    const info2 = new Func("18-1", "함수가 실행되었습니다.");

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

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

JavaScript에서 객체 리터럴을 사용하여 프로토타입에 메서드를 정의하는 예제입니다.

{
    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(19, "함수가 실행되었습니다.");
    const info2 = new Func("19-1", "함수가 실행되었습니다.");

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

20. 함수 : 즉시실행 함수

두 개의 익명 함수를 정의하고 즉시 실행하는 예제입니다.

{
    // 첫번째
    (function (){
        console.log(20, "함수가 실행되었습니다.");
    })();

    // 두번째
    (() => {
        console.log("20-1. 함수가 실행되었습니다.");
    })();
}

21. 함수 : 파라미터 함수

두 개의 함수를 정의하고 호출하는 예제입니다. 각 함수는 기본 매개변수 값을 가지고 있어, 매개변수가 제공되지 않으면 기본값이 사용됩니다.

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

    const func2 = (str = "21-1. 함수가 실행되었습니다.") => {
        console.log(str);
    }
    func2();
}

22. 함수 : 재귀 함수

재귀 함수란, 함수가 자기 자신을 호출하는 것을 의미합니다. 이를 통해 함수는 반복적인 작업을 수행할 수 있습니다.

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

    function func2(num){
        if(num <= 0) return;
        console.log("22-1. 함수가 실행되었습니다.");
        func2(num -1);
    }
    func2(3);
}

23. 함수 : 콜백 함수

JavaScript에서 콜백 함수를 사용하는 예제를 보여줍니다. 콜백 함수는 다른 함수에 전달되어 실행될 함수를 의미합니다. 이는 비동기적인 작업을 처리하거나 코드의 흐름을 관리하는데 사용됩니다.

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

    // 02 함수를 다른 함수의 인자로 전달
    function func2(){
        console.log("23-1. 함수가 실행되었습니다.");
    }
    function func3(callback){
        callback();
    }
    func3(func2);

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

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

JavaScript를 사용하여 동기 및 비동기 함수 호출 및 콜백 함수의 개념을 설명하는 예제들을 보여줍니다.

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

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

    // 03 비동기적인 콜백함수 호출
    function func5(callback){
        setTimeout(() => {
            console.log("24-4. 함수가 실행되었습니다.");
            callback();
        }, 1000);
    }
    function func6(){
        console.log("24-5. 함수가 실행되었습니다.");
    }
    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("25. 함수가 실행되었습니다.");
        } else {
            reject("25. 함수가 실행되지 않았습니다.")
        }
    });
    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("26. 함수가 실행되었습니다.")
    }
    func();
    
    // 02
    async function func1(){
        console.log("26-1. 함수가 실행되었습니다.")
    }
    func1();

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

    // 04
    async function func3(){
        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();
}