기본 내보내기 vs. 이름 지정 내보내기

Coddy JavaScript 여정의 객체 지향 프로그래밍 섹션에 포함된 레슨. 56개 중 10번째.

JavaScript 모듈에서는 코드를 내보내는 두 가지 주요 방법이 있습니다. named exports와 default exports입니다.

명명된 Export를 사용하면 모듈에서 여러 값을 export할 수 있습니다:

// math.js
export function add(a, b) {
    return a + b;
}
export function subtract(a, b) {
    return a - b;
}

named export를 가져올 때는 중괄호 안에 정확히 같은 이름을 사용해야 합니다:

// app.js
import { add, subtract } from './math.js';

console.log(add(5, 3));      // 8
console.log(subtract(10, 4)); // 6

named import의 이름을 변경해야 한다면, as 키워드를 사용하여 alias를 만드세요:

// app.js
import { add as sum, subtract as minus } from './math.js';

console.log(sum(5, 3));   // 8
console.log(minus(10, 4)); // 6

default 내보내기를 사용하면 모듈에서 하나의 주요 값을 내보낼 수 있습니다:

// user.js
const user = {
  name: 'John',
  age: 30
};

export default user;

default export를 가져올 때는 중괄호 없이 원하는 이름을 사용할 수 있습니다:

// app.js
import person from './user.js';

console.log(person.name); // 'John'

무엇을 언제 사용할까요? 모듈이 여러 관련 유틸리티(예: 도우미 함수 모음)를 제공할 때는 named exports를 사용하세요. 모듈에 하나의 주요 목적이나 핵심 값(예: 클래스, 컴포넌트 또는 구성 객체)이 있을 때는 default export를 사용하세요.

단일 모듈에서 both 유형의 export를 결합할 수 있습니다:

// vehicle.js
export const wheels = 4;
export const doors = 4;

const car = {
  brand: 'Toyota',
  model: 'Corolla'
};

export default car;

그리고 함께 가져옵니다:

// app.js
import myCar, { wheels, doors } from './vehicle.js';

console.log(myCar.brand);  // 'Toyota'
console.log(wheels);       // 4

챌린지

쉬움

두 개의 파일이 있습니다. calculator.js에서 내보내기와 main.js에서 가져오기를 설정하는 것이 과제입니다.

calculator.js에서: calculate을 default로, square를 named로 내보내세요.
main.js에서: 두 함수를 올바르게 가져오세요.

테스트 항목:

calculate에 default 내보내기 사용
square에 named 내보내기 사용
두 가져오기가 모두 올바르게 작동

직접 해보기

// TODO: calculator.js에서 두 함수를 모두 여기에 가져오세요


// 테스트
console.log(calculate(10, 5, '+')); // 15를 출력해야 합니다
console.log(square(4));             // 16을 출력해야 합니다