Study JavaScript 0420 - 1hr function

15444 ワード

関数#カンスウ#


プログラムを構成する主な要素.
関数を使用すると、重複することなく、類似の操作を実行するコードを複数回呼び出すことができます.
関数はデータです.

1.関数宣言


functionキーワード、関数名、カッコ内のパラメータは、関数宣言を実現するために順次作成できます.
	function name() {
      // ...함수 본문...
    }

2.関数呼び出し


作成したfunction name()呼び出しを使用して、関数本文を実行します.
    function showMessage() {
      console.log('안녕하세요');
    }
    showMessage();

3.変数

  • 領域変数(ローカル変数):関数で宣言された変数
  • 外部変数(外部変数):関数の外部で宣言された変数
  • 領域変数は、関数内でアクセスでき、関数内部で関数外部の変数にアクセスできます.
  •     function showLocalVar() {
          let message="123";
          console.log(message);
        }
        showLocalVar();
        // console.log(message); // message is not defined
    
    
        let userName = 'Hun';
        
        function showOuterVar() {
          let message = 'Hello ' + userName;
          console.log(message);
        }
        showOuterVar();
  • 関数では、外部変数にアクセスおよび変更できます.
  •     let editUserName = 'Hunn';
        
        function showEditOuterVar() {
          editUserName = 'Seung'; // 외부 변수를 수정
          let message = 'Hello, ' + editUserName;
          console.log(message);
        }
    
        console.log(editUserName);  // 함수 호출 전이므로 'Hunn'이 출력
    
        showEditOuterVar();
    
        console.log(editUserName);  // 함수에 의해 'Seung'으로 값이 바뀜
  • 外部変数は、領域変数がない場合にのみ使用できます.領域変数と外部変数の開始日の名前を持つ変数が宣言されている場合、内部変数は外部変数を上書きします.
  •     let localOuterUserName = 'Hunnn'; // 외부 변수 선언, 전역 변수라고도 하며 최소한으로만 쓰자
        
        function showLocalOuter() {
          let localOuterUserName = 'Seungg';  // 같은 이름을 가진 지역 변수 선언
          let message = 'Hello, ' + localOuterUserName;
          console.log(message);
        }
    
        // 함수는 내부 변수인 localOuterUserName만 사용한다.
        showLocalOuter();
    
        // 내부 변수 에서만 값이 바뀌었으므로 외부 변수의 값이 나온다.
        console.log(localOuterUserName);
  • パラメータ(パラメータ):関数に任意のデータを渡す変数
  •     function showParameter(from, text) { // parameter: from, text
          console.log(from + ': ' + text);
        }
    
        showParameter('Hun', 'Hello!');     // Hun: Hello!
        showParameter('Hun', "What's up?"); // Hun: What's up?
    上記の例では、関数を呼び出すと、関数に渡されるパラメータがparameterとして使用されます.

    4.デフォルト


    パラメータに値が渡されていない場合は、この値は未定義の値です.
    showParameter('Hun'); // Hun: undefined

  • パラメータに値を渡さずにundefinedにしない場合は、デフォルト値を設定するだけです.

  • デフォルト値を設定する方法は、「パラメータ=value」として記述されます.
    もう1つの方法はif文、論理演算子、nullishを使用することです.
  •     function showParameterValue(from, text="is my name") {
          console.log(from + ": " + text);
        }
    
        showParameterValue('Hun');  // Hun:  is my name

    5. return


    returnは戻り値と呼ばれ、関数を呼び出すときに特定の値を関数のアークプールに戻すことができます.
        function sum(a, b) {
          return a + b;
        }
    
        let result= sum(2, 3);
        console.log(result);  // 5

  • returnは、関数の任意の場所で使用できます.関数の実行中にreturnに遭遇した場合、関数の実行はreturnにのみ行われ、停止し、関数が呼び出された場所で値を返します.
    関数に何もない場合、またはreturnのみの場合はundefinedを返します.
  •     function doNothing() {
          // 1. 아무것도 없거나
          /* empty */
          // 2. return만 있을 경우
          return;
        }
    
        console.log(doNothing() === undefined); // true
  • を使用して戻る場合、複数行で表に記入したい場合は、以下のように記入します.
  •     return (
          some + long + expression
          + or + 
          whatever * f(a) + f(b)
        );

    6.ネーミング関数


    関数は、ある動作を実行するために収集されたコードであるため、できるだけ簡潔である必要があります.
    名前だけで何の機能なのかわかり、関数は1つの動作だけを担当します.
        showMessage(..)     // 메시지를 보여줌
        getAge(..)          // 나이를 나타내는 값을 얻고 그 값을 반환함
        calcSum(..)         // 합계를 계산하고 그 결과를 반환함
        createForm(..)      // form을 생성하고 만들어진 form을 반환함
        checkPermission(..) // 승인 여부를 확인하고 true나 false를 반환함