📌 자바스크립트 함수에서 인수와 반환값 이해하기
함수는 코드의 반복을 줄이고, 재사용성을 높이기 위한 중요한 도구입니다. 함수에 인수를 전달하고, 함수에서 반환값을 받는 과정은 함수의 핵심 개념 중 하나입니다. 이번 포스팅에서는 인수와 반환값의 개념을 명확히 하고, 이를 자바스크립트 함수에 어떻게 적용하는지 알아보겠습니다.
<!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>
console.log(createParagraph("첫번째 문단, 와우", "red"))
console.log(createParagraph("두번째 문단도 여기에있어!", "blue"))
console.log(createParagraph("세번째도 잊지 말라구 ", "green"))
function createParagraph( content, color ){
const p = document.createElement("p")
p.style.color = color
p.textContent = content
document.querySelector("#container").append(p)
return `방금 만든 태그의 콘텐츠 : ${content}, 색상: ${color}`
}
function sample(){
console.log("반환 기능 테스트")
return "짜자잔"
}
// sample 함수 실행 결과를 동적으로 DOM에 추가
const result = sample();
// 새 div 요소를 생성하고 결과를 추가
const newDiv = document.createElement("div");
newDiv.textContent = result;
// 생성된 div 요소를 body에 추가
document.body.appendChild(newDiv);
console.log(sample())
</script>
</body>
</html>🎯 1. 함수에서 인수(Argument)란?
인수는 함수를 호출할 때 함수에게 전달하는 데이터를 의미합니다. 즉, 함수가 수행할 작업에 필요한 **"재료"**를 전달하는 것입니다.
🔹 함수 정의에서 매개변수(Parameter)
함수를 정의할 때는 이 인수를 받을 수 있도록 매개변수를 사용합니다. 매개변수는 함수 내부에서만 사용되는 변수이며, 인수는 외부에서 함수로 전달되는 데이터입니다.
✅ 예시
function greet(name) {
console.log("안녕하세요, " + name + "님!");
}
greet("유노"); // "안녕하세요, 유노님!" 출력- name은 매개변수이고, "유노"는 인수입니다.
🎯 2. 함수에서 반환값(Return Value)란?
반환값은 함수가 작업을 마친 후 결과물을 호출한 곳에 돌려주는 값입니다. 함수가 처리한 데이터나 결과를 다시 사용할 수 있도록 반환하는 역할을 합니다.
🔹 return 키워드 사용
함수가 값을 반환하려면 return 키워드를 사용해야 합니다. 이 키워드는 두 가지 기능을 가지고 있습니다:
- 데이터 반환: 함수가 결과값을 반환할 수 있도록 합니다.
- 함수 종료: return은 함수를 강제로 종료시킬 수도 있습니다.
✅ 예시
function add(a, b) {
return a + b; // 반환값
}
let result = add(3, 5);
console.log(result); // 8 출력- add(3, 5) 호출 시, 3과 5는 인수로 전달되고, **return**을 통해 8을 반환합니다.
🎯 3. 함수에 매개변수 여러 개 사용하기
함수 정의 시, 매개변수는 원하는 만큼 추가할 수 있습니다. 여러 개의 매개변수를 사용할 때는 각 매개변수를 **쉼표(,)**로 구분해야 합니다.
✅ 예시
function multiply(a, b, c) {
return a * b * c;
}
let result = multiply(2, 3, 4);
console.log(result); // 24 출력- 이 예시에서 **a, b, c**는 매개변수로, 2, 3, 4는 인수입니다.
🚩 4. 결론
- 인수는 함수에 전달되는 데이터이며, 매개변수는 그 데이터를 받기 위한 변수입니다.
- 반환값은 함수가 처리한 데이터를 호출한 곳에 돌려주는 값입니다.
- return 키워드를 사용하여 데이터를 반환하고, 함수를 종료할 수 있습니다.
- 함수에 매개변수를 여러 개 추가하여 다양한 작업을 처리할 수 있습니다.
'JavaScript' 카테고리의 다른 글
| Chapter 3-21. Value 속성 이해하기 (javascript) (0) | 2025.04.01 |
|---|---|
| Chapter 3-20. 이벤트 핸들링(javascript) (0) | 2025.04.01 |
| Chapter 3-18. 함수 정의하고 호출하기(javascript) (0) | 2025.04.01 |
| Chapter 2-16. createElement & appendChild(javascript) (0) | 2025.03.31 |
| Chapter 2-15. 반복문 while(javascript) (0) | 2025.03.31 |