자바스크립트 함수 (정의와 호출, 매개변수와 반환값, 익명 함수와 화살표 함수, 콜백함수)
4. 자바스크립트 함수
함수는 자바스크립트에서 코드의 재사용성을 높이고, 프로그램을 구조화하는 데 중요한 역할을 합니다. 함수는 하나의 작업을 수행하는 독립적인 코드 블록으로, 필요할 때마다 호출하여 여러 번 사용할 수 있습니다. 이 장에서는 함수의 정의와 호출, 매개변수와 반환값, 익명 함수와 화살표 함수, 그리고 콜백 함수에 대해 다룹니다.
4.1 함수 정의와 호출
자바스크립트에서 함수를 정의하는 방법은 여러 가지가 있으며, 각 방법에 따라 코드의 스타일이 달라질 수 있습니다. 함수를 정의한 후에는 그 함수를 호출하여 사용할 수 있습니다.
4.1.1 함수 선언식
함수 선언식은 function 키워드를 사용하여 함수를 정의하는 가장 기본적인 방법입니다. 함수 이름을 지정하고, 함수 본문에 실행할 코드를 작성합니다.
javascriptfunction 함수이름(매개변수1, 매개변수2, ...) {
// 실행할 코드
return 반환값; // 반환값은 선택적
}
예시:
javascriptfunction greet(name) {
return `Hello, ${name}!`;
}
console.log(greet("Alice")); // Hello, Alice!
console.log(greet("Bob")); // Hello, Bob!
위 예제에서 greet라는 함수는 name이라는 매개변수를 받아서 문자열을 반환합니다. 이 함수는 두 번 호출되었으며, 각각 다른 이름을 전달했습니다.
4.1.2 함수 표현식
함수 표현식은 함수를 변수에 할당하는 방식입니다. 함수 선언식과 달리 함수 이름이 없을 수 있으며, 변수에 익명 함수를 할당하여 사용합니다. 이 방식은 주로 함수를 일급 객체처럼 다루기 위해 사용됩니다.
javascriptconst 함수이름 = function(매개변수1, 매개변수2, ...) {
// 실행할 코드
return 반환값; // 반환값은 선택적
};
예시:
javascriptconst add = function(a, b) {
return a + b;
};
console.log(add(2, 3)); // 5
console.log(add(10, 20)); // 30
위 코드에서는 add라는 변수에 익명 함수를 할당하여 두 숫자의 합을 구하는 함수로 사용했습니다.
4.1.3 즉시 실행 함수 (IIFE, Immediately Invoked Function Expression)
즉시 실행 함수는 함수 정의와 동시에 호출되는 함수입니다. 함수 선언을 괄호로 감싸고, 즉시 호출하기 위해 다시 괄호를 사용합니다. 주로 전역 변수를 오염시키지 않고 한 번만 실행할 코드를 작성할 때 사용됩니다.
javascript(function() {
console.log("이 함수는 즉시 실행됩니다.");
})();
예시:
javascript(function(name) {
console.log(`Hello, ${name}!`);
})("Charlie");
출력: Hello, Charlie!
4.2 매개변수와 반환값
함수는 매개변수와 반환값을 통해 입력을 받고, 결과를 반환할 수 있습니다. 매개변수는 함수 호출 시 전달되는 입력값을 의미하며, 반환값은 함수가 처리한 결과를 반환하는 값입니다.
4.2.1 매개변수
매개변수는 함수가 호출될 때 전달받을 수 있는 값을 의미합니다. 함수 내에서 매개변수는 변수처럼 사용되며, 전달된 값을 기반으로 작업을 수행합니다. 함수는 여러 개의 매개변수를 가질 수 있으며, 매개변수를 생략하거나 기본값을 설정할 수도 있습니다.
예시:
javascriptfunction multiply(a, b) {
return a * b;
}
console.log(multiply(5, 10)); // 50
console.log(multiply(7, 3)); // 21
이 함수는 a와 b라는 두 개의 매개변수를 받아서 그 값을 곱한 결과를 반환합니다.
4.2.2 기본 매개변수 (Default Parameters)
ES6부터는 기본 매개변수를 설정할 수 있습니다. 매개변수가 전달되지 않으면 기본값이 사용됩니다.
예시:
javascriptfunction greet(name = "Guest") {
return `Hello, ${name}!`;
}
console.log(greet("Alice")); // Hello, Alice!
console.log(greet()); // Hello, Guest!
위 예제에서 greet 함수는 name 매개변수를 전달하지 않았을 때 기본값으로 "Guest"를 사용합니다.
4.2.3 반환값
함수는 작업을 수행한 후 결과를 반환할 수 있습니다. return 문을 사용하여 함수를 호출한 곳으로 값을 반환할 수 있으며, return이 호출되면 함수는 즉시 종료됩니다.
예시:
javascriptfunction divide(a, b) {
if (b === 0) {
return "Cannot divide by zero";
}
return a / b;
}
console.log(divide(10, 2)); // 5
console.log(divide(10, 0)); // Cannot divide by zero
위 예제에서 divide 함수는 두 숫자를 나누는 함수로, 두 번째 매개변수가 0이면 나눗셈이 불가능하므로 오류 메시지를 반환합니다.
4.2.4 반환값이 없는 함수
모든 함수가 반드시 값을 반환할 필요는 없습니다. 반환값이 없는 함수는 undefined를 반환합니다.
예시:
javascriptfunction sayHello(name) {
console.log(`Hello, ${name}!`);
}
sayHello("Alice"); // Hello, Alice!
sayHello 함수는 값을 반환하지 않고, 단순히 콘솔에 메시지를 출력합니다. 이 경우 함수의 반환값은 undefined입니다.
4.3 익명 함수와 화살표(Arrow) 함수
익명 함수와 화살표 함수는 자바스크립트에서 함수 정의의 간결성을 제공하는 중요한 개념입니다.
4.3.1 익명 함수
익명 함수는 이름이 없는 함수입니다. 보통 함수 표현식으로 정의되며, 함수가 변수나 다른 함수의 매개변수로 전달될 때 자주 사용됩니다.
예시:
javascriptconst square = function(x) {
return x * x;
};
console.log(square(5)); // 25
익명 함수는 특별한 이름 없이 사용할 수 있으며, 특정 작업을 수행하고 변수에 할당되거나, 함수의 매개변수로 전달됩니다.
4.3.2 화살표 함수
ES6에서 도입된 화살표 함수는 함수 표현식을 더 간결하게 작성할 수 있는 방법입니다. 화살표 함수는 function 키워드 대신 => 문법을 사용하며, 코드가 더 깔끔하고 직관적입니다. 화살표 함수는 this를 자신이 속한 외부 스코프에서 상속받는다는 중요한 특징을 가지고 있습니다.
javascriptconst 함수이름 = (매개변수1, 매개변수2, ...) => {
// 실행할 코드
return 반환값; // 반환값은 선택적
};
4.3.3 화살표 함수의 간단한 형태
화살표 함수는 단일 표현식을 반환할 때 return 문과 중괄호를 생략할 수 있습니다.
예시:
javascript// 일반 함수 표현식
const add = function(a, b) {
return a + b;
};
// 화살표 함수로 변환
const addArrow = (a, b) => a + b;
console.log(addArrow(3, 4)); // 7
매개변수가 하나일 경우에는 괄호도 생략할 수 있습니다.
예시:
javascriptconst square = x => x * x;
console.log(square(5)); // 25
매개변수가 없을 때는 빈 괄호를 사용합니다.
javascriptconst greet = () => console.log("Hello, world!");
greet(); // Hello, world!
4.3.4 화살표 함수와 this
화살표 함수는 자신만의 this 바인딩을 가지지 않고, 외부 스코프의 this 값을 상속받습니다. 이 특성은 특히 콜백 함수나 메서드 내에서 유용하게 사용됩니다.
예시:
javascriptconst person = {
name: "Alice",
age: 25,
greet: function() {
setTimeout(() => {
console.log(`Hello, my name is ${this.name}.`);
}, 1000);
}
};
person.greet(); // 1초 후 Hello, my name is Alice.
위 예제에서 화살표 함수는 외부 스코프의 this를 상속받아 person 객체의 name 속성을 올바르게 참조 합니다.
4.4 콜백 함수
콜백 함수는 다른 함수의 매개변수로 전달되어 실행되는 함수입니다. 자바스크립트는 비동기 작업(예: 이벤트 처리, AJAX 요청 등)을 많이 수행하므로, 콜백 함수는 매우 자주 사용됩니다.
4.4.1 콜백 함수의 기본 개념
콜백 함수는 특정 작업이 완료되었을 때 실행되는 함수입니다. 비동기적으로 동작하거나, 특정 조건이 충족되었을 때 실행되는 함수로 정의할 수 있습니다.
javascriptfunction executeCallback(callback) {
console.log("작업을 시작합니다.");
callback(); // 전달된 콜백 함수 실행
}
function callbackFunction() {
console.log("콜백 함수가 실행되었습니다.");
}
executeCallback(callbackFunction);
출력:
작업을 시작합니다. 콜백 함수가 실행되었습니다.
4.4.2 익명 함수와 콜백 함수
콜백 함수는 종종 익명 함수로 전달됩니다. 이를 통해 함수를 명시적으로 정의하지 않고도, 필요한 작업을 즉석에서 처리할 수 있습니다.
예시:
javascriptfunction executeCallback(callback) {
console.log("작업을 시작합니다.");
callback(); // 전달된 콜백 함수 실행
}
executeCallback(function() {
console.log("익명 콜백 함수가 실행되었습니다.");
});
4.4.3 비동기 콜백
자바스크립트에서 콜백 함수는 주로 비동기 작업을 처리할 때 사용됩니다. 예를 들어, 데이터를 서버에서 가져오거나, 파일을 읽는 작업이 완료되면 콜백 함수가 실행됩니다.
예시:
javascriptconsole.log("첫 번째 작업 시작");
setTimeout(() => {
console.log("2초 후 실행될 작업");
}, 2000);
console.log("두 번째 작업 완료");
출력:
첫 번째 작업 시작 두 번째 작업 완료 2초 후 실행될 작업
위 예제에서 setTimeout은 2초 후에 콜백 함수를 실행합니다. 자바스크립트는 비동기 방식으로 setTimeout을 처리하므로, 두 번째 작업이 먼저 완료된 후 콜백 함수가 나중에 실행됩니다.
이 장에서는 함수의 정의와 호출, 매개변수와 반환값, 익명 함수와 화살표 함수, 그리고 콜백 함수에 대해 알아보았습니다. 함수는 자바스크립트 프로그래밍에서 매우 중요한 요소이며, 다양한 상황에서 함수의 특성을 잘 활용하면 더욱 깔끔하고 효율적인 코드를 작성할 수 있습니다.
){kind=link}
댓글 쓰기
0 댓글