[javascript] 함수 3 / 함수의 종류 (일반, 즉시실행, 생성자 제너레이터, 비동기(Async), 콜백(callback) .. 함수)

함수의 종류

• 함수의 종류는 함수가 어떤 역할을 하거나, 어떤 방식으로 동작하는지에 따라 분류

---

일반 함수

• 가장 기본적인 함수로, 특정 작업을 수행하기 위해 선언하는 함수.
• function 키워드로 선언함.
• 호출될 때마다 함수 내부 코드가 실행됨
• 매개변수를 받고, 값을 반환할 수 있음
• this 바인딩은 호출하는 방식에 따라 달라짐 (객체 메서드로 호출하면 객체, 일반 호출 시 전역 객체 또는 undefined).

// [문법]
function 함수명(매개변수1, 매개변수2) {
  // 실행할 코드
  return 값; // 선택적
}

// 호출 예시
함수명(값1, 값2);

function greet() {
  console.log('안녕!');
}

greet();  // 함수 호출

---

즉시 실행 함수

• 선언하자마자 바로 실행되는 함수.
• 주로 변수의 은닉화, 코드 블록 스코프 확보에 사용.
• 보통 전역 변수 오염을 막거나 초기화 코드 작성 시 활용

자세한 내용 아래 확인

[javascript] 함수 2 / 함수의 선언 방식

---

생성자 함수 (Constructor Function)

• 객체를 생성하고 초기화하는 특별한 함수
• 사용 목적 : 비슷한 형태의 객체를 여러 개 쉽게 만들기 위해, 객체의 구조, 속성 동작을 미리 정해 일관성 유지
• ES6 기반 작업을 한다면 일반적으로 생성자 함수 대신 클래스 문법을 사용하는 게 좋음

특징

• 함수 이름은 보통 대문자로 시작. (Person, Car 등)
• new 키워드를 붙여서 호출해야 새 객체가 만들어짐.
• 생성자 함수 내부에서 this는 새로 생성되는 객체를 가리킴
• this에 속성이나 메서드를 붙여서 새 객체에 넣어줄 수 있음
• 생성자 함수는 객체 설계도 같은 역할을 함.

// [문법]
function 생성자이름(매개변수1, 매개변수2) {
  this.속성 = 매개변수1;
  // 기타 초기화 코드
}

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function () {
    console.log('안녕, 나는 ' + this.name + '야.');
  };
}

// 생성자 함수로 객체 생성
const alice = new Person('Alice', 25);
const bob = new Person('Bob', 20);
console.log(alice); // ⇒ Person {name: 'Alice', age: 25, sayHello: ƒ}
console.log(bob); // ⇒ Person {name: 'Bob', age: 20, sayHello: ƒ}

---

제너레이터 함수 (Generator Function)

• 함수 실행을 중간에 멈췄다가 재개할 수 있는 함수
• ES6(2015)에 처음 도입된 기능
• ES2017(ES8)부터는 async / await 문법이 도입되어, 대부분 비동기 처리할 때 async/await으로 사용 
• 활용 사례 : 큰 데이터셋을 조금씩 처리할 때, 무한 시퀀스 생성, 비동기 흐름 제어 (async/await 이전에 많이 쓰임), 상태 머신 구현

특징

• 함수 선언할 때 function* (별표 * 붙임) 사용
• 함수 내부에서 yield 키워드를 써서 값을 하나씩 내보내고 함수 실행을 일시 중지
• 필요할 때 다시 실행을 재개할 수 있음
• 호출하면 이터레이터(iterator) 객체를 반환함
• 반복자 패턴, 비동기 처리, 상태 머신 등에 활용 가능

✓ 제너레이터 함수는 책갈피가 있는 책과 같음
    읽다가 잠깐 멈추고 책갈피를 끼워 놓으면, 다음에 읽을 때 그 자리부터 계속 읽을 수 있는 것 처럼
     yield가 책갈피 역할을 하고, next()가 책 읽기 재개 명령과 유사

