[JavaScript 기초] 4. 함수 요약 정리

1. 함수 정의

---

• 함수 : 입력을 받아서 코드블록 내부의 코드를 실행한 후 함수의 실행결과를 반환하는 일련의 과정의 묶음
• 함수를 정의하는 2가지 방법 - 함수선언문과 함수표현식
  1. 함수선언문 : function 키워드로 함수를 정의할 수 있음.
     function 함수명(매개변수) {실행할 코드}
  2. 함수표현식 : 변수에 함수를 할당할 수 있음.
     let 변수 = function(매개변수) {실행할 코드}

2. 함수 호출

---

• 함수 내부에 있는 코드는 함수를 호출 했을 때만 실행됨.
• 호출 방법 : 함수명() (함수표현식으로 정의한 함수는 변수명===함수명)
  

3. 매개변수와 전달인자

---

• 매개변수(parameter) : 함수를 정의할 때 선언하고, 함수 코드 블록 안에서 변수처럼 취급됨.
  초기값은 undefined.(매개변수에 아무것도 전달되지 않았을 때)
  매개변수 및 함수 내부에서 선언한 변수는 함수 내부에서만 사용 가능함.(지역 스코프)
• 전달인자(arguments) : 함수를 호출할 때 소괄호 안에 값을 넣음으로써 매개변수에 값을 할당할 수 있음
  함수명(전달인자)

4. return문

---

• return : 함수의 실행결과를 외부로 반환하는 키워드.
  1. 함수 내부 코드 실행 중에 return문을 만나면 값을 반환한 후 함수가 종료됨. return 문 뒤의 코드는 실행되지 않음.(return; 만 작성해도 함수 종료됨)
  2. return문에 작성된 코드를 실행 후 결과를 함수 외부로 리턴함. 함수 외부에서 함수를 호출하면 함수의 실행결과를 확인할 수 있음.
  3. 또는 함수 호출의 결과를 변수에 할당하는 것도 가능함.
  4. 함수의 호출 결과끼리의 연산도 가능함.

그 외 MDN 정보

---

1. 함수 호출 = invoke (a fancy word for run, or execute)
   함수는 hoisting 되어서 함수를 함수 선언문 전에 호출할 수 있음

2. 익명 함수 : 함수이름이 없는 함수. 주로 이벤트 핸들러와 사용됨.

   function() { alert('hello'); }

   • 익명함수 예시

   function logKey(event) {
     console.log(`You pressed "${event.key}".`);
   }
   textBox.addEventListener('keydown', logKey);
   // 위에서 logKey() 함수를 사용하는 대신, event parameter 만 받아오는 익명함수를 addEventListener()로 보낼 수 있음.
   // -->
   textBox.addEventListener('keydown', function(event) {
   console.log(`You pressed "${event.key}".`);

3. 화살표 함수 :

   Syntax:

   (param1, param2, …, paramN) => { statements }
   (param1, param2, …, paramN) => expression
   // 다음과 동일함:  => { return expression; }
   //
   // 매개변수가 하나뿐인 경우 괄호는 선택사항:
     (singleParam) => { statements }
     singleParam => { statements }
   // 매개변수가 없는 함수는 괄호가 필요:
     () => { statements }

   • 화살표 함수 예시

     // -->익명함수 예시를 아래와 같이 화살표 함수로 변경 가능
     textBox.addEventListener('keydown', event => console.log(`You pressed "${event.key}".`));
   });

4. 매개변수 = Function parameters.
   Parameters are sometimes called arguments, properties, or even attributes.

5. Default parameters
   If you're writing a function and want to support optional parameters, you can specify default values by adding = after the name of the parameter, followed by the default value:

   function hello(name = 'Chris') {
     console.log(`Hello ${name}!`);
   }
   
   hello('Ari'); // Hello Ari!
   hello();      // Hello Chris!