01. 선언적 함수

선언적 함수(declarative function)는 function 키워드를 사용하여 함수를 선언하는 방식입니다.
함수의 이름과 매개변수를 괄호 안에 넣고, 함수 본문을 중괄호로 감싸서 정의합니다.

{
    function func(){
        document.write("실행되었습니다!
");
    }
    func();
}
결과 확인하기
실행 되었습니다.

함수 이름 짓기

function은 이름으로 올 수 없다. _-는 가능하지만 특수문자, 숫자가 들어올 수 없습니다.(식별자)

02. 익명함수

익명 함수(anonymous function)는 이름이 없는 함수입니다. function 키워드를 사용하여 함수를 정의하고, 이를 변수에 할당합니다.
변수에 함수 데이터를 저장하여 변수를 마치 함수 처럼 사용 할 수 있도록 만들어 줍니다.

{
    const func = function(){
        document.write("실행되었습니다!
");
    }
    func();
}
결과 확인하기
실행 되었습니다.

✍호이스팅?

변수나 함수를 선언하지 않고 호출 하였으르 때는 에러가 발생해야 하는 것이 맞지만, var로 선언하면 변수와 선언적 함수는 변수, 함수 선언 이전에 호출 하여도 에러를 발생 시키지 않습니다. 이것을 호이스팅이라고 합니다.

03. 매개변수 함수

매개변수 함수는 함수 내부에서 다른 함수를 호출할 때, 인자로서 함수 자체를 전달하는 방식입니다.

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

매개변수를 사용하는 이유

이러한 방식을 활용하면 코드의 가독성을 높일 수 있습니다. 함수를 선언할 때 소괄호 내부에 매개 변수 이름을 작성한다음, 본문 실행문에 매개변수를 활용하여 작성한 후 호출할 때 함수 이름뒤에 출력문을 호출하는 방식입니다.

03-1. 매개변수 함수 여러개

매개변수 함수 여러개 사용할 수 있습니다.

{
    function c(str1, str2, str3){
        document.write(str1, str2, str3);
    };
    c("실행3", "실행4", "실행5");
}
결과 확인하기
실행3 실행4 실행5

04. 리턴 함수

return 키워드를 사용하여 값을 호출한 곳으로 반환할 수 있습니다. 이러한 함수를 리턴값을 가지는 함수라고 합니다.
함수 중단에 return값이 사용되기도 합니다. 

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

Return 명령문

  • return 명령문은 함수 실행을 종료하고, 주어진 값을 호출지점으로 반환한다.
  • 함수 내부에서 return명령문이 실행될 경우, 해당 함수가 종료된다.
  • 즉, return은 함수를 종료하는 기능과더불어 어떠한 값을 반환할 수 있게 해준다.

04-1. 매개변수 + 리턴 함수

매개변수와 리턴 함수를 함께 사용가능합니다. 

{
    function d(x,y,z){
        return x+y+z;
    }
    document.write(d(1,2,3));
}
결과 확인하기
6

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

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

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

{
    const func = () => {
        document.write("실행되었습니다.<br>");
    }
    func();
}
결과 확인하기
실행되었습니다.

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

{
    func = (str) => {
        document.write(str)
    }
    func("실행되었습니다.<br>"); 
}
결과 확인하기
실행되었습니다.

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

{
    func = () => {
        const str = "실행되었습니다.<br>";
        return str;
    }
    document.write(func());
}
결과 확인하기
실행되었습니다.

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

{
    const func = (str) => {
        return str;
    }
    document.write(func("실행되었습니다."));
}
결과 확인하기
실행되었습니다.

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

{
    const func = str => {
        return str;
    }
    document.write(func("실행되었습니다.")); // 리액트나 뷰에 많이 사용
}
결과 확인하기
실행되었습니다.

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

{
    const func = str => str;

    document.write(func("실행되었습니다.")); // 리액트나 뷰에 많이 사용
}
결과 확인하기
실행되었습니다.

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

{
    func = str => str;

    document.write(func("실행되었습니다.")); // 리액트나 뷰에 많이 사용
    // this를 사용할 수 없다는 단점이있다.
}
결과 확인하기
실행되었습니다.

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

매개변수함수를 통해 출력할 값을 받는다.

{
        {
            function func(num, str1, str2){
                document.write(num + ". " +str1 + "가 " + str2 + "되었습니다.
");
            }
            func("1","함수","실행");
            func("2","자바스크립트","실행");
            func("3","리액트","실행");
        }
}
결과 확인하기
1. 함수가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 리액트가 실행되었습니다.

해설

매개변수를 사용한 함수를 통해 출력할 값을 함수를 통해 넣습니다. func()에서 부른 값을 함수 안에 있는 매개 변수선언 자리에 맞물려 출력문으로 들어가 결과가 출력됩니다.

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 yocom1 = "실행";

    func(youNum1, youstr1, yocom1);     // 1. 함수가 실행되었습니다.
    func(youNum2, youstr2, yocom1);     // 2. 자바스크립트가 실행되었습니다.
    func(youNum3, youstr3, yocom1);     // 3. 리액스가 실행되었습니다.
}
document.write("
")
}
결과 확인하기
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);
    // 필요한 값을 저장하기 위해 map을 사용하여 가져올수 있고 배열에 인덱스에 변수 i를 넣어 증가값으로 출력 
}
결과 확인하기
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. 함수 유형 : 객체생성자 함수

{
    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. 함수 유형 : 프로토타입 함수

{
    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();
}
결과 확인하기
실행되었습니다.

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

{
    function func(num, name, com){
        this.num = num;
        this.name = name;
        this.com = com;
    }
    func.prototype = {
        result1: function(){
            document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.
`);
        },
        result2: function(){
            document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.
`);
        },
        result3: function(){
            document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.
`);
        }
    }

    //인스턴스
    const info1 = new func("102", "함수", "실행");
    const info2 = new func("202", "자바스크립트", "실행");
    const info3 = new func("302", "리액트", "실행");

    //실행문
    info1.result1();
    info2.result2();
    info3.result3();
}
결과 확인하기
101.함수가 실행되었습니다. 201.함수가 실행되었습니다. 301.함수가 실행되었습니다.

22. 함수 유형 : 즉시 실행 함수

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

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

    (() => {
        document.write("501.함수가 실행되었습니다.
");
    })();
    //화살표 함수(페이지열자마자 나오는 실행 애니메이션)
}
결과 확인하기
500.함수가 실행되었습니다. 501.함수가 실행되었습니다.

23. 함수 유형 : 파라미터 함수

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

24. 함수 유형 : 아규먼트 함수

{
    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.함수 실행

27. 함수 유형 : 콜백함수 : 반복문

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

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( );
            });
        });
    });
}
결과 확인하기
01.
funcA가 실행되었습니다.
funcB가 실행되었습니다.
02.
funcB가 실행되었습니다.
funcA가 실행되었습니다.
03.
funcA가 실행되었습니다.
funcB가 실행되었습니다.
04.
funcA가 실행되었습니다.
funcB가 실행되었습니다.
funcC가 실행되었습니다.
funcD가 실행되었습니다.