javascript

01. 함수 : 선언적 함수

자바스크립트(JavaScript)에서 함수는 프로그래밍에서 재사용 가능한 코드 블록을 나타내는 중요한 개념입니다. 함수를 사용하면 특정 작업을 수행하는 코드를 논리적으로 묶어서 호출하고 실행할 수 있습니다. 함수를 사용함으로써 코드의 재사용성을 증가시키고 유지보수를 용이하게 만들 수 있습니다. 함수는 자체 스코프(범위) 내에서 변수를 선언하고, 매개변수를 통해 입력을 받아 작업을 수행하며, 결과를 반환할 수 있습니다.

{
    //01                       
    function func(){
        var x = 100;
        var y = 200;
        var z = "javascript";

        console.log(x);
        console.log(y);
        console.log(z);
    };
    func();
    
    //02
    function func(){
        document.write("함수가 실행되었습니다.1
")
    }
    func();    
}

선언적 함수(Declaration function)는 function 키워드를 사용하여 정의된 함수입니다. 이 함수는 스크립트의 어디에서든지 호출할 수 있으며, 함수 선언 시 함수 이름이 필요합니다.

02. 함수 : 익명 함수

익명 함수(Anonymous Function)는 이름 없이 정의되는 함수입니다. 즉, 함수 선언 시 함수의 이름이 없는 함수입니다. 익명 함수는 주로 다른 함수의 매개변수로 전달하거나 변수에 할당하여 사용됩니다.

{
    //01
    const func = function (){
        let x = 100;
        let y = 200;
        let z = "javascript"

        console. log(x);
        console. log(y);
        console. log(z);
    }
    func();

    //02
    const func = function(){
        document.write("함수가 실행되었습니다.2
")
    }
    func();
}

재사용 하지 않는, 한번만 사용할 함수를 위한 개념으로, 따로 함수의 이름을 갖지 않습니다. 익명 함수는 변수에 저장되게 됩니다.
매개변수(parameter)란 함수를 호출할 때 인수로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수입니다.

03. 함수 : 매개변수가 있는 함수

함수를 호출할때 함수로 데이터를 전달하는 방법으로, 매개변수가 있는 함수는 함수를 호출할 때 전달하고자 하는 값을 입력하여 호출할 수 있습니다.이렇게 전달된 값은 매개변수가 받아 함수에서 사용할 수 있게 됩니다.

{
    //01                        
    function func(x, y, z) {
        console.log(x);
        console.log(y);
        console.log(z);
    }
    func(100, 200, "javascript");
    
    //02
    function func(x){
        document.write(x);
    }
    func("함수가 실행되었습니다.3
")      
 }

매개변수(parameter)란 함수를 호출할 때 인수로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수입니다.
함수의 인수(argument)란 함수가 호출될 때 함수로 값을 전달해주는 변수를 가리킵니다.

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

return은 함수 내부에서 사용되는 키워드로, 함수가 어떤 계산을 수행한 결과나 값을 호출한 곳으로 돌려주는 역할을 하고(반환) 함수 실행을 종료할 때 사용됩니다.

{
    //01                        
    function func() {
        const x = 100;
        const y = 200;
        const z = "javascript";

        return x + y;
    }
    console.log(func());
    
    //02
    function func(str) {
        return "함수가 실행되었습니다.4";
    }
    console.log(func())
}

return x + y; //실행문 없이 변수만 선언하고 return을 사용해 결과값 출력합니다

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

매개변수를 받아들이고 이를 그대로 반환합니다.

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

1. func라는 함수를 정의합니다. 이 함수는 str이라는 매개변수를 받습니다. 함수 내부에서는 str을 그대로 반환합니다.
2. 함수 func를 호출하고 있습니다.호출할 때 인자로 문자열 "함수가 실행되었습니다.5"를 전달했습니다.
3. 리턴값(Return Value):func 함수는 받은 인자 str을 그대로 반환합니다.

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

화살표 함수(Arrow function)는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있습니다

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

화살표 함수를 사용하여 함수 func를 정의하고 호출하고 있습니다. 함수 내부에서는 document.write를 사용하여 텍스트를 문서에 출력하고 있습니다.

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

익명 함수(anonymous function)도 화살표 함수(arrow function)로 정의할 수 있습니다.
화살표 함수(Arrow function)는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있습니다

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

화살표 함수를 사용하여 func라는 상수(변수)에 함수를 할당하고, 그 함수를 호출하고 있습니다. 함수 내부에서는 document.write를 사용하여 텍스트를 문서에 출력하고 있습니다.

08. 화살표 함수 : 매개변수가 있는 함수

화살표 함수(Arrow function)는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있습니다

{
    func = (x) => {
        document.write(x);
    }
    func ("함수가 실행되었습니다.8");
}

화살표 함수를 사용하여 func라는 변수에 함수를 할당하고, 그 함수를 호출하고 있습니다. 함수는 매개변수 x를 받아 document.write를 사용하여 해당 값을 문서에 출력하고 있습니다.

09. 화살표 함수 : 리턴값(결과/종료) 함수

화살표 함수(Arrow function)는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있습니다

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

1.화살표 함수(=>)를 사용하여 func 함수를 정의합니다. 이 함수는 매개변수 str을 받고, 항상 문자열 "함수가 실행되었습니다.9"을 반환합니다.
2.func()를 호출하고 있습니다. 이 함수는 매개변수를 필요로 하지 않기 때문에, 괄호 안에 아무런 값도 전달하지 않습니다.
3. 리턴값(Return Value):func 함수는 항상 문자열 "함수가 실행되었습니다.9"를 반환합니다.

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

화살표 함수(Arrow function)는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있습니다

{
    10-1. 화살표 함수 : 익명함수 + 매개변수 + 리턴값
    const func = (x) =>{
        return x;
    }
    document.write(func("함수가 실행되었습니다.10
"));

    //10-2. 매개변수 한개일때 괄호 생략 가능

    const func = x =>{
        return x;
    }
    document.write(func("함수가 실행되었습니다.10-2
"));

    //10-3. 리턴 생략

    const func = x => x;

    document.write(func("함수가 실행되었습니다.10-3
"));

    //10-4. 선언적 함수 (가독성x)

    func = x => x;

    document.write(func("함수가 실행되었습니다.10-4
"));
}

10-1
func라는 변수에 함수를 할당하고, 이 함수를 호출한 결과를 document.write를 통해 출력하고 있습니다. 함수는 매개변수 x를 받아 이를 그대로 반환하고 있습니다.함수가 실행되면 매개변수로 전달한 문자열 "함수가 실행되었습니다.10"이 반환되고, 이 값이 document.write에 의해 출력됩니다.
10-2
하나의 매개변수만 있는 경우에는 매개변수를 소괄호로 감싸지 않아도 됩니다. 하지만 매개변수가 없거나, 둘 이상인 경우에는 소괄호가 필요합니다. 10-3
화살표 함수의 리턴 생략은 함수 본문이 단일 표현식(expression)으로 이루어져 있을 때, 중괄호 {}와 return 키워드를 생략하고 표현식 자체를 반환하는 것을 의미합니다. 이를 통해 간결한 코드를 작성할 수 있습니다. 10-4
함수 내부에서 x => x는 매개변수 x를 받아 그대로 반환하는 화살표 함수입니다.
가독성이 떨어진다는 단점이 있습니다.

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

함수와 매개변수를 이용하여 값을 출력하는 예제입니다.

{
    function func(num, str) {
        console.log(`${num}. ${str}`);
    }
    func(11, "함수");
}

1. func라는 함수를 정의합니다. 이 함수는 두 개의 매개변수 num과 str을 받습니다. 함수 내부에서는 num과 str을 템플릿 리터럴을 사용하여 조합하고, 그 결과를 콘솔에 출력합니다.
2. func 함수를 호출하고 있습니다. 이때, num에는 12가 전달되고, str에는 "함수"가 전달됩니다.
3. 함수가 호출되면, 템플릿 리터럴을 사용하여 조합된 문자열 "11. 함수"가 콘솔에 출력됩니다.

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

함수와 변수를 이용하여 값을 출력하는 예제입니다.

{
    const num = 12;
    const str = "함수"

    function func(num, str) {
        // console.log(num + ". " + str);   //문자열 결합 방식
        console.log(`${num}. ${str}`);      //템플릿 리터럴 방식
    }
    func(num, str);
}

1. num과 str이라는 두 개의 상수를 정의합니다. num에는 12이라는 값이 할당됩니다. str에는 "함수"라는 문자열이 할당됩니다.
2. func이라는 함수를 정의합니다. 이 함수는 두 개의 매개변수 num과 str을 받습니다. 함수 내부에서는 num과 str을 이용하여 문자열을 조합하고, 그 결과를 콘솔에 출력합니다.
주석 처리된 console.log(num + ". " + str); 부분은 템플릿 리터럴을 사용하여 아래와 같이 나타낼 수 있습니다.템플릿 리터럴은 문자열 안에 변수나 표현식을 쉽게 포함시킬 수 있는 문법을 제공합니다.
3. 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]);
}

1. num 배열에는 [13, 14]라는 숫자들이, str 배열에는 ["함수", "함수"]라는 문자열들이 할당되었습니다.
2. func라는 함수를 정의합니다. 이 함수는 두 개의 매개변수 num과 str을 받습니다. 함수 내부에서는 전달된 num과 str을 템플릿 리터럴을 사용하여 조합하고, 그 결과를 콘솔에 출력합니다.
3. func 함수를 두 번 호출하고 있습니다. 첫 번째 호출에서는 num[0] (즉, 13)과 str[0] (즉, "함수")가 인자로 전달됩니다. 두 번째 호출에서는 num[1] (즉, 14)과 str[1] (즉, "함수")가 인자로 전달됩니다. 함수가 호출될 때마다 템플릿 리터럴을 사용하여 num과 str을 조합한 문자열이 콘솔에 출력됩니다.
4. 첫 번째 호출에서는 "13. 함수"가 출력되고, 두 번째 호출에서는 "14. 함수"가 출력됩니다.

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

함수와 객체을 이용한 형태의 예제입니다

{
    const info = {
        num: 15,
        str: "함수"
    }
    function func(num, str) {
        console.log(`${num}. ${str}`);
    }
    func(info.num, info.str)
}

info라는 객체를 생성합니다. 이 객체에는 num이라는 속성과 str이라는 속성이 있습니다. num의 값은 15이고, str의 값은 "함수"입니다.
func라는 이름의 함수를 정의합니다. 이 함수는 num과 str이라는 두 개의 매개변수를 받습니다. 함수 내부에서는 console.log()를 사용하여 num과 str을 문자열로 결합하고 출력합니다. ${num}. ${str}은 템플릿 리터럴을 사용하여 num과 str을 결합한 문자열입니다.템플릿 리터럴을 사용하면 문자열을 역따옴표()로 감싸고, ${}` 문법을 사용하여 변수나 표현식을 포함시킬 수 있습니다.
func 함수를 호출합니다. 매개변수로 info.num과 info.str을 전달합니다. nfo.num은 info 객체의 num 속성으로부터 값을 가져오는 것이며, 여기서는 15입니다. info.str은 info 객체의 str 속성으로부터 값을 가져오는 것이며, 여기서는 "함수"입니다. 따라서, func 함수가 호출되면 콘솔에 "15. 함수"라는 문자열이 출력됩니다.

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

함수와 객체 및 배열을 이용한 형태의 예제입니다

{
    const info = [
                { num: 16, str: "함수" },
                { num: 17, str: "함수" }
    ]
    func(info[0].num, info[0].str)
    func(info[1].num, info[1].str)
}

1. info라는 배열을 선언합니다. 이 배열 안에는 두 개의 객체가 포함되어 있습니다.
첫 번째 객체는 { num: 16, str: "함수" }로, num 속성의 값은 16이고 str 속성의 값은 "함수"입니다.
두 번째 객체는 { num: 17, str: "함수" }로, num 속성의 값은 17이고 str 속성의 값은 "함수"입니다.
2. func 함수를 호출합니다. 이때 첫 번째 호출에서는 info 배열의 첫 번째 객체의 num 속성과 str 속성을 인자로 전달합니다.
info[0]은 배열의 첫 번째 요소를 나타내며, 여기서는 { num: 16, str: "함수" } 객체입니다. 따라서, 첫 번째 호출에서 num에는 16이 전달되고, str에는 "함수"가 전달됩니다.
3. 두 번째 호출에서는 info 배열의 두 번째 객체의 num 속성과 str 속성을 인자로 전달합니다.
info[1]은 배열의 두 번째 요소를 나타내며, 여기서는 { num: 17, str: "함수" } 객체입니다.
따라서, 두 번째 호출에서 num에는 17이 전달되고, str에는 "함수"가 전달됩니다.

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

객체 안에 함수를 이용한 형태의 예제입니다.객체와 화살표 함수 등을 사용하여 구성되어 있습니다. 객체와 함수를 활용하여 각각의 info 객체에서 원하는 동작을 수행합니다. 이때 화살표 함수를 사용하여 함수를 정의하고, 객체 내부에서 함수를 호출하고 있습니다.

{
    const info1 = {
        num: 18,
        str: "함수",
        result: () => {
            console.log(`${info1.num}. ${info1.str}`);
        }
    }
    info1.result();

    //약식 : 중괄호는 생략 가능하다
    const info2 = {
        num: 18,
        str: "함수",
        result: () => console.log(`${info2.num}. ${info2.str}`)
    }
    info2.result();
}

1.info1 객체는 세 개의 속성을 가지고 있습니다 num: 18 str: "함수" result: 화살표 함수 (arrow function)
result 함수 내부에서는 console.log()를 사용하여 ${info1.num}. ${info1.str} 문자열을 출력합니다. 이때 ${}는 템플릿 리터럴을 사용하여 변수 값을 문자열에 포함시킵니다. info1.result();은 info1 객체의 result 함수를 호출합니다. 결과적으로, 콘솔에 "18. 함수"가 출력됩니다
2. info2 객체는 약식 표현을 사용하여 선언되었습니다. 중괄호({}) 내부에 있는 코드가 한 줄이기 때문에 중괄호를 생략할 수 있습니다.
result 함수 내부에서도 console.log()를 사용하여 문자열을 출력합니다.
info2.result();을 호출하여 result 함수를 실행하면, 콘솔에 "18. 함수"가 출력됩니다.

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

함수와 객체 지향 프로그래밍의 개념을 활용하고 있습니다. 각 부분을 하나씩 설명해보겠습니다.

{
    //생성자 함수 Func
    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();
}

1. Func 함수는 생성자(constructor) 함수입니다. 생성자 함수는 객체를 생성할 때 사용됩니다. Func 함수는 num과 str 두 개의 매개변수를 받습니다. this.num = num;과 this.str = str;는 객체의 속성을 정의하고 초기화합니다. 이때 this는 생성자 함수가 생성할 객체를 가리킵니다. this.result는 화살표 함수로 정의되어 있습니다. 이 함수는 객체 내의 result 속성에 할당됩니다. result 함수 내부에서는 this.num과 this.str을 사용하여 문자열을 생성하고 출력합니다.
2. new Func(19, "함수");와 new Func(20, "함수");를 통해 두 개의 Func 객체(인스턴스)를 생성합니다. 첫 번째 인스턴스는 num이 19이고 str이 "함수"입니다. 두 번째 인스턴스는 num이 20이고 str이 "함수"입니다.
3. info1.result();과 info2.result();을 호출하여 두 인스턴스의 result 함수를 실행합니다. 각각의 호출에서 this.num과 this.str은 해당 인스턴스의 속성 값을 가리킵니다.

생성자 함수(Constructor Function)는 객체를 생성하는 역할을 합니다. 일반적으로 클래스(class)의 역할을 하며, 동일한 구조를 갖는 여러 객체를 간편하게 생성할 수 있도록 도와줍니다. 이를 통해 코드의 재사용성을 높이고, 객체 지향 프로그래밍의 개념을 구현할 수 있습니다.
생성자 함수는 일반적으로 이름의 첫 글자를 대문자로 작성하여 구별합니다. 생성자 함수를 호출할 때 new 연산자를 사용합니다. 생성자 함수 내에서 this 키워드를 사용하여 객체의 속성과 메서드를 정의합니다.

this는 현재 실행 중인 코드에서 사용되는 객체를 참조하는 특수한 키워드입니다. this의 값은 실행 문맥에 따라 동적으로 결정됩니다. 일반 함수의 this는 함수가 호출될때 결정이 됩니다. 화살표 함수에서의 this는 함수가 속해있는 곳의 상위 this를 계승 받습니다.

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

프로토타입 함수(Prototype Function)는 JavaScript에서 객체 지향 프로그래밍을 구현할 때 사용되는 중요한 개념입니다. 객체의 프로토타입(prototype)은 해당 객체의 부모 역할을 하는 객체입니다. 즉, 객체는 프로토타입의 속성과 메서드를 상속받습니다. 프로토타입 함수은 이러한 프로토타입 객체에 추가된 함수를 의미합니다.

{
    // 생성자 함수
    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();
}

1. Func 함수는 num과 str 두 개의 인자를 받아 객체의 속성으로 설정합니다. 즉, 객체를 생성할 때 전달된 값으로 객체의 상태를 초기화합니다.
2. 여기서 Func.prototype.result는 Func 생성자 함수의 프로토타입에 result 메서드를 추가합니다. 이제 Func으로 생성된 모든 객체는 result 메서드를 사용할 수 있습니다. (함수를 밖으로 뺀다)
3.위 코드에서 const info1 = new Func(21, "함수");를 통해 Func 생성자 함수를 사용하여 info1 객체를 생성합니다. info1.result();를 호출하면, result 메서드가 실행되어 콘솔에 "21. 함수"가 출력됩니다. 이때 this.num과 this.str은 info1 객체의 속성을 참조합니다. 즉, info1.result();을 호출하면, info1 객체의 result 메서드가 실행됩니다. 여기서 this.num은 21, this.str은 "함수"입니다. 따라서 콘솔에 "21. 함수"가 출력됩니다. info2.result();을 호출하면, info2 객체의 result 메서드가 실행됩니다. 여기서 this.num은 22, this.str은 "함수"입니다. 따라서 콘솔에 "22. 함수"가 출력됩니다.

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

객체 리터럴 함수의 예제입니다

{
    //1. 생성자 함수 Func
    function Func(num, str) {
        this.num = num;
        this.str = str;
    }
    //2. 프로토타입에 메서드 추가
    Func.prototype = {
        result1: function () {
            console.log(`${this.num}. ${this.str}`);
        },
        result2: function () {
            console.log(`${this.num}. ${this.str}`);
        }
    }
    //3. 객체 생성
    const info1 = new Func(23, "함수");
    const info2 = new Func(24, "함수");

    //4. 메서드 호출
    info1.result1();
    info2.result2();
}

1. Func 함수는 두 개의 인자 num과 str을 받아서, 객체의 속성으로 저장합니다. 즉, 객체를 생성할 때 전달된 값으로 객체의 상태를 초기화합니다.
2. Func.prototype은 Func 생성자 함수의 프로토타입 객체입니다. 여기서 프로토타입 객체에 result1과 result2 두 개의 메서드를 추가합니다. 이제 Func으로 생성된 모든 객체들은 이 두 메서드를 공유합니다.
3. Func 생성자 함수를 사용하여 info1과 info2 두 개의 객체를 생성합니다. info1은 num이 23이고 str이 "함수"입니다. info2는 num이 24이고 str이 "함수"입니다.
4. info1.result1()을 호출하면, info1 객체의 result1 메서드가 실행됩니다. 여기서 this.num은 23, this.str은 "함수"입니다. 따라서 콘솔에 "23. 함수"가 출력됩니다. info2.result2()을 호출하면, info2 객체의 result2 메서드가 실행됩니다. 여기서 this.num은 24, this.str은 "함수"입니다. 따라서 콘솔에 "24. 함수"가 출력됩니다.

20. 함수 : 즉시실행 함수

자바스크립트에서 즉시실행 함수(IIFE - Immediately Invoked Function Expression)는 함수를 정의하자마자 즉시 호출하는 패턴입니다.

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


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

//즉시실행 함수(IIFE)의 장점
    (function () {
        var secret = "비밀 정보";

        function getSecret() {
            return secret;
        }

        console.log(getSecret()); // 출력: "비밀 정보"
    })();

    console.log(secret); // 에러: secret is not defined
    console.log(getSecret()); // 에러: getSecret is not defined
}

1. 익명 함수를 선언하고 즉시 실행합니다."25. 함수가 실행되었습니다."를 콘솔에 출력합니다.
2.화살표 함수로 구현된 즉시실행 함수입니다.첫 번째 예제와 비슷하지만, 함수 표현식이 화살표 함수로 되어있습니다. "26. 함수가 실행되었습니다."를 콘솔에 출력합니다.

즉시실행 함수(IIFE)의 장점
이 예제에서는 IIFE를 사용하여 secret이라는 변수를 캡슐화하고, getSecret이라는 함수를 외부로 노출시켰습니다. 이로 인해 secret 변수는 함수 외부에서 접근할 수 없고, getSecret 함수만이 외부에서 호출 가능합니다.

전역 스코프 오염 방지 : 즉시실행 함수를 사용하면 해당 함수 내에서 정의된 변수들은 함수 내부에서만 유효하여 다른 스크립트나 코드 블록에서 변수명이 충돌하는 문제를 방지합니다
캡슐화: 즉시실행 함수 내에서 정의된 변수들은 해당 함수 내에서만 접근 가능하므로, 변수의 범위를 제한하여 코드를 더 안전하게 만듭니다.
모듈화: 즉시실행 함수를 사용하여 코드를 모듈화할 수 있습니다. 함수 내에서 필요한 작업들을 수행하고, 외부에 노출시키고 싶은 것만 노출시킬 수 있습니다.
즉시 실행: 함수 정의와 호출이 동시에 이루어지므로, 코드가 로드될 때 즉시 실행됩니다.

캡슐화는 객체 지향 프로그래밍(OOP)에서 사용되는 개념으로, 관련된 데이터와 기능을 하나의 단위로 묶는 것을 의미합니다. 이를 통해 객체의 내부 상태를 외부에서 직접 접근하지 못하도록 보호할 수 있습니다.
모듈화는 프로그램을 작은 독립적인 조각으로 나누는 것을 의미합니다. 각각의 모듈은 특정 기능 또는 작업을 수행하며, 서로 다른 모듈들은 서로의 기능을 이용할 수 있습니다. 이러한 모듈들을 조합하여 프로그램을 구성합니다.

21. 함수 : 파라미터 함수

파라미터 함수 (Function Parameters)는 함수가 호출될 때 전달되는 값을 받아들이는 변수입니다. 이러한 값들을 함수 내부에서 활용하여 작업을 수행할 수 있습니다.

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

// 함수 : 파라미터 함수 (화살표 함수)
const func1 = (str = "28. 함수가 실행되었습니다.") => {
    console.log(str);
}
func1();
}

1.함수 func를 정의합니다. 이 함수는 str이라는 매개변수를 가지며, =를 사용하여 기본값을 설정합니다. 즉, 만약 함수 호출 시 인자가 전달되지 않으면 기본값으로 "27. 함수가 실행되었습니다."를 사용합니다.
함수 내에서 str 변수를 출력하는 console.log 문이 있습니다. 함수를 호출합니다. 이 때 인자가 전달되지 않았으므로, 기본값인 "27. 함수가 실행되었습니다."가 console.log를 통해 출력됩니다.
2. 위의 예제와 같은 파라미터로 문자열을 받아 출력하는 함수를 화살표 함수로 구현하고 호출하는 예제입니다.
화살표 함수의 매개변수로 str을 정의합니다. =를 사용하여 기본값을 설정합니다. 만약 함수가 호출될 때 인자가 전달되지 않으면 기본값으로 "28. 함수가 실행되었습니다."를 사용합니다.
화살표 함수의 몸체에는 str을 출력하는 console.log 문이 포함되어 있습니다.

매개변수(parameter)란 함수의 정의에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수를 의미합니다.
인수(argument)란 함수가 호출될 때 함수로 값을 전달해주는 값을 말합니다.(인수는 함수를 호출할 때 실제로 전달되는 값입니다)
함수의 매개변수는 호출될 때 인수로 대체됩니다.

이 예제에서는 str이 매개변수입니다. 인수는 함수를 호출할 때 전달되는 실제 값으로, 매개변수에 할당됩니다. 이 예제에서는 함수 호출 func(); 에서 전달되는 값이 없으므로, 기본값 "27. 함수가 실행되었습니다." 가 매개변수 str에 할당됩니다.

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

재귀 함수(Recursive Function)는 함수가 자기 자신을 호출하는 것을 말합니다. 이를 통해 반복적으로 작업을 수행하거나 문제를 해결할 수 있습니다

{
//기본형식
    function recursiveFunction(parameters) {
        // 종료 조건 (base case)
        if (/* 종료 조건이 충족되면 */) {
            // 어떤 값을 반환하거나 작업을 수행합니다.
        } else {
            // 자기 자신을 호출하여 더 작은 문제로 나눕니다.
            recursiveFunction(modifiedParameters);
        }
    }

//재귀함수
    function func1(num) {
        if (num < 1) return; //종료 조건이 충족되면

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

//기본형식 종료 조건 (base case): 함수가 자기 자신을 호출하지 않고 종료되는 조건입니다. 이 조건이 없으면 함수는 무한히 호출될 수 있습니다. 종료 조건을 만족하면 재귀 호출이 중단되고, 필요한 값을 반환하거나 작업을 수행합니다. 재귀 함수를 작성할 때에는 종료 조건을 꼭 설정해야 합니다. 그렇지 않으면 무한 루프에 빠질 수 있습니다
재귀 호출: 함수가 자기 자신을 호출하는 부분입니다. 이때 매개변수는 이전 호출보다 더 작은 부분 문제로 만들어져야 합니다. 이렇게 하면 문제가 해결될 때까지 함수가 반복적으로 호출됩니다.

매개변수(parameter)란 함수의 정의에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수를 의미합니다.
인수(argument)란 함수가 호출될 때 함수로 값을 전달해주는 값을 말합니다.(인수는 함수를 호출할 때 실제로 전달되는 값입니다)
함수의 매개변수는 호출될 때 인수로 대체됩니다.

이 예제에서는 str이 매개변수입니다. 인수는 함수를 호출할 때 전달되는 실제 값으로, 매개변수에 할당됩니다. 이 예제에서는 함수 호출 func(); 에서 전달되는 값이 없으므로, 기본값 "27. 함수가 실행되었습니다." 가 매개변수 str에 할당됩니다.