이 단원에서는 JavaScript에서 자주 사용하는 개념인 함수를 배웁니다. 함수는 반복되는 작업을 줄이고, 코드의 구조를 명확하게 하며, 유지보수성을 높여줍니다. 함수 선언 방식, 호출 방법, 매개변수와 인자값, 반환값 처리, 그리고 실무에서의 활용 예까지 단계적으로 학습합니다.
함수는 여러 줄의 코드를 하나로 묶어 이름을 붙여두고, 필요할 때마다 실행할 수 있도록 만든 코드 블록입니다. 동일한 작업을 반복해야 할 경우 유용하며, 재사용성과 가독성을 높여줍니다.
function sayHello() {
console.log('안녕하세요!');
}
sayHello(); // 함수 호출 → '안녕하세요!' 출력
위 예제는 sayHello라는 이름의 함수를 정의하고 호출하여, 인삿말을 출력하는 동작을 수행합니다.
greet라는 이름의 함수를 선언합니다. 이 함수는 전달된 이름을 이용해 인삿말을 출력합니다.
function greet(name) {
console.log('안녕하세요, ' + name + '님!');
}
greet('지민');
익명 함수를 변수에 저장한 방식입니다. 선언식과 달리 변수에 할당되기 전에는 사용할 수 없습니다.
const greet = function(name) {
console.log('안녕하세요, ' + name + '님!');
};
greet('은우');
| 구분 | 함수 선언식 | 함수 표현식 |
|——-|——-|——-|
| 정의 방법 | function 함수이름() {} | const 변수 = function() {} |
| 호이스팅 | ✅ 가능 (선언 이전 호출 가능) | ❌ 불가능 (선언 이후에만 사용 가능) |
| 이름 필요 여부 | 함수 이름 필수 | 익명 함수도 가능 |
| 사용 시기 | 일반적인 함수 정의에 사용 | 콜백 함수, 조건부 정의 등에 유용 |
호이스팅이란? 자바스크립트에서 변수나 함수 선언이 코드의 최상단으로 끌어올려지는 것처럼 동작하는 특징을 말합니다.
선언식 함수는 함수는 function 키워드로 시작하며 함수 이름이 바로 뒤에 붙습니다.
호이스팅이 적용되어 함수 정의 이전에 호출해도 동작합니다.
아래 코드는 선언식 함수로 호이스팅 외어 정상작동합니다.
sayHello();
function sayHello() {
console.log("안녕하세요!");
}
하지만, 아래 코드는 에러가 납니다.
왜냐하면 sayHi는 함수가 아니라 변수로 선언된 것이고,
자바스크립트는 변수의 선언만 호이스팅하고, 값 할당은 호이스팅하지 않기 때문입니다.
sayHi(); // ❌ 에러 발생!
const sayHi = function () {
console.log("안녕!");
};
화살표 함수는 함수 선언을 간결하게 표현하는 방법입니다. 특히 콜백 함수나 단순 로직에 많이 사용됩니다.
const greet = (name) => {
console.log('안녕하세요, ' + name + '님!');
};
greet('수아');
중괄호와 return을 생략한 간단한 표현 방식으로, 표현식이 단일 문장일 때 사용됩니다.
const double = x => x * 2;
console.log(double(4)); // 8
| 용어 | 의미 | |——|——| | 매개변수(Parameter) | 함수 선언 시 괄호 안에 정의되는 변수입니다. | | 인자값(Argument) | 함수를 호출할 때 전달하는 실제 값입니다. |
function sayHi(name) {
console.log('안녕하세요, ' + name + '님!');
}
sayHi('혜진');
name은 매개변수이고, '혜진'은 인자값입니다. 이처럼 함수 외부에서 값을 전달하여 함수 내부에서 사용할 수 있습니다.
function add(a, b) {
return a + b;
}
console.log(add(3, 4)); // 7
이 함수는 두 숫자를 더한 결과를 반환합니다. a, b는 매개변수, 3, 4는 인자값입니다.
return은 함수 실행 결과를 외부로 전달하고, 함수를 즉시 종료합니다. 반환된 값은 다른 변수에 저장하거나, 다른 연산에 활용할 수 있습니다.
function multiply(x, y) {
return x * y;
}
let result = multiply(2, 5); // result = 10
function logMessage(msg) {
console.log('📢 ' + msg);
}
logMessage('반갑습니다!');
return이 없는 함수는 결과를 반환하지 않고, 단순히 동작만 수행합니다. 위 예제는 로그 메시지를 출력합니다.
function addTax(price) {
return price * 1.1;
}
console.log(addTax(10000)); // 11000
가격에 10%의 세금을 더해 반환하는 함수입니다. 실무에서 금액 계산 시 자주 사용됩니다.
function getDiscountedPrice(price, rate) {
return price * (1 - rate);
}
console.log(getDiscountedPrice(20000, 0.15)); // 17000
가격과 할인율을 받아 할인된 최종 가격을 계산합니다. 쇼핑몰 등 다양한 UI에 활용됩니다.
function showMessage() {
alert('버튼이 클릭되었습니다!');
}
<button onclick="showMessage()">클릭</button>
이벤트와 함수를 연결한 예제로, 버튼을 클릭하면 함수가 호출되고 메시지를 보여줍니다.
function showInfo(name, age) {
console.log(name + '님의 나이는 ' + age + '세입니다.');
}
showInfo('지영'); // '지영님의 나이는 undefined세입니다.'
인자값을 누락하면 해당 매개변수는 undefined가 됩니다. 기본값을 지정하거나 입력 유효성을 검사하는 것이 좋습니다.
function showInfo(name, age = 20) {
console.log(name + '님의 나이는 ' + age + '세입니다.');
}
showInfo('지영'); // '지영님의 나이는 20세입니다.'