Post

javascript 데이터 실행하기02

Posted Updated
Preview Image
By HwangInJi 21 min read

javascript 데이터 실행하기

▶ 오늘은 지난번에 이어 데이터를 실행하는 또다른 유형에 대해 알아볼까합니다. 오늘은 예시를 통해서 유형을 이해하면 좋을 것 같네요. 그럼 공부하러 가볼까요?

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

{
    // 함수 정의
    function Func(num, str) {
        this.num = num;     //this는 자기 자신을 의미
        this.str = str;
        this.result = () => {
            console.log(`${this.num}. ${this.str}`);
        }
    }

    // 인스턴스 생성 - new를 붙여서 새로운 객체명지정
    const info1 = new Func(19, "함수가 실행되었습니다.");
    const info2 = new Func(20, "함수가 실행되었습니다.");

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

▶ 위의 예시는

  1. 함수 정의를 통해 두 개의 매개변수 num과 str을 받고 있으며, this라는 키워드를 사용하여 새로운 객체의 속성으로 num과 str을 설정 및 result 속성을 추가하고 있습니다. 이 때, this는 자기 자신을 의미합니다.
  2. new 키워드를 사용하여 Func 함수를 호출하여 info1과 info2라는 두 개의 인스턴스라는 새로운 객체를 생성하였으며, 이 때 지정한 인스턴스는 각각의 다른 값들을 가지고 있습니다.
  3. result 메서드를 실행하면 info1.result()과 info2.result()요소에 해당하는 결과값인 19. 함수가 실행되었습니다., 20. 함수가 실행되었습니다.가 도출되어집니다.


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

{
    // 함수 정의
    function Func(num, str) {
        this.num = num;
        this.str = str;
    }

    // 메서드 추가 - 함수 정의가 많아지면서 프로토타입 메서드를 활용해 result값을 따로 뺌
    Func.prototype.result = function () {
        console.log(`${this.num}. ${this.str}`);
    }

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

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

▶ 위의 예시는

  1. 함수 정의를 통해 두 개의 매개변수 num과 str을 받고 있으며, this라는 키워드를 사용하여 새로운 객체의 속성으로 num과 str을 설정하였습니다. 이 때, this는 자기 자신을 의미합니다.
  2. prototype이라는 프로토타입 메서드를 활용해 result 속성값을 따로 빼줍니다. 프로토타입은 함수의 정의가 많아질 경우 사용하기 좋습니다.
  3. new 키워드를 사용하여 Func 함수를 호출하여 info1과 info2라는 두 개의 새로운 인스턴스 객체를 생성하였으며, 이 때 지정한 인스턴스는 각각의 다른 값들을 가지고 있습니다.
  4. result 메서드를 실행하면 info1.result()과 info2.result()요소에 해당하는 결과값인 21. 함수가 실행되었습니다., 22. 함수가 실행되었습니다.가 도출되어집니다.


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

{
    // 함수 정의
    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();
}

▶ 위의 예시는

  1. 함수 정의를 통해 두 개의 매개변수 num과 str을 받고 있으며, this라는 키워드를 사용하여 새로운 객체의 속성으로 num과 str을 설정하였습니다. 이 때, this는 자기 자신을 의미합니다.
  2. Func.prototype을 사용하여 Func 함수의 프로토타입에 result1, result2라는 새로운 메서드를 추가합니다. 이 때, 각각의 메서드들을 객체 리터럴을 통해 그룹화했기 때문에 코드가 더 구조화되고 관리하기 쉽다는 장점이 있습니다.
  3. new 키워드를 사용하여 Func 함수를 호출하여 info1과 info2라는 두 개의 새로운 인스턴스 객체를 생성하였으며, 이 때 지정한 인스턴스는 각각의 다른 값들을 가지고 있습니다.
  4. result 메서드를 실행하면 info1.result()과 info2.result()요소에 해당하는 결과값인 23. 함수가 실행되었습니다., 24. 함수가 실행되었습니다.가 도출되어집니다.


4. 함수 : 즉시 실행 함수

1
2
3
4
5
6
7
8
9
10

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

    // 화살표 함수
    (() => {
        console.log("16. 함수가 실행되었습니다.");
    })();
}

▶ 즉시 실행 함수(IIFE, Immediately Invoked Function Expression)는 함수를 선언하고 즉시 실행하는 패턴을 나타냅니다. 이 때, 함수 선언문은 즉시 실행할 수 없기 때문에 function 앞에 괄호를 사용하여 함수 표현식으로 변환하는 것이 중요합니다.


5. 함수 : 파라미터 함수

1
2
3
4
5
6

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

▶ 파라미터 함수란 함수를 정의할 때 함수의 동작에 필요한 값을 전달받을 수 있는 매개변수를 포함하는 함수이며, 매개변수는 함수가 호출될 때 전달되는 값으로 함수의 동작을 제어하거나 데이터를 전달하는 데 사용됩니다.
위의 예시는 func라는 이름의 함수를 정의하고 있고 str이라는 하나의 파라미터를 갖고 있기 때문에 str에 입력된 값인 17. 함수가 실행되었습니다.가 도출되어집니다.


6. 함수 : 재귀 함수

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

{
    // 01 반복문을 사용하는 경우
    function func(num) {
        for (let i = 0; i < num; i++) {
            console.log("19. 함수가 실행되었습니다.");
        }
    }
    func(10);

    // 02 재귀 함수를 사용하여 변경
    console.log("22__________________")
    function func1(num) {
        if (num < 1) return;

        console.log("20. 함수가 실행되었습니다.");
        func1(num - 1);     // 재귀 호출
    }
    func1(10);
}

▶ 위에서

  1. 예시는 func라는 이름의 함수는 하나의 파라미터 num을 받고 있으며, for문에 입력된 num의 수식값 만큼 반복문을 실행하도록 조건식을 설정하였습니다.
    이 때 결과값을 func(10);과 같이 숫자 10을 인자로 전달하여 함수를 호출하고 있기 때문에 0부터 9까지 총 10번의 해당 메시지인 19. 함수가 실행되었습니다.가 반복 출력됩니다.
  2. 예시는 func1라는 이름의 함수는 하나의 파라미터 num을 받고 있으며, 결과값을 if문을 통해 num이 1보다 작을 경우 “20. 함수가 실행되었습니다.”라는 메시지를 도출하고 있습니다.
    이 때 조건이 num이 하나씩 감소하며, 재귀 호출을 통해 자신을 다시 호출하는 재귀 함수를 실행하기 떄문에 func1(10);과 같이 숫자 10을 인자로 전달하여 함수를 호출하면, 해당 메시지인 20. 함수가 실행되었습니다.가 10번 출력되지만 반복문을 사용한 경우와는 다르게 재귀적으로 호출됩니다.


7. 함수 : 콜백 함수

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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

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

    // 03 반복문을 사용하는 경우
    function func3(num) {
        console.log(num + ". 함수가 실행되었습니다.");
    }
    function func4(callback) {
        for (let i = 23; i < 28; i++) {
            callback(i);
        }
    }
    func4(func3);
}

