[JavaScript 33가지 지식]IIFE,Modules, Namesapeces

 

즉시실행함수 IIFE(Immediately-invoked function expression)특성들

1)클래식한 IIFE 스타일

(function () {
  alert("I am an IIFE, too!");
})();

//alrert창 바로 실행이된다.

표현  그대로 정말 즉시 실행된다.

IIFE(private)

IIFE 내부에 정의된 어떤 변수라도 바깥 세상에서는 보이지 않습니다

(function IIFE() {
  // IIFE 밖에서는 접근할 수 없는 Private 변수들입니다.
  var test = 5;

  inner(); //inner start
  console.log(test); //5

  // IIFE 밖에서는 접근할 수 없는 Private 함수입니다.
  function inner() {
    console.log("inner start");
  }
})();

inner(); //ReferenceError: inner is not defined
console.log(test)//ReferenceError: test is not defined

이 예제에서, 우리는 IIFE 내부 변수와 함수를 선언했습니다.
그리고 변수와 함수는 IIFE에 private합니다.

 

IIFE 밖에서 어느 누구도 변수와 함수들에 접근할 수 없습니다.(private하다)
비슷하게, 우리는 inner함수가 있고 그 안에 있는 변수들은 IIFE 밖에서 누구도 접근할 수 없습니다.

하지만 inner 함수에서는 바깥 변수에 접근 가능합니다.

 

위와 같은 특성때문에 코드는 계속 동작할 것이지만 전역 스코프를 오염시키지 않습니다.

 전역 스코프를 실수로 혹은 의도적으로 수정하는 다른 누군가로부터 코드를 보호할 수 있습니다.

값을 리턴하는 IIFE

var result = (function () {
  return "From IIFE";
}());

alert(result); // "From IIFE" 메시지를 출력합니다.

1. 우리는 이 문체 2번째 줄에서, statement를 반환하는 IIFE를 갖습니다.
2. 우리가 위의 코드를 실행할 때, 5번째 줄은 IIFE에서 반환된 값과 함께 alert 메시지를 보여줍니다.

파라미터가 있는 IIFE

(function IIFE(msg, times) {
  for (var i=1; i<=times; i++){
    console.log(msg);  
  }
}("Hello!", 5));
//Hello 5번 출력

 

즉시 실행 함수는 한 번의 실행만 필요로 하는 초기화 코드 부분에 많이 사용됩니다.

그렇다면 왜 초기화 코드 부분에 많이 사용 할까요? 

변수를 전역(global scope)으로 선언하는 것을 피하기 위해서 입니다.
전역에 변수를 추가하지 않아도 되기 때문에 코드 충돌 없이 구현 할 수 있어, 플러그인이나 라이브러리 등을 만들 때 많이 사용됩니다.

클래식한 자바스크립트 모듈 패턴

var Sequence = (function sequenceIIFE() {
  // 현재 counter 값을 저장하기 위한 Private 변수입니다.
  var current = 0;
  
  // IIFE에서 반환되는 객체입니다.
  return {
  };
  
}());

alert(typeof Sequence); // alert("Object");

1. 위의 예제에서 우리는 객체를 반환하는 IIFE를 만들었습니다. 7번째와 8번째 줄을 보시면 나옵니다.
2. 우리는 또 IIFE 내부에 current라는 이름을 갖는 지역 변수를 만들었습니다.
3. 이 예제에서 IIFE의 반환 값인 객체는 Sequence라는 변수에 할당됩니다. 12번째 줄에서는 우리가 IIFE에서 반환한 "object" 메시지를 올바르게 출력하고 있습니다.

var Sequence = (function sequenceIIFE() {

  // 현재 counter 값을 저장하기 위한 Private 변수
  var current = 0;
  
  // IIFE로 부터 반환 받는 객체
  return {
    getCurrentValue: function() {
      return current;  
    },
    
    getNextValue: function() {
      current = current + 1;
      return current;
    }
  };
  
}());

console.log(Sequence.getNextValue()); // 1
console.log(Sequence.getNextValue()); // 2
console.log(Sequence.getCurrentValue()); // 2

1. 이 예제에서, IIFE가 리턴하는 객체에 우리는 2가지 함수를 추가했습니다.
2. 8-10번째 줄은 current 변수가 가진 값을 반환하는 *getCurrentValue 함수를 추가했습니다.
3. 12-15번째 줄은 current 변수를 1 증가시키고 반환하는 getNextValue 함수를 추가했습니다.

current 변수가 IIFE에서 private하기 때문에,

클로져를 통해 여기에 접근할 수 있는 함수 말고는 누구도 current 변수의 값에 접근하거나 그 값을 수정할 수 없습니다.

---

Module

