[모던 JS 튜토리얼] 2.15. 함수

중복 없이 유사한 동작을 하는 코드를 여러 번 호출할 수 O

2.15.1. 함수 선언 function declaration

**function name(매개변수 이름) {
         //함수 본문 
      }**

<script>

      function showMessage() {
         alert('안녕하세요');
      }
      showMessage();
      showMessage();

   </script>

2.15.2. 지역 변수 local variable

<script>

      function showMessage() {
         let message = '안녕';
         alert(message);
      }
      showMessage(); //안녕
      alert(message);   //지역변수라서 에러

   </script>

2.15.3. 외부 변수 outer variable

<script>

      let userName = 'John';

      //함수 정의
      function showMessage (){
         userName = 'Tiff';

         let message = 'Hello ' + userName;
         alert(message);
      }
      
      alert(userName); //John

      //함수 호출
      showMessage();

      alert(userName);  //Tiff

   </script>

외부 변수는 지역 변수가 없는 경우에만 사용 가능

2.15.4. 매개 변수(인자) parameter

• 임의의 데이터를 함수 안에 전달 할 때
• 인수 : 함수를 호출 할 때 매개변수에 전달되는 값

<script>

      function showMessage(from, text) {
         alert(from + ': ' + text);
      }

      showMessage('Tiff' , 'Hello');
      showMessage('Tiff' , "What's up?");

   </script>

2.15.5. 기본값 default value

매개변수에 값을 전달하지 않아도 그 값이 undefined가 되지 않게 하려면 함수를 선언할 때 =를 사용해 기본값 설정

<script>

      function showMessage(from, text = 'no text given') {
         alert(from + ': ' + text);
      }

      showMessage('Tiff');

   </script>

2.15.6. 매개변수 기본값을 설정할 수 있는 또 다른 방법

• 매개변수를 undefined와 비교 : if 문 사용

<script>

      function showMessage(text) {
         //
      
      if (text === undefined) //=== : 값과 형 모두 같은지 확인
      {
         text = '빈 문자열';
      }
      alert(text);
   }

      showMessage();

   </script>

• || 사용 매개변수가 생략되었거나 빈 문자열 (” “) 이 넘어오면 변수에 ‘빈 문자열’ 이 할당됨
  

<script>

      function showMessage(text) {
         //
      
      text = text || '빈 문자열';
      alert(text);
   }

      showMessage();

   </script>

• nullish 병합 연산자 ?? 사용 0처럼 falsy로 평가되는 값들을 일반 값처럼 처리할 수 있음
  

<script>

      function showMessage(text) {
         alert(count ?? 'unknown');
   }

      showCount(0);
      showCount(null);
      showCount();

   </script>

2.15.7. 반환 값 return value

반환 값 : 함수를 호출했을 때 함수를 호출한 곳에 반환하는 특정 값

<script>

      function sum(a,b){
         return a + b;
      }

      let result = sum(1,2);
      alert(result);

   </script>

2.15.8. 함수 이름 짓기

• 가능한 간결하고 명확하게
• 접두어로 붙여 함수 이름 만들기
  • show : 무언가를 보여줌
  • get : 값 반환
  • calc : 계산
  • create : 생성
  • check : 확인하고 불린값 반환

2.15.9. 함수 == 주석

함수가 길어지면 쪼개기