함수심화
❓ 콜백함수? 재귀함수?
콜백함수란 함수에 매개변수로 전달되어 실행되는 함수를 의미
콜백함수는 일반적으로 비동기처리에서 많이 사용된다
function sayHello(name, callback) {
console.log(`Hello, ${name}!`);
callback();
}
function sayGoodbye() {
console.log("Goodbye!");
}
sayHello("Alice", sayGoodbye);
sayHello 함수는 두개의 인자를 받는다. 첫번째 인자는 'Alice'를 전달하고 두번째 인자는 콜백함수를 전달한다 sayHello 함수 안에서는 전달받은 이름을 사용하여 인사말을 출력 -> 두번째 인자로 전달받은 콜백 함수를 호출한다
sayGoodbye 함수는 인자를 받지 않고 'Goodbye!'메세지를 출력한다
이 함수는 sayHello함수의 두번째 인자로 전달된다
결과는
Hello, Alice! 출력 한 뒤
Goodbye! 출력한다
재귀함수는 함수가 자기 자신을 호출하는 것
재귀함수는 자신을 다시 호출하여 문제를 해결하는 함수이다
탈출 조건이 반드시 있어야한다
function factorial(n) {
if (n === 0) {
return 1;
} else {
return n * factorial(n-1);
}
}
console.log(factorial(5)); // 120
factorial 함수 안에서 먼저 종료 조건을 검사한다
인자로 전달된 수 n이 0일시 1을 반환,
그렇지 않으면 n x factorial(n-1) 곱을 반환한다
여기서 factorial(n-1)은 factorial함수를 자기 자신을 호출해 계산한다 -> 재귀호출
결과는 factorial(5)를 호출하여 120을 반환한다
❓👉 더 자세하게 설명하면
factorial(5)를 계산할 때 factorial 함수 내부에서 n의 값이 5일 때 else 블록이 실행 => factorial(5)의 결과는 5 * factorial(4)가 된다
factorial(4)는 4 factorial(3)을 반환하고
factorial(3)은 3 factorial(2)를 반환,
factorial(2)는 2 factorial(1)을 반환하고,
factorial(1)은 1 factorial(0)을 반환한다
이제 factorial(0)을 호출 => 1을 반환
factorial(1)에서는 1 1이 계산되어 1을 반환하고
factorial(2)에서는 2 1이 계산되어 2를 반환한다
factorial(3)은 3 2를 계산하여 6을 반환하고
factorial(4)는 4 6을 계산하여 24를 반환하고
마지막으로 factorial(5)에서는 5 * 24가 계산되어 최종 결과값인 120이 반환된다
💡 콜백함수와 재귀함수가 서로 다른 용도와 동작 방식인것을 알수 있다
재귀함수는 자기 자신을 호출하는 함수를 말하며 주로 반복적인 작업을 처리하거나 복잡한 문제를 해결하기 위해 사용된다
콜백함수는 다른 함수에서 자신을 매개변수로 전달받아 그 함수의 작업이 끝나면 호출되는 함수이다(비동기적인 처리를 할 때 많이 사용, ex-웹페이지에서 데이터를 가져오는 AJAX 요청, 타이머와 같은 이벤트 처리에서 콜백함수를 사용한다)
Study
Q.
- 아규먼트가 순서대로 들어가는 함수의 특성 콘솔의 값은?
function 함수(a = 10, b = 20, c = 30) {
return a + b + c;
}
함수();
함수(1000);
함수(1000, 2500);
함수(1000, 2500, 3000);
함수((c = 3000));
함수((a = 1000), (c = 3000));
함수((a = 1000), (b = 3000), (c = 2500));
함수((a = 1000), (c = 2500), (b = 3000));
- 화살표 함수
function func(x, y) {
// (x, y) -> 파라미터,매개변수,인자
return x + y;
}
console.log(func(3, 4)); // -> 아규먼트, 인수
// 위 함수를 화살표 함수로 작성한다면 ?
- 함수의 주의사항
test1과 test2의 값은?
let test1 = [10, 20, 30];
let test2 = 100;
// 값변경1 함수는 결과값이 [100,20,30]으로 나오게 하라
function 값변경1(arr) {
arr[0] = 100;
}
값변경1(test1);
console.log(test1);
// 값변경2 에서 value 와 test2이 가르키는 값은?
function 값변경2(value) {
value = 1000;
console.log(value);
}
값변경2(test2);
console.log(test2); A.
// 1. 아규먼트가 순서대로 들어가는 함수의 특성
function 함수(a = 10, b = 20, c = 30) {
return a + b + c;
}
함수(); // 60
함수(1000); // 1050
함수(1000, 2500); // 3530
함수(1000, 2500, 3000); // 6500
함수((c = 3000)); // 3050
함수((a = 1000), (c = 3000)); // 4020이 아닌 순서대로 값이 들어가 4030이 된다
함수((a = 1000), (b = 3000), (c = 2500)); // 6500 // 함수에서 값을 뒤바꾸면서 줄수 없다
함수((a = 1000), (c = 2500), (b = 3000)); // 6500
// 2. 화살표 함수
// 이렇게 코드를 작성하면 인자 x, y를 받는 함수 func이 만들어집니다.
// 함수 func는 화살표(=>) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환합니다.
function func(x, y) {
// (x, y) -> 파라미터,매개변수,인자
return x + y;
}
console.log(func(3, 4)); // -> 아규먼트, 인수
// 위 함수를 화살표 함수로 작성하면 아래와 같습니다.
// 함수는 선언 시 function 키워드를 화살표 기호로 대체하여 표현할 수 있습니다.
// 화살표 함수는 선언 시 제목을 정할 수 없기 때문에 표현식으로 사용해야 합니다.
let func = (x, y) => x + y;
console.log(func(3, 4));
// 만악 함수 실행시 전달하는 인자가 한 개라면 소괄호를 생략할 수 있습니다.
let func2 = (x) => x + 10;
console.log(func2(3));
// 화살표 함수 내부에서 한 줄 표현식만 반환한다면 return 키워드를 생략해도 됩니다.
let func3 = (x) => x + 10;
let 결과 = func3(2);
console.log(결과);
// 3. 함수의 주의사항
// test1과 test2의 값은?
let test1 = [10, 20, 30];
let test2 = 100;
// 값변경1 함수는 결과값이 [100,20,30]으로 나오게 하라
// 많이 헷갈려 꼭 기억
function 값변경1(arr) {
arr[0] = 100;
}
값변경1(test1);
console.log(test1); // [100, 20, 30]
// 값변경2 에서 value 와 test2이 가르키는 값은?
function 값변경2(value) {
value = 1000;
console.log(value);
}
값변경2(test2); // test2가 파라미터인 value로 들어가 메모리값을 가르킨다 // 후에 value만 메모리값이 1000을 가르키게 바뀐다
console.log(test2); // 여전히 100을 가르킴
