카테고리 없음

재귀 함수 호출

깡출깡충 2024. 7. 31. 12:26

목차

  • 재귀 함수 호출
  • 함수의 호이스팅
  • 함수 스코프
  • 함수 표현식
  • 익명 함수
  • 즉시 실행 함수
  • 화살표 함수

 

재귀 함수 호출
함수 정의문 내에서 작성한 코드로 함수를 다시 호출하는 것을 재귀 함수 호출이라고 합니다.
재귀 함수 호출은 반복문처럼 여러 번 호출하기 위해 사용합니다.

(기본형)
function 함수명(){
자바스크립트 코드;
함수명(); ← 재귀 함수 호출
}
함수명();

 

재귀 함수 호출 사용해보기

 

재귀 함수 호출 입력 예시

      let num = 0;

      function testFnc() {
        num++;
        document.write(num, "<br/>");
        if (num == 10) return; // num이 10이 되면 함수를 종료

        testFnc(); // 바깥에 함수 호출문이 실행되면 안쪽의 함수호출을 실행
      }

      testFnc(); // 바깥에 있는 함수 호출문.

 

함수의 호이스팅
함수의 호이스팅이란 일반 함수 정의문(=이름이 있는 함수)의 경우 호이스팅 기능을 지원합니다.
함수의 호이스팅은 함수 정의문보다 함수 호출문이 등장하더라도 해당 함수를 정상적으로 실행하는 것을 말합니다. 

일반 함수가 정의되면 자바스크립트 엔진 메모리 공간안에 함수의 이름을 이용해 미리 저장해둡니다.
저장된 일반 함수는 해당 함수보다 호출문이 먼저 등장하더라도 호이스팅에 의해 정상 실행이 됩니다.

하지만 익명함수 즉, 이름이 없는 함수의 경우 호이스팅 기능이 적용되지 않는 
그렇기 때문에 함수정의가 먼저 이루어진 다음 그 후에 함수 호출문이 등장해야 함수가 실행됩니다.

(기본형)
1. 일반 함수 정의문
함수명(); ← 함수호출문 먼저 등장

function 함수명(){ → 호이스팅에 의해 정상 실행됩니다.
자바스크립트 코드;
}

2. 익명 함수 정의문
변수명(); ← 오류발생. 호이스팅 기능이 없어 함수정의문보다 먼저 등장 불가능 합니다.
let 변수명 = function(){
자바스크립트 코드;
}

변수명(); ← 익명 함수 호출문. 함수보다 먼저 호출할 수 없습니다.

 

함수 스코프
함수 스코프란 함수의 유효범위를 뜻합니다.
함수도 변수처럼 전역함수(global function)와 지역함수(local function)로 나눠집니다.

전역 함수는 자바스크립트 어디서든 사용할 수 있는 함수를 말하며
지역 함수는 함수 스코프 안에서만 사용할 수 있는 함수를 말합니다.

(기본형)
<script>

↓ 전역함수. 스크립트 내부 전역에서 사용할 수 있습니다.
function 함수명(){
자바스크립트 코드;
}

function 함수명1(){
↓ 지역함수. 함수 안에 들어있는 함수로, 지역의 스코프를 가집니다.
function 함수명2(){
자바스크립트 코드;
}
}

<닫힌 스크립트 태그>

 

전역함수와 지역함수 구분하기

 

전역함수와 지역함수 입력 예시

      // 전역함수
      function myFnc() {
        alert("myFnc 전역함수");
      }

      // 전역함수
      function outerFnc() {
        // 지역함수
        function innerFnc() {
          alert("innerFnc 지역함수");
        }
        innerFnc(); // 지역함수 호출. outerFnc가 먼저 호출되야만 지역함수가 호출됩니다.
      }

      myFnc(); // 전역함수 호출
      outerFnc(); // 전역함수 호출

 

함수 표현식
일반 함수 정의문의 경우 함수명을 선언하고 그 이름을 사용해서 호출합니다.
이 방법은 함수 이름만 알고 있으면 어디서나 함수를 실행 할 수 있어서 많이 사용합니다.
이 밖에 함수 이름을 지정하지 않고 사용하거나, 함수를 호출하지 않고 바로 실행하는 함수도 있습니다.
함수 중 익명 함수나 즉시 실행함수를 모두 함수 표현식이라고 합니다.

 

익명 함수
익명 함수는 이름이 없는 함수를 말합니다. 즉, 익명 함수를 선언할때에는 이름을 붙히지 않습니다.

(기본형)
let 변수명 = function(){
자바스크립트 코드;
}
변수명();

 

익명 함수 사용해보기

 

익명 함수 입력 예시

