함수(Function)

💁‍♀️ 함수(Function)란,
객체 타입의 값으로 다른 객체처럼 속성 및 method를 가질 수 있기에 일급(first-class) 객체이며 인자를 가질 수 있는 코드 블록

---

🙋‍ 함수의 특징

• 함수는 값이므로,
  • 변수안에 담길 수 있음 (함수 리터럴로 생성한 함수 객체를 변수에 할당 가능)
  • 객체의 속성안에 method로 담길 수 있음
  • 다른 함수의 인자값으로 전달될 수 있음
  • 다른 함수의 return값으로도 사용 가능
  • 배열의 값으로도 사용 가능

---

👀 함수(function)

1) 함수 선언문

함수 선언문에서는 함수의 이름 생략 불가

function hello(name) {
    return `${name}님 안녕하세요`;
}

// 함수 호출
console.log(hello('효연'));

2) 함수 표현식

함수 표현식에서는 함수명 생략 가능

[1] 함수명 생략

// 변수에 할당하면서 함수 생성
var hello = function (name) {
    return `${name}님 안녕하세멍`;
}

console.log(hello('치즈'));

[2] 함수명 명시

함수 표현식에서 함수명을 명시해도 문제 X

var calc = function add(a, b) {
    return a + b;
}

◼ 단, 함수 호출은 식별자로 이루어지며 함수명으로는 호출 X

어짜피 calc 변수로 호출하니, 함수명(add)을 생략하는 것

console.log(calc(10, 20));
// console.log(add(10, 20)); // ReferenceError: add is not defined

3) 함수 호이스팅 (function hoisting) 🔥중요🔥

💁‍♀️ 함수 호이스팅 (function hoisting)이란,
함수 선언문이 코드의 선두로 끌어올려진 것 처럼 동작하는 것

console.log(hello('효연'));
// console.log(hi('치즈')); // TypeError: hi is not a function
// hi가 함수임이 평가되기 이전에 호출하면 TypeError


// 함수 선언문
function hello(name) {
    return `${name}님 어서오십쇼. 극진히 모시겠읍니다`;
}

// 함수 표현식
var hi = function(name) {
    return `${name} 안뇽?`;
}
console.log(hi('치즈')); // 식은 함수 표현식 이후에 출력해야함 (함수 호이스팅 효과 X)

📌 Ref.

* 함수 선언문은 런타임 이전 자바스크립트 엔진에 의해 먼저 실행.
  따라서 함수 선언문 이전에 '함수를 참조 및 호출 가능'
* 변수 할당문의 값은 할당문이 실행되는 시점, 즉 런타임에 평가되므로 함수 표현식의 리터럴도 
  할당문이 실행되는 시점에 평가되어 함수 객체가 됨
  함수 표현식으로 정의한 함수는 반드시 함수 표현식 이후에 참조하고 호출해야함

---

👀 함수의 호출

1) 매개변수와 인수

[1] 모든 인수는 암묵적으로 arguments 객체의 프로퍼티로 보관

function hello(name) {

    console.log(arguments); // 전달받은 모든 인자 출력

    return `${name}님 방가방가햄토리`;
}
// 매개변수는 함수 바디 외부에서 참조 X
// console.log(name);

var result = hello('효연');
console.log(result);

[2] 함수는 매개변수의 개수와 인수의 개수가 일치하는지 체크 X

/* 인수가 부족해서 할당되지 않은 매개변수의 값은 undefined */
result = hello();
console.log(result); // undefined님 방가방가햄토리 출력

/* 매개변수보다 인수가 더 많은 경우, 초과된 인수는 무시 */
result = hello('치즈', '수민');
console.log(result); // 치즈님 방가방가햄토리 출력

[3] 인수를 전달하지 않거나 undefined를 전달하면 매개변수 기본 값이 동작

function hi(name = '아무개') { // '아무개'로 기본값 설정
    return `Hey~ ${name}`;
}

result = hi('치즈');
console.log(result);    // Hey~ 치즈
result = hi();
console.log(result);    // Hey~ 아무개 => 인자를 전달하지 않았을 때 기본값 출력

2) 반환문

[1] 반환 타입이 있는 함수

function hello(name) {

    return `${name}님 안녕하심까!`;
    // 반환문 이후의 문은 실행되지 않고 무시 (Unreachable code)
    // console.log(name);
}

console.log(hello('치즈'));

[2] 반환 타입이 없는 함수

