JavaScript에서 함수 선언과 export default 방식의 차이

두 방식 모두 기능적으로 동일하지만, 사용할 때 약간의 차이가 있으므로 상황에 따라 적절히 선택하는 것이 좋다.

 

1. `export default function multiply(a, b) {...}` (함수 선언과 동시에 내보내기)

유의할 점: 

• 함수 이름: 이 방식으로 내보내면 함수 이름이 명시적으로 필요하지 않은 상황에서 유용하다. 함수가 주로 기본 내보내기 용도로만 사용되고, 이름 자체는 파일 내부에서만 의미가 있을 때 적합하다.
• Hoisting(호이스팅): 함수 선언과 동시에 내보내는 방식은 함수가 호이스팅되기 때문에 파일 내에서 함수를 호출할 때, 선언된 위치와 상관없이 사용할 수 있다.

console.log(multiply(2, 3)); // 정상 작동
export default function multiply(a, b) { return a * b; }

 

유의할 점 요약:

• 함수를 호이스팅하여 사용할 수 있다.
• 함수 이름은 외부 모듈에서 사용할 떄 크게 중요하지 않다.

 

 

2. `function multiply(a, b) {...} export default multiply;`(함수 선언 후 내보내기)

유의할 점: 

• 함수 이름: 이 방식은 먼저 함수를 선언하고, 나중에 내보내기 때문에 파일 내에서 함수 이름이 의미가 있는 경우에 적합하다. 예를 들어, 같은 파일 내에서 함수 이름으로 해당 함수를 참조하고자 할 때 유리하다.

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

// multiply를 다른 곳에서도 사용 가능
const square = (x) => multiply(x, x);
export default multiply;

• Hoisting(호이스팅): 이 방식도 함수 선언은 호이스팅되지만, 내보내기(export default)는 나중에 처리되므로 내보내기 전에 파일 내부에서 함수 참조가 가능하다.

 

유의할 점 요약:

• 파일 내에서 함수를 참조할 때 유리함.
• 내보내기 전에 함수 이름으로 다른 작업을 할 수 있음.

 

 

3. 결론: 유의할 점 비교

1. 함수 이름이 외부에서 중요하지 않다면, 첫 번째 방식(함수 선언과 동시에 내보내기)을 사용하는 것이 깔끔하다.
2. 파일 내부에서 함수 이름을 참조하거나 다른 작업이 필요한 경우, 두 번째 방식(함수 선언 후 내보내기)이 더 유연하다.

 

어떤 방식을 선택할지 상황에 따라 달라지지만, 기능적으로는 큰 차이가 없기 때문에 코드 가독성과 유연성을 고려해 선택하면 된다.