01.선언적 함수

선언적 함수(declarative function)는 자바스크립트에서 함수를 정의하는 방법 중 하나입니다.
{
    function func( ){
    document.write("실행되었습니다.");
    };
    func( );
}
결과 확인하기
실행되었습니다.!
함수를 선언할 때 function 키워드를 사용하여 정의하는 방법입니다. 함수 선언문 이라고도합니다.
선언적 함수는 함수를 정의하는 시점에서 함수 객체가 생성되며, 호이스팅(hoisting)이 가능합니다.
호이스팅이 가능하다는 것은 함수가 정의되기 이전에 함수를 호출할 수 있다는 것을 의미합니다.
따라서, 함수를 선언문으로 정의하면 코드의 가독성과 유지보수성을 높일 수 있습니다.

02. 익명 함수

변수는 데이터를 저장하는 "저장소" 이며 이 저장소에는 숫자, 문자, 함수, 객체 등을 저장할수 있습니다.
{
    const func = function( ){
        document.write("실행되었습니다.");
    };
    func( );
}
결과 확인하기
실행되었습니다.!
익명 함수는 함수 표현식(function expression)이나 콜백 함수(callback function) 등에서 주로 사용됩니다.
함수를 변수에 할당하거나, 객체의 속성 값으로 함수를 할당할 때 사용됩니다.

03. 매개변수 함수

매개변수 함수(parameter function)는 자바스크립트에서 함수의 인자로 전달되는 함수를 말합니다 
 {
    function func(str){
        document.write(str);
    };
    func("실행되었습니다.");
}
결과 확인하기
실행되었습니다.!
매개변수 함수를 이용하면 함수의 재사용성과 확장성을 높일 수 있습니다.
함수의 로직 중 일부를 매개변수 함수로 분리하여, 함수 호출 시에 동적으로 로직을 변경하거나 확장할 수 있기 때문입니다.

04. 리턴값 함수

리턴값 함수(return function)는 자바스크립트에서 함수가 실행된 결과를 반환하는 함수를 말합니다.
{
    function func(){
        const str = "실행되었습니다.";       
        return str;                        // return 키워드로 인해 결과 호출        
    };
    document.write(func());
}
결과 확인하기
실행되었습니다.!
함수 내부에서 연산, 조작, 처리한 결과를 반환하여, 이를 다른 변수나 함수에서 활용할 수 있습니다.

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

화살표 선언적 함수(arrow function declaration)는 자바스크립트에서 함수를 정의하는 방법 중 하나입니다.
{
    func = () => document.write("실행되었습니다.");
    // function func(){
    //     document.write("실행되었습니다.");
    // };
    func();
}
결과 확인하기
실행되었습니다.
일반적인 함수 선언문과 달리, 화살표 함수를 이용하여 간결하고 명확한 함수를 작성할 수 있습니다. 화살표 함수는 함수의 인자와 로직을 괄호로 묶어 화살표 표기법(=<)으로 구성됩니다.
화살표 함수는 일반적으로 함수 표현식(function expression)으로 사용되며,
변수에 할당되어 다른 함수의 인자로 전달되거나 콜백 함수(callback function)로 사용됩니다.

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

화살표 익명 함수(arrow anonymous function)는 자바스크립트에서 익명 함수를 작성할 때, 화살표 함수를 이용하는 것을 말합니다
{
    const func = () => {
        document.write("실행되었습니다.");
    };
    // const func = function(){
    //     document.write("실행되었습니다.");
    // };
    func();
}
결과 확인하기
실행되었습니다.
함수 이름이 없는 익명 함수를 작성할 때,
화살표 함수를 이용하여 간결하고 명확한 함수를 작성할 수 있습니다.
화살표 익명 함수는 함수의 인자와 로직을 괄호로 묶어 화살표 표기법(=<)으로 구성됩니다.
화살표 함수는 일반적으로 함수 표현식(function expression)으로 사용되며,
변수에 할당되어 다른 함수의 인자로 전달되거나 콜백 함수(callback function)로 사용됩니다.

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

화살표 매개변수(arrow function parameters)는 자바스크립트에서 화살표 함수를 작성할 때, 함수 인자를 지정하는 방법을 말합니다.
{
    func = (str) => {
        document.write(str);
    };
    // function func(str){
    //     document.write(str);
    // };
    func("실행되었습니다.");
}
결과 확인하기
실행되었습니다.
일반적인 함수 선언문과 달리, 화살표 함수는 매개변수 선언부가 괄호로 묶이며, 매개변수가 하나일 경우 괄호를 생략할 수 있습니다.

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

