함수와 모듈 / 함수 호출() 함수 참조, Export Default Import /Export Named Import

모듈 Module

재사용 가능한 코드 덩어리

파일 단위로 import export 하는 것

 

함수 Function

math.js 라는 파일이 있다면

이 파일 전체가 모듈이고 각각 내장된 함수들이 기능한다

export function add(a, b) { return a + b; }
export function subtract(a, b) { return a - b; }

 

불러올 때 () 붙이고 안붙이고의 차이도 있는데

이를

함수 참조와 함수 호출이라고 부른다

 

함수 호출(실행) -  () 있음

함수를 호출한 코드에서 실행하는 것

function greet() {
  return 'Hello!';
}

console.log(greet());  // "Hello!" ← 함수 실행 결과
console.log(typeof greet()); // "string"

// 함수 결과를 변수에 할당
const result = greet();  // () 있음 = 실행해서 결과값 저장
console.log(result);     // "Hello!"

 

함수  참조(자체) - () 없음

함수 자체를 가져와서 나중에 실행하는 것

function greet() {
  return 'Hello!';
}

console.log(greet);    // [Function: greet] ← 함수 객체 자체
console.log(typeof greet); // "function"

// 함수를 변수에 할당
const myFunction = greet;  // () 없음 = 함수 복사
console.log(myFunction()); // "Hello!" ← 나중에 실행

 

이벤트 리스너를 예로 들면 이러하다)

 

이벤트 리스너함수는 'click'이벤트가 일어났을때 실행되어야 한다

그러나 함수실행() 형태로 함수를 가져오게되면 클릭 시점까지 기다려주지 않고 즉시 실행된다

// 올바른 사용법
function handleClick() {
  console.log('버튼 클릭됨!');
}

// ✅ 클릭할 때 실행됨
button.addEventListener('click', handleClick);

// ❌ 코드 실행 즉시 실행됨 (이벤트 등록 시점에)
button.addEventListener('click', handleClick());

 

Express의 미들웨어 함수를 사용하는 위와 같은 경우에도 그러하다

함수가 즉시 실행되지 않고, 사용되는 순간 실행되어야 하기 때문에 호출 형식으로 가져오게 된다

// 미들웨어 함수
function authenticate(req, res, next) {
  // 인증 로직
  next();
}

// 사용법 비교
router.get('/users', authenticate, handler);    // ✅ 함수 참조
router.get('/users', authenticate(), handler);  // ❌ 즉시 실행 (틀림)

// 매개변수가 있는 경우
function authorize(role) {
  return function(req, res, next) {
    // 권한 확인 로직
    next();
  };
}

router.get('/admin', authorize('admin'), handler);  // ✅ 함수를 리턴하는 함수

 

 

그렇다면 {}중괄호의 유무는 어떤 것에 의해 갈리게 되는 것일까

 

Export 방식에 따라 {중괄호}를 사용하게 될지 갈리게 된다.

 

export 시 Named Import 할 수 있게 하는 경우

(변수명을 부여하고 export)

 

{ }있는 Named Import 

// math.js (export 하는 쪽)
export function add(a, b) { return a + b; }      // ← named export
export const subtract = (a, b) => { return a - b; } // ← named export

const let function등 변수명으로 export 한다

// main.js (import 하는 쪽)  
import { add, subtract } from './math.js';  // ← {} 있음, 정확한 이름
import { add as 더하기 } from './math.js';  // ← as로 이름 변경 가능

console.log(add(1, 2));
console.log(더하기(1, 2));

import 시 { 중괄호 } 안에 실제 함수와 정확히 동일한 이름으로 불러와야한다. (혹은 as로 이름변경도 가능!)

구조 분해 할당

 

{ } 없는 Default Import

// math.js (export 하는 쪽)
const calculator = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b
};
export default calculator;  // ← default export

default로 선언하여 딱 하나의 기능(함수)만 export한다

// main.js (import 하는 쪽)
import calculator from './math.js';  // ← {} 없음
import calc from './math.js';        // ← 이름 자유롭게 변경 가능
import 계산기 from './math.js';      // ← 한글도 가능

console.log(calculator.add(1, 2));
console.log(calc.add(1, 2));

import 시 단 하나의 기능만을 제공받기 때문에 내가 원하는 이름으로 명명하여 사용할 수 있다!

함수를 사용할 땐 해당 요소(함수명)의 이름을 정확히 뒤에 기입하여 사용한다!!

 

결론

( )는 바로 실행

{ }는 선택적 가져오기