📌 함수 정의와 호출 (자바스크립트 기초)
함수는 코드 조각을 정의하여 반복적인 작업을 처리하거나, 특정 기능을 수행할 때 유용하게 사용됩니다. 함수는 일종의 **"명령어 묶음"**으로, 한 번 정의해두면 여러 번 호출하여 재사용할 수 있습니다.
<!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 |