함수

---

학습 목표
1. 함수표현식, 함수선언문으로 함수를 정의하고 호출할 수 있다.
2. 매개변수와 전달인자에 대해 설명할 수 있다.
3. 함수에 return문이 필요한 이유를 이해한다.
4. 함수를 이용해 구구단 n단을 출력하는 재사용이 가능한 코드를 작성할 수 있다.

1. 함수 정의

---

• 함수 : 입력을 받아서 코드블록 내부의 코드를 실행한 후 함수의 실행결과를 반환하는 일련의 과정의 묶음이다.

  

  • 먼저, 함수 외부에서 특정한 입력값을 전달하여 호출할 수 있다.
  • 함수가 호출되면 함수의 내부의 코드가 실행된다. 그리고 함수의 실행결과는 다시 함수 외부로 반환(return)할 수 있다.

  

  • 예를 들어, 함수 외부에서 x는 2, y는 3이라는 입력값이 주어졌다고 해보자.
  • 함수 내부에는 x와 y를 더하여 함수 외부로 반환하도록 코드가 작성되어 있다.
  • x와 y를 더한 값은 5이기 때문에, 이 함수는 5를 반환하게 된다. 만약 함수외부에서 x와 y에 2와 3이 아닌 다른 값을 전달했다면, 다른 결과가 나왔을 거라는 것을 유추할 수 있을 것이다.

  • 정리하자면, 함수를 사용한다는 것은 특정한 코드실행 과정을 하나의 묶음으로 묶어서 필요할 때마다 호출하여 실행한다는 것을 의미한다.
  • 그리고 이때, 특정한 코드실행 과정을 묶어서 함수를 생성하는 것을 ‘함수를 정의한다.’고 한다.

함수선언문과 함수표현식

• 함수선언문 : 함수 선언 키워드인 function으로 함수를 "선언"
• 함수표현식 : 변수에 함수를 할당하여 함수를 "표현"
  
  

• 먼저 문자열 ‘hello world’를 출력하는 함수를 함수선언문으로 정의해보자.

  // 함수선언문으로 정의한 함수
  function greeting () {
      console.log('hello world')
  };

  • 변수를 선언할 때 let키워드를 사용하듯, 함수를 정의 할 때는 function 키워드를 사용한다.
  • function 키워드 다음에는 함수명을 지정해준다.
  • 위 예제에는 greeting이라는 함수명을 사용했다. 그 뒤에는 소괄호(())를 입력해야 한다.
  • 소괄호 안에는 함수 내부에서 사용할 수 있는 매개변수를 사용할 수 있다.
  • 다음으로, 실행할 코드를 코드블록({}) 내부에 넣어주면 된다.
  • 코드블록 안에는 문자열 ‘hello world’를 출력하는 코드를 작성했다.
  • 함수는 호출 되었을 때만 코드블록 내부의 코드가 실행된다.

• 이번에는 함수표현식으로 똑같은 함수를 정의해보자.

  // 함수표현식으로 정의한 함수
  let greeting = function () {
      console.log('hello world')
  };

  • 함수표현식은 변수를 선언할 때 사용했던 let 키워드를 사용해서 변수를 선언하고, 함수를 할당하는 형태로 코드를 작성하면 된다.
  • 이때, 함수선언문과는 달리, 함수에는 특별한 식별자를 지정할 필요가 없다.
  • JavaScript에서는 이처럼 함수를 변수에 할당하는 것이 가능하다. 그리고 이렇게 변수에 함수를 할당한 것과 같은 형태로 함수를 정의하는 것을 함수표현식이라고 한다.

2. 함수 호출

---

• 함수 내부에 있는 코드는 함수를 호출 했을 때만 실행된다.
• 함수 호출이란 함수를 실행시키는 명령을 전달하는 것과 같다.

• 함수선언문으로 정의한 함수를 호출해보자.

  function greeting () {
    console.log('hello world')
  };
  
  greeting() // 'hello world'

  • 이처럼 함수를 정의할 때 지정한 함수명 뒤에 소괄호(())를 붙이면 함수를 호출할 수 있다.

• 함수표현식으로 정의한 함수를 호출해보자.

  let greeting = function () {
    console.log('hello world')
  };
  
  greeting() // 'hello world'

  • 선언한 변수명에 소괄호(())를 붙여주면 된다.

3. 매개변수와 전달인자

---

매개변수

• 매개변수는 함수를 정의할 때 선언하고, 함수 코드 블록 안에서 변수처럼 취급된다.

• 앞서 설명한 것처럼 함수를 정의할 때 소괄호(())에 매개변수를 추가할 수 있다.

• 이렇게 추가된 매개변수는 함수 내부에서 마치 변수와 같은 역할을 하게 된다.

  function greeting (name) {
      console.log('hello ' + name);
  }

  • greeting이라는 이름의 함수가 name이라는 매개변수를 가지고 있다.

  • 현재는 아무것도 할당되어 있지 않으므로, 매개변수 name은 undefined로 초기화되어 있다.

전달인자

• 함수를 호출할 때 소괄호 안에 값을 넣음으로써 매개변수에 값을 할당할 수 있다.

• 이것을 바로 전달인자라고 한다.

  function greeting (name) {
      console.log('hello ' + name);
  }
  
  greeting('kimdami'); // 'hello kimdami'

  • 호출할 때 전달한 'kimdami'이라는 문자열이 함수 내부에서 매개변수 name에 할당된 것을 확인할 수 있다.
    
    

• 이처럼 매개변수와 전달인자를 활용하면 함수 외부에서 함수 내부로 값을 전달할 수 있다.

4. return문

---

function add (x, y) {
	return x + y; // 반환문
}

• 이 함수는 두 수를 입력받아 합을 리턴하는 함수이다.

• 여기서 주목해야 할 것은 return이라는 키워드다.

• ‘반환한다’라는 표현도 return을 번역한 표현이라고 보면 된다.

return문의 역할

1. 함수 내부의 코드가 차례대로 실행되다가 return문을 만나면 값을 반환한 후 함수는 종료된다. 다시 말해 return문 뒤에 나오는 코드는 실행되지 않는다.

   function add (x, y) {
     return x + y; // 반환문
     console.log('실행되지 않습니다');
   }

2. return문에 작성된 코드를 실행한 후 결과를 함수 외부로 리턴한다.
   함수 외부에서 함수를 호출하면 함수의 실행결과를 확인할 수 있다.

   function add (x, y) {
       return x + y; // 반환문
    }
   
    console.log(add(3, 2)); // 5

3. 함수 호출의 결과를 변수에 할당하는 것도 가능하다.

   function add (x, y) {
     return x + y; // 반환문
   }
   
   let result = add(3, 2);
   console.log(result); // 5

4. 함수의 호출 결과끼리의 연산도 가능하다.

   function add (x, y) {
     return x + y; // 반환문
   }
   
   let result = add(3, 2) + add(5, 7);
   console.log(result); // 17