Notice
Recent Posts
Recent Comments
Link
컴퓨터는 잘못이 없다..
[JavaScript]즉시 실행 함수란? 본문
Contents
접기
[즉시 실행 함수]
<script>
let point = 0;
if(point >=1000){ 선물주는함수 );
function 선물주는함수(){선물을 줘라!}
</script>
└게임속에 이러한 코드가 있다고 하자.
point가 1000점 이상 되면 client에게 선물은 준다고 해보자.
let point와 if문 둘다 global로 선언된 상태이다.
그렇다면 브라우저의 F12 기능을 통해서 point의 값을 조작할 수 있을 것이다!
이때 어떻게 하면 해결할 수 있을까? -> 즉시실행함수!
[예제코드1]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step07_EventListener.html</title>
</head>
<body>
<h1>EventListener 테스트</h1>
<!--아래의 패턴은 프로젝트가 커질수록 사용하기가 어려워진다. -->
<!--
<button onclick="clicked()"></button>
<button id="myBtn">눌러보셈2</button>
<script>
function clicked(){
alert("버튼을 눌렀네요?");
}
</script>
-->
<script>
/*
global
-script내의 가장 바깥라인 영역은 global 영역 (global=전역)
-global에 만들어지는 변수를 global 변수라고 한다.
-페이지가 로딩되는 시점에 만들어진 것들은 global 영역!
-global 영역에는 웬만하면 변수를 만들면 안된다.
(이유 F12의 브라우저 검사모드에서 값 참조와 조작 가능)
local
-함수 내의 공간을 지역 = local이라고 한다.
-local에 만들어지는 변수를 local변수라고 한다.
즉시실행함수 사용이유?
-첫 로드 시 초기화 할 때 변수를 global하게 선언하고 싶지 않을 때
(global하게 선언 시 브라우저-검사 기능에서 값 참조와 조작이 가능할 수 있음!)
-변수에 함수를 이용해 즉시 값을 할당하고 싶을 때
-라이브러리 전역 변수 충돌 방지
*/
//코드1
let myName ="원숭이";
var test = function(){
console.log(myName + "함수 호출");
};
test();
//코드2
(function(){
let yourName="해골";
console.log(yourName + "함수 호출");
})();
/*
코드1과 코드2는 동일하게 작동한다.
하지만 코드1의 myName은 참조와, 조작이 가능한 반면
코드2의 yourName은 참조와 조작이 가능하지 않다.
이때 코드2를 '즉시실행함수'라고 한다.
페이지가 로딩되는 시점에
누군가 호출하지 않아도 한번 자동으로 호출되서
다시 호출될일 없는 1회용 함수이다.
(함수명이 없어 재사용이 불가하다)
*/
</script>
</body>
</html>
[예제 코드1 실행 결과]
[예제코드2]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step07_EventListener.html</title>
</head>
<body>
<script>
//코드1
let point1 =0;
var test1 = function(){
if(point1>=1000){
console.log("선물증정!")
}else{
console.log("점수가 모자랍니다.")
}
};
test1();
//코드2
(function(){
let point2 = 0;
if(point2>=1000){
console.log("선물증정!")
}else{
console.log("점수가 모자랍니다.")
}
})();
//코드3
//즉시실행함수 내 함수는 코드4처럼
//즉시실행함수 내부에서 함수를 호출해 주지 않으면 실행되지 않음!!
(function(){
let point3 = 0;
let test3 = function(){
if(point3>=1000){
console.log("선물증정!")
}else{
console.log("점수가 모자랍니다.")
}
}
})();
//코드4
(function(){
let point4 = 0;
let test4 = function(){
if(point4>=1000){
console.log("선물증정!")
}else{
console.log("점수가 모자랍니다.")
}
}
test4();
})();
</script>
</body>
</html>[예제 코드2 실행 결과]
>>실행결과 맨아래 point2, poin3, poin4
즉시실행함수 내에 선언된 변수에 접근 못한다고 했는데??
--> 이건 그냥 콘솔에서 접근해본거고 접근했다고 해서 실제로 값이 변경되어 선물증정! 이 되지 않는다.
>>즉시실행함수에 넣지 않는 test()만
point1값에 값을 대입하여 조작해 선물을 받아냄!
>>즉시실행함수에 넣은 코드2,3,4는
콘솔에서 변수에도 함수에도 접근 못한다!
[예제코드3]
>>전역변수와 지역변수, 즉시 실행함수, addEventListener 과 f12를 통해 접근 가능 유무
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">버튼입니다.</button>
<script>
//global(페이지 로딩 시점에 읽어온다.)
let b1=10;
let b2=20;
let b3=30;
let b4=40;
//코드1
function test1(){
let a1=1;
console.log("test1입니다.")
};
//코드2
let test2 = function(){
let a2=2;
console.log("test2입니다.")
};
//코드3
(function(){
let a3="해골";
console.log("즉시실행함수 입니다.");
})();
//코드4
document.querySelector("#btn").addEventListener("click",function(){
let a4=4;
console.log("코드 4의 addEventListener입니다.");
});
//코드5
(function(){
document.querySelector("#btn").addEventListener("click",function(){
let a5=5;
console.log("코드 5의 addEventListener입니다.");
});
})();
</script>
</body>
</html>
[예제코드3 실행결과]
'공부 > JavaScript' 카테고리의 다른 글
| [JavaScript]EventListener 사용해보기, callback함수 내 this 의미 (0) | 2020.11.06 |
|---|---|
| [JavaScript]splice()함수, length로 배열 비우기, forEach() 로 배열 출력하기 (0) | 2020.11.06 |
| [JavaScript]for문, for each문 퀴즈, 화면에 동적으로 요소 추가해보기 (0) | 2020.11.05 |
'공부/JavaScript' Related Articles
more
Comments
