함수 리터럴 그리고 익명 함수

일반함수

        function hello(name){
            alert(name+"님 환영합니다.");
        }
        hello("mooyou");

        // 객체 방식
        var hello2 = new Function("name", "alert(name+'님 환영합니다.');");
        hello2("mooyou");

리터럴방식 함수

        var hello = function(name){
            alert(name+"님 환영합니다.");
        }
        hello("mooyou");

 

사용하는 용도에 따라 일반적인 방식 또는 리터럴 방식을 사용할수 있다.

 

 

 

 

▶익명함수 

함수리터럴 방식으로 만들어진 이름없는 함수를 익명함수라고 한다.

 

익명함수 활용전

        $(document).ready(function() {
            function hello() {
                alert("안녕하세요. 환영합니다.");
            }

            $("#btnStart").click(hello);
        });

 

익명함수 활용후

        $(document).ready(function() {
            $("#btnStart").click(function () {
                alert("안녕하세요. 환영합니다.");
            });
        });

 

익명함수가 더 간결하기는 하지만 재사용이 불가능하다.

일반 함수로 만들어지면 언제든지 호출하고 재사용이 가능하다.

 

 

 

예제) 버튼 클릭시 마다 클릭횟수와 "안녕하세요" 메시지를 #hello에 출력하고 페이지가 처음 실행될때 "0안녕하세요"가 출력되야 한다.

 

 

▷ 익명함수 버전

<script>
	var i =0;
    var $info = null;

  $(document).ready(function() {
  	$hello = $("#hello");
    
    $hello.append("<p>" + i + "안녕하세요</p>");
    i++;
    
    $("#btn").click(function (){  	
        $hello.append("<p>"+i+"안녕하세요</p>");
        i++;
    });
  });
</script>

<button id="btn">Click</button>
<div id="hello">

</div>

 

▷ 일반함수 버전

<script>
	var i=0;
    var $hello = null;
    
    $(document).ready(function() {
    	var $hello = $("#hello");
        
        hi();
        
      	$("#btn").click(function(){
        	hi();
        }); 
    });
    
    function hi() {
    	$hello.append("<p>"+i+"안녕하세요</p>");
        i++;
    }

</script>

<button id="btn">Click</button>
<div id="hello">

</div>

익명함수에서 재사용할 구문을 함수로 만들어주고 함수를 호출해준다.

 

제이쿼리 노드찾기

var $변수이름 = $("css선택자")

$() 함수호출 선택자에 해당하는 노드를 찾아준다.

 

$변수이름 : 함수에서 리턴해주는 값을 저장히기 위해 만든 변수 변수 앞에 $가 들어간 이유는 제이쿼리 기능이 들어간 변수라는 표현이다.