모듈이란 여러 기능들에 관한 코드가 모여있는 하나의 파일 로 다음과 같은 것들을 위해 사용한다.

 

• 유지보수성 : 기능들이 모듈화가 잘 되어있다면, 의존성을 그만큼 줄일 수 있기 때문에 어떤 기능을 개선한다거나 수정할 때 훨씬 편하게 할 수 있다.
• 네임스페이스화 : 자바스크립트에서 전역변수는 전역공간을 가지기 때문에 코드의 양이 많아질수록 겹치는 네임스페이스가 많아질 수 있다. 그러나 모듈로 분리하면 모듈만의 네임스페이스를 갖기 때문에 그 문제가 해결된다.
• 재사용성 : 똑같은 코드를 반복하지 않고 모듈로 분리시켜서 필요할 때마다 사용할 수 있다.

 

ES6(ES2015) 방식

module을 사용하는 방법은 여러가지가 있지만 가장 대중적이 ES6방식으로 진행하겠다.

(좀 더 자세한건 레퍼런스 부분 참고)

 

import 와 export 구문을 사용하는 방식으로 나에게는 이 방식이 가장 익숙하다.

 모듈 A,B가 있고 각각을 export 로 내보내는 방식과 그에 따라 어떻게 import 로 불러오는지 살펴보자.

//moduleA.js
const A = () => {};
export default A;

//moduleB.js
export const B = () => {};

//index.js

import A from 'moduleA';
import { B } from 'moduleB';

여기서 눈여겨봐야될 것은 default 의 유무이다.

export 를 사용할 때는 export 와 default export 를 사용할 수 있다.

 

default export는 모듈 내에서 한번만 사용할 수 있고 export는 여러번 사용할 수 있다는 것이다.

그렇게 default export로 내보내면 import 에선 내보낸 이름 그대로 바로 사용할 수 있지만,

export로 내보내면 {} 로 묶어서 불러와야 한다.

 

이것이 기본적인 사용법이고 별칭(alias)을 as 로 주어서 다른 이름으로 사용할 수도 있고,

 * 와일드카드를 사용하여 한번에 불러오거나 내보낼 수도 있다.

 

관련 글(별칭(alias)을 as 로 주어서 다른 이름으로 사용할 수)

How to have path alias in nodejs?

 

module-alias

---

Namesapeces

네임스페이스(이름 공간, Namespace)란 이름이 존재하는 공간이다.

이름들을 한곳에 모아 충돌을 미리 방지하고 해당 이름으로 선언된 변수와 함수를 쉽게 가져다

쓸 수 있도록 만든 메커니즘이다.

// 객체 리터럴
var app = app || {};

// 프로퍼티 추가
app.name = "준영";
app.age = 30;
app.gender = "남";
app.nameCard = function(){
    console.log('nameCard:', this); // 여기서 this는 app임
    return `${this.age}세 ${this.name}`;
};

console.log(app);//{ name: '준영', age: 30, gender: '남', nameCard: [Function (anonymous)] }

위 와 같이 논리합 연산자를 사용하면 app이 기존에 정의되어 있을 대는 그것을 사용하고,

그렇지 않으면 빈 객체를 app에 할당한다.

 

이렇게 하고 전역 유효 범위에서 사용하고자 하는 모든 변수와 함수를 이 객체의 프로퍼티로 추가하면 프로그램에서 app이라는 하나의 변수만 전역 객체 프로퍼티로 등록하여 해당 객체에서 필요한 모든 기능을 참조해 사용할 수 있다.

 

또한 이 객체 안에 또다른 부분 네임스페이스를 생성할 수 있다.

// 부분 네임스페이스 생성
app.subApp = {};
app.subApp.tempDate = new Date();
app.subApp.temp = function () {
  console.log("temp:", this); // subApp을 가리킴
  return `${app.name}의 입사일은 ${this.tempDate}입니다.`;
};
console.log(app.subApp.temp());//준영의 입사일은 Sat Dec 03 2022 18:16:26 GMT+0900 (대한민국 표준시)입니다.

부분 네임스페이스에선 root 프로퍼티가 또 다른 공간의 root가 되기 때문에 계층적으로 관리할 수 있다.

---

레퍼런스

IIFE

자바스크립트 개발자라면 알아야 할 33가지 개념 #8 자바스크립트 필수요소 : IIFE 마스터하기

Essential JavaScript: Mastering Immediately-invoked Function Expressions

Module

[JS] 모듈에 대한 이해와 사용법 - 배하람의 블로그

모듈 소개

Namesapeces

[JavaScript] 자바스크립트 네임스페이스(Namespace, 이름 공간)

 

---

목차

[JavaScript 33가지 지식] 시리즈 소개 및 목차