01. 선언적 함수

함수를 만드는 일반적은 방식으로 익명 함수와 다르게 특정한 이름을 갖고 있는 함수이다. 

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

02. 익명 함수

익명 함수는 변수에 함수 데이터를 저장하는 변수를 마치 함수처럼 사용 할 수 있도록 만들어 줍니다. 

// function과 () 사이에 특정한 함수 이름이 존재하지 않는다.
const func = function(){ //변수안에 함수가 들어가서 익명함수라 명명했다.
    document.write("함수가 실행되었습니다.2");
}
func();
결과보기
"함수가 실행되었습니다.2"

03. 매개변수 함수

매개변수(parameter)란 함수를 호출할 때 전달하는 변수를 '매개변수'라고 합니다. <br> 인수(argument)란 함수가 호출될 때 함수로 값을 전달해주는 값을 말합니다. 

// 변수 : 지역변수 + 전역변수 + 매개변수
// 함수 : 지역함수 + 전역함수

function func(str){      //파리미터 = 인자 = 매개변수
    document.write(str);
//return str이 생략되어있음
//자바스크립트에서는 함수를 정의할 때는 매개변수의 타입을 따로 명시하지 않습니다.
}
func("함수가 실행되었습니다.3");
결과보기
"함수가 실행되었습니다.3"

04. 리턴값 함수

return 이란 것은 함수를 호출했을 때, 함수가 값을 반환한다는 의미이다. 

function func(){
const str = "함수가 실행되었습니다.4";
//document.write(str);
return str;  // return은 함수를 통해 처리된 결과를 반화시켜주는 명령어입니다.
}
document.write(func());

// ECMAscript1
// ECMAscript2
// ECMAscript3
// ECMAscript4
// ECMAscript5
// ECMAscript6(es6) 화살표 함수, let, const
결과보기
"함수가 실행되었습니다.4"

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

함수를 변수에 할당해 주는 것으로 함수 선언문과 문법만 다르고 동작방식, 실행방식도 동일하다. 

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

// func = () => {              //구조를 기억하자
//     document.write("함수가 실행되었습니다.5");
// }
// func();

func = () => document.write("함수가 실행되었습니다.5");   //리턴문이 있으면 {}를 생략할 수 있다.
func();                                                  //근데 리턴문이 한줄이면 그 ()마저도 생략할 수 있다.
결과보기
"함수가 실행되었습니다.5"

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

화살표함수는 익명 함수를 변수에 지정할 때 많이 사용합니다. 

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

// const func = () => {             //var/let/const 함수명 = (매개변수) => {실행문} 
//     document.write("함수가 실행되었습니다.6<br>");
// }

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

func();
결과보기
"함수가 실행되었습니다.6"

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

컴퓨터 프로그래밍에서 아직 알려지지 않거나 어느 정도까지만 알려져 있는 양이나 정보에 대한 상징적인 이름이다. 

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


func = (str) => {
    document.write(str);
}

// func = (str) => document.write(str);

// func = str => document.write(str); //변수가 하나일때 사용 가능하다. 
func("함수가 실행되었습니다.7<br>");
결과보기
"함수가 실행되었습니다.7"

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

// function func() {
//     const str = "함수가 실행되었습니다.8<br>";
//     return str;
// }
// document.write(func());

func = () => {
    const str = "함수가 실행되었습니다.8<br>";
    return str;
}
document.write(func());
결과보기
"함수가 실행되었습니다.8"

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

const func = (str) => {
    return str;
}
document.write(func("함수가 실행되었습니다.9<br>"));
결과보기
"함수가 실행되었습니다.9"

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

const func = (str) => str; 
document.write(func("함수가 실행되었습니다.11"))
결과보기
"함수가 실행되었습니다.10"

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

const func = (str) => str; 
document.write(func("함수가 실행되었습니다.11<br>"))
결과보기
"함수가 실행되었습니다.11"

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

