TOP

01. 함수 : 선언적 함수

선언적 함수는 function키워드를 통해 선언합니다.

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

02. 함수 : 익명함수

익명함수는 함수의 이름을 짓지 않고 사용하는 함수 입니다.

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

03. 함수 : 매개변수 함수

함수의 인자로 매개변수를 전달하면 함수의 지역변수로 사용할 수 있습니다.

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

04. 함수 : 리턴값함수

함수에서 return키워드를 통해서 값을 반환할 수 있습니다.

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

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

화살표 함수로 더욱 간편하게 함수를 선언할 수 있습니다.

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

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

화살표함수의 이름을 짓지 않고 변수에 담아서 사용합니다.

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

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

화살표 함수에도 매개변수를 전달할 수 있습니다. 매개변수가 한개인 경우에는 괄호를 생략할 수 있습니다.

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

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

화살표 함수도 마찬가지로 return키워드를 사용해서 값을 반환할 수 있습니다. 함수의 실행문이 return값 하나일 때 중괄호를 생략할 수 있습니다.

const 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;
document.write(func("함수가 실행되었습니다. 12"));
결과보기
함수가 실행되었습니다. 12

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. 함수 유형 : 함수와 배열, 객체를 이용한 형태

배열에 객체를 담아서 함수를 호출해 보겠습니다.

const info = [
    {
        num: "1",
        name: "함수",
        com: "실행",
    },
    {
        num: "2",
        name: "자바스크립트",
        com: "실행",
    },
    {
        num: "3",
        name: "제이쿼리",
        com: "실행",
    },
];


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

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

객체 안에 함수를 포함해서 실행해보는 함수입니다.

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

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

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

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

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

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

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

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

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

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

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

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

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

20. 즉시 실행 함수

함수를 선언과 즉시 실행시킬 수 있습니다.

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

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

21. 파라미터 함수

디폴트 매개변수를 설정할 수 있습니다. 매개변수에 값이 없으면 설정한 값으로 설정됩니다.

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

22. 아규먼트 함수

함수는 arguments라고 하는 특수한 배열을 갖습니다. 이는 함수의 매개변수를 담고 있습니다.

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

23. 재귀 함수

함수본인을 본인 내부에서 실행하는 형태입니다.

function func(num) {
    if(num <= 1){
        document.write('함수가 실행되었습니다.', num);
    }
    else {
        document.write('함수가 실행되었습니다.', num);
        func(num - 1);
    }
}
func(10);

// function animation() {
//     document.write('함수가 실행되었습니다.');
//     requestAnimationFrame(animation);
// }
// animation();
결과보기
함수가 실행되었씁니다. 10
함수가 실행되었씁니다. 9
함수가 실행되었씁니다. 8
함수가 실행되었씁니다. 7
함수가 실행되었씁니다. 6
함수가 실행되었씁니다. 5
함수가 실행되었씁니다. 4
함수가 실행되었씁니다. 3
함수가 실행되었씁니다. 2
함수가 실행되었씁니다. 1

24. 콜백함수

다른 함수의 인수값으로 함수를 전달합니다.

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

callback(func);
결과보기
함수가 실행되었습니다.2
함수가 실행되었습니다.1

25. 콜백함수 : 반복문

다른 함수의 인수값으로 함수를 전달합니다.

function func(index) {
    document.write("함수가 실행되었습니다." + 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

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

비동기 상황의 콜백함수를 살펴보겠습니다.

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

// funcA(function() {
//     funcB();
// });
funcA(funcB);
결과보기
funcA가 실행되었습니다.
funcB가 실행되었습니다.

27.

비동기 상황의 콜백함수를 살펴보겠습니다.


결과보기
funcA가 실행되었습니다.
funcB가 실행되었습니다.

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} 입니다.`);
    }
}

const info1 = new Study(1, 'kim', 'millionaire');
const info2 = new Study(2, 'lee', 'billionaire')
info1.result();
info2.result();
결과보기
1. 내 이름은 kim 이고, 직업은 millionaire 입니다.
2. 내 이름은 lee 이고, 직업은 billionaire 입니다.

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);
        this.age = age;
    }
    result2() {
        document.write(`${this.num}. 내 이름은 ${this.name} 이고, 직업은 ${this.job} 입니다. 나이는 ${this.age}살 이에요.`);
    }
}

const info1 = new Study2(1, 'kim', 'billionaire', 27);
info1.result();
info1.result2();
결과보기
1. 내 이름은 kim 이고, 직업은 billionaire 입니다.
1. 내 이름은 kim 이고, 직업은 billionaire 입니다. 나이는 27살 이에요.