function greet(greet){
return function(name){
console.log(`${greet} ${name}`)
}
}
console.log(greet('Hello')) // Q-1
console.log(greet('Hello')('Thomas')) // Q-2Q-1 과 Q-2를 실행시켰을 경우에 console.log() 에 찍히는 값은 무엇일까요 ?????
Q-1은 아무것도 없으며
Q-2는 "Hello Thomas" 를 출력하게 됩니다
greet('Hello')가 실행되면 함수는 아래 있는 함수를 리턴하게 됩니다
return function(name){
console.log(`${greet} ${name}`)
}console.log() 왜 안 찍히는지 보이시나요 ?
greet('Hello')로 위의 함수가 만들어졌으니 함수를 한번 더 실행하먄 greet('Hello')('Thomas ')
안에 있는 console.log() 가 정상적으로 실행되어 "Hello Thomas" 가 출력되게 됩니다
자 이제 원리를 이해했으니
greet('Hello')('Thomas')
greet('Hello')('Monica')
greet('Hello')('Ross')
여러번 재사용 되는 경우를 가정하고 간략하게 바꾸어 봅시다
greet('Hello') 부분이 계속해서 공통적으로 사용되고 있으니 변수로 빼면 좋겠지요 ?!
const greetToSomeone = greet('Hello')
greetToSomeone('Thomas') // Hello Thomas
greetToSomeone('Monica') // Hello Monica
greetToSomeone('Ross') // Hello Ross
할당된 변수명이 길어지긴 했지만 반복되는 부분을 줄였습니다
리턴 함수를 Html에 적용해보기
<body>
<ul>
<li class="first">first</li>
<li class="second">second</li>
<li class="third">third</li>
</ul>
<script>
const printId = function (id) {
console.log(id);
};
document.querySelector(".first").addEventListener("click", printId("id-1"));
document.querySelector(".second").addEventListener("click", printId("id-2"));
document.querySelector(".third").addEventListener("click", printId("id-3"));
</script>
</body>element 클릭 시 해당하는 id를 console.log()로 출력한다고 가정하자
위에서 <li></li>를 클릭할 경우에 각 해당하는 id값을 printId의 argument로 보내주고 있다
하지만 위의 코드는 브라우저를 실행시키자마자 함수를 실행시키게 된다
document.querySelector(".third").addEventListener("click", printId); // Q-1
document.querySelector(".third").addEventListener("click", printId("id-3")); // Q-2Q-1의 경우 printId 함수를 콜백을 넣어주어 클릭할 경우에 동작을 하지만 id값을 넘겨주지 못하고 있다
Q-2의 경우 id값을 넘겨주지만 클릭 시 실행되는게 아닌 렌더링과 동시에 함수를 실행시키고 있다
해결 방법이 떠오르시나요 ?
바로 printId 함수를 => 함수 반환 함수(Functions returning functions) 로 변경해주면 됩니다
동일하게 printId('id-3')를 넣으면 실행이 되겠지만 반환 부분이 또 다른 함수를 반환하게 된다면 클릭 이벤트가 발생했을때
함수를 실행시킬 수 있겠죠 ? // 맨 처음 예제에서(윗 부분) console.log() 가 안 나왔던 부분을 생각해보세요
그러면 함수를 바꿔보곘슴둥
// Q-1
const printId = function (id) {
console.log(id);
}; // 동작 X
// Q-2
const sayHi = function(hello){
return function(){
console.log(hello)
}
} // 동작 O기존의 Q-1 을 -> Q-2로 바꿔주면 됩니다
그럼 2만
'자바스크립트(JavaScript)' 카테고리의 다른 글
| [리액트] 카카오 로그인 기능 구하기 (0) | 2022.12.17 |
|---|---|
| [자바스크립트] slice() (0) | 2022.12.07 |
| [자바스크립트] 개방 폐쇄 원칙 SOLID : Open-Closed Principle (0) | 2022.12.04 |
| 자바스크립트 프라미스 all(), race(), allSettled() and any() (0) | 2022.11.21 |
| [자바스크립트 ] 아규먼트 vs 파라미터(Argument vs Parameter) (0) | 2022.11.12 |