국비 39일차 Javascript 함수 + 응용

2021. 3. 4. 18:19

2021.03.04 국비교육 39일차

[TOC]

함수

일반적인 선언

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    console.log("1");

    function aa() { // 일반적으로 이름만 있는 함수 - 호출하여 사용

        console.log("2");
    }

    console.log("3");
</script>

</head>
<body>

</body>
</html>

매개변수가 있는 경우

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    console.log("1");

    function aaa(n) {

        console.log("전달받은 값", n);
        return n + 100;
    }

    console.log("3");
    var result = aaa(100); // 호출과 동시에 값을 넘김
    console.log(result); //200
    console.log("4");
</script>

</head>
<body>

</body>
</html>

매개변수 여러개

  • 매개변수를 넘기지 않는 곳은 undefined 처리됨
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    console.log("1");

    function aaa(n, n2) {

        console.log("전달받은 값", n, n2);
        //return;
    }

    console.log("3");
    aaa(100, "홍길동");
    console.log("4");
</script>

</head>
<body>

</body>
</html>

익명함수

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

    function aaa(num){ // 일반적인 함수선언
        console.log("aaa함수" , num);    
    }
    var xxx = aaa; //함수를 변수에 저장
    xxx(100); //변수로 함수 호출
    aaa(200); //일반적인 함수 오출
    ////////////////////////////////////////////
    var func4 = function(num){ //익명함수를 변수 저장 : 리터럴 함수
        console.log("func4 :", num);
    }

    func4(300); // 변수에 저장된 함수 호출
    var test1 = func4(10); //함수 호출
    var test2 = func4; //함수 변수에 저장
    //////////////////////////////////////
    //변수에 new 이용 함수 생성 후 저장
    var func5 = new Function("x", "y", "return x/y"); //매개변수, 매개변수, 함수본체 코드
    console.log(func5(100, 200));
</script>

</head>
<body>

</body>
</html>

함수활용

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

    function aaa(){
        console.log("aaa함수");
    }
    function bbb(x){ // x=aaa함수를 받음
        console.log("bbb함수", x);
        x();
    }

    //2.일급객체의 첫번째 특징 - 전달값에 함수 사용
    bbb(aaa);


</script>

</head>
<body>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

    function aaa(){
        console.log("aaa함수");
    }
    function bbb(){ 
        console.log("bbb함수");
        return aaa; //aaa함수를 리턴시킴
    }
    function ccc(){ 
        return function(n1, n2){
            return n1 + n2;
        }
    }

    //3. 일급객체의 세번째 특징 - 리턴값에 함수 사용
    var x = bbb();
    console.log(x); //리턴값으로 함수를 받음 x=aaa함수
    y = ccc(); // 익명함수 리턴
    console.log(y);
    console.log(y(10,20));

</script>



</head>
<body>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

    function aaa(n1, n2){ //매개변수 두개
        console.log("aaa함수 : ",n1,n2);
    }
    aaa();//undefined undefined
    aaa(10); // 10 undefined
    aaa(10, 20); // 10 20
    aaa("홍길동", "이순신", "유관순"); //홍길동 이순신

</script>
</head>
<body>

</body>
</html>

함수 표현식

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

    //함수 표현식
    var aaa = function(){
        console.log("aaa 호출");
    };
    aaa(); // 익명함수 변수 저장 후 호출

    var bbb = function(n){
        console.log("bbb 호출", n);
    };
    bbb(100); // 익명함수 변수 저장 후 호출 + 매개변수

    var ccc = function(){
        console.log("ccc 호출");
        return 100;
    };
    var x = ccc(); //함수 호출 후 변수에 저장
    console.log(x); //100

    var ddd = function(n){
        console.log("ddd 호출", n);
        return 100;
    };
    var x2= ddd("홍");
    console.log(x2);


</script>
</head>
<body>
</body>
</html>

