💪 JavaScript. Engine w/ ZeroCho TV

Preface

📌 개발 공부 9개월 차인 to-be 개발자의 자습 blog🙂ﾠApr 03 ~ 09, 2022

현재 상태
coding test와 면접을 앞두면서 잘 알고 있어야 할 부분에 대해 마침 좋은 강의가 나와서 살펴보았다.

Summary

• call stack은 호출, scope는 선언을 생각하기
• 함수의 호출을 만나면 return 값을 넣어보기 or 함수의 호출을 넣고 싶으면 return 값을 넣어서 말이 되는지 보기
• 함수 실행과 종료 순서 쫓아가는 법 익히기
• call stack의 '(anonymous)'는 맨 처음에 file 자체를 실행하는 걸 하나의 함수라고 생각하기
• call stack 생각할 땐 일단 선언은 접고 호출된 부분만 보기
• 함수의 선언에 접근이 가능한지 알고 싶을 땐 lexical scope를 그려서 scope chain을 타고 올라가보기, 혹은 선언 지도 그려보기
• hoisting이 필요한 상황을 만들지 말 것
  e.g. 변수를 선언하기 전에 접근하는 code
  cf. eslint 사용해서 위 예시 상황 방지
  • var... 왜 const나 let 써야 하냐면
    • 왜 var O; 이 부분만 올라가
    • 왜 선언을 두 번 해 헷갈리게
    • 왜 var O = "OO"을 window.O = "OO"로 등록해
  • 다른 사람이 짠 code를 분석할 땐 var, function 같은 걸 위로 올린 후 scope chain대로 생각해 보기
• this는 기본적으로 window
  • JS와 node 모두에서 globalThis로 통합되었으니 참고
  • this가 뭔지는 함수가 호출될 때 정해짐, 즉 호출 stack 그릴 때 this도 같이 정해짐
    • 함수를 호출하는데 그 앞에 객체가 붙는다면 this는 그 객체로 변경됨 (단, 함수가 화살표함수이면 this가 변경되지 않음)
    • 그 외에도 함수.new, 함수.bind, 함수.apply, 함수.call method를 쓰는 경우 this가 변경됨

➕ afterthought

다른 분들 강의도 정말 좋지만 제로초님 강의 너무 좋다. 강의 개수 보고 겁 먹어서 나중에야 접했는데, 그게 너무 후회될 정도로 좋다. 제로초님 강의를 봤으면 더 빨리 개념을 잡을 수 있었을 것 같다. "A는 OOO다"를 알려주시기에 앞서 "A의 기본 값은 OOO다."를 먼저 알려주셔서 좋았다. JS 시작할 때 이것도 같이 알려줘야 할 것 같은데 이건 왜 curriculum에 없는 건지... 아쉽다.

Endnote

🙇 the source of this content

인간 JS Engine 되기 w/ 제로초