화살표 리턴값 함수(arrow function with return value)는 자바스크립트에서 화살표 함수를 작성할 때, 함수의 반환 값을 지정하는 방법을 말합니다.
{
    func = () => {
        const str = "실행되었습니다.";
        return str;
    };
    // function func(){
    //     const str = "실행되었습니다.";
    //     return str;
    // };
    document.write(func());
}
결과 확인하기
실행되었습니다.
화살표 함수는 함수 본문 내부의 문장이 하나일 경우에는 중괄호와 return 키워드를 생략할 수 있으며,
이때는 해당 문장의 결과값이 함수의 반환 값으로 자동 지정됩니다.

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

화살표 함수 익명 함수와 매개변수 리턴함수를 사용한 예제입니다
{
    const func = (str) => {
        return str;
    };
    document.write(func("실행되었습니다."));
}
결과 확인하기
실행되었습니다.
위 순대로 익명 화살표 함수 a를 선언하고, 이를 호출하여 "실행1"을 출력합니다.
상수(const) b에 익명 화살표 함수를 할당하고, 이를 호출하여 "실행2"를 출력합니다.
세 개의 문자열 매개변수를 받는 익명 화살표 함수 c를 선언하고, 이를 호출하여 "실행3실행4실행5"를 출력합니다.
매개변수와 인자는 쉼표로 구분되며, 여기서는 인자를 쉼표 없이 나열하였습니다.
세 개의 숫자 매개변수를 받는 익명 화살표 함수 d를 선언하고, 이를 호출하여 1, 2, 3을 더한 결과인 6을 출력합니다.
함수 내에서 return 키워드를 사용하여 값을 반환합니다.

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

화살표 함수 익명 함수와 매개변수 리턴함수로 사용한 예제이며 괄호는 생략하여 표현하는 방법 입니다
{
    const func = str => {
        return str;
    }
    document.write(func("실행되었습니다."));
}
결과 확인하기
실행되었습니다.
9번과 같지만, 9번에서 괄호를 생략해주었습니다.

11. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴 생략

화살수표 함수 익명 함수와 매개변수 리턴함로 사용한 예제이며 괄호와 리턴을 생략하여 표현하는 방법 입니다
{
    const func = str => str;

    document.write(func("실행되었습니다."));
}
결과 확인하기
실행되었습니다.
10번과 같지만, 10번에서 리턴을 생략해주었습니다.
리턴생략할때 중괄호도 같이 생략가능합니다.

12. 화살표 함수 : 선언적 함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴 생략

화살수표 함수 익명 함수와 매개변수 리턴함로 사용한 예제이며 괄호와 리턴을 생략하여 표현하는 방법 입니다
{
    func = str => str;
    
    document.write(func("실행되었습니다."));
}
결과 확인하기
실행되었습니다.
11번에서 한번더 생략할수있습니다.
익명함수를 선언적 함수로 바꿔주는것입니다.

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

함수와 매개변수로 값을 입력하고 사용한 함수 유형입니다.

{
    function func(num, str1, str2){
        document.write(num + ". " + str1 + "가 " + str2 + "되었습니다.");
    }

    // 매개변수로 값을 입력
    func("1", "함수", "실행");
    func("2", "자바스크립트", "실행");
    func("3", "리액트", "실행");
}
결과 확인하기
1. 함수가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 리액트가 실행되었습니다.

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

함수와 변수로 값을 입력하고 사용한 함수 유형입니다.

{
    function func(num, str1, str2){
        document.write(num + ". " + str1 + "가 " + str2 + "되었습니다.");
    };

    // 변수로 값을 입력
    const youNum1 = 1;
    const youNum2 = 2;
    const youNum3 = 3;
    const youStr1 = "함수";
    const youStr2 = "자바스크립트";
    const youStr3 = "리액트";
    const youCom1 = "실행";

    func(youNum1, youStr1, youCom1);
    func(youNum2, youStr2, youCom1);
    func(youNum3, youStr3, youCom1);
}
결과 확인하기
1. 함수가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 리액트가 실행되었습니다.

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

함수와 배열로 나열해서 데이터를 입력하고 사용한 함수 유형입니다.

{
    function func(num, str1, str2){
        document.write(num + ". " + str1 + "가 " + str2 + "되었습니다.");
    };

    // 값을 배열로 나열해서 데이터 입력
    const num = [1, 2, 3];
    const info = ["함수", "자바스크립트", "리액트", "실행"];

    
    func(num[0], info[0], info[3]);
    func(num[1], info[1], info[3]);
    func(num[2], info[2], info[3]);
}
결과 확인하기
1. 함수가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 리액트가 실행되었습니다.

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

