6장 - 함수 심화 학습 (setTimeout과 부터 ~ 화살표 함수 다시보기)

모던 JS 튜토리얼을 읽으면서 드는 생각 메모

오....... 자바스크립트 명세에는 셋타임아웃이랑 인터벌이 없다네? 오.... 아니 있는줄알았어.🙂

- setTimeout
: 일정 시간 후 호출함. 사용법은 간단함. 함수를 실행하지 말고 함수 자체를 넘길 것 이란 경고 정도와 id 반환해서 clearTimeout(타이머식별아이디) 정도로 스케쥴 관리 하는 것만 하면 될 것 같다.

setTimeout(sayHi, 1000, "인자", "인자2"); 

- setInterval
: 위랑 동일한 문법인데, 계속 반복하는가, 1회성인가 차이이다. (인터벌은 계속 반복),  clearInterval 할 때 까지 지속 반복하니 잘 쓸것.

- 중첩 setTimeout 
: 일정한 간격으로 실행하는 방법인데, 딜레이 증가 시킨 후에 성공하면 딜레이 초기화 하는것도 넣어주는게 좋다.
(뭐 별개 이야기로는 셋인터벌은 너무 작은 시간에 대해 반복되는경우, 반복카운터도 구현해야하고, 그게 근데 딱 잘라서 동작한다는 보장도 없기도하지만..하단에 그림으로 잘 설명 되어 있음.)

clear 하기 전까지 둘 다 메모리에 존재하는 것. 잊지않길.

- 대기시간이 0초인 setTimeout
: 🙂한국말로 써있는거 맞지? 즉시 실행 한 것 과 같은 효과를 내는 것 처럼 보인다고 어필하는 것 같아.
(실제론 0이 아니라 밀린다고 표현되고)

ko.javascript.info/event-loop

이벤트 루프와 매크로·마이크로태스크

관련해서는 여기에서 더 알아볼 예정.

하단에 브라우저 환경에서 실제 대기시간은 0이 아니라는 부분은 "5번재 중첩 타이버 이후 대기시간을 4ms 로 강제" 하라는 부분이 명시되어 있어서인데, 그냥 넘어가도 된다. 구형브라우저 레거시 대응에 대한 것 때문에 명세변경을 못하고 있어서...🥺

- call/apply 데코레이터, 포워딩
: 재밌는 주제다. 데코레이팅 - 꾸며주고, 포워딩 - 이어주고
어떻게 하는지 알아본다고 한다.

- 코드 변경없이 캐싱 기능 추가하기
: 핵심은 코드 변경 없이 이다. 뭘까 좀 더 살펴보면 메모라이제이션과 흡사하다.

메모라이제이션이란?
-> 9 * 7 = 63인데 이걸 계속 반복 할 때 마다 9 를 7번 곱하고 하고 있으니, 63이란 결과를 어디 저장해놓고 key나 인자로 9, 7 이 들어오면 첨에 한번 계산했던걸 서랍에서 쨘 하고 꺼내주는 걸 말한다. (즐겨찾기, 북마크 비슷하다고 볼 수 있다.)

soooprmx.com/%eb%8d%b0%ec%bd%94%eb%a0%88%ec%9d%b4%ed%84%b0%eb%a5%bc-%ed%86%b5%ed%95%9c-memoization-2/

데코레이터를 통한 memoization · Wireframe

자세한건 위 블로그를 보고.. 파이썬이지면 알 듯? 

아무튼 본문에선 대충 8번째 줄에서 캐시라는 맵을 만드는게 핵심이다. 10부터 19번째 줄까지는 키를 찾아주고 캐싱결과 저장하는 그런것들을 설명을 열심히 하고 있고

call(), apply(), bind() 이 삼형제 기억날려나... 아 튜토리얼에서 했는지도 기억이 안난다. 딥다이브랑 헷갈려.

velog.io/@josworks27/%ED%95%A8%EC%88%98%ED%98%B8%EC%B6%9C-call-apply-bind-%EC%B0%A8%EC%9D%B4

함수 호출 call, apply, bind의 차이

또 튀어나오는 남의 블로그 

- func.call 를 사용해 컨텍스트 지정하기
: 실행컨텍스트를 잘 생각해 보면 함수에서 worker.slow 를 받아서 func로 바꿔서 실행 하려고 해도 캐싱을 하려고 데코레이터를 만든 부분에서 func 자체의 this가 undefined 라고 표시하고 있다.
맞는 말인데 이렇게만 써두면 어 그런가보다 하고 넘어갈 수 있는데... 지금까지 잘 따라 온 사람들은 함수의 실행 위치에 따라 this 값이 바뀌는 부분을 생각 해 낼 수 있을거라 느낀다. - 근데 바로 아래 내려가면 설명 함 ... 아니 다음쪽 🔥
사라진 this 컨텍스트를 call을 통해서 원하는 범위로 고정할 수 있는 방법에 대해 설명을 하고 있다.

파랗게 선택 한 function (x) 

하단의 설명한 부분에 문제는 없는 것으로 생각 됨.

- 여러 인수 전달하기
: 캐싱데코레이터를 조금 더 가지고 놀아본다. 인자를 2개를 받는걸 만들어 보려고 하는데, 이 경우 중첩맵을 쓰거나, 키를 중복으로 쓰는 라이브러리를 쓰거나, 두 키를 합해서 하나의 키로 만들어 해싱함수로 만든다고 세가지에 대해 소개하면서 마지막걸 썼다.

