01. 선언적 함수

'선언적 함수'는 함수를 호출할 때 함수의 앞 또는 뒤에서 호출 가능합니다.

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

02. 익명 함수

익명 함수는 변수에 함수 데이터를 저장항 변수를 마치 함수처럼 사용 할 수 있도록 만들어 줍니다.
익명 함수는 변수 선언 이후에 호출해야 합니다. 

const func = function () {      // 함수에 이름이 없어서 변수에 넣어 사용함
    document.write("함수가 실행되었습니다.2
");
}
func();
결과보기
함수가 실행되었습니다.2

03. 매개변수 함수

함수를 호출할 때 전달하는 변수를 '매개변수'라고 합니다.

// 변수 : 지역변수 + 전역변수 + 매개변수
// 함수 : 지역함수 + 전역함수
function func(str) {
    document.write(str);
}
func("함수가 실행되었습니다.3
");
결과보기
함수가 실행되었습니다.3

04. 리턴값 함수

함수를 통해 처리된 결과를 반환시켜주는 명령어입니다.

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

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

ECMAScript 2015(ES6)에 추가된 내용으로 '=>'을 이용하여 함수를 간결하게 표현할 때 사용합니다.
단일 명령문일 경우에는 함수의 중괄화{}와 return을 생략할 수 있습니다. 

// func = () => {
//     document.write("함수가 실행되었습니다.5
");
// }
// func();      // 화살표 함수 표현1

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

func();     // 화살표 함수 표현2
결과보기
함수가 실행되었습니다.5

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

// const func = () => {
//     document.write("함수가 실행되었습니다.6
");
// }
// func();      // 화살표 함수 표현1

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

func();     // 화살표 함수 표현2
결과보기
함수가 실행되었습니다.6

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

// func = (str) => {
//     document.write(str);
// }
// func("함수가 실행되었습니다.7
");     // 화살표 함수 표현 방법1

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

// func("함수가 실행되었습니다.7
");     // 화살표 함수 표현 방법2

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

func("함수가 실행되었습니다.7
");        // 화살표 함수 표현 방법3
결과보기
함수가 실행되었습니다.7

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

func = () => {
    const str = "함수가 실행되었습니다.8
";
    return str;
}
document.write(func());     // 화살표 함수 표현 방법
결과보기
함수가 실행되었습니다.8

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

const func = (str) => {     // 익명함수 + 매개변수
    return str;     // 리턴값
}
document.write(func("함수가 실행되었습니다.9
"));
결과보기
함수가 실행되었습니다.9

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

const func = str => {       // 매개변수의 괄호가 생략됨
    return str;
}
document.write(func("함수가 실행되었습니다.10
"));
결과보기
함수가 실행되었습니다.10

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

const func = str => str;        // 중괄호, 리턴 생략

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

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

func = str => str;        // const, 중괄호, 리턴 생략

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

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

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

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

function func(num, str, com) {
    document.write(num + ". " + str + "가 " + com + "되었습니다.14");
}
const youNum1 = 1;
const youNum2 = 2;
const youNum3 = 3;
const youStr1 = "함수";
const youStr2 = "자바스크립트";
const youStr3 = "제이쿼리";
const youCom = "실행";

func(youNum1, youStr1, youCom);
func(youNum2, youStr2, youCom);
func(youNum3, youStr3, youCom);
결과보기
1. 함수가 실행되었습니다.14
2. 자바스크립트가 실행되었습니다.14
3. 제이쿼리가 실행되었습니다.14

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

function func(num, str, com) {
    document.write(num + ". " + str + "가 " + com + "되었습니다.15");
}
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);
결과보기
1. 함수가 실행되었습니다.15
2. 자바스크립트가 실행되었습니다.15
3. 제이쿼리가 실행되었습니다.15

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

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

    result1: function () {
        document.write(info.num1 + ". " + info.name1 + "가 " + info.word1 + "되었습니다.16");
    },
    result2: function () {
        document.write(info.num2 + ". " + info.name2 + "가 " + info.word2 + "되었습니다.16");
    },
    result3: function () {
        document.write(info.num3 + ". " + info.name3 + "가 " + info.word3 + "되었습니다.16");
    }
}
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");
    }
}

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

//실행
info1.result();
info2.result();
info3.result();
결과보기
1. 함수가 실행되었습니다.17
2. 자바스크립트가 실행되었습니다.17
3. 제이쿼리가 실행되었습니다.17

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

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

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

//실행
info1.result();
info2.result();
info3.result();
결과보기
1. 함수가 실행되었습니다.18
2. 자바스크립트가 실행되었습니다.18
3. 제이쿼리가 실행되었습니다.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 
");
    },
    result2: function () {
        document.write(this.num + ". " + this.name + "가 " + this.word + "되었습니다.19 
");
    },
    result3: function () {
        document.write(this.num + ". " + this.name + "가 " + this.word + "되었습니다.19 
");
    }
}

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

//실행
info1.result1();
info2.result2();
info3.result3();
결과보기
1. 함수가 실행되었습니다.19
2. 자바스크립트가 실행되었습니다.19
3. 제이쿼리가 실행되었습니다.19

20. 즉시 실행 함수

(() => {
    document.write("실행.20");
})();
결과보기
실행.20

21. 파라미터 함수

// function func(str){
//     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. 재귀 함수 : 자기 자신을 호출

재귀함수 : 동시에 여러개 실행

function func(num) {
    if (num <= 1) {
        document.write("실행.23" + num);
    } else {
        document.write("함수.23" + num);
        func(num - 1);
    }
    // func();
}
func(10);

// 애니메이션에 사용
// function animation () {
//     document.write("실행.23");

//     // requestAnimationFrame(animation);
// }
// animation();
결과보기
함수.2310
함수.239
함수.238
함수.237
함수.236
함수.235
함수.234
함수.233
함수.232
실행.231

24. 콜백함수 : 다른 함수에 인수로 넘겨지는 함수

첫번째 함수가 실행 -> 두번째 함수가 실행

function func() {           // 함수2가 실행됨
    document.write("함수.24");
}
function callback(str) {    // 콜백1이 끝나면
    document.write("콜백.24");
    str();
}
callback(func);
결과보기
콜백.24
함수.24

25. 콜백함수 : 반복문

function func(index) {
    document.write("함수.25" + index);
}
function callback(num) {
    for (let i = 1; i <= 10; i++) {    // 1부터 10까지 반복
        num(i)
    }
}
callback(func);
결과보기
함수.251
함수.252
함수.253
함수.254
함수.255
함수.256
함수.257
함수.258
함수.259
함수.2510

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

// function funcA() {
//     document.write("funcA가 실행.26
")
// }
// function funcB() {
//     document.write("funcB가 실행.26
")
// }
// funcA();
// funcB();
// a
// b

// function funcA() {
//     setTimeout(() => {  // 설정한 시간 후에 실행
//         console.log("funcA가 실행.26
");
//     }, 1000);   // 시간 설정
// }
// function funcB() {
//     document.write("funcB가 실행.26
")
// }
// funcA();
// funcB();
// b
// a

// function funcA(callback) {
//     setTimeout(() => {
//         console.log("funcA가 실행.26
");
//         callback();
//     }, 1000);
// }
// function funcB() {
//     console.log("funcB가 실행.26
")
// }
// funcA(function () {
//     funcB();
// });
// a
// b

function funcA(callback) {
    setTimeout(() => {
        console.log("funcA가 실행.26
");
        callback();
    }, 1000);
}
function funcB(callback) {
    setTimeout(() => {
        console.log("funcB가 실행.26
");
        callback();
    }, 1000);
}
function funcC(callback) {
    setTimeout(() => {
        console.log("funcC가 실행.26
");
        callback();
    }, 1000);
}
function funcD(callback) {
    setTimeout(() => {
        console.log("funcD가 실행.26
");
        callback();
    }, 1000);
}
funcA(function () {
    funcB(function () {
        funcC(function () {
            funcD();
        })
    });
});
결과보기
// funcA가 실행.26
// funcB가 실행.26

// funcB가 실행.26
// funcA가 실행.26

// funcA가 실행.26
// funcB가 실행.26

funcA가 실행.26
funcB가 실행.26
funcC가 실행.26
funcD가 실행.26

27. promise 함수
결과보기

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

function func() {
    function funcA() {      // 함수 안에 함수
        document.write("함수.28
");
    }
    funcA();

    function funcB() {
        document.write("실행.28
");
    }
    funcB();
}
func();
결과보기
함수.28
실행.28

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 + "입니다.
");
    }
}
// 인스턴스 생성
const info1 = new study("1", "웹쓰", "웹퍼블리셔");
const info2 = new study("2", "코터틀", "프론트앤드 개발자");
// 실행문
info1.result();
info2.result();
결과보기
1. 내 이름은 웹쓰이며, 직업은 웹퍼블리셔입니다.
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 + "입니다.
");
    }
}

class study2 extends study {
    constructor(num, name, job, age) {
        super(num, name, job);  // 기존에 사용한 생성자 함수를 재활용 하기 위해 super 사용(상속개념)
        this.age = age;
    }

    // 함수 실행문
    result2() {
        document.write(this.num + ". 내 이름은 " + this.name + "이며, 직업은 " + this.job + "이며, 나이는 " + this.age + " 입니다.
");
    }
}

// 인스턴스 생성
const info1 = new study("1", "웹쓰", "웹퍼블리셔");
const info2 = new study2("2", "코터틀", "프론트앤드 개발자", 29);

// 실행문
info1.result();
info2.result();
info2.result2();
결과보기
1. 내 이름은 웹쓰이며, 직업은 웹퍼블리셔입니다.
2. 내 이름은 코터틀이며, 직업은 프론트앤드 개발자입니다.
2. 내 이름은 코터틀이며, 직업은 프론트앤드 개발자이며, 나이는 29 입니다