[이론]js 개발자라면 알아야하는 핵심 컨셉 33개 #8.IIFE, Modules and Namespace

js 개발자라면 알아야 하는 핵심 컨셉 33개, 8번째 순서는 IIFE & Modules and Namespace에 관한 이야기이다.

INDEX

1. IIFE?
2. IIFE, 왜 쓰는걸까?
3. JS Browser Module

---

1)IIFE?

먼저 IIFE라 함은 Immediately-Invoked Function Expressions의 약자인데, 한국어로 번역을 하면 다음과 같다.

IIFE?

그렇다. 어려워 보이는 데 해석하면 별게 없다. 그냥 선언함과 동시에 실행이 되는 함수 식이다.

사용 방법은 간단하다.

IIFE

함수 선언을 할 때처럼 함수를 작성해주고, 바깥에 괄호를 씌운 후 함수 실행을 표시하는 ()를 작성해주면 된다.

익명 함수로도 작성이 가능하다.

익명함수 IIFE

2)IIFE, 왜 쓰는 걸까?

IIFE를 어떻게 쓰는지 알아보았다. 근데 이거 대체 왜 쓰는 걸까?

여러 가지 이유가 있을 텐데, 아마 가장 메인이 되는 이유는 global 스코프에서 변수가 선언되는 것을 피할 수 있기 때문이 아닐까.

다음 코드를 보자.

secretUsers라는 Array는 user data를 담고 있다. 누군가 임의적으로 조회해서도 안 되고, 수정해도 안 된다.

user data 조회/수정 가능

하지만 이렇게 콘솔만 켜도 조회가 가능하다. 누군가 악의적으로든 실수로든 user data를 수정하거나 삭제해버릴 가능성이 충분하고, 중요한 데이터를 이런 식으로 관리하는 것은 옳지 않다.

이러한 경우에 IIFE를 사용하면 secretUsers를 private하게 관리할 수 있다.

global scope에 변수가 선언되지 않게 함으로써 변수를 encapsulation한 예시이다.

secretUsers를 전역 scope에 선언하지 않음으로써 변수 naming 관리가 편해진 예시이기도 하겠다.

secretUsers 조회 불가

이제 다시는 secretUsers를 조회할 수도, 수정할 수도 없다.

물론 IIFE 내부의 변수에 접근할 필요가 있는 경우도 있는데, 그 부분에 대해서는 closure 개념이 나올 때쯤에 다시 얘기해보면 좋을듯하다.

 

3)JS Broswer Module

Module에 관한 이야기이다.

JavaScript는 기본적으로 Broswer단에서 Module 기능을 지원하지 않았다.

그럴법한 것이 JS는 태생이 웹 브라우저 기능 수행을 지원하기 위한 보조적인 수단에 불과한 언어였기 때문에 기본적으로 많은 언어들이 지원하는 기능들을 지원하지 않는 경우가 많았고, 그중에 하나가 Module 기능이었던 것이다.

그러나 2019년 지금에 JavaScript는 가장 많은 사람들이 사용하는 대표적인 언어 중 하나가 되었고, 프론트엔드의 규모도 점점 커지면서 Module의 필요성이 대두되었다.

ES6 이전에는 Webpack과 같은 모듈 번들러를 사용하는 경우가 많았는데, ES6부터 공식적으로 Module 기능을 탑재하게 되었으니, 살펴보도록 하자.

파일을 만들어야 하기 때문에 https://repl.it에서 지원하는 repl을 이용하도록 한다.

 

모듈 기능을 구현하기 위해서 HTML 파일과 JS파일을 생성한다.

 

index.html

a_1.js

a_2.js

user를 생성하고 조회하고 삭제하는 간단한 웹 어플리케이션을 만들었다.

이렇게 세 가지 파일을 생성하고, index.html 파일을 실행하면...

에러가 출력된다. 모듈을 사용하는 js파일의 경우 '얘는 모듈이야'하고 브라우저에게 알려주어야 하기 때문이다.

 

index.html의 js파일 로드 부분을 수정해보자.

11&12행의 script 태그에 type attribute를 하나 추가해주면 정상적으로 작동한다.

index.html 수정

짠!

모듈 기능을 알아보았다. 아직까지는 브라우저와의 호환등과 같은 문제로 인해

Webpack을 더 많이 사용하는 추세인것으로 알고 있으나, 시간이 좀 더 지나면 자연스럽게 script module이 정착되지 않을까 하는 바이다.

 

출처 : github js-33concepts, Nomad Coders