[JS] Function(+Arrow function)

Function

• 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미한다.
• 필요할 때마다 호출하여 해당 작업을 반복 수행할 수 있다.

---

Function 선언

function 함수명(parameter){
  함수가 호출되었을 때 실행하고자 하는 실행문; }

• 함수명 : 함수를 구분하는 식별자.
• parameter(매개변수) : 함수를 호출할 때, argument(인수)로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 varialbe.

function plus(a,b){ /* 1개 이상의 parameter는 ,(쉼표)로 구분 */
  console.log(a+b); }

plus(8,60);
/* function plus의 parameter 'a' = plus argument '8'
   function plus의 parameter 'b' = plus argument '60'
   = 첫번째 매개변수는 첫번째 인수를 받고, 두번째 매개변수는 두번째 인수를 받는다. */
  

---

Return(반환문)

• function 외부에서 value를 얻고 싶을 때 사용.
  (= function이 외부와 소통하는 법)

/* variable 선언 */
const age = 96;

/* function 선언 */
function calculaterKrAge(ageOfForeigner){
  return ageOfForeigner + 2;}

/* function 호출 */
const krAge = calculaterKrAge(age); 

console.log(krAge); /* 이때, krAge = 98 */

• return 하는 순간, function은 종료된다.
  (= return 뒤의 값은 출려되지 않는다)

const age = 96;

function calculaterKrAge(ageOfForeigner){
  console.log("hello");
  return ageOfForeigner + 2;
  console.log("bye bye");
  /* return 뒤의 값인 console.log("bye bye")는 출력되지 않는다. */
}

---

Value로서의 function

• 함수가 변수에 대입될 수도 있고, 다른 함수의 인수로 전달될 수도 있다.

function plus(a){
  return a+a;}

const Add = plus;

console.log(plus(2)+10);

console.log(Add(8));

console.log(Add(plus(8)));

---

+ Arrow function

function을 간편하게 사용할 수 있는 대안.

ex)
function sayhello(item){
  console.log("this is the turn of", item); }
=
(item) => console.log("this is the turn of", item);

---

Recursion(재귀함수)

함수 내부에서 자기 자신을 호출하는 함수.

• 재귀 함수는 기본 케이스(재귀 종료) 또는 재귀 케이스(재귀 재개)의 두가지 입력을 받을 수 있다.

ex) 바닐라js챌린지-11일차 중..

function handleClick() {
  const a = colors[Math.floor(Math.random() * colors.length)];
  const b = colors[Math.floor(Math.random() * colors.length)];
 
  /* 지정된 color array로 랜덤 그라데이션 배경을 만들때, 두 가지 색이 같을 경우를 고려해,
     재귀함수를 사용하여 값이 같을 때 반환을 통해 다시 함수를 실행하도록 했다. */
  if (a === b) {
    return handleClick();
  }