sum(1, 2); →// 오류 이유
            // 1. 이전에 함수를 등록한 적이 없기 때문에
            //  2. var로 만들어진 변수의 경우 : type 에러 발생. sum은 변수로서 undefined를 참고 하고 있습니다.
            //  3. let으로 만들어진 변수의 경우 uncaught ReferencEerror가 발생. sum이라는 변수는 선언 된 적이 없다는 오류 발생

            // 변수 sum은 익명 함수를 참조하고 있습니다.
            var sum = function (a, b) {
              document.write(a + b, "<br/>");
            };

            // 익명 함수는 변수명으로 호출합니다.
            sum(2, 3);
            
            여러번 계속 사용하고 싶으면 익명 함수 사용

 

즉시 실행 함수
일반적으로 함수는 선언하고 필요할때마다 호출해서 실행하는 방법을 많이 사용합니다.
하지만 한번만 실행하는 함수라면 함수를 정의하면서 동시에 실행할 수 있습니다.
바로 즉시 실행 함수를 이용하면 됩니다.
즉시 실행 함수는 함수를 실행하는 순간에 자바스크립트 해석기에서 함수를 해석합니다.

(기본형)
(function(매개변수){
자바스크립트 코드;
})(인수);

 

즉시 실행 함수 사용해보기

 

 

즉시 실행 함수 입력 예시

      // 즉시 실행함수

      let name = prompt("이름을 입력해주세요.");
      (function (userName) {
        document.write("안녕하세요. 제 이름은" + userName + "입니다.");
      })(name);
      
      한번만 등장하게 하고싶으면 즉시 실행함수를 사용

 

즉시 실행 함수와 지역함수를 사용하여 코드 안전하게 지키기

 

// 즉시 실행 함수로 지역함수를 안전하게 보관하면서 함수를 실행시키는 방법
      
/* 아래 예시를 보면 개발자 A,B모두 동일한 이름의 변수와 함수를 선언했다.
하지만 각각 즉시 실행함수로 감싸놓았기 때문에 각 변수와 함수는
즉시실행 함수 안의 블록 스코프(유효범위)를 가진다.
즉, 개발자 A함수에 있는 num과 menu()는 개발자 B가 선언한 num과
menu()와 각각 다른 함수와 변수로 취급된다.
그렇기 때문에 변수나 함수의 충돌 없이 함수가 정상 실행된다.*/

      // 개발자 A의 함수
      (function () {
        let num = 100;
        function menu() {
          num += 100;
          document.write(num, "<br/>");
        }
        menu();
      })();

      //  개발자 B의 함수
      (function () {
        let num = 100;
        function menu() {
          num -= 50;
          document.write(num, "<br/>");
        }
        menu();
      })();

 

화살표 함수
ES 버전부터는 => 표기법(화살표 표기법)을 사용해서 함수 선언을 좀 더 간결하게 할 수 있습니다.
화살표 함수는 익명 함수에서만 사용할 수 있습니다.

(기본형)
1. 매개변수가 없을 경우
: 매개변수가 없을 경우에는 매개변수의 괄호 안을 비워둡니다.
: 호출문의 인수 자리도 비워둡니다.
let 변수 = (매개변수) => { 자바스크립트 코드 }; → 선언문
변수명(인수); → 호출문

2. 실행할 자바스크립트코드가 1줄인 경우
: 실행할 자바스크립트 코드가 1줄이라면 중괄호를 생략할 수 있습니다.
: 이때 return문은 생략 된 것으로 간주합니다.
let 변수 = () => 자바스크립트 코드;

2-1. 실행 할 자바스크립트 코드가 두 줄 이상이면 {}와 return 생략 불가능합니다.
let 변수 = () => {
자바스크립트 코드1;
자바스크립트 코드2;
return 반환값;
}

3. 매개변수가 1개인 경우
: 매개변수가 1개인 경우 매개변수 자리의 ()를 생략할 수 있습니다.
let 변수 = 매개변수 => 자바스크립트 코드;

4. 매개변수가 2개 이상인 경우
: 매개변수가 둘 이상인 경우 (매개변수)=>{코드} 형태를 사용합니다.
일반적인 익명함수와 마찬가지로 매개변수끼리는 , 로 구분합니다.
let 변수 = (매개변수1, 매개변수2) => 자바스크립트 코드;

 

화살표 함수 사용해보기

 

화살표 함수 입력 예시

      // 매개변수가 없을 경우
      let hello = () => {
        document.write("hello", "<br/>");
      };

      hello();

      // 실행할 자바스크립트코드가 1줄인 경우
      let hi = () => "hi"; // hi라는 함수를 호출하여 결괏값을 화면에 표시함.
      document.write(hi(), "<br/>");

      //   매개변수가 1개인 경우
      let myName = (name) => document.write("제 이름은" + name + "입니다.");

      myName("김땡땡");

      // 매개변수가 2개 이상인 경우
      let addNum = (a = 1, b = 3) => {
        return a + b;
      };

      let cup = addNum();
      document.write("<br/>", cup, "<br/>");

      cup = addNum(4, 5);
      document.write(cup, "<br/>");