사칙연산 계산기(1)[중복제거 : 고차함수와 target.event.textContent ]

<사칙연산 계산기 순서도 설계>

숫자를 입력한다. 
[계산하고 싶은 버튼을 클릭한다.
임의의 변수를 생성한다.

입력받은 숫자와 알맞은 사칙연산 기호를 변수에 저장한다.]

숫자를 입력받는다.

변수에 숫자를 집어 넣는다.

만약(=을 누르면 ){
변수를 출력한다.
}

=을 누르지 않고 다른 사칙연산을 눌렀다면 {
      변수2를 생성한다.

     변수2에 변수1을 할당하고 사칙연산 1을 할당 
}

---

<중복제거 방법1 고차함수 이용>

return 문이 없는 함수는 항상 return undefined로 설정되어있는 것이다.

---

addEventListener('click', 함수명)이 와야되는데 함수 자리에 return이 undefined가 오는 건 맞지 않다.

함수를 리턴하도록 수정한다. [ return () => {}; ]

 

그런데 return () => {}  // {}안에 내용이 없으니 결국 click을 누르면 아무것도 안나옴.

그래서 함수가 return의 함수에서 실행되어질 수 있도록 한다.

 

(변수)=>{ return ()=>{} }의 모양은 (변수) =>() =>{}   {? return ** }  ?가 비었다면 생략 가능하다.

변수=>와 **가 다이렉트로 만나는게 더 낫기 때문. 

 

function () => () => {함수내용}의 의미는 함수가 함수를 return 하고 있는 것이라 생각하면 된다.

이것을 high order function(고차함수)라 한다.

---

 

a라는 함수를 브라우저가 click할 때 a();를 통해 실행시켜주며, 함수 안에 event 객체까지 생성시켜 넣어주기 때문에 

event.target.value라는 저 event chain값이 먹혀드는 것이다.

---

<중복제거 방법2 event.target.TextConetent 사용>

---

 

return 값은 가장 안쪽 함수에서 출력되니, 마지막 함수의 매개변수가 마지막에 들어가는게 맞다.

맨처음 매개변수가 제일 먼저 적용되는게 맞고.

왜냐하면 첫 매개변수의 화살표 함수가 

이런 모양으로 (a) => {return (b) => { return (c) => {return} } } 두 함수를 감싸고 있는 거니깐

 

(변수)=>{ return ()=>{} }의 모양은 (변수) =>() =>{} 값 붙여서 오면 같이 상쇄되어 생략 가능하다.

(아... 중괄호{}가 복잡하니까 벗겨주는 거구만)

출처: https://www.youtube.com/watch?v=BV4YWyvGMJo&list=PLcqDmjxt30RvEEN6eUCcSrrH-hKjCT4wt&index=44