함수와 객체로 나열해서 데이터를 입력하고 사용한 함수 유형입니다.

정리가 잘 되어 있어 한눈에 보기 좋습니다.

{
    function func(num, str1, str2){
        document.write(num + ". " + str1 + "가 " + str2 + "되었습니다.");
    };

    // 값을 객체로 나열해서 데이터 입력
    const info = {
        num1 : 1,
        name1 : "함수",
        num2 : 2,
        name2 : "자바스크립트",
        num3 : 3,
        name3 : "리액트",
        word : "실행"
    }

    func(info.num1, info.name1, info.word);
    func(info.num2, info.name2, info.word);
    func(info.num3, info.name3, info.word);
}
결과 확인하기
1. 함수가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 리액트가 실행되었습니다.

17. 함수 유형 : 함수와 배열, 객체를 이용한 형태

함수와 배열 안에 객체로 나열된 데이터를 사용한 함수 유형입니다.

{
    function func(num, str1, str2){
        document.write(num + ". " + str1 + "가 " + str2 + "되었습니다.");
    };

    // 배열 안에 객체로 나열된 데이터
    const info = [
        {
            num : 1,
            name : "함수",
            word : "실행"
        }, {
            num : 2,
            name : "자바스크립트",
            word : "실행"
        }, {
            num : 3,
            name : "리액트",
            word : "실행"
        }
    ];

    func(info[0].num, info[0].name, info[0].word);
    func(info[1].num, info[1].name, info[1].word);
    func(info[2].num, info[2].name, info[2].word);
}
결과 확인하기
1. 함수가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 리액트가 실행되었습니다.

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

객체 안에 데이터를 함수로 사용한 함수 유형입니다.

{
    const info = {
        num1 : 1,
        name1 : "함수",
        num2 : 2,
        name2 : "자바스크립트",
        num3 : 3,
        name3 : "리액트",
        word : "실행",
        result1 : function( ){
            document.write(info.num1 + ". " + info.name1 + "가 " + info.word + "되었습니다.");
        }, 
        result2 : function( ){
            document.write(info.num2 + ". " + info.name2 + "가 " + info.word + "되었습니다.")
        }, 
        result3 : function( ){
            document.write(info.num3 + ". " + info.name3 + "가 " + info.word + "되었습니다.")
        } 
    }

    // 객체 안에 함수 출력하는 방법
    info.result1( );
    info.result2( );
    info.result3( );
}
결과 확인하기
1. 함수가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 리액트가 실행되었습니다.

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

객체 생성자를 사용한 함수 유형입니다.
생성자 함수의 규칙은 함수 이름의 첫 글자는 대문자, 반드시 'new' 연산자를 붙여 함수(인스턴스 생성)를 실행합니다.

{
    function Func(num, name, word){
        this.num = num;
        this.name = name;
        this.word = word;
        this.result = function( ){
            document.write(this.num + ". " + this.name + "가 " + this.word + "되었습니다.");
        }
    };

    // 인스턴스 생성
    const info1 = new Func(1, "함수", "실행");     
    const info2 = new Func(2, "자바스크립트", "실행");
    const info3 = new Func(3, "리액트", "실행");

    info1.result( );
    info2.result( );
    info3.result( );
}
결과 확인하기
1. 함수가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 리액트가 실행되었습니다.

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

프로토타입(prototype)을 사용한 함수 유형입니다.
프로토타입(prototype)은 '생성자 함수'로 생성된 객체들은 '생성자 함수'에서 정의한 속성을 그대로 상속받습니다.

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

    Func.prototype.result = function( ){
        document.write(this.num + ". " + this.name + "가 " + this.word + "되었습니다.");
    };

    const info1 = new Func(1, "함수", "실행");     
    const info2 = new Func(2, "자바스크립트", "실행");
    const info3 = new Func(3, "리액트", "실행");

    info1.result( );
    info2.result( );
    info3.result( );
}
결과 확인하기
1. 함수가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 리액트가 실행되었습니다.

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

객체 리터럴 함수를 사용한 유형입니다.
프로토타입(prototype)은 '생성자 함수'로 생성된 객체들은 '생성자 함수'에서 정의한 속성을 그대로 상속받습니다.

{
            function Func(num, name, word){
                this.num = num;
                this.name = name;
                this.word = word;
            };
        
            Func.prototype.result = function( ){
                document.write(this.num + ". " + this.name + "가 " + this.word + "되었습니다.");
            };
        
            const info1 = new Func(1, "함수", "실행");     
            const info2 = new Func(2, "자바스크립트", "실행");
            const info3 = new Func(3, "리액트", "실행");
        
            info1.result( );
            info2.result( );
            info3.result( );
        }