- func.apply
: 아래 16줄 대신 쓸 수 있다고 한다.

스프레드로 args를 펴 발라 하나하나 분해해서 call에 넣어줬는데 apply를 쓰면 유사배열객체가 넘어가도 하나하나 분해해서 끄집어내 넣어주니 이 얼마나 좋은가. 하여 이것을 쓴다.

- 메서드 빌리기
: 앞에서 구현한 해싱을 개선해보자고 한다. args 대신 여러 인자를 받는 낡은 arguments 를 활용해서 해결하려 함. 유사객체배열에는 join이 없기 때문에, 이걸 사용하기 위해서 빈 array에서 join 메서드 call 을 통해 빌려 와 해결했다.

- 데코레이터와 함수 프로퍼티
: 음... 뭔가 주어를 살짝 빼먹고 하는 것 같아서 이해가 살짝 안되넹, 오리지널인이 되는 원본 함수에 func.calledCount 속성이 있으면, 중복된 친구인 데코레이터 속성은 감싼 래퍼이기 때문에 사용할 수 없는 그런 문제가 있나본데, 예시까지 들어서 slow 가 속성으로 있으면 데코레이터의 slow 는 래퍼라서 쓸수 없다는 소리같은데 확신을 못내리겠네... 뭔가 말을 장황하게 한 것 같은데 -_- 한국어 맞아?? 일어는 아예 해석을 포기했나 항목이 없고... 영어도 이상하고.. 일단 넘어가고 나중에 확신이 서면

- 함수바인딩
: 잃어버린 this를 찾아서... 맨날 사라지는 친구 어떻게 가져와서 잘 쓸지 고민될 때!
!!!여러분은 바인딩을 합니다!!! 라고 광고...

- 사라진 this 🥺
: 사라지는걸 구경 해보자.
사용자라고 유저 객체를 만들고, 프로퍼티로 퍼스트네임에는 존
메서드 (ES6 문법으로) 세이하이라는 친구를 만들어서 내부의 this로 유저 객체에 접근하게 한 후, 퍼스트네임을 찍어주는 친구를 만들었다.

자 일단 그래 열심히 만들었으니 확인해보면 언디파인드가 뜨니 당황스럽다.

함수 실행 위치를 잘 생각해서 user.sayHi가 window가 있는 전역에서 실행이 되었다.
sayHi 친구는 전역! 전역... global 에서 실행이 되었으니, 본문에서 말하는 부분인 window 에서 실행이 된 것이다.
sayHi는 global 에서 firstName을 찾기 시작하지만, 집(user 라는)안에 들어있는 firstName 을 불러도 찾을 수 없...

그래서 해결책이라고 제시하는데

- 방법 1: 래퍼
: 가장 간단하다고 한다. (당신으 ㅣ입장에서)
setTimeout을 사용해서 user를 받아 호출하기나 화살표 함수로 똑같이 구현 하는 등. 전역 렉시컬에서 벗어나게 하는 방법이다. 1000ms라는 1초의 시간 사이에 user의 firstName이 바뀔 수 있고, sayHi가 바뀔수도 있는 부분이다.
다른 사람을 부른다던가, 다른 내용을 동작하게 될 수 있다는것이다.

- 방법 2: bind
: 모든 함수는 this를 수정하게 해 주는 내장 메서드 bind가 있다고 함. - 간단하게  함수.bind(this로 지정할대상컨텍스트) 지정하면 해당 내용으로 지정 된 함수가 실행되게 된다고 한다. 리액트에서 class 문법으로 작업 시, 엄격모드가 적용되어 bind가 안되어 있는 경우가 있기도 한다.

- 부분적용
: 인수 바인딩을 이야기 하네. 사용법은 간단.
기본 this로 바인딩할 컨텍스트 부분을 bind(null, 뒤에 인수를 넣는다) 써본적 없는데 써봐야징.

- 컨텍스트 없는 부분 적용
: bind의 컨텍스트 null 같은게 아니라 아예 없는걸 하고 싶단건데, 헬퍼 함수 partial 을 만들어 주면 된다.

모던JS 튜토리얼 읽으면서 드는 생각 메모 6장의 마지막 메모.

- 화살표 함수 다시 살펴보기.🔁
: 짧고, 독특하고, 유용하다. 현재 컨텍스트를 잃어버리지 않는다.
(가장 스코프 체인 상의 가까운 컨텍스트에 쫄래쫄래 디스있니? 하고 놀러 가기 때문에)

- 화살표 함수에는 this 가 없다
: 두둥. 본문에서 접근하면 외부 값을 가져온다... 두두둥! forEach에 화살표 함수를 썼기에, 바깥의 group와 같아짐.
반대로 일반 function 을 쓰는 경우, 일반 함수 실행 컨텍스트에 따라 global 에서 찾게되고, title을 못찾거나 name을 찾게되면 엉뚱하게 빈값을 출력하는 모르는 경우 기가막힌 상황이 연출 될 수 있다.😭

기타 - 생성자가 없어서 new 불가(만들고 컨스트럭터 걸려있나 보던가..)
화살표 vs bind(this) - 바인드는 범위가 있고 화살표는 묶어서 한정짓지 않는다. 단지 this를 빌료와서 가장 가까운 스코프체인상 실행 컨텍스트에 가서 찾을 뿐.

- 화살표 함수엔 arguments가 없다.
: 응 없다. 새 문법이라서 미지원.

6장 끝