JavaScript의 파일에서 모든 함수 내보내기
이 기사에서는 JavaScript 소스 코드에서 내보내기 용어의 목적과 이점에 대해 알아봅니다. JavaScript 내보내기 용어를 사용하여 함수를 내보내는 방법을 살펴보겠습니다.
JavaScript의 파일에서 모든 함수 내보내기
모듈에서 함수, 개체 및 기타 기본 값을 내보내기 위해 JavaScript에서 내보내기 용어를 사용하므로 수입 용어를 사용하여 함수 또는 개체를 다른 JavaScript 프로그램에서 사용할 수 있습니다. 내보낸 모듈이 값을 업데이트하면 가져온 값에도 표시됩니다.
포함된 스크립트에서 export 문을 사용할 수 없으며 내보내기 모듈은 선언 여부에 관계없이 strict 모드에 있습니다.
내보내기 유형:
- 명명된 내보내기
- 기본 내보내기
명명된 내보내기 기본 구문
모듈별로 이 유형에서 0개 이상의 내보내기를 추가할 수 있습니다.
export let myVariable = 'hello world!';
export function myFunction() {/* ... */
};
기본 내보내기 기본 구문
모듈별로 이 유형의 단일 기본 내보내기만 추가할 수 있습니다.
export {myFunction as default};
export default function() {/* ... */
}
내보내기 기능을 사용하여 JavaScript의 파일에서 모든 기능 내보내기
export 문을 사용하여 JavaScript에서 함수를 내보내면 됩니다(예: export function createSum() {}). 그리고 다른 JavaScript 프로그램에서 내보낸 함수를 가져오려면 import 문을 올바른 경로와 함께 사용합니다(예: import {createSum} from './firstFile.js).
단일 파일에서 필요한 만큼 많이 named export를 사용할 수 있으며, 아래와 같이 function 객체를 생성하고 export를 사용하여 단일 JavaScript 파일에서 여러 기능을 한 번에 내보낼 수 있습니다.
function function1() {}
function function2() {}
export {function1, function2} // export with combined as object
JavaScript에서 내보내기 기능의 예
우선 아래와 같이 내보낼 함수에 대한 기본 파일을 만들고 이름을 helperFunction.js로 지정해야 합니다.
export function createSum(y, z) {
return y + z; // that will return sum
}
위에 표시된 대로 helperFunction.js 파일을 만들고 두 개의 값을 인수로 사용하는 내보내기 용어를 사용하여 createSum() 함수를 선언했습니다. 최신 JavaScript의 화살표 기능에 Named Export를 사용할 수도 있습니다.
이제 이 함수를 기본 JavaScript 파일로 가져와서 아래와 같이 사용해야 합니다.
import {createSum} from './helperFunction.js';
let value1 = 10;
let value2 = 15;
let result = createSum(value1, value2)
console.log('Sum of two values is : ' + result);
출력:
Sum of two values is : 25
위에 표시된 대로 가져오기 용어를 사용하여 기본 파일에서 올바른 경로로 도우미 파일 기능을 가져왔습니다. 그런 다음 변수에서 두 값을 초기화했습니다.
그런 다음 createSum()을 호출하고 두 값 변수를 인수로 전달하고 반환 값을 result 변수에 저장했습니다.
마지막으로 console.log() 메서드를 사용하여 합계 결과를 로그에 표시했습니다. 두 파일을 모두 생성하고 위의 소스 코드를 저장하고 JavaScript 컴파일러를 사용하여 결과를 볼 수 있습니다.