IIFE, Module

 

 

IIFE

IIFE는 즉시 호출 함수 표현식을 말하며 스코프 영역내에서 외부 변수의 접근을 막고 즉시 호출하는 함수를 만들고 싶을때 사용된다.

 

//1.
(function()){
 	console.log("Hello World!")
 }()//Hello World!

//2.
(function func()){
 	console.log("Hello World!02")
 }()//Hello World!02
func()//error

//3.
(func03 = function(x){
  console.log(`Hello World! ${x}`)
})();//Hello World! undefined
func03("kim")//Hello World! kim

IIFE는 선언과 동시에 즉시 호출되며 특징은 함수명이 생략될 수 있다. 일반적인 함수 표현식처럼 호이스팅이 된다.

2번처럼 함수 선언식을 즉시 함수 표현식으로 바꿀 수 있지만 재사용이 불가하다.

3번처럼 즉시 함수 표현식을 만들 수 있으며 재사용이 가능하다. 

 

 

Module

처음 자바스크립트는 모듈시스템이 없었지만 점차 발전하는 프론트엔드 환경에 대비해 모듈의 중요성을 깨닿고 도입을 시도했다. 현재 Node.js는 CommonJS의 모듈시스템을 채택하였고, ES6부터는 자바스크립트 자체적으로 모듈시스템을 도입했다.

CommonJS와 AMD에대한 네이버D2글

모듈은 로컬 파일에서 동작하지 않고, HTTP 또는 HTTPS 프로토콜을 통해서만 동작합니다.🤣

- Node의 module : require

//file01.js
const mode = "kim";
module.exports = mode;
//------------------------------------
//file02.js
const mode = require('./file01.js')
console.log(mode)//kim

중복으로도 export가 가능하며 함수도 내보내진다.

//file01.js
const mode01 = "kim";
const mode02 = function(){
 	return "lee" 
}
module.exports = { mode01, mode02 }
//------------------------------------
//file02.js
const mode = require('./file01.js')
console.log(mode.mode01)//kim
console.log(mode.mode02)//kim

• 상대경로에 있는 파일중 확장자.js, .json, .node파일을 불러올 수 있다.
• 만약 경로로 폴더를 지정했다면 해당폴더안의 index파일을 찾는다.
• 만약 경로 표시자 없으면 최상위 경로로 시작하여 /node_modules폴더를 앞에 붙이고 탐색한다.
• 위 3가지 경로를 못 찾으면 OS글로벌 파일을 탐색한다.

- Browser의 module : import

ES6부터는 모듈시스템이 도입됬습니다. 하지만 ie에선 작동이 불가능하다.

import모듈의 특징

• 모듈은 항상 엄격 모드(use strict)로 실행된다.
• 모듈은 자신만의 스코프가 있으므로 모듈 내부에서 정의한 변수나 함수는 다른 스크립트에서 접근할 수 없다.
• 동일한 모듈이 여러 곳에서 사용되더라도 모듈은 최초 호출 시 단 한 번만 실행되며 실행 후 결과는 이 모듈을 가져가려는 모든 모듈에 내보내진다. 예를 들어 file01에서 프로퍼티를 바꾸면 file02에서도 프로퍼티가 바뀌어진 값이 나온다.
• import.meta 객체는 현재 모듈에 대한 정보를 제공해준다.
• this는 undefined가 출력된다.

<script type="module">
	let user = "John";
</script>
<script type="module">
	alert(user)//error
</script>

만약 모듈을 사용하고 싶으면 type="module"을 지정해 줘야한다. 이렇게 하면 위에서 설명했듯이 모듈 레벨 스코프의 발동으로 독립적인 영역이 되어 alert(user)가 error가 나온다.

//file01.js
export const mode01 = "kim";
const mode02 = "lee";
const mode03 = "park";

export mode02
//or 여러개 내보낼때 export {mode02, mode03}

//------------------------------------
//file02.js
import mode from "./file01";//export한거 객체 불러오기
import {mode02, mode03} from "./file01";//export 부분만 불러오기

console.log(mode.mode01)//kim

• file01에서 mode01앞에 export를 붙여 즉시 내보내기가 가능하다.
• require처럼 모아서 내보내기도 가능하다.
• 한번에 불러오는 임포트시에는 임포트한 모듈의 네임을 지정해야한다.
• 부분만 불러오는 임포트시 export한 부분만 일부 불러올 수가 있다.

//file01.js
const mode01 = "kim";
export default mode01

//------------------------------------
//file02.js
import mode from "./file01";
console.log(mode)//kim

export default를 하면 모듈 파일에서 지정한 한개만 내보낼 수 있다.

//file01.js
export const mode01 = "kim";
export const mode02 = "lee";

//------------------------------------
//file02.js
import {mode01, mode02 as A , B}mode from "./file01";
import * All from "./file02";
console.log(mode)//kim

as를 통하여 별칭을 정할 수 있다.
*을 사용하여 모든 export를 불러올 수 있다.

 

https://velog.io/@404/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%95%B5%EC%8B%AC%EC%BB%A8%EC%83%9933ES6-8.-IIFE-Modules-and-Namespaces