function func() {
    console.log('함수가 호출 되었습니다.');
    // return; // 반환 값을 명시적으로 지정하지 않으면 undefined 반환
    // 반환 값이 없을 시 반환문 생략 가능하며 이 때도 암묵적으로 undefined 반환
}

console.log(func()); // 반환값이 없으므로 undefined 출력

---

👀 화살표 함수(arrow function) 🔥중요🔥

💁‍♀️ 화살표 함수(arrow function)란,
function 키워드 대신 화살표를 사용해 보다 간략하게 함수를 선언하는 방법

• 화살표 함수는 항상 익명함수로 정의하며 본문이 한 줄인 함수를 작성할 때 유용

1) 화살표 함수 기본 문법

[1] 기존 function 정의

message = function() {
    return 'Hello Cheese!';
};
console.log(message());

[2] function 키워드 생략

message = () => {
    return 'Arrow Function!';
};
console.log(message());

[3] 명령문이 하나만 있을 경우 중괄호 생략 가능

message = () => 'Arrow Functions are so simple!';
console.log(message());

[4] 매개변수가 있을 경우

message = (val1, val2) => 'We' + val1 + val2;
console.log(message(" are parameters", '!!'));

[5] 매개변수가 하나이면 소괄호를 생략

매개변수가 없거나 여러 개일 경우 생략 불가

message = val1 => 'Just' + val1;
console.log(message(' a parameter'));

---

👀 여러 종류의 함수

1) 즉시 실행 함수

💁‍♀️ 즉시 실행 함수란,
함수 정의와 동시에 즉시 호출이 되는 함수로 단 한번만 호출되며 재호출 불가

• 즉시 실행되는 함수는 반드시 그룹 연산자()로 감싸야함
• 즉시 실행 함수 내에 코드를 모아두면 혹시 다른 영역에 있을수도 있는 변수나 함수의 이름 충돌을 사전에 방지 가능(영역분리)

// 함수 이름이 없는 익명(Anonymous) 함수를 사용하는 것이 일반적
(function() {
    console.log('익명 즉시 실행함수! 함수 정의와 동시에 호출')

})(); // (); : 즉시 실행(호출)

(function hello(name) { // 재호출이 불가하므로 함수명(hello)은 의미가 없음
    console.log('기명 즉시 실행함수! 함수 정의와 동시에 호출!')
    console.log(`${name}님 Hi!`)
    
})('치즈'); // 매개변수부가 있을 시, 인자를 이 소괄호에 전달

// hello('효연'); 
// ReferenceError: hello is not defined => 정의 되어있지 않아 재호출 불가

2) 재귀 함수

💁‍ 함수가 자기 자신을 호출하는 것을 재귀 호출이라고 하며, 이 재귀 호출을 수행하는 함수인 재귀 함수는 반복되는 처리를 위해 사용

[1] factorial(!)함수 생성

// n! = 1 * 2 * ... * (n-1) * n;
function factorial(n) {
    // n이 1 이하일 때 1을 반환하면서 재귀호출 stop
    if(n <= 1) return 1;
    
    // 재귀 호출
    return n * factorial(n - 1);
}

console.log(factorial(1)); // 1 (1)
console.log(factorial(2)); // 2 (2 * 1)
console.log(factorial(3)); // 6 (3 * 2 * 1)
console.log(factorial(4)); // 24 (4 * 3 * 2 * 1)
console.log(factorial(5)); // 120 (5 * 4 * 3 * 2 * 1)

3) 중첩 함수

💁‍ 함수 내부에 정의된 함수를 중첩 함수 또는 내부 함수라고 하며, 중첩 함수를 포함하는 함수는 외부 함수.

• 일반적으로 중첩 함수는 자신을 포함하는 외부 함수를 돕는 헬퍼 함수의 역할

function outer() {
    var outerVal = '외부 함수';

    function inner() { // 내부 함수 : 외부 함수의 helper 역할
        var innerVal = '내부 함수';
        console.log(outerVal + "," + innerVal); 
        // 외부 함수의 변수를 내부 함수에서 참조 가능
    }

    inner(); 
    // outer함수 안에서 inner함수를 호출해야 아래의 outer함수 호출이 정상 작동
}

outer();

4) 콜백 함수 & 고차 함수

💁‍♀️ 콜백 함수 & 고차 함수란,

• 콜백 함수 : 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수 (고차 함수에 전달되어 헬퍼 함수의 역할)
• 고차 함수 : 매개변수를 통해 함수의 외부에서 콜백 함수를 전달 받은 함수

[1] 콜백 함수 & 고차 함수의 활용

