제수기 - 제발 수업내용을 기억해라 | 단순 수업정리

함수 선언식

Function Declaration
; 작성할 필요없는 하나의 구문

• 특징:
  - 이름 있는 함수로 작성됩니다.
  - function 키워드를 사용하여 함수 이름과 함께 선언합니다.
  - 호이스팅(hoisting)이 됩니다:
  - 자바스크립트는 코드 실행 전에 함수 선언을 스코프의 최상단으로 끌어올립니다.
  - 따라서 선언 위치와 상관없이 함수 호출이 가능합니다.

실행 결과:
콘솔에서 test1을 호출하면 "test1"이 출력됩니다. 함수 test1은 파일 내 어디에서나 호출 가능합니다.

함수 표현식

Function Expression
함수를 하나의 값처럼 변수에 대입하는 방식

• 특징:
  - 함수를 변수에 대입하는 방식으로 작성됩니다.
  - 익명 함수(anonymous function)가 변수에 저장됩니다.
  - 호이스팅되지 않습니다: 함수 표현식은 변수 선언이 처리된 이후에만 사용 가능합니다.
  - 선언 전에 호출하려고 하면 ReferenceError가 발생합니다.
  

실행 결과:
콘솔에서 test2를 호출하면 "test2"가 출력됩니다. test2는 변수 선언 후에만 호출 가능합니다.

IIFE 💥

Immediately Invoked Function Expression
즉시 실행 함수 표현식
함수 선언과 동시에 호출하는 문법
변수 스코프를 제한하기 위해 사용

• 문법: (function() { ... })();
  - 함수 선언을 괄호(())로 감싸고, 뒤에 호출을 위한 괄호를 추가합니다. 이렇게 하면 함수가 즉시 실행됩니다.
  
• 주요 목적:
  💥스코프를 제한하여 변수의 범위를 로컬로 유지.
  글로벌 변수 오염을 방지.

1. 기본 IIFE 사용

(function () {
    const someName = "IIFE";
    console.log(someName);
})();

• 설명:
  - 익명 함수를 즉시 실행합니다.💥
  - someName 변수는 IIFE 내부에서만 접근 가능합니다. 외부에서 이 변수를 참조할 수 없습니다.

• 출력: IIFE (콘솔에 출력).

2. 스코프 테스트

const someName = "IIFE";
console.log(someName);

• 전역 변수 someName을 선언하여 값 "IIFE"를 출력.
  - 이는 IIFE 내부의 someName 변수와 충돌하지 않습니다. 💥IIFE는 자체 스코프를 가지기 때문입니다.
  
• 출력: IIFE (콘솔에 출력).

3. IIFE에 매개변수 전달

(function (food) {
    console.log(`I Love ${food}~`);
})("🍕🍕🍕");

