본문 바로가기

JavaScript40

Property Attribute 프로퍼티 어트리뷰트를 이해하기 위해선 내부 슬롯 ( internal slot)과 내부 메서드( internal method)의 개념을 알아야 한다. 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티 (pseudo property)와 의사 메서드( pseudo method)이다. ECMAScript 사양에 등장하는 이중 대괄호 [[...]]로 감싼 이름들이 내부 슬롯과 내부 메서드이다. 그럼 [[prototype]]같은 것들도 내부 슬롯이고 이들은 자바스크립트 엔진의 구현 알고리즘을 설명하기 위한 의사 프로퍼티였다는 것을 알게 된다. ECMAScript 사양에 정의된 내부 슬롯과 내부 메서드는 자바스크립트 엔진에서 실제로 동작하.. 2022. 3. 3.
클래스 (1) Class 자바스크립트는 프로토타입 기반 객체지향 언어이다. 프로토 타입 기반 객체지향 언어는 클래스가 필요 없는 객체지향 프로그래밍 언어이다. ES5에서는 클래스 없이도 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수 있다. 하지만 클래스 기반에 익숙한 우리들은 프로토타입 기반 프로그래밍 방식에 혼란을 느낄 수 있으며( 본인이 프로토타입에 이해가 매우 어려웠다.), 이는 하나의 자바스크립트를 이해하기 어렵게 하는 하나의 장벽처럼 인식이 되었다. ES6에서 도입된 클래스는 자바, C#과 같은 클래스 기반 객체지향 프로그래밍에 익숙한 프로그래머가 더욱 빠르게 학습할 수 있도록 새로운 객체 생성 메커니즘을 제시합니다. 그렇다고 ES6의 클래스가 기존의 프로토타입 기반 객체지향 모델을 폐지하.. 2022. 3. 2.
-집가서 확인 보호되어 있는 글 입니다. 2022. 3. 2.
클로저의 활용 지금까지 클로저의 동작원리에 대해서 알아보았다. 상위 스코프의 식별자를 외부 함수의 생명 주기 소멸 이후에도 참조한다는 개념을 어디다 사용해야 효과적으로 클로저를 활용했다고 하는 것일까? 클로저는 상태를 안전하게 변경하고 유지하기 위해서 사용한다. 즉 상태를 외부로부터 은닉하고 특정 함수에게만 상태 변경을 허용하기 위해 사용한다. 아. 캡슐화? 전에서 클로저는 함수가 자유 변수에 대해 닫혀있다는 의미라고 했다. 자유 변수 즉 상태에 대해 묶여있는 함수이구나라고 생각된다. 요청사항을 하나 만들어보자. 요청은 함수 호출 시 호출된 횟수를 누적하여 출력하는 것이다. let num = 0; const increase = function(){ return ++num; } increase(); 이 코드는 오류의 가.. 2022. 2. 24.
클로저 클로저(closure)는 자바스크립트 교유의 개념이 아니다. 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다. 최근 자바 스트림을 공부하면서 자바에서 클로저를 어떻게 이용하는 지도 공부했다. 이처럼 클로저는 자바스크립트의 고유의 개념이 아니기 때문에 ECMAScript 사양에 등장하지 않는다. 클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합이다. 실행 컨텍스트를 공부하면서 함수 실행 컨텍스트의 렉시컬 환경이 구성되는 과정을 공부했다. 함수에 진입 시 평가를 위해 함수 렉시컬 환경을 생성하는데, 이 과정을 기억하고 있다면 이해가 어렵지 않을 것이다. const x =1; function outerF(){ const x = 10; function innerF(){ con.. 2022. 2. 24.
함수 코드 실행 컨텍스트 이번에는 식별자를 결정하는 과정과 함수 코드는 자바스크립트 엔진이 어떻게 평가하고 실행하는지 과정을 알아볼 것이다. 식별자는 스코프가 다른 경우에 같은 이름을 가질 수 있다. 이는 스코프가 다르면 동일한 이름의 식별자가 여러 개 존재할 수 있음을 뜻한다. (이는 의도치 않은 에러를 발생시킨다..ㅠ ) 식별자 결정을 위해서 실행 중인 실행 콘텍스트에서부터 식별자를 검색하기 시작한다 선언된 식별자는 실행 콘텍스트의 렉시컬 환경 레코드에 등록되어 있다. 만약 실행 중인 실행 콘텍스트에서 식별자를 찾지 못하면 외부 렉시컬 환경에 대한 참조에 바인딩된 렉시컬 환경, 즉 상위 스코프로 이동하여 식별자를 검색한다. 이것이 바로 스코프 체인의 동작 원리이다. 전역 함수의 평가과정이 끝나고 실행하는 도중 함수를 만나 전.. 2022. 2. 23.
전역 코드 실행 컨텍스트 실행 콘텍스트는 자바스크립트의 동작 원리를 담고 있는 핵심 개념이다. 실행 콘텍스트는 ECMAScript 사양에서 사용하는 어려운 용어가 다수 등장해 초기 실행 콘텍스트를 이해하려 해 봤지만 실패했던 기억이 있다. 따라서 좀 더 쉽게 이해하기 위해 책을 구매했고 해당 내용을 정리해보려고 한다. 1. ECMASCript code 자바스크립트 스펙에서는 소스코드를 4가지로 분류하였다. 이러한 4가지 타입의 소스코드는 실행 콘텍스트를 생성한다. 전역 코드 - 전역에 존재하는 소스코드를 말하며 이는 전역 실행 컨텍스트를 생성한다. 전역 코드는 전역 변수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성해야 하며, var 키워드 전역 변수, 함수 선언문으로 정의된 전역 함수를 전역 객체의 프로퍼티와 메서드로 바.. 2022. 2. 22.
this 자바스크립트의 this 키워드에 대해서 공부할 예정이다. [겪은 상황] 하이브리드 앱 개발 중 Class의 메서드를 추가하는 도중 이벤트 리스너를 등록해야 하는 상황이 있었다. 인앱브라우저를 종료한 후 callback에서 여러 작업을 진행하는 상황이었다. 그래서 아무 생각 없이 이벤트 리스너 내부에서 this로 클래스 프로퍼티에 접근하기 위해 this.propertie를 사용했다가 동작이 안 되는 문제가 발생했다. try / catch로 잡아 문제를 디버깅하는 과정에서 this.propertie에서 문제가 발생한다는 것을 알았다. 이벤트 리스너는 클래스 내부 메서드 안에서 플러그인을 통해 생성한 객체에 이벤트 리스너를 등록하는 상황이었다. this 키워드 기존 객체 리터럴 방식으로 생성한 경우 메서드 내.. 2022. 2. 4.
함수, 1급 객체 최근 업무가 하이브리드 앱을 제작하는 일이다 보니, 자바, 스프링보단 TypeScript, Angular, Ionic 위주로 공부를 하게 되는 것 같다. 클라이언트 UI, UX부터 Angular의 문법과 활용 그리고 HTTP 요청을 받기 위한 백엔드 작업, SQL 쿼리 작성, 테스트 등등.. 많은 작업을 하는데, 이게 생각보다 재밌는데 단점은 내가 너무 느리다는 생각이 드는 것 같기도 하고 여러 방면을 신경 쓰다 보니 무엇이 최선이고 가장 좋은 방법인지 결단을 내리는 일이 매우 힘들다는 점이다. 뭐 결론은 자바스크립트 기초 공부나 더하자로 결론 냈다. 들어가기 전 복습 자바스크립트의 함수의 분류는 non-constructor, constructor이며, 공통분모로는 callable이다. 함수 객체만을 위.. 2022. 1. 25.
Iteration protocol ES6에서 도입된 Iteration protocol은 iterable 한 자료구조를 만들기 위한 ECMAScript 사양에 정의한 규칙이다. ES6 이전의 순회 가능한 여러 데이터 컬렉션들은 통일된 규약 없이 나름의 구조로 순회를 할 수 있게 구현되어있었지만 ES6에서는 순회 가능한 자료구조를 iteration protocol을 준수하는 iterable로 통일하였다. Iteration protocol의 개념은 상당히 말장난 같아서 많이 헷갈린다. 한번 정리를 해야 ES6 이상의 여러 개념을 이해하는데 도움이 될 것 같아서 정리하려고 한다. Iterable 이터러블 프로토콜을 준수한 객체를 이 트러블이라고 한다. 여기서의 Iterable protocol이란 Well-known Symbol인 Symbol.i.. 2022. 1. 17.

티스토리툴바