함수는 자바스크립트에서 가장 중요한 핵심 개념입니다..
함수는 자바스크립트를 정확히 이해하고 사용하기 위해 피해갈 수 없는 핵심 중의 핵심입니다 !
함수
자바스크립트 함수는 특정 작업을 수행하는 코드 블록입니다. 함수는 여러 번 호출될 수 있으며, 매번 호출될 때마다 동일한 작업을 수행합니다. 함수는 코드이 재사용성을 높이고, 코드를 더 구조화하며, 유지보수를 쉽게 만들어 줍니다.
함수 정의
함수 정의란 함수를 호출하기 이전에 인수를 전달받을 매개변수와 실행할 코드들, 그리고 반환할 값을 지정하는 것을 말합니다.
함수를 정의하는 방법에는 4가지가 있습니다.
| 함수 정의 방식 | 예시 |
|---|---|
| 함수 선언문 | function add(num1,num2) { return num1+num2; } |
| 함수 표현식 | const add = function(num1,num2) { return num1+num2; } |
| Function 생성자 함수 | const add = new Function('num1','num2','return num1+num2'); |
| 화살표 함수(ES6) | const add = (num1,num2) => num1+num2; |
함수 선언문
함수 선언문은 function 키워드를 사용하여 함수의 이름과 함께 정의합니다. 함수 선언문은 호이스팅의 영향을 받기 때문에 함수 선언문은 코드이 어디에서든 호출이 가능합니다.
function add(num1, num2) {
return num1 + num2;
}
add(1,2);함수 선언문은 함수 리터럴과 형태가 동일합니다. 단, 함수 리터럴은 함수 이름을 생략할 수 있으나 함수 선언문은 함수 이름을 생략할 수 없습니다.
function (num1, num2) {
return num1 + num2;
}
// SyntaxError : Function statements require a function name함수 표현식
함수 표현식은 변수를 사용하여 함수를 정의하는 방식입니다. 함수 표현식은 호이스팅의 영향을 받지 않기 때문에 함수가 정의된 이후에만 호출이 가능합니다.
const add = function(num1, num2) {
return num1 + num2;
}
const result = add(1,2);Function 생성자 함수
Function 생성자 함수로 함수를 생성하는 방식은 일반적이지 않으며 바람직하지 않습니다. Function 생성자 함수로 생성한 함수는 클로저를 생성하지 않고 함수 선언문이나 함수 표현식으로 생성한 함수와 다르게 동작합니다.
const add = new Function('num1', 'num2', 'return num1 + num2');new 연산자 없이 호출해도 결과는 동일합니다.
화살표 함수
ES6에서 도입된 화살표 함수는 function 키워드 대신 화살표=>를 사용해 좀 더 간략한 방법으로 함수를 선언할 수 있습니다.
const add = (num1, num2) => {
return num1 + num2;
}
const result = add(1, 2);
다양한 함수의 형태
즉시 실행 함수
함수 정의와 동시에 즉시 호출되며 즉시 실행 함수는 단 한번만 호출되며 다시 호출이 불가능합니다.
(function () {
const num1 = 1;
const num2 = 2;
return num1 + num2;
}());재귀 함수
함수가 자기 자신을 호출하는 것을 재귀 호출이라 합니다. 재귀 함수는 자기 자신을 호출합니다. 재귀 함수는 반복되는 처리를 위해 사용합니다.
function countdown(num) {
if(num < 0) return;
console.log(num)
countdown(num - 1);
}재귀 함수는 자신을 무한 재귀 호출합니다. 따라서 재귀 함수 내에는 재귀 호출을 멈출 수 있는 탈출 조건이 반드시 필요합니다.
콜백 함수
콜백 함수는 다른 함수에 인자로 전달되어 특정 작업이 완료된 후 호출되는 함수입니다. 비동기 프로그래밍, 이벤트 핸들링, 배열 메서드 등에서 자주 사용됩니다.
document.getElementById('btn').addEventListener('click', function() {
console.log('button clicked!');
}위의 콜백 함수는 버튼이 클릭되면 콘솔에
button clicked!를 출력합니다.
setTimeout(function() {
console.log('1초 경과');
}, 1000);위의 콜백 함수는 1초가 경과하면 콘솔에
1초 경과를 출력합니다.
✅ 참고
