JavaScript에서 함수 export 방식 비교: export, export default, export {} 차이

// 1. export { multiply };
function multiply(a, b) {
  return a * b;
}
export { multiply };


// 2. export function multiply(a, b) {...}
export function multiply(a, b) {
  return a * b;
};


// 3. export default function multiply(a, b) {...}
export default function multiply(a, b) {
  return a * b;
};

 

세 가지 로직은 모두 `multiply`라는 함수를 정의하고 내보내는 방식이다. 각각의 `export` 방식에 따라 사용하는 방법이 다르다.

 

 

1. `export { multiply };`

function multiply(a, b) {
  return a * b;
}
export { multiply };

• 설명: 이 코드는 `multiply` 함수를 이름으로 내보내는 방식이다. 이 방식으로 내보내면 나중에 `import` 할 때 중괄호를 사용해야 한다.
• 사용 방법: 이 경우, import 시에 이름을 변경하거나 그대로 사용할 수 있다.
• import 예시:

import { multiply } from './path'; // 원래 이름으로 사용
import { multiply as times } from './path'; // 별칭(times) 사용 가능

• 특징: `{}`안에 여러 개의 이름을 나열하여 여러 함수를 동시에 내보낼 수 있다.

 

 

2. `export function multiply(a, b) {...}`

export function multiply(a, b) {
  return a * b;
};

• 설명: 이 방식은 함수 정의와 동시에 해당 함수를 `export`하는 것이다. 별도의 `export { multiply };`문 없이 함수 선언과 동시에 내보낸다.
• 사용 방법: 이 경우, import 시에 이름을 변경하거나 그대로 사용할 수 있다.

import { multiply } from './path'; // 원래 이름으로 사용
import { multiply as times } from './path'; // 별칭(times) 사용 가능

• 특징: 함수 선언과 동시에 내보내므로 코드가 더 간결해진다.

 

 

3. `export default function multiply(a, b) {...}`

export default function multiply(a, b) {
  return a * b;
};

• 설명: `export default`는 해당 모듈에서 하나의 기본 내보내기를 설정하는 방식이다. `default`로 내보내진 함수는 import할 때 중괄호 없이 가져올 수 있ㄷ.
• 사용 방법: 이름을 그대로 또는 바꿔서 가져올 수 있다.

import multiply from './path';
import times from './path'; // 원하는 이름으로 임포트

• 특징: 한 모듈에서는 하나의 기본 내보내기만 가능하고, import 시 이름을 자유롭게 지정할 수 있다.(별칭x)

 

 

4. 요약

• `export { multiply };`: 중괄호 `{}`를 사용해 함수나 변수를 내보내며, 별칭을 줄 수 있다. 
• `export function multiply(a, b) { ... }`: 함수 선언과 동시에 내보내며, 별칭 사용이 가능하다.
• `export default function multiply(a, b) { ... }`: 기본 내보내기(`default`)는 하나만 가능하며, 임포트할 때 이름을 자유롭게 변경할 수 있다.