[JS]함수의 다양한 정의 방법

1. 기본 함수 선언

function 키워드를 사용하여 함수 이름과 함께 정의하는 방법이다. 이 방식은 호이스팅(hoisting)되어, 선언 이전에 호출할 수 있다.
호이스팅(hoisting): 변수나 함수의 선언부가 해당 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 현상이다. 함수 선언문은 완전히 호이스팅되므로, 호출 위치와 상관없이 사용할 수 있다.

greet(); //출력: (≧∇≦)ﾉ
//선언 이전에 호출되었지만 호이스팅 덕분에 정상적으로 동작

function greet() {
    console.log("(≧∇≦)ﾉ");
}

greet(); //출력: (≧∇≦)ﾉ

2. 변수에 함수 할당

함수를 변수에 할당하여 정의하는 방식이다. 이 방법은 익명 함수와 이름 있는 함수로 나뉜다. 함수 표현식은 호이스팅되지 않으므로, 선언 이후에만 호출할 수 있다.
2-1. 익명 함수
이름 없이 정의된 함수를 변수에 할당하는 방식이다.

//함수 이름 없이 정의(익명 함수)
const greet = function () {
    console.log("(≧∇≦)ﾉ");
};
greet(); //출력: (≧∇≦)ﾉ

2-2. 이름 있는 함수
이름이 있는 함수를 변수에 할당하는 방식이다. 함수의 이름은 함수 내부에서만 호출할 수 있다.

const sad = function sadFunction() {
    console.log("(┬┬﹏┬┬)");
};
sad(); //출력: (┬┬﹏┬┬)

sadFunction(); //오류: 외부에서 호출 불가능

3. 익명 함수 활용

3-1. 즉시 실행 함수
정의와 동시에 실행되는 함수이다. 일회성 작업이나 캡슐화가 필요한 경우에 사용된다.

(function () {
    console.log("(┬┬﹏┬┬)");
})(); //출력: (┬┬﹏┬┬)

3-2. 콜백 함수
다른 함수의 인자로 전달되어 특정 작업이 완료된 후 실행되는 함수이다.

setTimeout(function () {
    console.log("2초 후 실행됩니다!");
}, 2000); //2초 후 출력: 2초 후 실행됩니다!

document.getElementById("btn").addEventListener("click", function () {
    console.log("버튼이 클릭되었습니다!");
});

4. 화살표 함수

//매개변수가 하나일 때 괄호 생략 가능
const greet = name => {
    console.log(`안녕, ${name}!`);
};

//매개변수가 여러 개일 때 괄호 필수
const calculate = (a, b) => {
    return a + b; 
};

//매개변수가 없을 때 괄호 필수
const face = () => { 
    console.log("(•_•)"); 
};

//실행문이 하나일 때 중괄호 생략 가능
const face = () => console.log("(•_•)"); 

//실행문이 하나인데 그게 return 문일 때 중괄호 {}와 return 키워드를 모두 생략 가능
const calculate = (a, b) => a * b;

//실행문이 여러 개일 때 중괄호 필수
const calculate = (a, b) => {
    const sum = a + b; 
    const product = a * b; 
    console.log(`합계: ${sum}, 곱: ${product}`); 
};

//실행문이 여러 개이고 특정 값을 return 할 때 중괄호 필수
const calculate = (a, b) => { 
    const sum = a + b; 
    console.log(`합계: ${sum}`); 
    return sum; 
};