func = str => str; 
document.write(func("함수가 실행되었습니다.12"))
결과보기
"함수가 실행되었습니다.12"

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

 function func(num, str1, str2){   //재활용하기가 용의하다. 
    document.write(num + str1 + "가" + str2 + "되었습니다.15<br>")
}
const info = [
    {
        num : "1.",
        name : "함수",
        com : "실행"
    },
    {
        num : "2.",
        name : "자바스크립트",
        com : "실행"
    },
    {
        num : "3.",
        name : "제이쿼리",
        com : "실행"
    }
]
func(info[0].num, info[0].name, info[0].com);
func(info[1].num, info[1].name, info[1].com);
func(info[2].num, info[2].name, info[2].com);
결과보기
"함수가 실행되었습니다.13"

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

 function func(num, str1, str2){
    document.write(num + str1 + "가" + str2 + "되었습니다.15<br>")
}
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);
결과보기
"함수가 실행되었습니다.12"

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

 function func(num, str1, str2) {   //재활용하기가 용의하다. 
    document.write(num + str1 + "가" + str2 + "되었습니다.15<br>")
}
const info = [
    {
        num: "1.",
        name: "함수",
        com: "실행"
    },
    {
        num: "2.",
        name: "자바스크립트",
        com: "실행"
    },
    {
        num: "3.",
        name: "제이쿼리",
        com: "실행"
    }
]
func(info[0].num, info[0].name, info[0].com);
func(info[1].num, info[1].name, info[1].com);
func(info[2].num, info[2].name, info[2].com);
결과보기
"함수가 실행되었습니다.15"

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

const info = {
    num1: "1.",
    name: "함수",
    word1: "실행",
    num2: "2.",
    name2: "자바스크립트",
    word2: "실행",
    num3: "3.",
    name3: "제이쿼리",
    word3: "실행",

    result1: function () {
        document.write(info.num1 + info.name + "가" + info.word1 + "되었습니다16.<br>");
    },
    result2: function () {
        document.write(info.num2 + info.name2 + "가" + info.word2 + "되었습니다16.<br>");
    },
    result3: function () {
        document.write(info.num3 + info.name3 + "가" + info.word3 + "되었습니다16.<br>");
    }
}
info.result1();
info.result2();
info.result3();
결과보기
1 함수가 실행되었습니다.16
2 자바스트립트가 실행되었습니다.16
3 제이쿼리가 실행되었습니다.16

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

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 + "되었습니다17.<br>");
        }
    }

    //인스턴스 생성: 다른함수랑 다르다는 걸 알려주기 위해서
    const info1 = new func("1", "함수", "실행");
    const info2 = new func("2", "자바스크립트", "실행");
    const info3 = new func("3", "제이쿼리", "실행");

    //실행
    info1.result();
    info2.result();
    info3.result();
결과보기
"함수가 실행되었습니다.12"

18. 함수 유형 : 프로토타입 함수
결과보기

19. 함수 유형 : 객체 리터럴 함수 (함수를 객체안에 모아준다.)

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

func.prototype = {
    result1: function () {
        document.write(this.num + this.name + "가" + this.word + "되었습니다19.<br>")
    },
    result2: function () {
        document.write(this.num + this.name + "가" + this.word + "되었습니다19.<br>")
    },
    result3: function () {
        document.write(this.num + this.name + "가" + this.word + "되었습니다19.<br>")
    }
}

//인스턴스 생성: 다른함수랑 다르다는 걸 알려주기 위해서
const info1 = new func("1", "함수", "실행");
const info2 = new func("2", "자바스크립트", "실행");
const info3 = new func("3", "제이쿼리", "실행");

//실행
info1.result1();
info2.result2();
info3.result3();
결과보기
함수가 실행되었습니다.

20. 즉시 실행 함수

함수를 생성하면 그 함수는 전역 변수로써 남아있게 되고, 많은 변수의 생성은 전역 스코프를 오염시킬 수 있다.
즉시실행함수를 선언하면 내부 변수가 전역으로 저장되지 않기 때문에 전역 스코프의 오염을 줄일 수 있다.
즉시실행함수는 한 번의 실행 이후 없어지기 때문에 단 한번의 사용한 필요한 함수에 사용된다. 대표적인 예시로는 변수를 초기화 하는 함수가 있다. 

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

21. 파라미터 함수

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

//
function func(str = "함수가 실행되었습니다.21") {
    document.write(str);
}
func()
결과보기
"함수가 실행되었습니다.21"

22. 아규먼트 함수

function func(a,b){
    document.write(arguments[0]);
    document.write(arguments[1]);
}
func("함수가 실행되었습니다.22", "함수가 실행되었습니다.22")
결과보기
함수가 실행되었습니다.22", "함수가 실행되었습니다.22

23. 재귀함수 함수

