값이 할당되지 않은 변수를 사용

[frysweet]

선생님 , 변수가 함수 안에서 값이 할당되기 전에 사용되는 경우에 대해 이해가 어려운 부분이 있어, 질문올립니다.

전역에 선언되지 않아 있는 let timeout; 변수가 function debounce '안' 에 선언되어 있는데요.
리턴값인 함수 안에서 timeout 을 사용하는데, 
아직 값이 할당되지 않은 상태에서,
window.clearTimeout( timeout )에 넣어서 사용하고 있어요.
그 후에, timeout 에 setTimeout 을 사용해서 later 함수를 할당해 놓았는데요.
이 부분도 좀 이해가 어렵습니다..

 

** 질문을 요약하자면,

1. timeout 에 아직 값이 없는데 clearTimeout 에 넣어서 사용하는 이유?

2. timeout 에 setTimeout 을 할당해놓았는데, 'timeout' 에 '( )' 을 붙여놓지 않았으니, 실행이 안되지 않나요?

3. setTimeout 이 할당되어 있는 timeout 과  부모 스코프인 debounce 의 timeout 변수는 같은 것 맞나요?

[codingapple]

1 그것은 코드짠 사람만 알겠군요 혹여나 다른 타이머가 있을까봐 미리 안전하게 제거하는 코드를 짜놓은게 아닐까요  

2 setTimeout은 변수에 저장만해도 실행됩니다

3 timeout 변수 정의하는 부분이 let timeout밖에 없는듯한데 같을듯요 

[frysweet]

답변 감사합니다 🙂

그럼 setTimeout이 실행되면서 later 함수가 실행되면, timeout이 null 이 되는데,

함수의 첫번째 줄에 정의되어 있는 'timeout' 과setTimeout이 할당되어 있는 'timeout' 이 같으므로, 둘다 null 값을 가지게 되는 것 맞나요? 

[codingapple]

네 같은 변수면 같은값을 가집니다 

[frysweet]

선생님 apply() 와 this 에 대해 질문 있습니다.

Line 443,452를 보면 리턴 구문에서, function debounce 파라미터로 받은 콜백 함수 func 을  .apply(context, args) 와 사용하고 있는데요

debounce 함수 리턴 값인 화살표 함수 안에서 정의된 'const context = this;' 의 'this' 는 전역객체 window 이고,

func.apply() 안에 context를 첫번째 인자로 넣으면 func를 호출하는데 제공될 this 의 값이 되므로,

func.apply(context, args) 의미는 => 함수debounce() 의 콜백함수인 'func'을, func 의 인자로 받았던 'args'를 인자로 호출할때,  func 의 'this' 값은 전역객체 'window' 이다.

라고 해석하면 맞나요?? 

[codingapple]

debounce 함수 리턴 값인 화살표 함수 안에서 정의된 'const context = this;' 의 'this' 는 전역객체 window 이고,

-> 는 아닙니다 function debounce(){} 안에 있는 this를 사용합니다 

 

[frysweet]

답변 감사합니다 🙂 

function debounce(){} 안에 명시적으로 this가 정의되어 있지 않은데,

이럴때는 함수 debounce를 가지고 있는 오브젝트 또는 클래스가 함수 debounce의 클래스가 'this'가 되고 이것이 'const context = this' 의 'this' 가 되는 것 ... 맞나요?? 

(예시 debounce 함수는 클래스 안에 선언되어 있습니다.)

++ 'debounce' 함수를 'export' 해주고, 함수 'debounce' 를 가지고 있는 클래스 A를 => 클래스 B로  'import' 해서 클래스 B 안에서 함수 'debounce'를 사용할 경우,

함수 'debounce' 의 'this'는 마찬가지로 함수를 가지고 있는 '클래스 A' 가 맞을까요? 

[codingapple]

네 this는 debounce가 들어있는 object를 출력해주겠군요 근데 저 상황에선 this가 Window일 것 같긴합니다 

- export 키워드는 클래스 안에 있는 함수변수들엔 붙일 수가 없습니다

- import 해온 변수함수는 import 해와도 원래 동작하던대로 동작합니다 안에 있는 변수가 달라지고 그러지 않습니다 

 

[frysweet]

엇 답변 감사합니다 🙂

제가 debounce 가 들어있는 모듈을 착각했었네요..^-^;;

debounce 함수가 utils.ts 파일의 전역에 선언되어 export 되어 있는데요,

debounce 함수 안 '리턴 값' 인 함수 안에서 사용하는 'this' 는 = 'debounce  함수의 this'  이고, 

debounce 함수는 전역에 선언되어 있으므로, 함수 debounce 의 'this' => window 이며,

위 함수를 다른 파일 B.ts에서  import 해서 사용한다 해도, utils.ts 에서 bounce 함수의 'this = window' 로 정해졌으니, 그대로 가져와 사용한다.. 라고 이해하면 될까요?

만약 파일 b.ts 안의 클래스나 오브젝트 안에서, utils.ts 에서 import 한 debounce 함수를 사용하는데,

=> debounce 함수는 일반함수, debounce 함수 안의 리턴값은 화살표 함수

__debounce { } 중블록 안에서 this 를 사용하고, 리턴값 함수 에서도 this 를 사용한다 가정한다면,,,

-> 이런 경우에도 1) debounce {} 중블록 안의 this 와 2) debounce 리턴값인 화살표 함수안에서의 this 값 모두 utils.ts에서 설정된 'this = window' 값을 고정적으로 그대로 가져와 사용 하나요?? 

[codingapple]

네 그대로 얌전히 사용하면 this는 같은 뜻입니다 근데 window말고 undefined일 수도 있겠군요 

import해온 debounce를 object자료에 추가해서 쓰거나 그러면 this가 바뀔 수도 있습니다 주인이 달라졌으니까요

그냥 this는 debounce들어있는 object 출력해주는 키워드일 뿐입니다

 

1) debounce {} 중블록 안의 this 와 2) debounce 리턴값인 화살표 함수안에서의 this 값은

안에서 갑자기 this를 바꾸지 않았으면 같은 의미겠군요 

[글쓴이]

글