2020. 5. 21. 02:08ㆍjavascript/Basic Conception
IIFE(즉시 실행함수)
즉시 실행함수는 정의되자 마자 바로 실행되는 함수를 의미한다. 대부분 첫번째 괄호 안에 익명 함수를 정의하는 방법으로 사용한다.
(function (){
console.log("add");
})();
(()=>{
console.log("arrow");
})();
이 것을 만듬으로 기대하는 효과는 크게 두가지다.
1. 글로벌 전역 함수로 선언되지 않게 막을 수 있다.
2. IIFE안으로 다른 변수들이 접근을 못하도록 막든다. 즉 IIFE 안에 존재하는 코드는 외부에서 변경할 수 없다.
따라서 아래와 같은 경우에는 에러가 발생한다.
위의 에러는 IIFE안에 선언된 변수를 글로벌 스코프에서 접근하여 변경하려고 했기 때문에 에러가 발생했다. 물론 IIFE안에서 접근하면 오류가 발생하지 않는다.
Modules
js가 점점 발전하면서 완전한 어플리케이션은 제어하고 만들 수 있게 되었고 다른 컨텍스트(node.js)에서 실행될 수 있게 되었다. 따라서 js는 프로그램을 필요에 따라 가져올 수 있는 별도로 모듈을 분할하거나 번들링하여 사용하는 방법에 대해 연구하기 시작했습니다. 이러한 과정 속에서 webpack, gulp 등이 만들어졌습니다.
최신 브라우저에서 기본적인 모듈 기능을 제공하기 시작했습니다.
import를 지원하는 브라우저
export를 지원하는 브라우저
사용법
파일을 사진과 같이 세개를 만들어 줍니다.
script.js
let animals = ["dog", "lion", "money", "bird"];
export const addAnimal = (animal) => animals = [...animals, animal];
export const getAnimal = () => animals;
export const deleteAnimal = (animal) => animals = animals.filter(anAnimal => anAnimal!== animal )
자기가 만들고 싶은 함수를 작성하면 됩니다.
script2.js
import {addAnimal, getAnimal, deleteAnimal} from "./script.js"
console.log(getAnimal());
addAnimal("cat");
console.log(getAnimal());
deleteAnimal("cat");
console.log(getAnimal());react에서와 같이 import from 구조로 불러와서 평범한 함수 처럼 사용합니다.
이상태로 실행해보면 당연히 에러가 납니다. 그래서 index.html을 주목해야합니다.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="module" src="script.js"></script>
<script type="module" src="script2.js"></script>
</body>
</html>script안에 type="module"을 통해 자바스크립트 파일들을 모듈로 인식하고 사용할 수 있게 만들어줍니다. 이것이 없으면 당연히 에러가 발생합니다.
'javascript > Basic Conception' 카테고리의 다른 글
| javascript 33가지 기본 컨셉: 7. Expression vs. Statement (0) | 2020.05.19 |
|---|---|
| javascript 33가지 기본 컨셉: 6. Scope (0) | 2020.05.16 |
| javascript 33가지 기본 컨셉: 5. Type of (0) | 2020.05.14 |
| javascript 33가지 기본 컨셉: 4. Type Conversion (0) | 2019.03.26 |
| javascript 33가지 기본 컨셉: 3. Value and Reference (0) | 2019.03.18 |