결과 확인하기
1. 함수가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 리액트가 실행되었습니다.

22. 함수 종류 : 즉시 실행 함수

즉시 실행 함수(IIFE, Immediately Invoked Function Expression)는 함수를 정의하고 즉시 실행하는 자바스크립트 패턴입니다.
이 패턴은 전역 스코프에 변수를 추가하는 것을 방지하고 모듈화된 코드를 작성하는 데 사용됩니다.

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

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

    (( ) => {
        document.write("501. 함수가 실행되었습니다.");
    })( );
}
결과 확인하기
500. 함수가 실행되었습니다.
501. 함수가 실행되었습니다.

23. 함수 종류 : 파라미터 함수

파라미터 함수(Parameter Function)는 함수의 인자로서 전달되는 함수를 의미합니다.
파라미터 함수는 함수의 인자로서 전달되어 다른 함수 내에서 호출됩니다.
이를 통해 함수의 유연성과 재사용성을 높일 수 있습니다.

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

    function func(str = "600. 함수가 실행되었습니다."){
        document.write(str);
    };
    func();
}
결과 확인하기
600. 함수가 실행되었습니다.

24. 함수 종류 : 아규먼트 함수

아규먼트 함수(Argument Function)는 함수 호출 시 인자로 전달되는 함수를 의미합니다.
아규먼트 함수는 함수 내부에서 실행됩니다.

{
    function func(str1, str2){
        document.write(arguments[0]);
        document.write(arguments[1]);
    };
    func("함수실행1", "함수실행2");
}
결과 확인하기
함수실행1
함수실행2

25. 함수 종류 : 재귀 함수

재귀 함수는 자기 자신을 호출시키는 함수입니다.

{
    function func(num){
        if(num<=1){
            document.write("함수가 실행되었습니다.");
        } else {
            document.write("함수가 실행되었습니다.");
            func(num-1);
        }
    };
    func(10);
}
결과 확인하기
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.

26. 함수 종류 : 콜백 함수

콜백 함수는 함수를 두번 실행하고 다른 함수에 인수로 넘겨지는 함수입니다.

{
    // function func1(){
    //     document.write("1. 함수 실행");
    // };
    // function func2(){
    //     document.write("2. 함수 실행");
    // };
    // func1();
    // func2();

    function func(){
        document.write("2. 함수 실행");
    };
    function callback(str){
        document.write("1. 함수 실행");
        str();
    };
    callback(func);
}
결과 확인하기
1. 함수 실행
2. 함수 실행

26. 함수 종류 : 콜백 함수 : 반복문

콜백 함수는 함수를 두번 실행하고 다른 함수에 인수로 넘겨지는 함수입니다.

{
    function func(index){
        console.log("함수가 실행되었습니다."+index);
    }
    function callback(num){
        for(let i=1; i<=0; i++){
            num(i);
        }
    }
    callback(func);
}
결과 확인하기
1. 함수 실행
2. 함수 실행

27. 함수 종류 : 콜백 함수 : 반복문

콜백 함수는 함수를 두번 실행하고 다른 함수에 인수로 넘겨지는 함수입니다.

{
            function func(index){
                console.log("함수가 실행되었습니다."+index);
            }
            function callback(num){
                for(let i=1; i<=0; i++){
                    num(i);
                }
            }
            callback(func);
        }
결과 확인하기
1. 함수 실행
2. 함수 실행

28. 함수 종류 : 콜백 함수 : 동기/비동기

콜백 함수는 함수를 두번 실행하고 다른 함수에 인수로 넘겨지는 함수입니다.

//01
{
    function funcA(){
        console.log("funcA가 실행되었습니다.");
    }
    function funcB(){
        console.log("funcB가 실행되었습니다.");
    }

    funcA();
    funcB();
    //a b
}
//02
{
    function funcA(){
        setTimeout (()=> {
            console.log("funcA가 실행되었습니다.");
        },1000)
    }
    function funcB(){
        console.log("funcB가 실행되었습니다.");
    }

    funcA();
    funcB();
    //b a
}
//03
{
    function funcA(callback){
        setTimeout(() => {
            console.log("funcA가 실행되었습니다.");
            callback();
        }, 1000)
    }
    function funcB(){
        console.log("funcB가 실행되었습니다.");
    }
    funcA(function() {
        funcB();
    });
}
//04 : 콜백 지옥
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. 함수 실행
2. 함수 실행
TOP