🛠 JavaScript Essential - 3. 함수

🐱‍🏍 목표

• JavaScript에서 사용되는 함수 형태를 알아볼 수 있다.

---

📌 1. 기본형 함수 & 함수 정의

• 코드를 활용하기 위한 묶음
• 함수 표현식 : 런타임 시, 호이스팅으로 인해, 코드 실행전에 로드된다.
• 함수 선언식 : 변수 형태로 저장되어, 코드가 라인에 접근 시, 로드된다.

function myFn(x) {} // 함수 표현식
const myFnV2 = function () {} // 함수 선언식

---

📌 2. 다양한 JavaScript 함수

1) 익명 함수 (Anonymous function)

• 자바스크립트는 함수를 값으로 취급할 수 있다.
• 변수에 넣어서 사용하는 함수

const myFn = function () {
 return 100;
}

2) 즉시 실행 함수 (IIFE: Immediately invoked function expression)

• 함수 생성 후, 바로 실행
• 한번만 실행할 수 있는 함수
• ES5 모듈

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

---

3) 인자에 따른 호출 방법

• 자바스크립트 선언되지 않은 인자도 호출 부분에서 넘길 수 있다.

const myFn = function (a, b) {
  return 100;
}
const arr = [10,20,30];

myFn(10, 20, 30); // (1)
myFn.call(null, 10,20,30); // (2)
myFn.apply(null, arr); // (3)

• (1) 일반적인 호출 방법
• (2) fn.call(context, args);
• (3) fn.apply(context, [...args]);

---

4) 가변 함수 (Argument function)

• 인자로 선언되지 않은 인자를 받기 위함
• arguments 형태로 사용됨
• 하위 예제는 Best Practice

function sum(a,b, ...args) {}

---

5) 화살표 함수 (Arrow function)

• 익명 함수 형태로 사용됨
• context, prototype 부분에서 일반 함수와 차이를 보임

const myFn = () => 'success !!!';

---

6) 생성기 함수 (Generator function)

• 기존 함수 : 선언, 호출로 동작 끝
• 생성기 함수 : 선언, 준비, 실행, 정지

function* gen() {
  yield 10;
  yield 20;
  return 30;
} // (1) 선언

const g = gen(); // (2) 준비

g.next(); // 3-1) 실행: 10
g.next(); // 3-2) 실행: 20
g.next(); // 4) 정지: 30

---

7) 비동기 함수 (Asychronous function)

• Promise 형태가 선행 학습이 되어야 함
• Promise 형태를 async / await로 처리

async function myTask() {}

---

참고

패스트캠퍼스 김민태의 프론트엔드 아카데미