javascript

01. 선언적 함수

가장 기초적인 함수 선언 !

{
    function func(){
        document.write("실행했어요 함수선언 !");
    }
    func();
}

02. 익명 함수

변수 안에 함수를 저장 !

{
    const func = function(){
        document.write("익명 함수 실행했어요 !");
    }
    func();
}

03. 매개변수 함수

함수안에 변수를 넣어 실행 !

{
    function func(str){
        document.write(str);
    }
    func("매개변수 함수실행하였어요");
}

04. 리턴값 함수

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

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

화살표 표현을 이용해서 선언해볼게요!

{
    func1 =()=> {
        document.write("화살표선언후 선언함수 실행!했어요 
")
    }
    func2 =()=> document.write("화살표선언후 선언함수 실행!!했어요 
")

    func1();
    func2();
}

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

화살표선언을 통해 익명함수를 실행해볼게요!

{
    const func1 =()=>{
        document.write("화살표선언후 익명함수 실행!했어요");
    }
    const func2 =()=>document.write("화살표선언후 익명함수 실행!!했어요");

    func1();    
    func2();    
}

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

화살표선언후 매개변수 함수 실행해볼게요 !

{
    func1 =(str)=>{
        document.write(str);
    }
    func1("화살표선언후 매개변수 함수 실행!!했어요");   
}

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

화살표선언후 리턴함수 실행했어요

{
    const func=()=>{
        const str = "화살표선언후 리턴 함수 실행했어요!" ;
        return str;
    }
    document.write(func());     
}

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

화살표선언후 리턴함수 실행했어요

{
    const func09 =(str)=>{
        return str;
    }
    document.write(func09("화살표 함수 : 익명 함수 + 매개변수 + 리턴값"));  
}

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

화살표선언후 리턴함에 function표기 ( )없이 실행했어요

{
    const func10 =str=>{
        return str;
    }
    document.write(func10("화살표 함수 : 익명 함수 + 매개변수 + 리턴값"));    
}

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

10번에서 표기해놓은 return값을생략함

{
    const func11 =str=>str;
    //리턴값이 1개일 경우 리턴값만으로 표현 가능 ! 

    document.write(func11("익명 함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴 생략"));
}

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

11번에서 익명함수선언시 쓰였던 const를 생략했어요

{
    func12 = str=> str;
    document.write("
");
    document.write(func12("선언적 함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴 생략"));
}

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

함수의 매개변수값을 직접 입력하여 실행함

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

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

함수의 매개변수값을 변수로 넣어 실행함

{
     function func(num, str1, str2){
         document.write(num + ". "+ str1 + "가 "+ str2 + " 되었습니다.
");
     }    
     const youNum01 = 1;
     const youNum02 = 2;
     const youNum03 = 3;
     const youStr01 = "함수";
     const youStr02 = "자바스크립트";
     const youStr03 = "리액트";
     const youCom1  = "실행";
    
     func(youNum01, youStr01, youCom1 );
     func(youNum02, youStr02, youCom1 );
     func(youNum03, youStr03, youCom1 );
}

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

함수의 매개변수값을 변수로 넣어 실행함

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

    const num = [1,2,3];
    const info= ["함수", "자바스크립트", "리액트", "실행"];

    func(num[0] , info[1] , info[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);
}

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);
}

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();
}

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

객체안에 함수를 넣고 생성자를 만들어 실행 했어요

{
    const func = (num, name, word) => {
        this.num  = num;
        this.name = name;
        this.word = word;
        this.result = () =>{
            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();
}

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();
}

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

객체를 생성하고 프로토타입으로 함수를 리터럴방식으로 생성하여 생성자를 만들고
생성한 함수를 실행시킨다.

{
    function func(num, name, com){
        this.num = num;
        this.name = name;
        this.com = com;
    }
    func.prototype = {
        result: function(){
            document.write(`${this.num}. ${this.name}가 ${this.com}! 
` )
        }
    }
    const info1 = new func("101", "함수", "실행");
    const info2 = new func("102", "자바스크립트", "실행");
    const info3 = new func("103", "리엑트", "실행");

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

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

화면로딩시 바로 실행을 해주는 함수 !

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

    (()=>document.write("함수실행
"))();
}

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

매개변수함수의 매개변수에 값을 지정해준당!

{
    function func(str="600 함수가실행되었슴!"){
        document.write(str);
    }
    func();
}

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

매개변수함수의 매개변수들은 arguments배열안에 들어가있다
배열안의 순서대로 값을 넣어 실행함!

{
    //24. 함수종류 : 아규먼트함수
    function func(str1, str2){
        document.write(arguments[0]);
        document.write(arguments[1]);
    }
    func("함수실행1", "함수실행2");
}

25. 함수 유형 : 재귀 함수

함수안에 자기자신을 호출하여 일정한 조건에 해당할때까지 실행되는 함수

 {
    // 25. 함수 종류 : 재귀 함수(자기자신을 호출시키는 함수)
    function func(num){
        if(num<=1){
            document.write("함수가 실행되었습니다.");
        }else{
            document.write("함수가 실행되었습니다. "+num+"
");
            func(num-1);
        }
    }
    func(5);
}

😫function animation()

재귀함수가 리소스를 많이 잡아먹는걸 불편해서 나온 함수 1마다에 24번 실행되요 !

{
    function animation(){
        document.write("애니메이션이 실행되었습니다.
");

        requestAnimationFrame(animation());
    }
    animation();
}

26. 함수 유형 : 콜백 함수

함수안에서 또다른 함수를 순서에 맞게 실행해야할때 쓰는 함수(다른함수에 인수로 넘겨지는 함수)

{
    function func(){
        document.write("2번함수실행");
    }
    function callback(str){
        document.write("1번함수실행");
        str();
    }
    callback(func);
}