함수

★함수는 하나의 데이터이다!

1. 선언과 표현

1. 선언 : 호이스팅 O
2. 표현 : 호이스팅 X

// 함수 선언 : function키워드로 시작하고 그 뒤에 이름이 있다. 기명 함수이다.
function abc() {

}

// 함수 선언 예시, 호이스팅이 가능
hun();
function hun() {
  console.log('Hun');
}


// 함수 표현 : 함수를 어딘가에(변수) 할당하고 있다. 익명 함수이다.
const abc = functon () {

}

// 함수 표현 예시, 호이스팅이 안됨
const abc = {
  fn:function () {
    console.log('FN')
  }
}
abc.fn();


//기명함수는 기명에 이름이 지워진다.
const a = function abc() {
  console.log('ABC');
}
a()
abc() //  reference Error

2. 매개변수와 인수

매개변수 : 인수를 받는 변수
인수 : 함수에 직접 넣는 값

function sum(a, b) {  // 2. 매개변수에 1번에서 온 인수들이 담긴다.
  return a + b; //  3. return을 통해 값을 함수 밖으로 내보낸다.
}
const res = sum(2, 4);  // 1. 함수 호출(실행)
console.log(res);  // 4. return 된 값 6 출력

res = sum('Hello ', 'world!');
console.log(res.slice(6,11)); // world

// 체이닝으로 형태 바꾸기(method Chaining)
// 메소드 체이닝 : 메소드를 이어서(붙혀서)사용하는 방법
console.log(sum('Hello ', 'world!').slice(6, 11));

3. new Function()

생성자 함수 호출로 함수를 만드는 법!
근데 자주 안쓴다.

// 생성자 함수, Function 클래스, 객체, () : 호출
// const sum = new Function('a','b','console.log(a + b)') 
// sum(2, 4);

4. 반환과 종료

return
undefined

return 키워드를 사용하면 함수가 종료된다!

function sum2() {
  // 1. return x
  // 2. return 추가, return값을 반환하고 종료해라!
  return 456;
  console.log(123); // 1. 123
}
console.log(sum2());  // 1. undefined
					  // 2. 456

5. 매개변수 패턴

• 매개변수 기본 값 : 미리 기본 값을 지정하는 방법
  아래의 예시를 참고하자.

function sum3(a,b) {
  return a + b;
}
console.log(sum(2, 4)); //6
console.log(sum(4));  // NaN, b에는 들어간 값이 없으므로 undefined, 즉 숫자+undefined = 숫자로 표현이 안됨 = NaN

// 매개변수 기본 값: 위와 같이 인수가 안들어 갔을 경우를 대비해 숫자 데이터를 나오게 하려고 파라미터 자체에 기본 값을 미리 지정하는 방법이 있다.
// ex) sum3(a=2, b=3)


// 객체데이터를 넣었을 경우(리터럴 방식)
const user = {
  name: 'Hun',
  age: 85
};
function getName(user) {  // parameter의 user는 객체로 선언한 user가 아니다.
  return user.name; // user는 getName의 user를 바라보고 있다.
};
console.log(getName(user)); // Hun

• 구조 분해 할당(Destrucuring assignment) : 매개변수를 구조 분해하여 변수를 할당하는 방법

function getName({name, age}) { // 매개변수를 구조분해, key 이름을 그대로 변수로 할당, key이름은 같아야함!
// 바꾸려면 변수선언 or name: email이런식으로 해줘야함
  return [name, age]; 
};
console.log(getName(user)); // ['Hun', 85]

• 나머지 매개변수(Rest parameter) : ...Rest parameter

function sum4(...rest) {  // 나머지 매개변수 작성 방법 ...매개변수이름, ...은 전개 연산자(spread operator)
//function sum4(a, b, ...rest) {  // 이렇게도 사용 가능
  // console.log(rest);  // 나머지 매개변수를 사용하면 [1, 2, 3] 배열데이터 타입이 된다.
  
  // return rest.reduce((acc, cur) => {
  //  return acc + cur
  // })
  //
  //
  //
  return a + b + c;
}

console.log(sum4(1, 2, 3));   // 6

• arguments 객체 : 함수로 들어오는 모든 인수를 가지고 있는 암시적인 데이터(변수, 객체), 선언을 하지 않아도 출력이 가능하다.
  그냥 나머지 매개변수를 사용해라..(명시적이므로 권장됨)

function sum5() {
  // 유사 배열로 출력이 된다.
  console.log(arguments);
  
  // arguments는(유사 배열은) reduce 함수를 사용할 수 없다.
  // reduce에 익명함수 데이터가 인수로 들어감 : callback함수
  
  // return arguments.reduce(function(acc, cur) {
  //   return acc + cur;
  // })
  let res = 0;
  for (const item of arguments) {
    res += item;
  }
  return res;

}

console.log(sum5(1, 2, 3, 4, 5, 6, 7, 8, 9));

6. IIFE

Immediately-Invoked Function Expression
즉시 실행 함수(표현) : 익명 함수를 선언하면서 실행할 때 사용한다.

// ;은 종료의 의미(; 사용 안하는 경우를 위해)
;(익명함수)()
;(익명함수())

(function () { 
  console.log(123);
});

7. 호이스팅

함수 선언에서만 생긴다.
함수 선언을 뒤에 호출을 앞에 하는 것을 의미한다.
활용하는 이유는 코드를 볼 때 중요 코드, 로직들을 먼저 보고 그 다음 함수를 보는게 효율적이라 활용한다.

abc();
function abc() {
	console.log(123);
}

8. Callback

콜백 함수(Callback function) 줄여서 콜백이라 부른다.
콜백은 함수의 인수로 사용되는 함수

call : 함수 호출

function callFn(callback) { // 2.callback에 함수 데이터인 sum이 들어감
  callback(2, 4); // 3. callback은 sum이므로 sum(2,4)를 실행한다.
}
callFn(sum);  // 1. sum은 인수(데이터) -> callback으로 들어감

//--------------------------------------//
function abc(callback) {
  callback()
}

// 8-1. abc함수 호출, 함수의 인수로 들어감 : 콜백
abc (function () {
  console.log('ABC');
})


// setTimeout(함수, 지연시간)
function abc1() {
  console.log('ABC')
}

setTimeout(abc1(), 1000);
// abc()는 "호출"이며 반환된 데이터 값이 나온다
// setTimeout(undefined, 1000);
// 즉 abc1(함수 데이터)를 써야한다. 콜백함수

// 난이도 up : 스스로 이해해 보기
function plus(a, b, cb) {
  return cb(a, b)
}

const resttt = plus(2, 5, function (a, b) {
  return a + b
})

console.log(resttt) // 7

// 난이도 up2 : 스스로 이해해 보기
function plus(a, b, cb) {
  setTimeout(function() {
    cb(a+b)
  }, 1000)
}


plus(2, 5, function(res) {
  console.log(res);
})