Chapter 3-18. 함수 정의하고 호출하기(javascript)

2025. 4. 1. 10:13·JavaScript

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

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

 

<!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. 결론

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

'JavaScript' 카테고리의 다른 글

Chapter 3-20. 이벤트 핸들링(javascript)  (0) 2025.04.01
Chapter 3-19. 인수와 반환(javascript)  (0) 2025.04.01
Chapter 2-16. createElement & appendChild(javascript)  (0) 2025.03.31
Chapter 2-15. 반복문 while(javascript)  (0) 2025.03.31
Chapter 2-11. DOM 메소드 및 속성(javascript)  (0) 2025.03.31
'JavaScript' 카테고리의 다른 글
  • Chapter 3-20. 이벤트 핸들링(javascript)
  • Chapter 3-19. 인수와 반환(javascript)
  • Chapter 2-16. createElement & appendChild(javascript)
  • Chapter 2-15. 반복문 while(javascript)
Chansman
Chansman
안녕하세요! 코딩을 시작한 지 얼마 되지 않은 초보 개발자 찬스맨입니다. 이 블로그는 제 학습 기록을 남기고, 다양한 코딩 실습을 통해 성장하는 과정을 공유하려고 합니다. 초보자의 눈높이에 맞춘 실습과 팁, 그리고 개발하면서 겪은 어려움과 해결 과정을 솔직하게 풀어내려 합니다. 함께 성장하는 개발자 커뮤니티가 되기를 바랍니다.
  • Chansman
    찬스맨의 프로그래밍 스토리
    Chansman
  • 전체
    오늘
    어제
    • 분류 전체보기 (794) N
      • Python (32)
      • 프로젝트 (113) N
      • 과제 (25)
      • Database (40)
      • 멘토링 (11)
      • 특강 (37)
      • 기술블로그 (41)
      • 기술블로그-Fastapi편 (33)
      • 기술블로그-Django편 (154) N
      • 기술블로그-Flask편 (36)
      • AI 분석 (5)
      • HTML & CSS (31)
      • JavaScript (17)
      • AWS_Cloud (21)
      • 웹스크래핑과 데이터 수집 (14)
      • Flask (42)
      • Django (77)
      • Fastapi (16)
      • 연예 (14)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    btsdischarge
    newpoliticalparty
    classaction
    self-growth
    trumpmuskclash
    RM
    urbantrends
    btsreunion
    basalcellcarcinoma
    smartphonedurability
    remittance
    btsjungkook
    travel ban
    livebroadcast
    lawsuitculture
    btscomeback
    chatgpterror
    gpterror
    college reunions
    global politics
    bts
    americaparty
    chinanightlife
    homebartrend
    뷔
    americanlaw
    life reflection
    youngprofessionals
    hotcoffeecase
    titaniumcase
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
Chansman
Chapter 3-18. 함수 정의하고 호출하기(javascript)
상단으로

티스토리툴바