Front-End/JavaScript | jQuery | AJAX
05. 함수(Function)
Yerin Thea Yoo
2026. 2. 16. 23:55
1. 함수란?
함수는 특정 작업을 수행하는 코드의 묶음이다.
필요할 때 호출하여 재사용할 수 있다.
- 코드 재사용
- 가독성 향상
- 유지보수 용이
1) 기본 함수 정의문
function greet() {
console.log("Hello");
}
호출
greet();
2) 매개 변수가 있는 함수
function add(a, b) {
return a + b;
}
add(3, 5);
- a, b → 매개변수(Parameter)
- 3, 5 → 인수(Argument)
3) 매개 변수 없이 전달 값 받기
arguments 객체를 사용할 수 있다.
function sum() {
console.log(arguments[0] + arguments[1]);
}
sum(2, 3);
※ ES6 이후에는 Rest Parameter 권장
function sum(...nums) {
return nums.reduce((a, b), => a + b);
}
2. return문
- 값을 호출한 곳으로 반환
- 함수 실행 즉시 종료
function multiply(a, b) {
return a * b;
}
강제 종료 예시
function test() {
console.log("실행");
return;
console.log("이 코드는 실행되지 않음.");
}
3. 재귀 함수
함수 내부에서 자기 자신을 호출하는 구조
function factorial(n) {
if (n === 1) return 1;
return n * factorial(n - 1);
}
종료 조건이 반드시 필요하다.
4. 함수 스코프(Scope)
스코프(Scope)는 변수의 유효 범위를 의미한다.
1) 전역 변수
함수 외부에서 선언한다.
let globalVar = 10;
- 어디서든 접근 가능
- 남용 시 충돌 위험
2) 지역 변수
함수 내부에서 선언한다.
function test() {
let localVar = 5;
}
- 함수 내부에서만 접근 가능
ℹ️ 전역 변수 vs. 지역 변수
| 구분 | 전역 변수 | 지역 변수 |
| 선언 위치 | 함수 외부 | 함수 내부 |
| 접근 범위 | 전체 | 해당 함수 |
| 메모리 관리 | 오래 유지 | 호출 종료 시 제거 |
3) 전역 함수 vs. 지역 함수
전역 함수
function globalFunc() {}
어디서든 호출 가능
지역 함수
function outer() {
function inner() {
console.log("내부 함수");
}
}
inner는 outer 내부에서만 사용 가능
4) 전역과 지역을 나누는 이유
- 변수 충돌 방지
- 메모리 효율 관리
- 코드 안정성 확보
- 모듈화
5. 객체 생성자 함수
객체를 여러 개 만들기 위한 템플릿 역할을 한다.
function Person(name, age) {
this.name = name;
this.age = age;
}
사용
let p1 = new Person("John", 30);
1) 생성자 함수의 활용
- 동일 구조 객체 반복 생성
- 인스턴스별 데이터 관리
2) 프로토타입(Prototype)
생성자 함수 내부에 메서드를 작성하면 객체마다 메서드가 새로 생성된다.
function Person(name) {
this.name = name;
this.sayHello = function() {
console.log("Hi");
};
}
비효율적이다.
프로토타입의 사용
Person.prototype.sayHello = function() {
console.log("Hi");
};
- 메서드를 공유
- 메모리 절약
- 성능 향상
6. JavaScript 내장 함수
JavaScript는 기본적으로 여러 전역 함수를 제공한다.
| 함수 | 설명 |
| parseInt() | 문자열 → 정수 |
| parseFloat | 문자열 → 실수 |
| isNaN() | 숫자인지 판별 |
| eval() | 문자열을 코드로 실행 |
| alert() | 경고창 |
| prompt() | 입력창 |
| confirm() | 확인창 |