▶ 위에서

  1. 예시는 이벤트 리스너를 통해 주석 처리된 코드 함수 “// btn.addEventListener(“click”, func);”를 실행하는 것으로, 이벤트가 발생했을 때 func 함수를 실행하는 코드입니다.
  2. 예시는 func1이라는 함수와 func2라는 함수가 정의되어 있고, func2 함수는 콜백 함수(callback)를 인자로 받아 실행하는 역할을 합니다.
    여기서 func1 함수를 func2 함수의 인자로 전달하여 호출하고 있기 때문에 결과값은 func1 함수 내의 메시지인 22. 함수가 실행되었습니다.가 출력됩니다.
  3. 예시는 func3라는 이름의 함수와 func4라는 함수가 정의되어 있고, func3 함수는 인자로 전달받은 숫자와 함께 메시지를 출력합니다. 여기서 func4 함수는 콜백 함수(callback)를 인자로 받아 반복문을 통해 23부터 27까지의 숫자를 callback 함수에 전달하여 실행합니다.
    따라서 func4(func3);과 같이 func3 함수를 func4 함수의 인자로 전달하여 호출하고 있기 때문에 결과값은 func3 함수 내의 메시지가 func4에 입력된 조건만큼 반복적으로 출력되며 아래와 같습니다.
  4. 함수가 실행되었습니다.
  5. 함수가 실행되었습니다.
  6. 함수가 실행되었습니다.
  7. 함수가 실행되었습니다.
  8. 함수가 실행되었습니다.


