함수

• 함수는 이름이 없이 만들 수 있다. = 익명함수
• 자바스크립트는 언어레벨에서 함수를 값으로 취급한다. 즉, 함수를 변수(상수)에 넣을 수 있다. 함수가 들어간 변수가 함수의 이름이 된다.

const myFnV2 = function () {
    return 100;
}; // 익명함수는 식이기 때문에 ;으로 끝난다.
myFnV2();
<br>
아래 처럼 일반 함수는 문이기 때문에 ; 으로 끝나지 않는다.
function myFn(x) {
    return x+100;
}
const reuslt = myFn(10);

• 즉시 실행 함수 (단 한번만 실행해야하는 함수에 사용)

(function() {
    console.log('즉실 실행 함수!')
})();

• 가변인자
  자바스크립트 함수 인자에 아래 2가지 문제가 생길 수 있다.

1. 인자가 안들어오는 경우
2. 정해진 인자 갯수보다 적게들어오거나 많게들어오는 경우
   
   
   자바스크립트 함수는 가변인자 처리스펙 arguments(배열)이 있는데,
   전달받은 인자를 하나씩 받고 암묵적으로 작동되는 메커니즘이다.
   arguments가 있어 함수에 인자를 표시해줄 필요없이 인자를 여러개를 사용하게 할 수 있다. 그러나 이것은 문제는 함수시그니처(함수가보여지는것)에 등장시킬 방법이 없어 표현력이 굉장히 제한적이다.
   function문을 접었을 때 외부에서 sum()이라는 함수가 arguments라는 함수를 사용하는지, 인자를 안받는 건지 알 수가 없기 때문이다.

function sum(){
    let s = 0;    
    for(let i = 0; i < arguments.length; i++){
        s += arguments[i]
    }
    return s;
}
const abcSum = sum(10, 20, 30);

이러한 맥락에서 새로운 스펙 '전개 파라미터(rest parameter)'가 생겼다.
인자를 (...args)로 해주면 함수 시그니처에 arguments 명식적으로 전달되기 때문에 표현력이 좀더 풍부한문법이다. 또한 인자에 (a,b, ...args) 라고 해주면 a,b는 필수로 넣어줘야되고 뒤에 나머지는 추가로 넣어도 되고 안는 함수를 만들 수 있다.

function sum(...args){
    let s = 0;    
    for(let i = 0; i < args.length; i++){
        s += args[i]
    }
    return s;
}
<br>
<br>
function sum(a,b, ...args){ // a,b는 필수 뒤에는 더 넣든 말든 마음대로
    let s = 0;    
    for(let i = 0; i < args.length; i++){
        s += args[i]
    }
    return s;
}

• 함수호출 방법
  sum라는 함수가 있을 때 함수 호출방법은 3가지가 있다.

1. sum(); // 일반형
2. sum.call(context, 10,20,30,40); // 인자를 일반형과 동일한 방식으로전달
3. sum.apply(cnontext, [10,20,30,40]); // 인자를 배열에 담아서 전달
   call, .apply는 공통점 하나가 있고 차이점 하나가있다.
   공통점 : context객체를 받는다. (따로 공부 필요)
   차이점 : 인자를 전달하는 방식의 차이
   인자를 전달 하는 형태는 다르지만 결과는 동일하다.
   call은 code로 쓰고있고
   sum.call(context, 10,20,30,40);
   apply는 data다. 함수의 호출 인자 값을 외부로 부터 받아서 쓸 수 있어서 훨씬 더 유연하다.

const arr = [10,20,30,40];
sum.apply(null,arr);

• 함수의 변형

1. 화살표 함수 (익명함수로 형태만 확인 context나 prototype 공부 후 다시보기)
   익명함수이기 때문에 변수에 넣어주고 () 호출 뒤에 => 를 넣어준다.

const sumV2 = (a,b,...args) => {
    function sum(...args){
        let s = 0;        
        for(let i = 0; i < args.length; i++){
            s += args[i]
        }
        return s;
    }
}

리턴 값이 코드가 한줄이면 화살표 함수를 한줄로 작성할 수 있다.
아래는 ten이라는 함수가 리턴값 100을 나타내는 것이다.

const ten = () => 100;
<br>
const ten () => { 
	return 100;  // 이렇게 바로 리턴 되는 값이면 {}를 생략하고 위에 한줄코드로 쓴다.
}

인자 x를 받는다고하면 아래처럼 쓰고, 인자가 1개이면 () 를 생략가능하다.

const ten = (x) => 100 + x;
const ten = x => 100 + x; // 괄호 생략
ten(10); // 110을 반환하는 함수가 됨

정리하자면

1. const ten = (x) => 100+x; 동일 (const ten = x => 100 + x;) // 한줄
2. const tes = (x,y) => {
   return 100 + x;
   } // 인자가 2개 코드도 2줄이라면 ()생략 x {}도 생략 x
   화살표 함수로 변형하는 법 연습하기

• 생성기 함수(generator)
  최초의 호출을하면 함수가 실행되지않고 실행 준비상태가 됨
  그리고 객체 하나를 반환하는데 그 객체 안에는 함수가 실행 준비를 마쳤으니
  그 함수를 실행할 도구를 담은 객체를 반환한다.
  그래서 이 도구를 이용해서 함수를 실행 했다 멈췄다가함.
  일단 이런함수도 있구나 하고 알아두기

function* gen() {
    yield 10;
    yield 20;
    return 30;
}
const g = gen(); // g에 gen함수를 컨트롤할 객체를 반환한다. 
이 객체에는 next라는 메소드가 있다.
g.next(); // g라는 객체에 전달된 next메소드를 사용해서 실행한다.
g.next();
g.next();

• 비동기 함수
  추가 공부 예정