minstory

Javascript 함수 본문

Javascript

Javascript 함수

mjuu 2020. 1. 4. 02:06

함수 정의문

//기본형
function 함수명() {
	코드;
}

//익명함수 선언 & 변수에 참조
참조 변수 = function() {
	코드;
}

 

* 일반 함수 정의 vs 익명 함수 선언 참조

일반함수정의는 호이스팅(hoisting) 기술을 지원한다.

 

호이스팅 : 함수 정의문보다 호출문이 먼저 나와도 함수 정의문을 끌어올려 함수를 호출

testFnc();


function testFnc() {
	코드;
}

 

 

--- 크게 3가지 함수 형태가 있다 ---

  1. 기본형 함수
  2. 매개변수가 있는 함수 (인자로 배열을 받을 수 있다)
  3. 매개변수가 없는 상태에서 데이터를 인자로 전달하여 함수 호출 -> arguments로 참조함

(기명/익명)

 

 

return문

: 이후에 코드가 있더라도 결괏값을 반환하고 함수 강제 종료

<head>
    <script>
        var num = 1;

        function gallery(direct) {
            if(direct) {
                if(num==5) return; //이미지 개수가 5개까지만 있기 때문
                num++;
            } else {
                if(num==1) return;
                num--;
            }
            var imgTag = document.getElementById("photo");
            imgTag.setAttribute("src", "image_phs/phs_" + num + ".jpg");
        }
    </script>
</head>
<body>
    <p>
        <button onclick="gallery(0)">이전</button>
        <button onclick="gallery(1)">다음</button>
    </p>
    <p><img src="image_phs/phs_1.jpg" id="photo" alt="ParkHyoShin" width="70%"></p>
</body>

 

 

 

유효영역(scope)

자바스크립트에서 지역변수의 유효영역(scope)는 함수의 블록({}) 레벨에만 국한된다.

var x = 1;

function myFnc() {
    var x = 2;
    alert(x);
}

myFnc(); //2
alert(x); //1

 

* if문 안의 변수는 전역변수이다. (C언어와 다름)

var x = 1;

if (true) {
     var x = 2;
     alert(x); //2
}

alert(x); //2
#include <stdio.h>

int main() {
     int x = 1;
     printf("%d", x); //1

     if (true) {
          int x = 2;
          printf("%d", x); //2
     }

     printf("%d", x); //1
}

 

같은 이름의 함수가 여러개인데 호출한다면, 마지막에 작성된 함수가 호출된다.

 

 

 

즉시 실행 함수

//기명 즉시 실행 함수
(function square(x) {
    console.log(x*x);
})(2);
 
(function square(x) {
    console.log(x*x);
}(2));


//익명 즉시 실행 함수
(function(x) {
	console.log(x*x);
}(2));
(function(x) {
	console.log(x*x);
})(2);
//괄호 위치만 조금 다를 뿐 같은 기능의 함수이다.

 

즉시 실행 함수도 함수이기 때문에, 변수에 즉시 실행 함수 저장이 가능하다.

(mySquare =function (x) {
    console.log(x*x);
})(2);
mySquare(3);

 

즉시 실행 함수를 사용하는 이유

즉시 실행 함수는 한 번의 실행만 필요로 하는 초기화 코드 부분에 많이 사용된다.

변수를 전역(global scope)으로 선언하는 것을 피하기 위해서이다.

전역에 변수를 추가하지 않아도 되기 때문에 코드 충돌 없이 구현 할 수 있어, 플러그인이나 라이브러리 등을 만들 때 많이 사용된다.

 

 

 

 

객체 생성자 함수

클래스와 비슷한 느낌이다

 

*메모리 절약을 위해 프로토타입으로 함수를 등록할 수 있다.

 

 

 

 

 

 

'Javascript' 카테고리의 다른 글

Events  (0) 2022.09.18
data type  (0) 2022.09.17
Javascript 객체  (0) 2020.01.04
Javascript 연산자  (0) 2020.01.04
night/day button Refactoring  (0) 2019.11.22
'Javascript' Related Articles more
Comments