JavaScript 함수 유형 3가지

📌 JavaScript 함수 유형 3가지 설명

JavaScript에서는 세 가지 주요 함수 선언 방식이 있어.
각각의 차이점과 특징을 이해하면 코드 작성 시 더 유연하게 활용할 수 있어! 🚀

---

1️⃣ 일반 함수(함수 선언문, Function Declaration)

function func01() {
    return 'Hello, world!';
}

✅ 특징

✔ function 키워드를 사용하여 선언.
✔ 호이스팅(hoisting) 가능 → 함수 선언 이전에도 호출할 수 있음.
✔ this는 함수가 호출된 방식에 따라 달라짐.

💡 호이스팅이란?

JavaScript에서 함수 선언문은 코드가 실행되기 전에 메모리에 미리 저장됨
따라서 함수를 정의하기 전에 호출해도 실행 가능!

console.log(func01()); // 정상 동작
function func01() {
    return 'Hello, world!';
}

✔ 실행 가능!

---

2️⃣ 함수 표현식(Function Expression)

const func02 = function() {
    return 'Hello, everyone!';
};

✅ 특징

✔ const, let, var와 함께 변수에 익명 함수를 할당.
✔ 호이스팅 불가능 → 함수 선언 전에 호출하면 오류 발생.
✔ this는 호출된 방식에 따라 다름.

❌ 호이스팅 불가능한 예시

console.log(func02()); // ❌ ReferenceError: Cannot access 'func02' before initialization
const func02 = function() {
    return 'Hello, everyone!';
};

✔ 실행 불가능!

---

3️⃣ 화살표 함수(Arrow Function)

const func03 = () => {
    return 'Hello, arrow function!';
};

✅ 특징

✔ ES6(ECMAScript 2015)에서 도입된 최신 함수 표현 방식
✔ function 키워드를 사용하지 않고 =>(화살표)로 정의
✔ 호이스팅 불가능
✔ this가 호출된 방식과 상관없이, 항상 상위 스코프의 this를 유지

🔥 화살표 함수의 단축 문법

// 블록 없이 한 줄만 있을 경우 return 생략 가능!
const func03 = () => 'Hello, arrow function!';

---

🛠 3가지 함수 유형 비교

함수 유형	선언 방식	호이스팅 가능 여부	this 바인딩
함수 선언문	function func() {}	✅ 가능	호출 방식에 따라 다름
함수 표현식	const func = function() {};	❌ 불가능	호출 방식에 따라 다름
화살표 함수	const func = () => {};	❌ 불가능	항상 상위 스코프의 this 유지

---

🎯 결론

• 기본적으로 함수 선언문을 사용하면 호이스팅이 가능하여 유용할 수 있음.
• 변수에 함수를 할당할 경우 함수 표현식을 사용 (콜백 함수, 이벤트 핸들러 등에서 자주 활용됨).
• 화살표 함수는 this를 변경하지 않고 유지하므로 클래스나 콜백 함수에서 유용.

🚀 실무에서는 화살표 함수가 가장 많이 사용됨!
특히 React에서는 ()=>{} 형태의 화살표 함수가 기본적인 코드 스타일이야! 😊

function App(){ //main 메서드와 같은 역할을 한다고 보면 이해하기 편하다.
    const func01_1 = function(){
        return 'hello~everyone~01';
    }

    const func01_2 = () => {
        return 'hello~everyone~02'; //이렇게 만드는 것이 정석이다. 제일 많이 쓰인다.
    }

    const func01_3 = () =>  'hello~everyone~03'; //하나이면 return을 명시하지 않아도 된다.


    console.log('func01_1 : ' + func01_1());
    console.log('func01_2 : ' + func01_2());
    console.log('func01_3 : ' + func01_3());

    var func02 = (name) => {
        // return 'hello~~' + name + '님'; //ES5 방식식
        return `hello~~${name}님`; //ES6(탬플릿 문자열) - ${}(EL과 비슷함)과 ``(백틱) 사용.
    }
    console.log('func02(\'홍길동\') : ' + func02('홍길동'));

    var func03_1 = (first, second) => {
        return `${first} 더하기 ${second}는 ${first+second}입니다.`;
    }

    var func03_2 = (first, second) => `${first} 곱하기 ${second}는 ${first*second}입니다.`;

    console.log('func03_1(14, 5) : ' + func03_1(14, 5));
    console.log('func03_2(14, 5) : ' + func03_2(14, 5));


    var adultCheck = (name, age) => {
        var adult = `${age >= 19 ? '성인' : '미성년자'}`;
        var result = `${name}(${age}세)는 ${adult}입니다.`;
        return result;
    };
    console.log('adultCheck("김철수", 25) : ' + adultCheck("김철수", 25));
    console.log('adultCheck("박영희", 11) : ' + adultCheck("박영희", 11));


    return(
        <div>안녕하세요.</div>
    );
}

export default App; //외부에서 참조하기 위한 명령어 export