자바스크립트 개발자가 알아야할 33가지 개념[#08. IIFE, Modules and Namespace]

 

들어가기 전에

자바스크립트를 사용하는 개발자들은 다음 문법이 편할 것이다.

hi()라는 이름의 함수를 정의하고 ()문법을 이용해 정의한 함수를 불러온다.

함수 정의는 항상 function 키워드로 시작한다. 그리고 뒤에는 함수의 이름이 온다.

함수의 이름을 생략하면 문법에 어긋나기 때문에 이름을 생략할 수 없다.

 

함수 표현식 (Funtion Expression)

함수 타입의 값을 hi라는 변수에 할당했다.

할당의 right-hand에 있는 함수는 주로 "함수표현식(Function Expression)"이라 불린다.

 

익명 함수 표현식

위의 코드가 함수 익명 함수 표현식이다.

함수 표현식에서 function키워드 뒤에 이름이 붙지 않은 함수를 익명 함수라고 한다.

 

기명(Named) 함수 표현식

함수 표현식은 이름을 가질 수있다.

함수 표현식에서 function키워드 뒤에 이름이 있는 함수를 기명 함수라고 한다.

 

 

IIFE (Immediately Invoke Function Expression)

IIFE는 몇가지 문체의 방식으로 쓰인다. 

첫번째 방식은 alert를 다시 한번 보여 줄 수 없다.

이 함수는 생명을 갖자마자 바로 죽어버린다.

 

함수 statement는 언제나 function이라는 키워드로 시작한다.

처음 function이라는 키워드로 시작하면 함수 정의가 일어날 것이라고 예측한다.

그래서 이러한 일이 일어나지 않도록 function앞에 "!" 를 붙여준다.

이렇게 하면 자바스크립트는 "!" 뒤에 오는것이 무엇이든지 표현식으로 다루게 된다.

"!"외에도 "+", "-", ~ 등 다양한 방식으로 작성해도 같은 결과가 나온다.

결국 목적은 뒤에 있는 함수를 식으로 만드는 것이다.

 

클래식한 IIFE

1. 첫 번째는 함수 식을 호출하기 위한 ()괄호가 전체를 감싸는 괄호 안에 있다.

2. 두 번째는 함수 식을 호출하기 위한 ()괄호가 전체 괄호 밖에 있다.

 

작동하는 방식에서 약간의 차이는 있겠지만 실용적인 목적에서는 결과가 같다고 볼 수 있다.

 

1. 유효한 IIFE로 "a"를 잘 출력한다.

2. 함수 표현식이 아니라 함수의 정의다. 함수는 정의의 호출은 b()로 해줘야한다.

3. 함수 정의는 이름이 있어야 한다.

 

이처럼 IIFE를 만들기 위해서 함수 표현식을 괄호로 감싸줘서 표현해야한다.

 

IIFE와 private변수

IIFE 내부에 변수나 함수를 선언함으로써 외부에서 접근하지 못하게 보호 할 수 있다.

 

a함수 내부에 변수 b, c를 선언함으로써 외부에서 접근 할 수 없게 보호 할 수 있다. d함수는 a함수 내부에서 선언되었기 때문에 부모 범위에서 선언된 변수 b, c에 접근 할 수 있다.

 

값을 return하는 IIFE

만일, IIFE로부터 반환 값이 필요하지 않다면, 처음에 사용했던 것 처럼 !, +와 같은 단항 연산자를 이용한  IFFE를 계속 사용할 수도 있다.

 

파라미터가 있는 IIFE

 

 

 

Module

모듈이란 프로 그램을 구성하는 일부이며 다양한 키워드를 통해 다른 모듈 내부의 함수나 변수를 불러와 사용할 수 있다.

 

모듈을 사용할 때의 이점은 다음과 같다.

• 유지보수 : 프로그램의 기능들이 모듈로 되어있다면, 각 기능들을 손쉽게 수정하고 개선할 수가 있다.
• Namespace : 함수 또는 블록 스코프외에 다른 곳에 변수를 선언하면 모두 전역 변수가 되는데, 그러면 해당 변수가 필요하지 않는 곳에서도 접근이 가능하게 된다. 이런 점을 프로그래밍할 때 지양하기 때문에 모듈을 통해서 해당 모듈 내에서만 변수에 접근이 가능하게 만든다.
• 재사용 : 똑같은 기능을 다른 프로그램에서도 사용할 때 같은 코드를 다시 작성할 필요가 없다.

자바스크립트에서 모듈을 사용하기 위해 commonJS, AMD, UMD와 같은 모듈 시스템을 사용하지만 이 포스팅에서는 ES6 모듈 시스템에 대해서 알아보려한다.

 

ES6 모듈 시스템

다른 곳에서 함수나 변수를 사용할 수 있게 하려면 export를 사용하고 다른 모듈을 가져올 때는 import를 사용한다.

 

export하는 방식에는 위 코드와 같이 변수, 함수, 클래스를 선언할 때 앞에 export를 추가해주거나 코드 마지막 줄에서 export를 한 번에 할 수 있다.

 

 

import로 여러 개를 가져오고 싶다면 Object Destructuring을 이용하면 된다.

 

 

as

export하거나 import할 때 이름을 바꿔서 모듈을 사용하고 싶다면 as키워드를 사용하면 된다.

 

 

export default

하나의 자바스크립트 파일에서 단일 객체를 내보내고 싶을 때는 export default를 사용한다.

export default는 모듈 내에 하나만 존재할 수 있고 해당 모듈을 import할 때 이름을 아무거나 쓰면 export default 모듈이 import된다. 그리고 import할 때는 중괄호를 생략하여 사용한다.

 

 

 

 

---

참고 및 출처

 

• https://velog.io/@jakeseo_me/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%9D%BC%EB%A9%B4-%EC%95%8C%EC%95%84%EC%95%BC-%ED%95%A0-33%EA%B0%80%EC%A7%80-%EA%B0%9C%EB%85%90-8-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%95%84%EC%88%98%EC%9A%94%EC%86%8C-IIFE-%EB%A7%88%EC%8A%A4%ED%84%B0%ED%95%98%EA%B8%B0
• https://jjakddo-studio.tistory.com/28?category=898312