[JavaScript] 함수 function

함수 function 란?

• 특정 기능을 실행하기 위한 코드의 집합으로 호출을 통해 재사용 가능
• 객체 자료형 중 하나이기 때문에 변수 대입 가능
• 함수는 선언함수와 익명함수로 생성 가능

 

선언 함수 - 이름을 가진 함수 선언문

선언 함수의 경우 어느 곳에서나 호출 가능

함수명(); <- 함수 호출 calling. 여러 번 호출 가능하며 재사용이 목적.

function 함수명(매개변수) {
	실행문;
    return 반환값;
} // 선언 함수의 경우 세미콜론 생략 가능.

---

익명 함수 - 이름이 없는 함수 표현식 (변수에 값을 할당하는 것처럼 함수를 변수에 대입)

이름이 없기 때문에 변수나 상수에 대입하여 사용.

이름이 없기 때문에 반드시 함수를 호출하는 코드보다 먼저 작성되어야 함.

const 변수명 = function() {
	실행문;
    return 반환값;
} // 세미콜론 붙여야 함.

변수명(); //함수 호출. 반드시 호출 전에 함수가 작성되어야 함.

---

매개 변수 (parameter) - 인수, 인자

함수 외부에서 내부로의 접근은 매개변수를 통해 전달.

function num(매개변수1, parameter2, 인수, ...) {
	실행문;
}

 

num이라는 식별자를 가진 함수의 매개변수 a에 인수 '5'를 전달해서 console.log( 5 + 10 )을 호출.

<script>
  const num = function() {
    console.log(a + 10);
  }
  num(a = 5);
</script>

 

num이라는 식별자를 가진 함수의 매개변수 a와 b에 인수 5와 10을 전달해서

console.log( 5 + 10 )과 console.log( 10 + 100 )을 호출.

<script>
  const num = function(a, b) {
    console.log(a + 10);
    console.log(b + 100);
  }
  num(5, 10);
</script>

 

매개변수에 인수를 전달하지 않으면 그 값은 'undefined'가 된다.

  const sum1 = function (wt) {
    console.log(`가로 : ${wt}px`);
  };
  sum1(); // 매개변수 wt에 인수를 전달하지 않았기에 값은 'undefined'

  console.log(`-----------`);
  //  ES6+ 매개변수에 기본값 부여
  const sum3 = function(wt, ht, dt) {
    console.log(`박스 부피는? ${wt + ht + dt}`)
  }
  sum3(100, 20, 34); // 3개의 매개변수에 모두 인수를 전달받아 '154'의 값 호출
  sum3(20, 50); // dt에 인수를 전달하지 않아 'undefined'의 값을 받아 'NaN' 호출

 

ES6 이상의 버전에서는 매개변수에 기본값을 부여하는 것이 가능.

즉, 인수를 전달받지 못했을 때 기본값을 호출하고, 인수를 전달하면 해당 값으로 호출할 수 있다.

  console.log(`-----------`);
  //  ES6+ 매개변수에 기본값 부여
  const sum3 = function (wt, ht, dt = 5) { // dt에 5 기본값 부여
    console.log(`박스 부피는? ${wt + ht + dt}`);
  };
  sum3(20, 50); // NaN였던 값이 '75'의 값으로 호출
  sum3(20, 50, 8); // dt의 기본값이 5지만 인수 '8'을 다시 전달해 '78'의 값 호출.

 

---

지역 변수

함수 내부에서 선언되는 변수로 함수 내부에서만 접근할 수 있다.

    function fruit() {
      let banana = '바나나';

      alert(banana);
    }

    fruit(); // 바나나

    alert(banana); // 함수 내부의 변수에 접근 불가. 호출 안 됨.

---

외부 변수 / 전역 변수

