알이즈웰
선언적함수와 익명함수를 인자로 주입(콜백함수 역할) 본문
JavaScript에서 함수는 객체이다. 그것도 1급객체!
- 1급객체에 대해서 참고 : http://bestalign.github.io/2015/10/18/first-class-object/
- 자바스크립트에서의 함수 참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%ED%95%A8%EC%88%98
말하자면 어떤 값으로 써먹을 수 있다는 것! 그러므로 함수에서 특정 함수를 인자로 사용할 수 있다!
함수를 파라미터로 넘길 수 있다는것 !!
이러한 특징을 사용하여 콜백 함수를 구현할 수 있다.
그러나 내가 겪었던 문제점은 선언적함수와 익명함수를 각각 인자로 주고, 특정 조건에 의해서 해당 함수가 콜백함수로 구현이 되어야하는데, 선언적 함수로 주면 해당 조건이 맞지 않음에도 불구하고 동작해버리고, 익명함수는 내가 원하는대로 조건에 해당되었을때 작동했다는 것이다. 왜 선언한 함수는 인자로 넣자마자 그 함수를 인자로 넣은 함수가 작동하기도 전에 동작해버리고, 익명함수는 잠자코 있다가 동작하는 걸까
기능 : 비밀번호 변경 처리 후 비밀번호 변경 완료하였다는 알림 띄우고, 확인 클릭 시 로그인 화면으로 이동
//함수 정의
var search = {
//로그인 화면으로 이동
cancel : function(){
console.log("cancel 함수");
location.href = _WEB_DOMAIN_+'/member/login.do?tidYn=N';
},
//비밀번호 변경
pwdUpdate : function(){
if(validationCheck()){
var apiUrl = _API_DOMAIN_+_COOKIDS._UPDATE_PWD;
var _apiData = new Object();
_apiData.memberId = $("input[name=memberId]").val();
_apiData.loginPwd = $("input[name=loginPwd]").val();
SKTAPP.ajax(apiUrl, JSON.stringify(_apiData),
function(data){
var result = data.result;
if(result.resultCode == "0"){
//세번째 인자를 선언적 함수 혹은 익명함수로 넣었을 경우 수행 순서가 다름
layerPopup(LOGIN_MSG.PWD_UPDATE_SECCESS, false, function(){
location.href = _WEB_DOMAIN_+'/member/login.do?tidYn=N';
});
}else{
layerPopup(LOGIN_MSG.PWD_UPDATE_ERROR);
return;
}
},
function(data) {
console.log(JSON.stringify(data));
ajaxError(data);
}
);
}
}
}
function layerPopup(contentTxt, isConfirm, callback){
console.log("layerPopup 함수");
생략
//layPopup 그림(확인 버튼도)
//확인버튼 클릭 시 callback함수가 수행되어야함
layerPopObj.find("#okBtn").off("click").on("click", function(e){
console.log("확인클릭");
생략
if(callback){
//callback 함수 호출
callback();
}
});
생략
}
//1. 함수 수행(layerPopup 함수의 세번째 인자 : 익명함수)
layerPopup(LOGIN_MSG.PWD_UPDATE_SECCESS,
false,
//★
function(){
console.log("익명함수");
location.href = _WEB_DOMAIN_+'/member/login.do?tidYn=N';
}
);
//2. 함수 수행(layerPopup 함수의 세번째 인자 : 선언적함수)
layerPopup(LOGIN_MSG.PWD_UPDATE_SECCESS,
false,
//★
search.cancel()
);
1번의 경우
layerPopup의 함수 안에 구현되어있는 if문 조건에 해당되었을 경우 로그인 화면으로 돌아갔지만
결과 :
layerPopup 함수
확인클릭(확인 클릭 시)
익명함수
2번의 경우
search.cancel()함수가 먼저 실행되어버렸다.
결과 :
cancel 함수
layerPopup 함수
추리한 결론 :
자바스크립트에서 layerPopup 실행 시 인자로 들어간 함수 먼저 객체도 "처리"하고 layerPopup이 수행되었기 때문에 그 "처리"할때 cancel 함수가 수행되었던 것 같다.
-> 왜 그런지 알았음 !! 원인은 인자로 넣은 함수에 ()를 한 것 때문이다! 아래에서 테스트한 코드로 설명!
https://www.w3schools.com 에서 테스트한 코드
<!DOCTYPE html>
<script type="text/javascript">
var result = false;
function jsfunction(){
alert("앗뇽");
//1. 함수를 인자로 넣을 시 괄호 ()를 붙히면 바로 실행되어버린다. 그리고 layupPopup이 실행되는것.
layerPopup(result,cancel());
//2. 얘는 뭐 함수의 꼴로 통째로 넣었지만 파라미터로 잘 가지고 있다가 원하는 시점에서 잘 실행됐다.
//layerPopup(result,function(){alert("난 익명이야");});
//3. 이렇게! 함수를 인자로 넣을 시 괄호없이 넣으면 함수덩어리 자체를 layerPopup이 잘 가지고 있다가 잘 써먹는다.
layerPopup(result,cancel);
}
function layerPopup(result, callback){
if(result){
alert("true");
}else{
alert("false");
//callback(); //이렇게 하든 밑에 줄처럼 하든 뭐 사실 상관이없징
if(callback){callback();}
//여기서 alert안에 callback함수를 넣어서 테스트하고나서 깨닫게됨
//alert(callback);
//1번처럼 하면 undefined가 나오고, 2, 3번은 함수를 잘 알아먹는다.
}
}
function cancel(){
alert("난 calcel이얌");
}
</script>
<html>
<body>
<h2>My First JavaScript</h2>
<button type="button"
onclick="javascript:jsfunction();">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
1번 경우 참고할 수 있는 글이 요기있었음
-> https://www.zerocho.com/category/Javascript/post/572dcbbd2115c895b0f248fd
** 오늘의 교훈 : 꼼꼼하게 보자!
일단 혹시 모를 사태에 대비하여 참고했던 글들의 주소를 백업.
http://yubylab.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%EC%BD%9C%EB%B0%B1%ED%95%A8%EC%88%98-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0
http://m.blog.naver.com/exam2/185280323
http://devbox.tistory.com/entry/JavaScript-%EC%BD%9C%EB%B0%B1
http://beomy.tistory.com/10
http://webclub.tistory.com/114
http://kssong.tistory.com/27
http://unikys.tistory.com/306
https://opentutorials.org/course/787/4963
http://www.nextree.co.kr/p4150/
http://ypangtrouble.tistory.com/entry/4-JavaScript-%ED%95%A8%EC%88%98-%ED%95%A8%EC%88%98-%EB%A7%A4%EA%B0%9C%EB%B3%80%EC%88%98-%EB%A6%AC%ED%84%B4%EA%B0%92
http://smilennv.tistory.com/entry/JavaScript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%ED%95%A8%EC%88%98
http://installed.tistory.com/entry/6-%ED%95%A8%EC%88%98-%EC%9D%B5%EB%AA%85%EC%9D%98-%ED%95%A8%EC%88%98-%EC%84%A0%EC%96%B8%EC%A0%81%ED%95%A8%EC%88%98-%EA%B0%80%EB%B3%80%EC%9D%B8%EC%9E%90-%ED%95%A8%EC%88%98-%EB%93%B1-%EC%83%9D%EC%84%B1%EB%B2%95
https://opentutorials.org/module/532/6508
https://www.w3schools.com/js/default.asp
'Programming > Front-End' 카테고리의 다른 글
| jQuery 자식요소(find, children) (0) | 2017.05.29 |
|---|---|
| jQuery selectBox에서 option text값 가져오기 (1) | 2017.05.16 |
| JSTL 함수로 현재 시간 나타내기 (0) | 2017.05.11 |
| Select Box의 값 중 특정 값 selected (0) | 2017.05.11 |
| jQuery Select Box 제어 (0) | 2017.05.11 |