같은 코드를 여러 번 써야 한다면#
점수를 입력하면 등급을 알려주는 코드를 5명의 점수에 각각 적용하려면 같은 if-else 블록을 5번 써야 할까요? 그렇지 않습니다. 함수로 묶으면 한 번만 정의하고 여러 번 호출할 수 있습니다.
함수 선언과 호출#
JavaScript
// 함수 선언 (정의)
function greet() {
console.log("안녕하세요!");
console.log("반갑습니다.");
}
// 함수 호출 (실행)
greet(); // 안녕하세요! 반갑습니다.
greet(); // 다시 실행
greet(); // 또 실행매개변수 (Parameter)#
함수에 값을 전달합니다.
JavaScript
function greet(name) {
console.log(`안녕하세요, ${name}님!`);
}
greet("홍길동"); // 안녕하세요, 홍길동님!
greet("김철수"); // 안녕하세요, 김철수님!
greet("이영희"); // 안녕하세요, 이영희님!여러 개의 매개변수:
JavaScript
function introduce(name, age, school) {
console.log(`저는 ${school} ${age}학년 ${name}입니다.`);
}
introduce("홍길동", 2, "OO중학교");반환값 (Return)#
함수가 결과를 돌려줍니다.
JavaScript
function add(a, b) {
return a + b;
}
let result = add(3, 5);
console.log(result); // 8
console.log(add(10, 20)); // 30return 을 만나면 함수가 즉시 종료되고 값을 반환합니다.
JavaScript
function getGrade(score) {
if (score >= 90) return "A";
if (score >= 80) return "B";
if (score >= 70) return "C";
return "D";
}
console.log(getGrade(95)); // A
console.log(getGrade(73)); // C
console.log(getGrade(55)); // D기본값 (Default Parameter)#
매개변수에 기본값을 설정할 수 있습니다.
JavaScript
function greet(name = "방문자") {
console.log(`안녕하세요, ${name}님!`);
}
greet("홍길동"); // 안녕하세요, 홍길동님!
greet(); // 안녕하세요, 방문자님! (기본값 사용)화살표 함수 (Arrow Function)#
더 짧게 함수를 쓰는 현대적인 방법입니다.
JavaScript
// 일반 함수
function add(a, b) {
return a + b;
}
// 화살표 함수
const add = (a, b) => {
return a + b;
};
// 한 줄이면 return 생략 가능
const add = (a, b) => a + b;
// 매개변수가 하나면 괄호 생략 가능
const double = n => n * 2;실전 함수 예제#
BMI 계산기#
JavaScript
function calculateBMI(weight, height) {
const heightInMeter = height / 100;
const bmi = weight / (heightInMeter ** 2);
return bmi.toFixed(1); // 소수점 1자리
}
function getBMIStatus(bmi) {
if (bmi < 18.5) return "저체중";
if (bmi < 23) return "정상";
if (bmi < 25) return "과체중";
return "비만";
}
const bmi = calculateBMI(60, 170);
console.log(`BMI: ${bmi}`);
console.log(`상태: ${getBMIStatus(bmi)}`);배열의 합계와 평균#
JavaScript
function getSum(numbers) {
let total = 0;
for (let num of numbers) {
total += num;
}
return total;
}
function getAverage(numbers) {
return getSum(numbers) / numbers.length;
}
const scores = [85, 92, 78, 95, 88];
console.log(`합계: ${getSum(scores)}`); // 438
console.log(`평균: ${getAverage(scores)}`); // 87.6함수도 변수에 담을 수 있다#
JavaScript
// 함수 표현식
const greet = function(name) {
return `안녕하세요, ${name}님!`;
};
// 화살표 함수도 변수에 담기
const greet = (name) => `안녕하세요, ${name}님!`;
// 나중에 호출
console.log(greet("홍길동"));직접 해보기 ✏️#
다음 함수들을 직접 작성해보세요.
isEven(number)— 짝수이면true, 홀수이면false반환
JavaScript
// 힌트: % 연산자 사용
isEven(4) // true
isEven(7) // falserepeat(str, n)— 문자열을 n번 반복한 결과 반환
JavaScript
repeat("안녕", 3) // "안녕안녕안녕"max(a, b)— 두 숫자 중 더 큰 수 반환
정리#
| 개념 | 문법 |
|---|---|
| 함수 선언 | function 이름(매개변수) { } |
| 반환값 | return 값; |
| 기본값 | function f(x = 기본값) |
| 화살표 함수 | (매개변수) => 반환값 |
다음 편에서는 DOM 조작 — JavaScript로 HTML 요소를 찾고 바꾸는 방법을 배웁니다. 드디어 화면에 직접 변화를 줄 수 있게 됩니다!
