본문 바로가기

Development45

[21.01.08] YDKJSY - The (Not so) Secret Lifecycle of Variables When Can I Use a Variable? 변수를 사용할 수 있는 시기에 대한 명확(해 보이는 듯)한 답변은: 변수가 선언된 이후라고 생각할 수 있다. 하지만 이것은 정답이 아니다. greeting(); // Hello! function greeting(){ console.log("Hello!"); } 위의 코드는 정상적으로 실행되는 것을 볼 수 있다. 이전 챕터에서 확인했다시피, 모든 식별자들은 각각의 스코프들에 대해서 컴파일 과정에서 등록되고, 스코프에 진입하는 순간 그 시작 지점에서 식별자들은 생성된다. 이와 같이 변수 / 함수 선언이 스코프의 아래 부분에서 이루어졌다 하더라도, 인접한 스코프의 시작 지점에서 확인이 가능한 현상을 호이스팅이라고 한다. 이 현상에 대해서는 두 가지 케이스로 나누.. 2024. 1. 7.
[21.01.08] JavaScript this 의 동작 원리 스터디 시간 동안 this 에 대한 열띤 토론이 이루어졌지만, 무언가 명쾌하게 끝나지 못한 느낌이 들어 지금까지 듬성듬성 알아왔던 개념을 다시금 확립하고자 이 글을 작성하게 되었습니다. 혹시 글을 읽고나서도 이해가 잘 되질 않거나, 교정할 만한 내용이 있으시다면 피드백 부탁드리겠습니다 :) References (Poiema Web) 실행 컨텍스트와 자바스크립트의 동작 원리 함수 호출 방식에 의해 결정되는 this 화살표 함수 위 링크에서 다루고 있는 주제를 순서대로 찬찬히 읽어 보신다면 아마 더 깊게 JS 의 동작원리를 이해할 수 있겠지만, 글의 성격에 맞게 몇몇 코드를 위주로 this 와 이를 이해하기 위해 필요한 약간의 배경 지식을 간단히 알아보겠습니다. Execution Context (실행 컨텍스.. 2024. 1. 7.
[21.01.06] YDKJSY - Around the Global Scope Why Global Scope? 여러 개의 JS 파일들을 하나의 실행 컨텍스트 안에서 협력하게 하는 방법은 크게 세 가지가 있다. ES 모듈을 사용할 때, 각각의 모듈은 접근이 필요한 모듈이 필요할 때 import 를 할 수 있다. 그래서 서로 다른 파일들은 이 방법을 통해 따로 공유하는 외부 스코프 없이도 JS 환경 안에서 협력이 가능하다. 빌드하는 과정에서 번들러를 사용하면, 모든 파일들은 JS 엔진이나 브라우저로 전송되기 전에 하나의 파일로 병합된다. 번들 유무나 파일들이 개별적으로 브라우저에 연결되는 것과 상관없이, 이러한 파일들을 둘러싼 특정 스코프(e.g. Wrapper function, UMD) 가 존재하지 않는다면 전역 스코프 가 파일들을 서로 협력하게 할 유일한 방법이다. 전역 범위에서 .. 2024. 1. 7.
[21.01.06] YDKJSY - The Scope Chain "Lookup" Is (Mostly) Conceptual lookup (검색) : 변수의 런타임 접근으로써, JS 엔진은 변수가 위치한 스코프에서 출발해 참고하고자 하는 변수가 존재할 때까지 상단 / 외부 스코프로 올라간다. 검색을 중지하는 조건은 매칭되는 변수를 찾았거나, 전역 스코프에 도달하거나 둘 중 하나이다. 하지만 위의 예시는 개념적인 이해를 돕기 위한 설명일 뿐이지, 실제로 작동하는 방식은 아니다. 각 스코프는 초기 컴파일 동안 대개 결정된다. 왜냐하면 렉시컬 스코프는 이미 이 시점에서 완료되고, 변수는 실행 시점에서 발생하는 어떤 것에도 영향을 받지 않기 때문이다. 이러한 정보들은 컴파일 동안 결정되기에 AST 단계의 내부 변수에 저장된다. 그리고 프로그램을 실행하는 명령들에 의해 사용된다... 2024. 1. 7.