8. 함수 : 비동기 방식 : 콜백 함수

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

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

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

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

        func5(function () {
            func6();
        });
    }
}

▶ 위에서

  1. 예시는 func1과 func2 함수는 즉시 실행되고, func1이 먼저 실행되고 그 후에 func2가 순차적으로 실행되도록 설정하였기 때문에 결과값은 29. 함수가 실행되었습니다., 30. 함수가 실행되었습니다.가 도출됩니다.
  2. 예시는 func3 함수는 setTimeout을 사용하여 1초 후에 결과값이 실행되는 비동기적인 호출로 설정하였습니다. 반면, func4 함수는 즉시 실행되도록 설정했기 때문에 func4가 먼저 실행되고, 1초 후에 func3가 실행되며 따라서 결과값은 32. 함수가 실행되었습니다., 31. 함수가 실행되었습니다.가 도출됩니다.
  3. 예시는 콜백 함수를 사용하여 비동기적인 동작을 조절하는 방법으로 func5 함수는 콜백 함수를 인자로 받아서 1초 후에 실행함과 동시에 func6 함수는 func5 함수의 콜백으로 전달되어 있습니다. 따라서 func5를 호출하면 1초 후에 “33. 함수가 실행되었습니다.”가 출력되고, 이어서 func6가 실행되어 “34. 함수가 실행되었습니다.”가 출력됩니다.
    💡 동기 : 작업이 위에서 아래로 순차적 진행 + 하나의 작업이 끝나야 다음 작업 시작 💡 비동기 : 작업이 순서와 관계없이 여러 작업 처리 가능 (콜백함수, 프로미스, async/await 사용) + 하나의 작업 완료 대기없이 다른 작업 시작 가능


9. 함수 : 비동기 방식 : asyne / await

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

{
    // 01 일반적인 함수(동기방식)
    function func() {
        console.log("35. 함수가 실행되었습니다.");
    }
    func();

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

    // 03 비동기방식(fetch())
    async function func3() {
        const result = await fetch("https://hwanginji.github.io/class2024/json/gineungsaJC2005_02.json");
        const data = await result.json();
        console.log(data);
    }
    func3();

    // 04 비동기 + 에러
    async function func4() {
        try {
            const result = await fetch("https://hwanginji.github.io/class2024/json/gineungsaJC2005_02.json");
            const data = await result.json();
            console.log(data);
        } catch (error) {
            console.error(error);
        }
    }
    func4();
}

▶ 위에서

  1. 예시는 func라는 이름의 일반적인 동기 함수를 정의하고 있어 func()를 호출하여 함수를 실행하면 “35. 함수가 실행되었습니다.”라는 메시지를 출력합니다.
  2. 예시는 async 키워드를 사용하여 선언된 func2 함수는 내부적으로는 동기적인 동작을 합니다. 이 때, async 함수는 내부에서 await 키워드를 사용할 수 있으며, await는 비동기 코드를 동기적으로 처리할 수 있게 만들어 주기때문에 결과값으로 “36. 함수가 실행되었습니다.”라는 메시지를 출력합니다.
  3. 예시는 fetch() 함수를 사용하면 데이터를 비동기 방식으로 가져오게 되며, await 키워드는 fetch()가 완료된 후 응답이 도착할 때까지 기다립니다. 이후에는 응답을 JSON 형식으로 변환하고 그 결과를 콘솔에 출력합니다. 따라서 결과는 JSON의 배열수만큼 나오게 됩니다.
  4. 예시는 fetch() 함수를 사용하여 데이터를 가져오되 try…catch 문을 사용하여 비동기적인 코드에서 예외를 처리하고 있습니다. fetch()가 정상적으로 실행되면 JSON 데이터를 받아와서 결과값을 출력하고 그렇지 않으면 예외가 발생하게 됩니다. 이 때 catch가 블록에서 처리하여 에러를 콘솔에 출력합니다. 따라서 결과는 JSON의 배열수만큼 나오게 됩니다.


이렇게 오늘은 데이터를 실행하는 또다른 유형에 대해 알아봤는데요,
다음엔 또 어떤 정보를 들고 오는지 기대해주세요😁!

자바스크립트
자바스크립트 javascript
This post is licensed under CC BY 4.0 by the author.