jQuery 046. 리터럴 방식 & 객체 방식 & 익명함수

변수나 함수를 선언하는 방식에 대해서 알아보고자 합니다. 먼저 '리터럴' 방식부터 보면, (참고 하고있는 책에서는 '리터럴'이 직역하면 '원시' 라는 뜻이라네요.) 

 

#code 1-1

var num = 10;
var str = "string";
var isEmpty = true;
var aryNum = [1,2,3];

위 방식이 '리터럴' 방식입니다. var num을 보면, 바로 숫자 10을 대입해서 선언했습니다. 문자열 또한 바로 문자열을 ""을 붙여서 선언하고, boolean 형 변수인 isEmpty 에도 바로 true 를 대입 했습니다. list 형식인 aryNum 에도 숫자 리스트를 []으로 감싸서 선언했습니다. 변수에 바로 대입하는 방식을 '리터럴' 방식이라고 합니다.

 

#code 1-2

var num = new Number(10);
var str = new Sting("string");
var isEmpty = new Boolean(true);
var aryNum = new Array(1,2,3)

위 방식이 객체방식입니다. #code 1-1과 숫자 다르기도 많이 다르고, 선언하는 방식조차 어렵습니다. #code 1-1처럼 변수 num 에 숫자 10을 대입해서 변수를 선언하게 되면, 자바스크립트에서 자동으로 #code 1-2처럼 var num = new Number(10); 이렇게 변환해서 실행되어 집니다. 쉽게말해서 결국 결과는 같은 소스코드지만, 선언하는 방식이 두가지가 있다는게 됩니다. 어차피 아래방식으로 실행되어진다면, 처음부터 #code 1-2방식으로 선언을 해야될듯 하지만 #code 1-1방식이 가독성이나, 사용하기에 편리합니다.

 

다음은 익명함수에 대한 설명입니다.

 

#code 2-1

        function fnbtnClick(){
            alert("버튼이 눌렸습니다.");
        }
        
        $(function(){
        	$("#btn").click(fnbtnClick);
        });

위 방식은 일반적인 함수 선언과 아이디 값이 btn 인 태그가 클릭되었을때 해당 함수를 불러오는 소스코드 입니다.

 

#code 2-2

            $("#btn").click(function(){
                alert("버튼이 눌렸습니다.");
            });

위 방식은 #code 2-1과는 다르게 아이디 값이 btn인 태크가 클릭될때 바로 함수를 생성해서 실행시킵니다. 이런 방식으로 선언되는 함수를 '익명함수' 라고 합니다. 보통 1회성인 함수를 실행시킬때 사용됩니다. 이름이 없기 때문에 재사용이 불가능 합니다.