일급객체

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

    //함수 표현식
    var aaa = function(){
        console.log("aaa 호출");
        return 100;
    };

    //일급객체 - 변수저장
    var xxx1 = aaa; //xxx1에는 aaa가 저장된다.
    var xxx2 = aaa(); //xxx2에는 함수 aaa가 실행되고 리턴값이 저장된다.
    console.log(xxx1());
    console.log(xxx1);
    console.log(xxx2);

    /////////////////////////////////

    //일급객체 - 전달값으로 사용
    function kkk(x){
        console.log("kkk호출", x)
        x(); //trigger역할  //익명함수를 실행
    }

    var ppp = function(){
        console.log("ppp호출");    
    };

    kkk(ppp); // kkk함수에 매개변수로 익명함수 전달

    //일급 객체 - 리턴값으로 사용
    function ttt(){
        console.log("ttt 호출");
        return eee;
    }

    var eee = function(){
        console.log("eee호출");
    };

    var k = ttt(); //k에 ttt함수 삽입
    k(); // eee호출 출력

</script>
</head>
<body>

</body>
</html>

trigger

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

    //일급 객체 - 전달값으로 사용
    function kkk(x){
        console.log("kkk호출", x);
        x(); //함수호출 trigger :실행
    }

    kkk(function(){
        console.log("ppp호출");
    });

    //일급 객체 - 리턴값으로 사용

    function ttt(){
        console.log("ttt호출");
        return function(){
            console.log("eee 호출");
        };
    }

    var k = ttt();
    k();

</script>
</head>
<body>

</body>
</html>

즉시호출 함수

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

    //즉시 호출 함수
    (function(){
        console.log("즉시호출함수")
    })();


</script>
</head>
<body>

</body>
</html>

callback함수

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

    //콜백함수(callback 함수)
    function a(n){ //실행할 함수
        console.log("a 호출");
        n();
    }

    function b(){ // 실행될 함수
        console.log("b 호출")
    }

    function c(){ // 실행될 함수
        console.log("c 호출")
    }

    a(b);// b실행
    a(c);// c실행

</script>
</head>
<body>

</body>
</html>

setTimeout, setInterval

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

    //1. 경고창
    /* alert("경고")

    function a(){
        alert("a 경고");
    }

    a(); */

    //2 setTimeout 함수, 시간을 설정해서 지정된 시간이 흐른뒤에 함수 호출

/*    setTimeout(function(){
        alert("bbb");
    }, 3000); // 3초뒤에 bbb출력 */

    function b(){
        alert("bbb");
    }
    setTimeout(b, 3000);


    //3. setInterval 함수, 시간을 설정해서 지정된 시간이 흐른뒤에 반복적으로 함수 호출
    var kkk=setInterval(function(){
        conso.log("setInterval")
    }, 3000);

    setTimeout(function(){ // 5초뒤에 interval 삭제
        clearInternal(kkk);
        console.log("clear")
    },5000);
</script>
</head>
<body>

</body>
</html>

arguments

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function one(x, y, z){
        for(var i=0; i<arguments.length;i++){ //내장변수 arguments사용
            console.log(arguments[i]);
        }
    }

    one(10); //10
    one(10, 20, 30); //10, 20, 30 
    one(10, 20, 30, 40); //10, 20, 30, 40

</script>
</head>
<body>

</body>
</html>

중첩함수

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var a= function(arg){
    var b = function(n){
        return n * 100;
    }
    return b(arg); //b변수의 익명함수 호출 리턴값 사용
}

var result = a(2);
console.log(result); //200
</script>
</head>
<body>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

function x(arg){
    function y(n){
        return n * 10;
    }
    return y(arg); //중첩함수의 리턴값을 사용
}

//외부 접근
var result = x(3);
console.log(result);

</script>
</head>
<body>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

var k = function(){
    var d= 10;
    var k2 = function(){
        return d * 2; //중첩함수에서 내부함수의 변수를 사용
    }
    return k2(); // 중첩함수의 리턴값 사용
}

console.log("k() 호출 : " + k()); //20

</script>
</head>
<body>

</body>
</html>

'ETC > 국비교육' 카테고리의 다른 글

국비 41일차 Javascript ( onload, onclick, onchange, onkeyup 활용)  (0) 2021.03.08
국비 40일차 Javascript (객체 BOM DOM)  (0) 2021.03.05
국비 38일차 Javascript operator  (0) 2021.03.03
국비 37일차 CSS(position, overflow, float) + javascript 기초  (0) 2021.03.02
국비 36일차 css 정리 2  (0) 2021.02.26

+ Recent posts

티스토리툴바