컴퓨터는 잘못이 없다..

[JavaScript]Function Type 여러가지 방법으로 사용해보기,익명 함수란?, 함수의 해석과 실행 시점 알기 본문

공부/JavaScript

[JavaScript]Function Type 여러가지 방법으로 사용해보기,익명 함수란?, 함수의 해석과 실행 시점 알기

도토리까꿍v 2020. 11. 4. 20:50
Contents 접기

[Function Type 사용방법 3가지]

​

01) function type

-특정 시점에 일괄 실행 할 javascript를 모아 놓는 역할을 한다.

-함수도 heap영역에 만들어지는 객체이다

(참고부분 참고하기)

sjy1218vv.tistory.com/8

 

8_[JavaScript]object type 내 함수와 this 예약어

[object type 내 함수와 this 예약어] ​ 01) 예제 코드 보기 object type 내 함수 넣기 전 주의!!!) 그냥 함수선언시에는 끝에 ;를 넣든 안넣든 에러가 나지 않지만 object type내에 함수를 넣을 때 ;를 쓰면 에

sjy1218vv.tistory.com

-함수를 호출하면서 값을 필요 시 전달할수도 있다.

-함수를 호출하면 반드시 어떤 값을 해당 위치로 return 해준다.

-function type 만드는 2가지 방법

1. test() function바로 만들기

2. test라는 변수에 익명의 function() 대입하기 

*익명의 function?

함수 이름 없이 function(){} 이렇게만 선언한 함수를 의미한다. 

 

 

02) 코드 보기

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Step04_function.html</title>
    </head>
    <body>
        
        
        
    <h1>keepBeer을 호출해보자!</h1>
    <!--onclick : 클릭하는 순간 함수가 호출된다.-->
    <button onclick="keepBeer();">맥주보관</button><br>
    <button onclick="keepBeer2()">맥주보관2</button><br>
    <button onclick="person.keepBeer3();">맥주보관3</button><br>

    <script>
      

        //맥주를 냉장고에 보관하기
        //아래 3줄은 언제 실행될까? → 페이지가 로딩하는 시점에!!!!
        console.log("로딩되는 시점에 냉장고 문을 연다.");
        console.log("로딩되는 시점에 맥주를 넣는다.");
        console.log("로딩되는 시점에 냉장고 문을 닫는다.");


        //방법1 : 함수 만들어서 실행코드 넣기
        //언제 실행될까? → 함수가 호출되는 시점에!!!!
        function keepBeer(){
            //맥주를 냉장고에 보관하기
            console.log("keepBeer() 함수가 호출되는 시점에 냉장고 문을 연다.");
            console.log("keepBeer() 함수가 호출되는 시점에 맥주를 넣는다.");
            console.log("keepBeer() 함수가 호출되는 시점에 냉장고 문을 닫는다.");

        };

        //방법2 : 익명의 함수를 만들어서 keepbeer2 라는 변수에 참조값 대입하기
        //언제 실행될까? → 함수가 호출되는 시점에!!!!
        var keepBeer2 = function(){
            //맥주를 냉장고에 보관하기
            console.log("keepBeer2() 함수가 호출되는 시점에 냉장고 문을 연다.");
            console.log("keepBeer2() 함수가 호출되는 시점에 맥주를 넣는다.");
            console.log("keepBeer2() 함수가 호출되는 시점에 냉장고 문을 닫는다.");
        };


        //object type 특정 방 내에 함수 넣기
        //언제 실행될까? → 함수가 호출되는 시점에!!!!
        var person={
            name:"김구라",
            keepBeer3 : function(){
                console.log("keepBeer3() 함수가 호출되는 시점에 냉장고 문을 연다.");
                console.log("keepBeer3() 함수가 호출되는 시점에 맥주를 넣는다.");
                console.log("keepBeer3() 함수가 호출되는 시점에 냉장고 문을 닫는다.");
            } //주의!! object type 내에 함수를 넣을 땐 ;을 쓰면 에러남!!
        };

        
        
    </script>



</body>
</html>

 

03) 실행결과

        > <script> 내에 console.log 3줄은 페이지가 로딩되는 시점에 실행된다.

        > 하지만 함수3개 (keepBeer(), keepBeer2(), keepBeer3()는 버튼을 누르는 시점에 호출되므로,

         버튼을 눌러 함수가 호출되는 시점에 실행된다. 

​

 

04) 함수의 해석과 실행

<script> 내 코드만 봤을 때, 

<script> 내 모든 코드들은 웹페이지 로딩되는 시점에 해석이 된다.

또한 웹페이지 로딩되는 시점에 함수를 제외한 코드는 실행이 된다.

함수는 함수가 호출되는 시점에만 실행이 된다. 

 

저작자표시

'공부 > JavaScript' 카테고리의 다른 글

[JavaScript]매개 변수가 있는 Function  (0) 2020.11.04
[JavaScript]object type 내 함수와 this 예약어  (0) 2020.11.04
[JavaScript]plain object type 복사와 stack영역, heap영역  (0) 2020.11.04
'공부/JavaScript' Related Articles more
Comments