// 전달 받는 값을 증가 시켜주는 함수 (콜백 함수)
function increase(value) {
    return value + 1;
}

// 전달 받은 값을 감소 시켜주는 함수 (콜백 함수)
function decrease(value) {
    return value - 1;
}

// 전달 받은 함수에 전달 받은 값을 적용 시켜주는 고차 함수
function apply(func, value) { // (선택한 함수명, 값)
    // 고차 함수는 매개변수를 통해 전달 받은 콜백 함수의 호출 시점을 결정해서 호출
    // 콜백 함수는 고차 함수에 의해 호출 되며 이 때 고차 함수는 필요에 따라 콜백 함수에 인수 전달 가능
    return func(value);
}

// 고차 함수로 콜백 함수를 전달하며 호출
console.log(apply(increase, 5));
console.log(apply(decrease, 5));

[2] 콜백 함수가 고차 함수 내부에서만 호출 될 경우

콜백 함수를 익명 함수 리터럴로 정의하면서 바로 고차 함수에 전달하는 것이 일반적

console.log(apply(function(value){ return value + 1; }, 10)); // 굳이 increase 함수를 만들 필요 X

// Arrow function도 활용 가능
console.log(apply(value => value - 1, 10));

📌 Ref.

*  함수의 변하지 않는 공통 로직은 미리 정의해두고 경우에 따라 변경되는 로직은 추상화해서 
함수의 외부에서 내부로 전달하는 방식. 콜백 함수는 비동기 처리(이벤트, 타이머, ajax)에서 
활용되는 중요한 패턴이며 배열 고차 함수에서도 사용
* ex) 
console.log([3, 1, 4, 2, 5].sort((left, right) => right - left)); 
// (left, right) => right - left를 sort(고차 함수)에 전달하여 기준 설정

5) 순수 함수 & 비순수 함수

💁‍♀️ 순수 함수 & 비순수 함수 란,

• 순수 함수 : 외부 상태에 의존하지도 않고 변경하지도 않는 함수
• 비순수 함수 : 외부 상태에 의존하거나 외부 상태를 변경하는 함수
• 👉 함수 외부 상태의 변경을 지양하는 '순수 함수'를 사용하는 것이 좋음

var cnt = 0;

// 순수 함수는 최소 하나 이상의 인수를 전달 받으며 인수의 불변성을 유지
function increase(n) {
    return ++n;
}

// 순수 함수가 반환한 결과 값을 변수에 재할당 해서 상태를 변경
cnt = increase(cnt);
console.log(cnt); // 1

// 비순수 함수는 외부 상태에 의존하며 외부 상태를 변경
function decrease() {
    return --cnt;
}

// 비순수 함수는 외부 상태(cnt)를 변경하므로 상태 변화를 추적하기 어려움
decrease(); // 호출
console.log(cnt); // 0

---

👀 일급 객체 🔥중요🔥

💁‍♀️ 일급 객체의 조건
[1] 무명의 리터럴로 생성 가능 (즉, 런타임에 생성 가능)
[2] 변수나 자료구조(객체, 배열 등)에 저장 가능
[3] 함수나 매개변수에 전달 가능
[4] 함수의 반환값으로 사용 가능

• 함수가 일급 객체라는 것은 함수를 객체와 동일하게 사용할 수 있다는 의미
• 객체는 "값"이므로 함수는 값과 동일하게 취급
• 변수 할당문, 객체의 프로퍼티 값, 배열의 요소, 함수 호출의 인수, 함수 반환문 등에서 사용 가능

// [1] 무명의 리터럴로 생성 가능
// [2] 변수에 저장 가능
var hello = function() { // function() { return 'Hi there!';} : 함수의 리터럴(무명)
    return 'Hi there!';
};

// [2] 객체에 저장 가능
var obj = { hello }; // var obj = { 'hello' : hello }; : 원래 형태

// [3] 함수의 매개변수에 전달 가능
function repeat(func, count) {
    for(var i = 0; i < count; i++) {
        console.log(func());
    }
    // [4] 함수의 반환값으로 사용 가능
    return function() { // repeat 호출 시, 이 함수 리턴
        console.log(`${count}번 반복 완료`);
    }
}
var returnFunc = repeat(obj.hello, 5); // repeat(obj.hello, 5) : Hi there! 다섯 번 출력
returnFunc(); // '5번 반복 완료' 출력

>>> repeat을 호출하고 리턴 받은 것이 담긴 returnFunc변수를 함수 호출하듯이 호출(함수를 담은 변수이므로)

---