반응형
자바스크립트의 함수 개념을 기본부터 차근차근 예제와 함께 설명합니다.
1. 함수(Function)란?
- 정의: 특정 작업을 수행하는 코드 블록
- 장점:
- 재사용성 → 같은 기능을 반복 작성할 필요 없음
- 코드 가독성 향상
- 유지보수 용이
2. 함수 선언 방법
(1) 함수 선언문 (Function Declaration)
function sayHello() {
console.log("안녕하세요!");
}
// 호출
sayHello(); // 출력: 안녕하세요!- 특징: 선언 전에 호출 가능 (호이스팅 적용)
(2) 함수 표현식 (Function Expression)
const sayBye = function() {
console.log("안녕히 가세요!");
};
sayBye(); // 출력: 안녕히 가세요!- 특징: 변수에 함수를 할당
- 선언 전에 호출 불가 (호이스팅 X)
(3) 화살표 함수 (Arrow Function)
const add = (a, b) => {
return a + b;
};
console.log(add(3, 4)); // 출력: 7- 특징:
- 간결한 문법
- this 바인딩 방식이 다름 (주로 콜백에 유용)
3. 매개변수와 인자
function greet(name) {
console.log(`안녕하세요, ${name}님!`);
}
greet("철수"); // 출력: 안녕하세요, 철수님!- name → 매개변수(parameter)
- "철수" → 인자(argument)
4. 기본 매개변수
function introduce(name = "손님") {
console.log(`반갑습니다, ${name}님`);
}
introduce(); // 출력: 반갑습니다, 손님님
introduce("영희"); // 출력: 반갑습니다, 영희님5. 반환값 (return)
function square(x) {
return x * x;
}
let result = square(5);
console.log(result); // 출력: 25- **return**을 만나면 함수 실행 종료
6. 함수 안에서 함수 (중첩 함수)
function outer() {
console.log("외부 함수");
function inner() {
console.log("내부 함수");
}
inner();
}
outer();
// 출력:
// 외부 함수
// 내부 함수7. 간단 HTML 예제
아래 코드는 버튼 클릭 시 함수를 호출하는 예제입니다.
<!DOCTYPE html>
<html>
<body>
<button onclick="sayHello()">인사하기</button>
<script>
function sayHello() {
alert("안녕하세요!");
}
</script>
</body>
반응형
'자바스크립트_Javascript' 카테고리의 다른 글
| Javascript: 반복문 for while do of in break continue (1) | 2025.08.16 |
|---|---|
| Javascript: 조건문 if (4) | 2025.08.15 |
| Javascript: 계산기 calculator (6) | 2025.08.13 |
| Javascript: 연산자 Operators (4) | 2025.08.13 |
| Javascript: 호이스팅 Hoisting (1) | 2025.08.13 |