(SEB_FE) Section1 Unit5 함수

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

---

⭐함수 정의

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

입력값을 전달하여 호출 -> 함수의 내부 코드 실행 -> 결과 반환(return)의 순서로 작동

정리하자면,

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

---

⭐함수선언문과 함수표현식

💫함수선언문

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

함수선언문 작성 순서

1. 함수를 정의 할 때는 function 키워드를 사용
2. function 키워드 다음에는 함수명을 지정
3. 소괄호 안에는 함수 내부에서 사용할 수 있는 매개변수를 사용할 수 있다. (없어도 됨! 후에 더 자세히 설명)
4. 실행할 코드를 코드블록({ }) 내부에 작성.

• 즉, 위의 코드는 매개변수를 받지 않고, console.log('hello world');를 실행하는 greeting이라는 이름의 함수를 선언한 것!

💫함수선언문

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

• 변수를 선언할 때 사용했던 let 키워드를 사용해서 변수를 선언하고, 함수를 할당
• 이때, 함수선언문과는 달리, 함수에는 특별한 식별자를 지정할 필요가 없다. (이름 필요 X)
• JavaScript에서는 이처럼 함수를 변수에 할당하는 것이 가능

---

⭐함수 호출

함수 내부에 있는 코드는 함수를 호출 했을 때만 실행된다!
정의한 함수를 어떻게 호출하는지 알아보자.

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

//greeting함수 호출
greeting() // 'hello world'

➡ 이처럼 함수를 정의할 때 지정한 함수명 뒤에 소괄호(( ))를 붙이면 함수를 호출할 수 있다.
  (함수표현식으로 정의한 함수는 선언한 변수명에 소괄호를 붙여주면 됨)

---

⭐매개변수와 전달인자

매개변수는 함수를 정의할 때 선언하고, 함수 코드 블록 안에서 변수처럼 취급된다.
(함수를 정의할 때 함수에게 넘겨주는 변수인 것! 함수는 그럼 그 변수를 가지고 내부 코드를 실행하게 된다.)

//name을 매개변수로 넘겨 줌! 
function greeting (name) {
  //넘겨받은 name을 변수처럼 사용
	console.log('hello ' + name);
}

• ❓그렇다면 이 매개변수 name에 값을 할당하기 위해서는 어떻게 할까?
  ➡ '전달인자' 사용하기!

  • 전달인자: 함수를 호출할 때 소괄호 안에 넣는 값. 이를 통해 매개변수에 값을 할당할 수 있다.

백문이 불여일견! 코드를 한번 보자.

function greeting (name) {
	console.log('hello ' + name);
}
//호출할 때 'kimcoding'을 전달인자로 넣어 줌.
//이제 greeting 함수 안에서 name = 'kimcoding'이 된다.  
greeting('kimcoding'); // 'hello kimcoding'

즉, 호출할 때 전달한 'kimcoding'이라는 문자열이 함수 내부에서 매개변수 name에 할당된 것

• ❓매개변수를 여러 개 사용하는 것도 가능할까?
  ➡ 가능하다! 매개변수의 개수에 맞게 전달인자를 전달하면 매개변수에 차례대로 전달된다.

//매개변수가 2개인 함수 정의 
function greeting (user1, user2) {
	console.log('hello ' + user1);
	console.log('hello ' + user2);
};
//호출 시 두개 차례로 전달. 
//user1은 'kimcoding', user2는 'parkhacker'가 된다. 
greeting('kimcoding', 'parkhacker');

• ❓만약 매개변수의 수보다 적은 전달인자가 전달되면?
  ➡ 아무것도 전달되지 않은 매개변수는 undefined로 초기화

💫스코프(변수의 유효 범위)

매개변수와 함수 내부에서 선언한 변수는 자신이 선언된 위치에 따라 유효범위가 결정된다.

• 매개변수는 함수 내부에서만 사용이 가능
• 함수 내부에서 선언한 변수도 마찬가지로 함수 내부에서만 사용이 가능

function getUser (number) {
	let userName = 'kimcoding';
};
console.log(number); // Uncaught ReferenceError: number is not defined
console.log(userName); // Uncaught ReferenceError: userName is not defined

---

⭐return문

외부에서 값을 전달받았듯 함수의 실행결과를 외부로 반환(함수 외부에서 함수의 결과값을 사용할 수 있다는 의미)할 수는 없을까?
➡ return문을 사용하자!

💫return문의 역할

1. 함수 내부의 코드가 차례대로 실행되다가 return문을 만나면 값을 반환한 후 함수는 종료된다. 다시 말해 return문 뒤에 나오는 코드는 실행되지 않는다.
2. return문에 작성된 코드를 실행한 후 결과를 함수 외부로 리턴한다. 함수 외부에서 함수를 호출하면 함수의 실행결과를 확인할 수 있다.
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