IIFE, 모듈 및 네임스페이스는 JavaScript에서 코드를 구조화하는 데 사용되는 중요한 개념입니다.
각 개념은 코드를 보다 쉽게 구조화하고 유지 관리할 수 있도록 서로 다른 방식으로 기여합니다.
1.IIFE
IIFE(Immediately Invoked Function Expression) IIFE는 즉시 실행되는 함수 표현식으로, 함수를 정의한 후 즉시 호출하는 것을 의미합니다.
이를 통해 전역 범위를 오염시키지 않고 모듈화할 수 있으며 클로저를 사용하여 개인 변수를 생성하여 정보를 숨기는 데에도 사용됩니다.
사용 방법은 다음과 같습니다.
(function() {
// 함수 내 코드
})();
2. 모듈
모듈은 JavaScript 코드를 여러 파일로 나누어 개발하고 유지 관리하는 방법입니다.
각 모듈은 다른 모듈과 독립적으로 존재하며 필요한 모듈을 가져와서 사용할 수 있습니다.
모듈은 일반적으로 단일 책임 원칙(SRP)을 따르고 다른 모듈이 액세스할 수 있는 공용 인터페이스를 정의합니다.
ES6부터 JavaScript에는 기본적으로 모듈 기능이 포함되어 있으므로 import 및 export 키워드를 사용하여 모듈을 정의하고 가져올 수 있습니다.
사용 방법은 다음과 같습니다.
// 모듈 내보내기
export const functionName = () => {
// 함수 내 코드
}
// 모듈 가져오기
import { functionName } from './moduleName.js';
3. 네임스페이스
네임스페이스는 이름 충돌을 피하기 위해 관련 변수와 함수를 그룹화하는 방법입니다.
네임스페이스는 객체를 이용하여 구현되며, 함수와 변수는 객체의 속성으로 추가되어 사용됩니다.
이것은 전역 범위에서 충돌을 방지하고 코드 가독성과 유지 관리성을 향상시킵니다.
사용 방법은 다음과 같습니다.
// 네임스페이스 생성
const myNamespace = {
functionName: () => {
// 함수 내 코드
},
variableName: 'value'
};
// 네임스페이스 사용
myNamespace.functionName();
console.log(myNamespace.variableName);
참고 자료
필수 JavaScript: 직접 호출되는 함수 표현식 마스터하기
기능을 안팎으로 이해하고 이를 사용하여 현대적이고 깔끔한 JavaScript 코드를 작성하는 방법을 배우는 것은…
vvkchandra.medium.com
– https://blog.cloud66.com/an-overview-of-es6-modules-in-javascript
JavaScript의 ES6 모듈 개요
Cloud 66을 무료로 사용해 보세요. 신용카드가 필요하지 않습니다. 지금 시작하세요
blog.cloud66.com