함수 외부에서 선언되는 변수, 함수 내부에서도 접근하거나 수정하는 것이 가능하다.

 

      let orange = `오렌지`;

      function fruit() {
        orange = `노란색`;

        alert(orange);
      }
      alert(orange); // 함수 호출 전으로 기존 값인 `오렌지` 출력

      fruit(); // 함수 내부에서 재할당한 값 `노란색` 출력

      alert(orange); // 함수가 호출되면서 내부에서 재할당한 값 `노란색` 출력

 

단, 함수 내부에 외부 변수와 동일한 식별자를 가진 지역 변수가 선언되면 외부 변수는 가려진다.

      let kiwi = `키위`;

      function fruit() {
        let kiwi = `황금색`;
        alert(kiwi);
      }
      fruit(); // 함수 내부의 변수 값인 `황금색` 출력
      alert(kiwi); // 함수 내부의 변수에 접근할 수 없어서 기존 값인 `키위` 출력

---

return (반환 값) 키워드

함수 내에서 선언된 지역변수나 값은 외부에서 접근이 불가능하기 때문에 return 키워드를 이용해 호출한 곳으로 반환.

혹은 함수 실행 후 결과를 다시 얻고자 할 때나 함수 종료를 위해 사용.

function fn(x) {
	실행문;
    return; 함수 강제 종료. 이 다음 구문 실행하지 않음
    return 반환값; 반환값을 데이터로 반환
}

 

함수 내부의 데이터를 외부로 반환.

<script>
    function banana() {
    console.log(`바나나`)
    }
    banana(); // 바나나 호출
  
  -------------------------
  
    function fruit() {
        '홍시'; // 함수 내부에서만 데이터를 가지기 때문에 undefined 호출
        return '홍시'; // 호출한 곳으로 데이터 값 반환, 홍시 호출 후 종료.
        '붕어빵'; // 앞의 return으로 데이터를 탐색하지 않음.
    }
    console.log(fruit()); 
</script>

 

return문만 작성하는 것도 가능하며, 이 경우 실행문의 실행 여부를 제어하는 것이 가능.

 

    function checkTicket(ticket) { // 티켓이 있으면 true, 없으면 false
        if (!useTicket(ticket)) { // 티켓이 있으면 false로 아래 alert 실행문 실행
            return; // 없으면 true로 if문 내 return문 실행 함수 즉시 종료. (alert창 출력 x)
        }
        alert( `티켓이 확인되었습니다.` );
    }

함수 내 return값이 없거나 return지시문만 있으면 undefined를 반환함.

 

    function doNothing() { /* 비어있음 */ }

    alert( doNothing() === undefined ); // true
    
    /* -------------------------------------- */
    
    function onlyReturn() {
    return;
    }

    alert(onlyReturn() === undefined); //true

 

return을 작성할 때 줄바꿈을 하면 return뒤에 자동으로 세미콜론(;)이 붙기 때문에 (눈에 보이지 않지만)

줄바꿈 없이 작성해야 함. 만약 줄바꿈이 필요하다면 여는 괄호를 return과 같은 줄에 작성할 것.

 

    function noEnter(a, b) {
        return // 세미콜론(;)이 자동 생성되므로 여기서 멈춤.
        '만약' + 'return을' + '줄바꿈해서 써야한다면'
            + `${a} ${b}를` + '같은 줄에 작성.';

    }
    alert(noEnter(`여는`, `괄호`));


    function noEnter(a, b) {
        return // 세미콜론(;)이 자동 생성되므로 여기서 멈춤.
        ('만약' + 'return을' + '줄바꿈해서 써야한다면'
            + `${a} ${b}를` + '같은 줄에 작성.');
    }
    alert(noEnter(`여는`, `괄호`));


    function noEnter(a, b) {
        return ( // 여는 괄호를 return과 같은 줄에 작성
            '만약' + 'return을' + '줄바꿈해서 써야한다면'
            + `${a} ${b}를` + '같은 줄에 작성.'
        );
    }
    alert(noEnter(`여는`, `괄호`));