1. 선언 위치
- 인라인 함수
- 인라인 함수는 일반적으로 해당 함수를 호출하는 곳에 직접 선언된다.
- 주로 콜백 함수나 짧은 동작을 수행하는 함수 등 간단한 작업에 사용된다.
- 아래 코드의
function(number) { return number * 2; }는map메서드 안에서 인라인으로 선언된 함수이다.- 해당 함수는 간단한 작업을 수행하기 때문에 별도로 분리하지 않고 인라인으로 작성되었다.
// 배열의 각 요소를 두 배로 만드는 인라인 함수
const numbers = [1, 2, 3, 4];
// 인라인 함수가 map 함수의 콜백으로 사용됨
const doubledNumbers = numbers.map(function(number) {
return number * 2;
});
console.log(doubledNumbers); // 출력: [2, 4, 6, 8]
- 모듈 함수
- 모듈 함수는 모듈 파일의 최상위 레벨에서 선언된다.
- 다른 모듈(별도 파일로 분리해서 선언)에서 불러와 사용할 수 있는 함수이다.
- 아래 예시에서
add와multiply함수는mathUtils.js파일에서 모듈 함수로 선언되었으며,app.js에서 이를 가져와 사용했다.- 이러한 모듈 함수는 여러 곳에서 재사용이 가능하고, 코드의 유지보수성을 높여준다.
mathUtils.js
// 모듈 함수 선언
export function add(a, b) {
return a + b;
}
export function multiply(a, b) {
return a * b;
}page.tsx (다른 모듈에서 함수 호출)
import { add, multiply } from './mathUtils.js'; // 모듈 함수 가져오기
const sum = add(5, 3);
const product = multiply(4, 2);
console.log(sum); // 출력: 8
console.log(product); // 출력: 8
2. 재사용성
- 인라인 함수
- 주로 해당 위치에서만 사용된다.
- 즉, 다른 곳에서 재사용되지 않고 해당 위치에서만 필요한 작업을 수행한다.
- 모듈 함수
- 다른 모듈에서 재사용될 수 있으므로 일반적으로 더 큰 범위에서 사용된다.
- 모듈 함수는 여러 곳에서 호출되어 동일한 작업을 수행할 수 있다.
3. 스코프
- 인라인 함수
- 주로 해당 함수를 포함하는 블록의 스코프 내에서만 유효하다.
- 함수가 선언된 블록을 벗어나면 사용할 수 없다.
- 모듈 함수
- 모듈 함수는 모듈의 전역 스코프에 정의되며, 해당 모듈 내의 모든 함수에서 사용할 수 있다.
- 물론, 다른 모듈에서 또다른 모듈을 가져와 사용할 수 있다.
4. 성능
- 인라인 함수
- 호출할 때마다 함수가 다시 정의되므로, 반복적으로 호출되는 경우 성능에 영향을 줄 수 있다.
- 모듈 함수
- 모듈 함수는 한 번 정의되고 다시 사용되므로 상황에 따라 성능 상의 이점이 있을 수 있다.
프론트엔드 입문 개발자입니다.