📌 함수 정의와 호출 (자바스크립트 기초)

함수는 코드 조각을 정의하여 반복적인 작업을 처리하거나, 특정 기능을 수행할 때 유용하게 사용됩니다. 함수는 일종의 **"명령어 묶음"**으로, 한 번 정의해두면 여러 번 호출하여 재사용할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" contect="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>함수 정의하고 호출하기</title>
    
</head>
<body>
    <div id="container"></div>    

    <script>
        createParagraph()
        createParagraph()
        createParagraph()
        createParagraph()
        createParagraph()

        function createParagraph(){
            const p = document.createElement("p")
            p.textContent = " 새롭게 만들어진 문단 태그!"
            document.querySelector("#container").append(p)

        }

        // 호이스팅  가능 : 함수 만드는 부분이 호출하는 부분보다 아래에 있어도된다.
        sayYes() // 선언식은 가능
        // 호시스팅 불가 :
        sayNo() // 표현식은 불가하다.

        // 함수 이름짓기 규칙은 변수와 같다.
        // 기능을 정의하는 만큼, 동사를 사용하는 것이 좋다!
        function sayYes(){
        console.log(1)
        console.log(2)
        alert("yes!")
        }    
        const sayNo = function(){
            alert("No!")
            console.log(3)
        }

    </script>
    
</body>
</html>

🎯 1. 함수란?

함수는 불러서 쓸 수 있는 코드 조각입니다. 변수처럼 데이터를 대입하고 그 이름을 대체할 수 있듯이, 함수를 정의하고 이름을 부여한 후에는 그 이름을 사용하여 함수를 호출할 수 있습니다.

🔹 함수의 특징

코드 조각을 미리 정의하고, 반복해서 호출하여 사용할 수 있습니다.
매개변수를 사용하여 입력값을 전달받고, 반환값을 리턴할 수 있습니다.

🎯 2. 함수 정의하는 방법

자바스크립트에서 함수는 두 가지 방법으로 정의할 수 있습니다.

🔹 함수 선언식 (Function Declaration)

function 키워드를 사용하여 함수의 이름과 매개변수, 본문을 정의합니다.
선언된 함수는 어디서든 호출할 수 있습니다.

✅ 예시

function greet(name) {
  console.log("안녕하세요, " + name + "님!");
}

greet("유노"); // "안녕하세요, 유노님!" 출력

greet 함수는 name을 매개변수로 받아서, 해당 이름을 출력하는 기능을 합니다.

🔹 함수 표현식 (Function Expression)

함수 표현식은 함수가 변수에 할당되는 방식으로 정의합니다.
이 방식은 함수 이름이 없거나 변수에 할당된 함수로 사용됩니다.

✅ 예시

const greet = function(name) {
  console.log("안녕하세요, " + name + "님!");
};

greet("유노"); // "안녕하세요, 유노님!" 출력

함수가 **greet**라는 변수에 할당되어 호출됩니다.

🎯 3. 함수 호출하기

함수를 정의한 후, 이를 호출(실행)하려면 함수 이름 뒤에 소괄호 ()를 붙여야 합니다.

🔹 호출 예시

function sayHello() {
  console.log("안녕하세요!");
}

sayHello();  // "안녕하세요!" 출력

sayHello(): 함수 호출을 통해 **안녕하세요!**라는 텍스트를 출력합니다.

🎯 4. 함수 호출 시 매개변수와 반환값

함수는 매개변수를 통해 입력값을 받고, 그에 대한 출력값을 반환할 수 있습니다.

🔹 매개변수 사용

function add(a, b) {
  return a + b;
}

console.log(add(5, 3));  // 8 출력

함수 add는 a와 b를 받아 더한 값을 반환합니다.

🚩 5. 결론

함수 선언식과 함수 표현식은 자바스크립트에서 함수를 정의하는 두 가지 방식입니다.
함수 호출은 ()를 사용하여 실행하며, 매개변수와 반환값을 활용할 수 있습니다.
함수는 코드 재사용을 용이하게 하여, 더 효율적인 프로그래밍을 가능하게 합니다.