2025-01-26T02:15:33
This commit is contained in:
215
doc/06_함수.md
Normal file
215
doc/06_함수.md
Normal file
@@ -0,0 +1,215 @@
|
||||
# 함수
|
||||
자바스크립트에서 함수는 코드의 재사용성과 모듈화를 높이는 가장 기본적인 단위입니다. 함수는 특정 작업을 수행하거나 값을 반환하는 독립된 코드 블록입니다.
|
||||
|
||||
함수는 특정 작업을 수행하는 코드 블록으로, 필요할 때 호출할 수 있습니다. 함수를 사용하면 다음과 같은 장점이 있습니다:
|
||||
|
||||
* 재사용성: 동일한 작업을 여러 번 실행할 때 반복적인 코드를 줄일 수 있습니다.
|
||||
* 가독성: 코드가 구조화되어 더 이해하기 쉬워집니다.
|
||||
* 유지보수성: 코드를 변경하거나 확장하기 용이합니다.
|
||||
|
||||
## 함수 선언과 호출
|
||||
|
||||
함수를 선언하려면 function 키워드를 사용합니다.
|
||||
```javascript
|
||||
function greet(name) {
|
||||
console.log(`안녕하세요, ${name}!`);
|
||||
}
|
||||
```
|
||||
|
||||
함수를 호출하려면 함수 이름 뒤에 괄호를 붙이고 필요한 인수를 전달합니다.
|
||||
```javascript
|
||||
greet("철수"); // 출력: 안녕하세요, 철수!
|
||||
greet("영희"); // 출력: 안녕하세요, 영희!
|
||||
```
|
||||
|
||||
## 함수의 구성 요소
|
||||
* 함수 이름 (Function Name): 함수를 식별하는 데 사용됩니다.
|
||||
* 매개변수 (Parameters): 함수가 입력값을 받을 수 있도록 정의합니다.
|
||||
* 함수 본문 (Body): 함수가 실행할 코드 블록입니다.
|
||||
* 반환값 (Return Value): 함수가 작업 후 반환하는 값입니다.
|
||||
|
||||
```javascript
|
||||
function add(a, b) {
|
||||
return a + b; // 반환값
|
||||
}
|
||||
|
||||
let result = add(2, 3);
|
||||
console.log(result); // 출력: 5
|
||||
```
|
||||
|
||||
## 함수의 반환값과 return 키워드
|
||||
함수는 작업 결과를 반환하기 위해 return 키워드를 사용할 수 있습니다.
|
||||
|
||||
반환값이 없는 함수는 undefined를 반환합니다.
|
||||
|
||||
```javascript
|
||||
function noReturn() {}
|
||||
console.log(noReturn()); // 출력: undefined
|
||||
```
|
||||
|
||||
## 함수 표현식 (Function Expression)
|
||||
함수는 변수에 할당할 수도 있습니다. 이를 함수 표현식이라고 합니다.
|
||||
```javascript
|
||||
const multiply = function (x, y) {
|
||||
return x * y;
|
||||
};
|
||||
|
||||
console.log(multiply(4, 5)); // 출력: 20
|
||||
```
|
||||
|
||||
## 스프레드 연산자
|
||||
스프레드 연산자는 자바스크립트 ES6에서 도입된 문법으로, 세 개의 점(`...`)으로 표현됩니다. 이 연산자는 반복 가능한(iterable) 객체의 요소들을 펼쳐서 개별 요소로 만들어주는 역할을 합니다.
|
||||
|
||||
### 배열 결합
|
||||
```javascript
|
||||
const arr1 = [1, 2, 3];
|
||||
const arr2 = [4, 5, 6];
|
||||
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
|
||||
```
|
||||
|
||||
```javascript
|
||||
const arr = [1, 2, 3];
|
||||
const newArr = [...arr, 4, 5]; // [1, 2, 3, 4, 5]
|
||||
```
|
||||
|
||||
### 객체 얕은 복사
|
||||
```javascript
|
||||
const person = { name: '홍길동', age: 30 };
|
||||
const newPerson = { ...person };
|
||||
```
|
||||
|
||||
### 함수의 인자 전달
|
||||
```javascript
|
||||
function sum(...numbers) {
|
||||
return numbers.reduce((total, num) => total + num, 0);
|
||||
}
|
||||
const result = sum(...[1, 2, 3]); // 6
|
||||
```
|
||||
|
||||
### 함수 호출 시 인자 전달
|
||||
함수의 매개변수로 사용되어, 남은 인수들을 배열로 모아줍니다.
|
||||
```javascript
|
||||
const numbers = [1, 2, 3];
|
||||
Math.max(...numbers); // 3
|
||||
```
|
||||
|
||||
## 화살표 함수 (Arrow Function)
|
||||
ES6부터 도입된 화살표 함수는 간결한 문법으로 함수를 작성할 수 있습니다.
|
||||
```javascript
|
||||
const subtract = (a, b) => a - b;
|
||||
|
||||
console.log(subtract(10, 4)); // 출력: 6
|
||||
```
|
||||
* 중괄호 {}를 생략하면 암묵적으로 값을 반환합니다.
|
||||
* 중괄호는 본문 여러 줄로 구성되어 있음을 알려주며, 중괄호를 사용했다면 return으로 결괏값을 반환해주어야 합니다.
|
||||
* 매개변수가 하나라면 괄호 ()도 생략할 수 있습니다.
|
||||
|
||||
```javascript
|
||||
const square = x => x * x;
|
||||
|
||||
console.log(square(5)); // 출력: 25
|
||||
```
|
||||
|
||||
## 함수의 다양한 유형
|
||||
* 기본 함수 (Regular Function)
|
||||
```javascript
|
||||
function sayHello() {
|
||||
console.log("안녕하세요!");
|
||||
}
|
||||
|
||||
sayHello(); // 출력: 안녕하세요!
|
||||
```
|
||||
|
||||
* 매개변수가 있는 함수
|
||||
```javascript
|
||||
function greetUser(name, age) {
|
||||
console.log(`이름: ${name}, 나이: ${age}`);
|
||||
}
|
||||
|
||||
greetUser("철수", 25); // 출력: 이름: 철수, 나이: 25
|
||||
```
|
||||
|
||||
* 기본값을 가진 매개변수 (Default Parameters) : 매개변수의 기본값을 설정할 수 있습니다.
|
||||
```javascript
|
||||
function welcome(name = "사용자") {
|
||||
console.log(`환영합니다, ${name}!`);
|
||||
}
|
||||
|
||||
welcome(); // 출력: 환영합니다, 사용자!
|
||||
welcome("민수"); // 출력: 환영합니다, 민수!
|
||||
```
|
||||
|
||||
* 익명 함수 (Anonymous Function) : 익명 함수는 이름이 없는 함수입니다. 주로 콜백 함수로 사용됩니다.
|
||||
```javascript
|
||||
setTimeout(function () {
|
||||
console.log("3초 후 실행됩니다.");
|
||||
}, 3000);
|
||||
```
|
||||
|
||||
## 고급 함수 활용
|
||||
|
||||
### 재귀 함수 (Recursive Function)
|
||||
함수 내에서 자기 자신을 호출하는 함수입니다.
|
||||
```javascript
|
||||
function factorial(n) {
|
||||
if (n === 1) return 1; // 종료 조건
|
||||
return n * factorial(n - 1);
|
||||
}
|
||||
|
||||
console.log(factorial(5)); // 출력: 120
|
||||
```
|
||||
|
||||
### 콜백 함수 (Callback Function)
|
||||
다른 함수의 인수로 전달되는 함수입니다.
|
||||
```javascript
|
||||
function processUserInput(callback) {
|
||||
const name = "영희";
|
||||
callback(name);
|
||||
}
|
||||
|
||||
processUserInput(function (name) {
|
||||
console.log(`안녕하세요, ${name}!`);
|
||||
});
|
||||
```
|
||||
|
||||
### 클로저 (Closure)
|
||||
클로저는 함수와 해당 함수가 선언된 렉시컬 환경(Lexical Environment)을 기억하는 특성입니다.
|
||||
```javascript
|
||||
function makeMultiplier(multiplier) {
|
||||
return function (x) {
|
||||
return x * multiplier;
|
||||
};
|
||||
}
|
||||
|
||||
const double = makeMultiplier(2);
|
||||
console.log(double(5)); // 출력: 10
|
||||
```
|
||||
|
||||
### 즉시 실행 함수 (Immediately Invoked Function Expression, IIFE)
|
||||
IIFE는 선언과 동시에 실행되는 함수입니다.
|
||||
```javascript
|
||||
(function () {
|
||||
console.log("즉시 실행 함수입니다.");
|
||||
})();
|
||||
```
|
||||
|
||||
## 활용 사례
|
||||
```javascript
|
||||
// 배열 요소의 합계
|
||||
const numbers = [1, 2, 3, 4, 5];
|
||||
|
||||
function sumArray(arr) {
|
||||
return arr.reduce((sum, num) => sum + num, 0);
|
||||
}
|
||||
|
||||
console.log(sumArray(numbers)); // 출력: 15
|
||||
```
|
||||
|
||||
```javascript
|
||||
// 문자열 반전
|
||||
function reverseString(str) {
|
||||
return str.split("").reverse().join("");
|
||||
}
|
||||
|
||||
console.log(reverseString("hello")); // 출력: olleh
|
||||
```
|
||||
Reference in New Issue
Block a user