top

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.화살표 함수 : 선언적 함수

화살표 함수는 => 을 이용하여 함수를 간결하게 표현할때 사용

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

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

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

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

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

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

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

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

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

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. 제이쿼리가실행되었습니다.
    }
결과보기 1. 함수가실행되었습니다. 2. 자바스크립트가실행되었습니다. 3. 제이쿼리가실행되었습니다.

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

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

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

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

16. 함수 유형 : 객체 안에 변수와 함수를 이용한 형태 - 재사용 불가

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

        result1: function () {
            document.write(info.num1 + ". " + info.name1 + "가" + info.woed1 + "되었습니다.
");
        },
        result2: function () {
            document.write(info.num2 + ". " + info.name2 + "가" + info.woed2 + "되었습니다.
");
        },
        result3: function () {
            document.write(info.num3 + ". " + info.name3 + "가" + info.woed3 + "되었습니다.");
        }
    }

    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 info1 = new func("1", "함수", "실행");
        const info2 = new func("2", "자바스크립트", "실행");
        const info3 = new func("3", "제이쿼리", "실행");

        // 실행
        info1.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 info1 = new func("1", "함수", "실행");
        const info2 = new func("2", "자바스크립트", "실행");
        const info3 = new func("3", "제이쿼리", "실행");

        // 실행
        info1.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 info1 = new func("1", "함수", "실행");
        const info2 = new func("2", "자바스크립트", "실행");
        const info3 = new func("3", "제이쿼리", "실행");

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

20. 즉시 실행 함수

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

21. 파라미터 함수

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

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

22. 아규먼트 함수

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

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가 실행되었습니다.
");
        callback();
    },1000);
}
funcA(function(){
    funcB(function(){
        funcC(function(){
            funcD();
    });
});
});
결과보기 함수A가 실행되었습니다. 함수B가 실행되었습니다. 함수C가 실행되었습니다. 함수D가 실행되었습니다.

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 + "입니다.");
    }
}
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 + "입니다.");
        }
        result2(){
            document.write(this.num + ".내 이름은" + this.name + "이며, 직업은" + this.job + "이며 나이는" + this.age + "살 입니다.");
        }
    }

    class study2 extends study {
        constructor(num, name, job, age){
            super(num, name, job);
            this.age = age;
        }
    }

    const info1 = new study("1", "웹쓰", "웹퍼블리셔");
    const info2 = new study2("2", "웹스토리보이", "프론트앤드 개발자","100");
    
    info1.result();
    info2.result();
    info2.result2();
}
결과보기 1.내 이름은웹쓰이며, 직업은웹퍼블리셔입니다.
2.내 이름은웹스토리보이이며, 직업은프론트앤드 개발자입니다.
2.내 이름은웹스토리보이이며, 직업은프론트앤드 개발자이며 나이는100살 입니다.