• IIFE에 매개변수(food)를 전달합니다.
• 함수 실행 시 "🍕🍕🍕"를 전달하여 내부에서 이를 사용합니다.
• 템플릿 리터럴(`)을 사용해 "I Love 🍕🍕🍕~"를 출력.
• 출력: I Love 🍕🍕🍕~ (콘솔에 출력).

화살표함수

Arrow Function
익명함수를 간결하게 작성하는 방법
() => {}
(a, b) => {함수 내용}

test3는 익명 함수를 const 변수에 할당한 함수 표현식(Function Expression)입니다. 내부에서 두 개의 다른 함수(foo와 bar)를 호출하고 있습니다.

• foo("홍길동") 호출:
  foo 함수는 문자열 "홍길동"을 인수로 전달받습니다.
  실행 결과로 foo: 홍길동이 출력됩니다. 이는 foo 함수가 전달받은 값을 로그에 출력하는 기능을 가지고 있다는 것을 암시합니다.

• bar("신사임당") 호출:
  bar 함수는 문자열 "신사임당"을 인수로 전달받습니다.
  실행 결과로 bar: 신사임당이 출력됩니다.
  이는 bar 함수 역시 전달받은 값을 가공하지 않고 바로 출력하는 기능을 가지고 있다는 것을 암시합니다.

실행구문 한줄인 경우, 중괄호 생략가능

const foo = (name) => console.log("foo: ", name);

• 화살표 함수에서 실행 코드가 한 줄인 경우, 중괄호 {}를 생략할 수 있습니다. 중괄호를 생략하면 해당 줄의 결과가 자동으로 반환됩니다(리턴값이 있는 경우).
• 위 코드에서 console.log("foo: ", name);은 한 줄짜리 실행 코드이므로 중괄호를 생략한 것입니다.

매개변수가 하나인 경우, 소괄호 생략가능 (생략하지 말것을 권장)

• 생략 가능 예시:

const foo = name => console.log("foo: ", name);

• 소괄호 사용:

const foo = (name) => console.log("foo: ", name);

• 화살표 함수에서 매개변수가 하나만 있을 때는 매개변수를 감싸는 소괄호 ()를 생략할 수 있습니다.
• 그러나 코드의 일관성과 가독성을 유지하기 위해 소괄호를 생략하지 않는 것이 권장됩니다.
• 따라서 (name)처럼 항상 소괄호를 사용하는 것을 추천합니다.

리턴구문 한줄인 경우, 중괄호, return키워드 생략가능

예시: 중괄호와 return 생략
const bar = (name) => `bar : ${name}`;

• 리턴 구문이 한 줄로 작성되는 경우, 중괄호 {}와 return 키워드를 생략할 수 있습니다.
• 위 코드에서, bar: ${name} 문자열이 자동으로 반환됩니다.

  

1급객체 함수 - 매개인자

JavaScript에서는 함수가 일급 객체(First-Class Object)로 취급됩니다. 이는 함수를 변수에 대입하거나, 다른 함수의 매개변수로 전달하거나, 함수의 반환값으로 사용할 수 있다는 것을 의미합니다.

1. 함수를 변수에 대입할 수 있다.(함수표현식)

const func = () => console.log("HelloWorld");
console.log(func); // () => console.log("HelloWorld")
func();            // HelloWorld

• 함수는 변수에 대입할 수 있습니다. 위 코드에서 화살표 함수 (name) => {}는 변수 func에 저장됩니다.
• console.log(func)는 함수 자체를 출력하고, func()는 함수를 호출합니다.
• 이러한 방식은 함수 표현식(Function Expression)의 전형적인 형태입니다.

2. 함수를 매개인자로 전달할 수 있다. (콜백함수)

const test = (callback) => {
    callback(); // 매개변수로 받은 함수를 호출
};

test(() => console.log("This is a callback!")); // This is a callback!

• 함수는 다른 함수의 매개변수로 전달될 수 있습니다.
• 위 코드에서 test 함수는 매개변수로 전달된 함수를 callback()으로 호출합니다.
• 이처럼 다른 함수의 인자로 전달되는 함수를 콜백 함수(Callback Function)라고 합니다

3. 함수를 반환값으로 사용할 수 있다.

const test4 = () => {
    const func = () => console.log("HelloWorld");
    console.log(func); // () => console.log("HelloWorld")
    func();            // HelloWorld
    return func;       // 함수를 반환
};

const f = test4();  // test4 함수가 반환한 func를 변수 f에 저장
console.log(f);     // () => console.log("HelloWorld")
f();                // HelloWorld

• 함수는 또 다른 함수의 반환값으로 사용할 수 있습니다.
• 위 코드에서 test4 함수는 func 함수를 반환하며, 반환된 함수는 변수 f에 저장됩니다.
• 이후 f()를 호출하면 반환된 함수 func가 실행됩니다.

runner(func);

func를 전달해서 runner함수를 호출

const r = (i) => console.log(`Helloworld${i}`);
runner2(r);

• 역할:
  r은 화살표 함수(Arrow Function)로 정의되었습니다.
  인수 i를 받아서 문자열 "Helloworld" 뒤에 i 값을 붙여 콘솔에 출력합니다.
• 실행:
  runner2(r)를 호출하며, 함수 r을 runner2에 매개변수로 전달합니다.

const runner = (f) => {
    for (let i = 0; i < 10; i++) {
        f(); // 전달받은 함수 f 실행
    }
};

• 역할:
  runner는 함수 f를 매개변수로 받아서 0부터 9까지 반복문을 실행합니다.
  각 반복마다 f()를 호출합니다.
• 제약:
  이 코드에서는 f를 호출할 때 인수를 전달하지 않으므로, f는 호출될 때 값을 받아 처리할 수 없습니다.

const runner2 = (f) => {
    for (let i = 0; i < 10; i++) {
        f(i + 1); // 반복문에서 증가된 i 값을 전달
    }
};

• 역할 :
  runner2는 함수 f를 매개변수로 받아 반복 실행합니다.
  각 반복에서 f를 호출하며, 반복문의 변수 i에 1을 더한 값을 f에 전달합니다.
• 실행 결과:
  runner2(r) 호출 시:
  r이 실행되며, Helloworld1, Helloworld2, ..., Helloworld10이 출력됩니다.
  

1급객체 함수 - 리턴값

이 코드는 클로저(closure)와 고차 함수(high-order function)를 활용하여 동적으로 동작하는 함수를 생성하고 실행하는 구조를 보여줍니다

1. desertMaker 함수

const desertMaker = () => console.log("🍰");

• 설명:
  desertMaker는 화살표 함수로 정의되어 있습니다.
  호출 시, 바로 "🍰"를 콘솔에 출력합니다.
• 실행 결과:

console.log(f); // undefined (콘솔에 출력된 값은 없음, 이미 desertMaker는 실행됨)
f(); // TypeError: f is not a function

2. customDesertMaker 함수

const customDesertMaker = (desert) => {
    return (name) => console.log(`${name}에게 ${desert}를 보낸다.`);
};

• 설명:
  customDesertMaker는 고차 함수로, 다른 함수를 반환합니다.
  호출 시, desert(디저트 이름)를 고정하며, 반환된 함수는 name(받는 사람 이름)을 받아 콘솔에 메시지를 출력합니다.
• 사용 예시:

const printCandy = customDesertMaker("🍬");
printCandy("길동"); // "길동에게 🍬를 보낸다."

const printIcecream = customDesertMaker("🍦");
printIcecream("사임당"); // "사임당에게 🍦를 보낸다."

1. 클로저(Closure)
   customDesertMaker는 외부 함수의 변수를 내부 함수에서 유지할 수 있는 클로저를 생성합니다.
   내부 함수에서 desert 값을 기억하고, 이를 활용하여 동적으로 메시지를 출력합니다.
2. 고차 함수(High-Order Function)
   customDesertMaker는 함수를 반환하는 고차 함수입니다.
   반환된 함수는 name을 받아 디저트를 전달하는 역할을 수행합니다.
3. 동적 함수 생성
   다양한 디저트를 처리하는 함수를 동적으로 생성하여 재사용성을 높입니다.