js 딥다이브 12.함수

1. 함수 종류

js에는 4가지의 함수가 있다.

1)함수 선언문
:function으로 시작하는 방식이다. 함수의 이름을 생략할 수 없다.

<script>
function add(x,y){
  return x+y;
}

2. 함수 표현식
:변수에 함수를 할당하는 것같은 방식이다. 함수를 만들땐 함수 표현식으로 만들면 좋다.

<script>
var add = function add(x,y){
return x + y;};

함수표현식의 함수를 사용할 때는 함수 이름이 아니라 변수명으로 사용해야 한다. foo라는 함수명은 함수 내에서만 유효하기 때문이다.(?)

<script>
const add = function foo(x,y){
  return x + y;};
// console.log(add(1,2));
console.log(foo(1,3));  --- foo is not defined 에러가 뜬다 
</script>

3.function 생성자 함수
: 거의 안쓴다고 한다. 몰라도 될듯..

4. 화살표 함수
화살표 함수는 익명함수로 만든다. function 키워드를 쓰는 대신 =>를 사용하여 간략하게 쓰는 방식이다.

문법
const 함수이름 = (매개변수) => 식;

매개변수가 하나일때는 ()를 생략할 수 있다. 화살표 함수 예시는 다음과 같다.

<script>
const add = (x,y) => x+y;
console.log(add(2,3));  -------결과> 5

화살표함수에 대한 설명은 책(딥다이브)의 474페이지부터 자세하게 나와있다. 화살표 함수에 대해 간략하게 정리해보자면 일반함수와 같은 특성도 있다(여러개의 문으로 구성 가능, 즉시 실행 함수 가능,,)
그러나 차이점도 존재한다. 화살표 함수만의 고유한 특성을 정리하자면

화살표 함수의 특성 (어려워서 나중에 한번 더 정리)
1) 생성자 함수로 사용 불가(인스턴스, 프로토타입 x)
2) 중복된 매개변수 이름 불가
3) 함수 자체의 this, argument, super,new.target 바인딩을 갖지 않는다.

2. 매개변수, 인수

매개변수는 함수를 정의할 때 만든 변수, 인수는 함수를 호출할 때 새로 배정한 변수이다. 자바스크립트에서 인수가 매개변수보다 적으면 undefined, 더 많으면 초과된 인수는 무시된다.

이상적인 함수는 한가지 일만하고 이름을 정할 때도 '한가지 기능이 식별되도록 명확하게' 짓는 것이 좋다. 매개변수 또한 3개를 넘지 않아야 한다.

3. return 반환문

return의 역할
1) 함수의 실행을 중단한다! 뒤에 있는 식은 무시된다.
2) return 뒤에 나오는 표현식을 평가해서 내보낸다.

<script>
function add(x,y){
  if(typeof x !== 'number' || typeof y !== 'number'){
    console.log('모두 숫자를 입력해야 합니다');
  }
  return x + y;
}
</script>

4. 즉시실행함수

한번만 쓰고 버릴거라면 즉시실행함수를 활용하자! 즉시실행함수는 한 번 사용하고 없어진다. ()안에 함수선언문을 넣고 함수가 끝나면 ()를 붙여주면 된다.

<script>
(function(){
const a = 2;
const b = 3;
return a * b;}());
</script>

5. 재귀함수

재귀함수는 자신을 호출하는 함수이고, 반복문에 많이 쓰인다.
<1부터 100까지의 합 구하기>

<script>
let sum = 0 ;
for(var i = 0 ; i <= 100; i++){      --자신인 sum을 함수 안에서 호출했다. 
  sum += i
};
console.log(sum);                       ------결과> 5050
</script>

<factorial 예제>
factorial이란 1부터 자기까지의 모든 곱을 의미한다.

<script>
function factorial(n){             ------함수 선언식
  if(n <= 1 ) return 1;            ------자신이 1이하이면 1을 반환
  return n * factorial(n-1);       ------자신과 자신보다 1작은 수(n-1)를 곱함.
                                          factorial함수를 집어넣어 계속 반복
}
</script>

6.콜백함수

어떤 일을 반복 수행하는 함수이다.
다음은 입력한 수에서 홀수만 추출하는 함수이다.

<script> 
function repeat(n){         -------repeat은 그냥 함수 이름이다. 
for(var i = 0; i < n ; i++){ -----n만큼 함수를 반복한다. 
if(i % 2) console.log(i);  } ----i%2가 1이면 true로 홀수이다. 이때 나온다.
}  
repeat(10);  ----------------결과 > 1,3,5,7,9
</script>