Post

기초부터 완성까지 프론트엔드 - day3

Day 3

오늘 읽은 범위

  • 5장 자바스크립트 심화 - 프로토타입과 스코프
  • 6장 자바스크립트 심화 - 실행 컨텍스트

책에서 기억하고 싶은 내용을 써보세요.

  • 자바스크립트에서는 프로토타입을 기반으로 객체 지향의 상속 개념을 구현

  • 자신의 부모 역할을 하는 프로토타입 객체의 참조 링크를 가지고 있으며, 이 링크를 통해 프로토타입으로부터 프로터피나 메서드를 상속받을 수 있음 (프로토타입을 상속받는 객체는 모두 같은 프로퍼니와 메서드를 공유)

  • 스코프: 변수나 매개변수에 접근할 수 있는 범위를 결정

  • 함수 스코프: 선언된 함수 단위로 생성되는 스코프, var

  • 블록 스코프: 변수의 유효 범위를 블록 단위로 제한하여 사용, const/let

  • 렉시컬 스코프: 변수나 함수를 어디에 작성하였는지에 따라 결정됨

  • 스코프체인: 스코프들의 연결 관계

  • 스코프 체이닝: 스코프체인을 따라 검색하는 과정

  • 호이스팅: 선언문이 스코프 내의 최상단으로 끌어올려지는 것을 의미

  • TDZ (Temporal Dead Zone): 스코프의 최상단에서 초기화 단계를 실행하는 선언문이 나오기 전까지의 구간

  • 클로저 :

    • 함수의 렉시컬 스코프를 기억하여 함수가 렉시컬 스코프를 벗어난 외부 스코프에서 실행될 때에도 자신의 렉시컬 스코프에 접근할 수 있게 해주는 것
    • 함수를 사용하는 곳이면 어디든지 적용할 수 있음
    • 특정한 상태를 기억해 캡슐화하거나 하나의 모듈을 정의하는 패턴으로도 사용할 수 있음
  • 모듈

    • 외부로 공개한 API를 통해서 상태를 변경하고 내부 구현에 대한 캡슐화의 역할을 함
    • 각각 모듈은 애플리케이션을 구성하는 단위가 됨
    • 모듈 단위로 재사용하여 불필요한 코드를 줄이고 유지 보수성을 높일 수 있음
    • import/export, default/export, <script type="module">
  • 실행 컨텍스트:

    • 자바스크립트 코드를 실행할 때 필요한 정보들을 저장하고 제공하는 환경
    • 스코프의 정보를 담은 환경을 의미

언어를 구성하는 개념들이 실제로 어떠한 원리로 실행되는지 알고 있다면, 코드를 작성할 떄 어떠한 동작을 수행할지 머릿속에서 미리 그려볼 수 있기 때문입니다. 그리고 이는 애플리케이션의 전반적인 설계 구현에도 큰 도움이 될 것 입니다.

오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요

프로토타입 부분을 여러번 읽었으나 이해가 잘 되지 않았다… 따로 프로토타입에 대해 더 찾아봐야겠다. 언어를 구성하는 개념들이 실제로 어떠한 원리로 실행되는지 알아야 보다 효율적으로 설계할 수 있다는 말이 가장 와닿았다. 이번 장에서 이해하지 못한 프로토타입과 실행 컨텍스트를 더 찾아봐야겠다.

This post is licensed under CC BY 4.0 by the author.