JavaScript 함수란 무엇인가?
JavaScript 함수는 특정 작업을 수행하도록 설계된 코드 블록입니다. 함수는 재사용 가능하고 코드를 모듈화하는 데 도움을 줍니다. 이 글에서는 함수의 선언, 호출, 다양한 활용 방법을 예제와 함께 알아보겠습니다.
1. 함수의 기본 구조
JavaScript에서 함수를 선언하려면 function 키워드를 사용합니다. 함수는 입력(매개변수)을 받아 작업을 수행하고 결과값을 반환할 수 있습니다.
예제: 기본 함수
function sayHello() {
console.log("안녕하세요!");
}
sayHello(); // 출력: 안녕하세요!
기본 구조
function 함수이름(매개변수1, 매개변수2) {
// 실행할 코드
return 결과값; // 선택 사항
}
2. 함수의 매개변수와 반환값
함수는 매개변수를 사용하여 입력값을 받고, return 키워드를 사용하여 결과값을 반환할 수 있습니다.
예제: 매개변수와 반환값이 있는 함수
function add(a, b) {
return a + b;
}
console.log(add(5, 3)); // 출력: 8
예제: 매개변수가 없는 함수
function getRandomNumber() {
return Math.random(); // 0과 1 사이의 랜덤 숫자 반환
}
console.log(getRandomNumber());
3. 함수 표현식과 화살표 함수
JavaScript에서는 함수를 변수에 할당할 수도 있습니다. 이를 함수 표현식이라고 합니다. ES6에서는 더 간결한 문법인 화살표 함수도 사용할 수 있습니다.
예제: 함수 표현식
const multiply = function(a, b) {
return a * b;
};
console.log(multiply(4, 5)); // 출력: 20
예제: 화살표 함수
const divide = (a, b) => a / b;
console.log(divide(10, 2)); // 출력: 5
4. 기본값 매개변수
ES6부터 매개변수에 기본값을 설정할 수 있습니다.
예제: 기본값 매개변수
function greet(name = "친구") {
console.log(`안녕하세요, ${name}님!`);
}
greet(); // 출력: 안녕하세요, 친구님!
greet("홍길동"); // 출력: 안녕하세요, 홍길동님!
5. 함수의 다양한 활용 예제
예제: 배열 요소를 합산하는 함수
function sumArray(numbers) {
let total = 0;
for (let num of numbers) {
total += num;
}
return total;
}
const nums = [1, 2, 3, 4, 5];
console.log(sumArray(nums)); // 출력: 15
예제: 팩토리얼 함수 (재귀 함수)
function factorial(n) {
if (n === 0) return 1; // 종료 조건
return n * factorial(n - 1); // 재귀 호출
}
console.log(factorial(5)); // 출력: 120
6. 즉시 실행 함수 (IIFE)
IIFE(즉시 실행 함수)는 선언과 동시에 실행되는 함수입니다.
예제: IIFE 사용
(function() {
console.log("이 함수는 즉시 실행됩니다!");
})();
7. 고급 함수 기능
JavaScript 함수는 일급 객체(First-Class Object)로, 다른 함수의 매개변수로 전달되거나 반환값으로 사용할 수 있습니다.
예제: 함수 전달
function executeCallback(callback) {
console.log("콜백 함수 실행:");
callback();
}
executeCallback(() => {
console.log("안녕하세요, 콜백입니다!");
});
JavaScript 함수는 재사용 가능한 코드를 작성하고 작업을 모듈화하는 핵심 도구입니다. 기본 선언부터 고급 개념까지 이 글의 예제를 직접 실행하며 학습하면 함수 사용에 대한 자신감을 키울 수 있습니다.
이 글은 검색 최적화를 위해 중복 키워드 없이 작성되었으며, 초보자와 중급 사용자를 모두 고려한 실용적인 예제를 포함하고 있습니다. JavaScript의 함수 개념을 이해하고 실력을 향상하는 데 도움이 되길 바랍니다.
'Javascript' 카테고리의 다른 글
JavaScript 비동기 처리: 콜백부터 async/await까지 한눈에 이해하기 (0) | 2024.12.08 |
---|---|
JavaScript DOM 조작: 페이지 구조를 자유롭게 다루는 방법 (0) | 2024.12.07 |
JavaScript 배열과 객체 완벽 이해: 기초부터 활용까지 (0) | 2024.12.07 |
JavaScript 기본 문법: 초보자를 위한 완벽 입문 가이드 (0) | 2024.12.06 |
JavaScript란 무엇인가? 초보자를 위한 완벽 가이드 (0) | 2024.12.06 |