8장. 함수
함수란?
함수(Function)는 특정 작업을 수행하는 코드 블록입니다. 함수는 재사용 가능하며, 코드를 모듈화하여 가독성과 유지보수성을 높입니다.
함수의 장점
- 코드 재사용: 같은 코드를 여러 번 작성하지 않아도 됨
- 모듈화: 기능별로 코드를 분리
- 가독성 향상: 코드의 의도가 명확해짐
- 유지보수 용이: 한 곳만 수정하면 모든 곳에 반영
1. 함수 선언 (Function Declaration)
가장 기본적인 함수 선언 방법입니다.
기본 형식
function 함수명(매개변수1, 매개변수2, ...) {
// 실행할 코드
return 반환값; // 선택사항
}예제 1: 간단한 함수
function greet() {
console.log('안녕하세요!');
}
greet(); // 함수 호출실행 결과
안녕하세요!예제 2: 매개변수가 있는 함수
function greet(name) {
console.log(`안녕하세요, ${name}님!`);
}
greet('홍길동');
greet('김철수');실행 결과
안녕하세요, 홍길동님!
안녕하세요, 김철수님!예제 3: 반환값이 있는 함수
function add(a, b) {
return a + b;
}
let result = add(3, 5);
console.log(result); // 8예제 4: 여러 매개변수
function introduce(name, age, city) {
return `이름: ${name}, 나이: ${age}, 거주지: ${city}`;
}
let info = introduce('홍길동', 25, '서울');
console.log(info);실행 결과
이름: 홍길동, 나이: 25, 거주지: 서울2. 함수 표현식 (Function Expression)
함수를 변수에 할당하는 방식입니다.
기본 형식
const 함수명 = function(매개변수1, 매개변수2, ...) {
// 실행할 코드
return 반환값;
};예제
const greet = function(name) {
return `안녕하세요, ${name}님!`;
};
console.log(greet('홍길동'));함수 선언 vs 함수 표현식
// 함수 선언: 호이스팅됨 (선언 전에 호출 가능)
sayHello(); // ✅ 동작함
function sayHello() {
console.log('Hello');
}
// 함수 표현식: 호이스팅 안 됨 (선언 후에만 호출 가능)
// sayHi(); // ❌ 오류!
const sayHi = function() {
console.log('Hi');
};
sayHi(); // ✅ 동작함3. 화살표 함수 (Arrow Function) - ES6+
간결한 함수 표현 방법입니다.
기본 형식
const 함수명 = (매개변수1, 매개변수2, ...) => {
// 실행할 코드
return 반환값;
};예제 1: 기본 사용
const greet = (name) => {
return `안녕하세요, ${name}님!`;
};
console.log(greet('홍길동'));예제 2: 간단한 형태 (단일 표현식)
// 중괄호와 return 생략 가능
const add = (a, b) => a + b;
console.log(add(3, 5)); // 8예제 3: 매개변수가 하나일 때
// 괄호 생략 가능
const square = x => x * x;
console.log(square(5)); // 25예제 4: 매개변수가 없을 때
const sayHello = () => {
return 'Hello';
};
// 또는
const sayHi = () => 'Hi';화살표 함수 vs 일반 함수
// 일반 함수
function add1(a, b) {
return a + b;
}
// 화살표 함수
const add2 = (a, b) => a + b;
// 둘 다 같은 결과
console.log(add1(3, 5)); // 8
console.log(add2(3, 5)); // 84. 매개변수와 인수
매개변수 (Parameter)
함수 정의 시 사용하는 변수입니다.
function greet(name) { // name은 매개변수
console.log(`안녕하세요, ${name}님!`);
}인수 (Argument)
함수 호출 시 전달하는 실제 값입니다.
greet('홍길동'); // '홍길동'은 인수기본값 (Default Parameters) - ES6+
매개변수에 기본값을 설정할 수 있습니다.
function greet(name = '익명') {
console.log(`안녕하세요, ${name}님!`);
}
greet('홍길동'); // "안녕하세요, 홍길동님!"
greet(); // "안녕하세요, 익명님!"나머지 매개변수 (Rest Parameters) - ES6+
여러 인수를 배열로 받을 수 있습니다.
function sum(...numbers) {
let total = 0;
for (let num of numbers) {
total += num;
}
return total;
}
console.log(sum(1, 2, 3)); // 6
console.log(sum(1, 2, 3, 4, 5)); // 155. 반환값 (Return)
함수는 return 문을 통해 값을 반환할 수 있습니다.
return 문 사용
function add(a, b) {
return a + b; // 값을 반환하고 함수 종료
}
let result = add(3, 5);
console.log(result); // 8return이 없는 함수
function greet(name) {
console.log(`안녕하세요, ${name}님!`);
// return이 없으면 undefined 반환
}
let result = greet('홍길동');
console.log(result); // undefined여러 return 문
function checkAge(age) {
if (age >= 18) {
return '성인';
} else {
return '미성년자';
}
}
console.log(checkAge(20)); // '성인'
console.log(checkAge(15)); // '미성년자'6. 함수의 다양한 사용 예제
예제 1: 계산기 함수
function calculator(a, b, operation) {
if (operation === '+') {
return a + b;
} else if (operation === '-') {
return a - b;
} else if (operation === '*') {
return a * b;
} else if (operation === '/') {
return a / b;
} else {
return '알 수 없는 연산';
}
}
console.log(calculator(10, 5, '+')); // 15
console.log(calculator(10, 5, '-')); // 5
console.log(calculator(10, 5, '*')); // 50
console.log(calculator(10, 5, '/')); // 2예제 2: 등급 판정 함수
function getGrade(score) {
if (score >= 90) {
return 'A';
} else if (score >= 80) {
return 'B';
} else if (score >= 70) {
return 'C';
} else {
return 'F';
}
}
console.log(getGrade(95)); // 'A'
console.log(getGrade(85)); // 'B'
console.log(getGrade(65)); // 'F'예제 3: 배열 처리 함수
function findMax(numbers) {
let max = numbers[0];
for (let i = 1; i < numbers.length; i++) {
if (numbers[i] > max) {
max = numbers[i];
}
}
return max;
}
let numbers = [5, 12, 8, 130, 44];
console.log(findMax(numbers)); // 130예제 4: 화살표 함수로 배열 메서드
let numbers = [1, 2, 3, 4, 5];
// 각 요소를 제곱
let squared = numbers.map(x => x * x);
console.log(squared); // [1, 4, 9, 16, 25]
// 짝수만 필터링
let evens = numbers.filter(x => x % 2 === 0);
console.log(evens); // [2, 4]
// 합계 계산
let sum = numbers.reduce((acc, x) => acc + x, 0);
console.log(sum); // 157. 함수 호출 방법
일반 호출
function greet(name) {
console.log(`안녕하세요, ${name}님!`);
}
greet('홍길동');변수에 저장 후 호출
const myFunction = greet;
myFunction('김철수');즉시 실행 함수 (IIFE)
(function() {
console.log('즉시 실행됨');
})();
// 또는 화살표 함수
(() => {
console.log('즉시 실행됨');
})();8. 함수 스코프
함수 내부에서 선언한 변수는 함수 밖에서 접근할 수 없습니다.
function test() {
let x = 10; // 함수 스코프
console.log(x); // 10
}
// console.log(x); // ReferenceError
// 전역 변수
let y = 20;
function test2() {
console.log(y); // 20 (전역 변수 접근 가능)
}주의사항
1. 매개변수 개수
function add(a, b) {
return a + b;
}
console.log(add(1, 2)); // 3
console.log(add(1, 2, 3)); // 3 (세 번째 인수 무시)
console.log(add(1)); // NaN (b는 undefined)2. return 문의 위치
function test() {
console.log('실행됨');
return; // 함수 종료
console.log('실행 안 됨'); // 도달하지 못함
}3. 화살표 함수의 this
화살표 함수는 자신의 this를 가지지 않습니다 (상위 스코프의 this 사용).
const obj = {
name: '홍길동',
greet: function() {
console.log(this.name); // '홍길동'
},
greetArrow: () => {
console.log(this.name); // undefined (전역 this)
}
};연습 문제
덧셈 함수
- 두 수를 받아 합을 반환하는 함수를 작성하세요.
인사 함수
- 이름을 받아 "안녕하세요, [이름]님!"을 반환하는 함수를 작성하세요.
최대값 함수
- 배열을 받아 최대값을 반환하는 함수를 작성하세요.
등급 함수
- 점수를 받아 등급(A, B, C, F)을 반환하는 함수를 작성하세요.
화살표 함수 변환
- 다음 함수를 화살표 함수로 변환하세요:
function multiply(a, b) { return a * b; }
- 다음 함수를 화살표 함수로 변환하세요:
다음 장 예고
다음 장에서는 배열(Array)에 대해 학습합니다.