// [문법]
function* 함수이름() {
  yield 값1;
  yield 값2;
  // 반복 혹은 중단 코드
}

function* countUp() {
  yield 1;
  yield 2;
  yield 3;
}

const generator = countUp();

console.log(generator.next());  // { value: 1, done: false }
console.log(generator.next());  // { value: 2, done: false }
console.log(generator.next());  // { value: 3, done: false }
console.log(generator.next());  // { value: undefined, done: true }

/*
yield는 함수 실행을 멈추고 값을 바깥으로 내보냄
next()를 호출하면 멈춘 곳부터 다시 실행 시작해서 다음 yield까지 진행
*/

---

비동기 함수 (Async Function)

• 내부에서 시간이 걸리는 작업(예: 서버에서 데이터 받아오기)을 기다렸다가 처리할 수 있게 도와주는 함수
• async 키워드를 붙여 선언
• 시간이 오래 걸리는 작업을 처리하는 동안 프로그램이 멈추지 않고 다른 일을 계속할 수 있게 하기 위해 필요

개념	설명
async 함수	- 함수 앞에 async 키워드를 붙이면, 함수가 자동으로 프로미스(Promise)를 반환함
await 키워드	- 함수 내부에서 await 키워드를 써서, 프로미스가 해결될 때까지 기다렸다가 다음 코드를 실행할 수 있음. - await은 오직 async 함수 안에서만 사용 가능
에러 처리	try/catch 구문으로 간단하게 가능
용도	서버 요청, 파일 읽기, 타이머 등 시간이 걸리는 작업 처리에 주로 사용

// [문법]
async function 함수이름() {
  const 결과 = await 비동기작업(); 
  return 결과;
}

/*
  async function 함수이름()
  - async 키워드는 이 함수가 비동기 함수임을 선언하는 역할.
  - 이 함수는 항상 프로미스(Promise)를 반환
  - 함수 내부에서 await 키워드를 사용할 수 있게 해줌.
   
   const 결과 = await 비동기작업(); 
   - await는 프로미스가 처리될 때까지 기다리라는 의미.
   - await가 붙으면, 자바스크립트는 비동기작업()이 끝나
      결과가 올 때까지 이 함수 실행을 잠시 멈춤.
   - 그리고 프로미스가 해결된 값(성공 결과)을 결과 변수에 담아줌.
    
    return 결과;
   - async 함수는 반드시 프로미스를 반환함.
   - 여기서 return 결과;는 결과 값을 담은 프로미스를 반환하는 것과 같음.
    즉, 이 함수를 호출하면 Promise<결과> 형태로 결과를 받을 수 있음.
*/

/* ex) 서버에서 데이터 받아오기 */
async function fetchUser() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
    const user = await response.json();
    console.log(user.name);  // 사용자 이름 출력
  } catch (error) {
    console.error('에러 발생:', error);
  }
}

fetchUser();

/*
- fetch()는 서버에서 데이터를 받아오는 비동기 함수(프로미스 반환)
- await fetch()는 데이터가 도착할 때까지 기다림
- await response.json()도 비동기 처리 결과를 기다림
- try/catch로 에러를 잡아서 처리 가능

*/

왜 async/await를 쓰는 게 좋을까?

장점	설명
코드가 간결하고 읽기 쉬움	동기 코드처럼 순서대로 쓴 것처럼 보여서 가독성 높음
에러 처리 쉬움	try/catch 구문으로 간단하게 에러 핸들링 가능
프로미스 체인보다 직관적임	.then(), .catch() 대신 깔끔하게 작성 가능
복잡한 비동기 흐름 관리에 용이	여러 비동기 작업을 순차적 또는 병렬로 쉽게 처리 가능

 

---

콜백 함수 (Callback Function)

• 다른 함수의 인자로 전달되어, 특정 작업이 끝난 후 실행되는 함수

[javascript] 콜백 함수(callback function)

 

---