vue js 강의를 들으면서 즉시실행함수라는 것을 처음 사용해보았다.
이름만 들었을 때 직감적으로 아 즉시실행되는 함수구나! 라는 것만 와닿았기 때문에
기본적으로 어떤 함수인지 적으면서 정리해보려고 한다.
최근에 공부하면서 공식문서를 보는 습관을 만들려고 노력하고 있다
아무래도 가장 정확한 정보를 얻을 수 있기 때문이다.
공식문서에 따르면 즉시실행함수란?
즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)은 정의되자마자 즉시 실행되는 Javascript Function 를 말한다.
(function () {
statements
})();
이는 Self-Executing Anonymous Function 으로 알려진 디자인 패턴이고 크게 두 부분으로 구성된다. 첫 번째는 괄호((), Grouping Operator)로 둘러싸인 익명함수(Anonymous Function)이다. 이는 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지할 수 있을 뿐 아니라 IIFE 내부안으로 다른 변수들이 접근하는 것을 막을 수 있는 방법이다.
두 번째 부분은 즉시 실행 함수를 생성하는 괄호()이다. 이를 통해 자바스크립트 엔진은 함수를 즉시 해석해서 실행한다.
어렵게 들리니까 간단하게 설명하면 말 그대로 다시 사용할 필요가 없는 한번의 실행을 위한 함수라고 보면 된다.
재활용하지 않고 함수를 정의하자마자 즉시 실행되어 지도록 만든 함수이다.
예제 코드를 첨부할테니 필요하신분들은 쓰시면 됩니다.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id = "app"></div>
<script>
let div = document.querySelector('#app');
let viewModel = {};
// Object.defineProperty(대상 객체, 객체의 속성, {
// // 정의할 내용
// })
(function(){
function init(){
Object.defineProperty(viewModel, 'str',{
// 속성에 접근했을 때의 동작을 정의
get: function(){
console.log('접근');
},
// 속성에 값을 할당했을 때의 동작을 정의
set : function (newValue){
console.log('할당', newValue);
render(newValue);
}
})
}
function render(value){
div.innerHTML = value;
}
init();
})();
</script>
</body>
</html>
특징으로는
1. 정의되지마자 바로 실행된다.
정의 즉시 실행되도록 만들어져있다. 그러므로 의도를 가지고 정확한 라인에 선언해서 사용하는 것이 바람직하다.
2. 익명 함수를 사용한다.
정의하자마자 실행하고 휘발시킬 것이기 때문에 실행함수의 함수명을 굳이 지어줄 필요가 없다.
3. 딱 1회만 실행되고 다시는 실행되지 않는다.
즉시 실행함수는 딱 1회 처음에만 실행되고 더이상 사용할 일이 없어야 한다.
4. 초기화코드나 모듈화 패턴을 만들 때 유용하게 사용된다.
흔히 아는 제이쿼리 라이브러리로 즉시 실행 함수로 코드 전체를 감싼 형태로 만들어져있는데
이 말은 즉 실행함수안에 있는 변수들은 함수 외부에서 접근할 수 없기 때문에 전역 네임스페이스를 더렵히지 않는다.
그래서 즉시 실행 할수는 라이브러리나 프레임워크 소스들에서 많이 사용되어지고 있다.
아직 많이 이해도가 떨어지지만 이런것이 있다는 것을 알게 되었고
자세한 것은 차츰 공부하면서 익혀나갈 생각이다.
앞으로 누가 나에게 즉시실행함수가 뭐에요? 라고 물어보고 왜쓰나요? 라고 물어보면
간단하게나마 입을 뗄 수 있을 것 같다.
'FrontEnd' 카테고리의 다른 글
| [Vue.js] Vue 인스턴스 생명주기란? (Life cycle) (0) | 2023.02.08 |
|---|---|
| 뷰(Vuejs)를 처음 배우면서 알게된 것 정리 (특징, 문법, 에러, 세팅하는법) (0) | 2023.02.08 |
| 버튼 클릭 시 해당 버튼 배경색 변경 State로 저장 (0) | 2022.12.31 |
| useState(props)데이터 값 넘기기 (0) | 2022.12.31 |
| 콜백함수 & 1급객체 (0) | 2022.12.31 |