funcztion func(num) {
    if (num <= 10) {
        document.write("함수가 실행되었습니다" + num);
    } else {
        document.write("함수가 실행되었습니다" + num);
        func(num - 1);
    }
    // func();
}
func(10)

//애니메이션
// function func(){
//     document.write("함수가 실행되었습니다");
//     requestAnimationFrame(animation);
// }
// animation();)
결과보기
"함수가 실행되었습니다."

24. 콜백함수 인자값으로 함수를 가져와서 실행시킨다. (첫번째 함수가 실행 -> 두번째 함수가 실행)

function func() {
    document.write("함수가 실행되었습니다.1")
}
function callback(str) {
    document.write("함수가 실행되었습니다.2")
    str();
}
callback(func);
결과보기
함수가 실행되었습니다.2 함수가 실행되었습니다.1

25.콜백함수 : 반복문

function func(index) {
    document.write("함수가 실행되었습니다.", + index + "<br>")
}
function callback(num) {
    for (let i = 1; i <= 10; i++) {
        num(i);
    }
}
callback(func);
결과보기
함수가 실행되었습니다.1 함수가 실행되었습니다.2 함수가 실행되었습니다.3 함수가 실행되었습니다.4 함수가 실행되었습니다.5 함수가 실행되었습니다.6 함수가 실행되었습니다.7 함수가 실행되었습니다.8 함수가 실행되었습니다.9 함수가 실행되었습니다.10

26.콜백함수 : 동기/비동기

 // function funcA() {
    //     document.write("funcA가 실행되었습니다. <br>");
    // }
    // function funcB() {
    //     document.write("funcB가 실행되었습니다. <br>");
    // }
    // funcA();
    // funcB();
    //a
    //b

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

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


    function funcA(callback) {
        setTimeout(() => {
            console.log("funcA가 실행되었습니다.<br>")
            callback();
        }, 1000);
    }
    function funcB(callback) {
        setTimeout(() => {
            console.log("funcB가 실행되었습니다.<br>")
            callback();
        }, 1000);
    }
    function funcC(callback) {
        setTimeout(() => {
            console.log("funcC가 실행되었습니다.<br>")
            callback();
        }, 1000);
    }
    function funcD(callback) {
        setTimeout(() => {
            console.log("funcD가 실행되었습니다.<br>")
        }, 1000);
    }
    funcA(function () {
        funcB(function () {
            funcC(function () {
                funcD();
            });
        });
    });
결과보기
funcA가 실행되었습니다.
funcB가 실행되었습니다.
funcC가 실행되었습니다.
funcD가 실행되었습니다.

27. promise 함수
결과보기

28. 내부 함수 : 스코프, 클로져

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

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

29. 클래스

class study {
    constructor(num, name, job) {
        this.num = num;
        this.name = name;
        this.job = job;
    }

    result() {
        document.write(this.num + " . 내 이름은 " + this.name + "이며, 직업은 " + this.job + "입니다.<br>")
    }
}
const info1 = new study("1", "웹쓰", "웹퍼블리셔");
const info2 = new study("2", "웹스토리보이", "프론트엔드 개발자");
info1.result();
info2.result();
결과보기
1 . 내 이름은 웹쓰이며, 직업은 웹퍼블리셔입니다. <br> 2 . 내 이름은 웹스토리보이이며, 직업은 프론트엔드 개발자입니다.

30. 클래스 상속

class study {
    constructor(num, name, job) {
        this.num = num;
        this.name = name;
        this.job = job;
    }

    result() {
        document.write(this.num + " . 내 이름은 " + this.name + "이며, 직업은 " + this.job + "입니다.<br>")
    }
}
class study2 extends study {
    constructor(num, name, job, age){
        super(num, name, job);
        this.age = age;
    }
    result2() {
        document.write(this.num + " . 내 이름은 " + this.name + "이며, 직업은 " + this.job + "이며 나이는" + this.age+ "입니다.<br>")
    }
}
const info1 = new study("1", "웹쓰", "웹퍼블리셔");
const info2 = new study2("2", "웹스토리보이", "프론트엔드 개발자", 100);
info1.result();
info2.result2();
결과보기
1 . 내 이름은 웹쓰이며, 직업은 웹퍼블리셔입니다. <br> 2 . 내 이름은 웹스토리보이이며, 직업은 프론트엔드 개발자이며 나이는100입니다.