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에선 작동이 불가합니다 2022년 중순까지만 기다립시다.

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를 불러올 수 있습니다.

Namespaces

네임스페이스란 객체나 변수가 겹치지않게 안전한 소스코드를 만드는 개념입니다.
자바스크립트는 아직 네임스페이스를 위한 기능을 지원하지 않습니다. 하지만 여러가지 방법을 통해 네임스페이스와 비슷한 효과를 구현합니다.

Namespaces_01. IIFE사용

전역변수를 줄이기 위해 IIFE를 사용하는 방법이 있습니다. 선언과 동시에 바로 실행되므로 전역 객체를 오염시키지 않습니다.

var obj = (function func02(){
	var say = "HI";
  	
  	return console.log(say)
})();//Hi!

obj()

이런 식으로 사용하면 IIFE안의 say라는 변수이름은 사라지기때문에 걱정이 없습니다.

다른 방법으로 '즉시 객체 초기화'라는 방법도 있습니다.

({
	name : "kim",
  	say(){
    	console.log(`HI ${this.name}`)
    }
}).say()//hi kim

보는 그대로 객체사용후 바로 사라집니다.

Namespaces_02. 객체 사용

가장 기본적인 패턴입니다. 하나의 객체를 만든후 모든 객체를 여기에 추가합니다.

let container01 = {
	A : 1,
    B : 2,
  	subCon : {
    	C:3,
      	D(){
        	console.log("HI01")
        }
    }
}

let container02 = {
	A : 1,
    B : 2,
  	subCon : {
    	C:3,
      	D(){
        	console.log("HI02")
        }
    }
}

container01.A//1
container02.subCon.D()//HI02

공부하다 보니 제가 프로젝트때 사용하는 CSS네이밍 패턴이랑 매우 흡사합니다ㄷㄷ 워드프레스같은 경우가 요런 패턴으로 CSS를 만들었죠. 그리고 Class문법이랑도 좀 비슷합니다.