본문 바로가기

JavaScript10

[Record] | 이벤트 루프, 마이크로 태스크, 매크로 태스크 이벤트 루프 싱글 스레드 기반 언어인 자바스크립트는 이벤트 루프를 통해 비동기적으로 작업을 수행할 수 있다. 위 사진은 브라우저의 환경을 간단하게 나타낸 이미지이다. JS 엔진 Heap: 메모리 할당이 일어나는 영역(객체와 같은 참조 타입의 데이터가 저장되는 영역) CallStack: 함수가 호출될 때 생성되는 실행 컨텍스트가 구성하게 되는 stack WebAPIs 웹 브라우저에 구현된 API DOM event, AJAX, Timer 등의 비동기 처리 담당 API 존재 Event Loop 콜스택이 비었을 시, 이를 감지하고 태스크 큐에 있는 비동기 콜백 함수를 콜스택에 추가한다. Callback Queue (or Task Queue) 비동기적으로 실행될 콜백함수들이 임시로 대기하는 큐 형태의 배열이다. .. 2022. 7. 5.
[DeepDive] - 26장(ES6 함수의 추가기능) 필요 내용 정리 메서드 ES6 사양에서의 메서드는, 메서드 축약 표현으로 정의된 함수만을 의미한다. ES6 사양에서 정의한 메서드는 인스턴스를 생성할 수 없는 non-constructor이다. 따라서 생성자 함수로서 호출할 수 없다. 추가로 ES6의 메서드는 인스턴스가 없기 때문에 prototype 프로퍼티 및 프로토타입이 없다. const obj = { x:1, // foo는 메서드 foo(){ return this.x } , // bar는 메서드가 아닌, 일반함수 bar: function(){ return this.x; } } obj.foo() // 1 obj.bar() // 1 new obj.foo() // TypeError: obj.foo is not a constructor new obj.bar() // bar.. 2022. 6. 27.
[DeepDive] - 25장(클래스) 필요 내용 정리 클래스 정의 클래스는 객체(인스턴스)를 생성하기 위한 템플릿이다. 클래스는 선언식과 표현식으로 정의가 가능하다. 표현식으로 정의할 수 있는 이유는, 클래스가 값처럼(데이터처럼) 자유롭게 사용될 수 있는 일급 객체라는 것을 의미한다. class Base {} const Base = class {}; const Base = class 클래스 몸체에 정의할 수 있는 메서드의 종류는 constructor(생성자), 프로토타입 메서드, 정적 메서드 3가지가 존재한다. class Person{ // 생성자 constructor(name, age, gender) { this.name = name; this.age = age; this.gender = age; } // 프로토타입 메서드 sayHi(){ return `.. 2022. 6. 24.
[DeepDive] - 23장(실행 컨텍스트) 필요 내용 정리 실행 컨텍스트 소스 코드의 4가지 타입 소스 코드를 4가지로 구분하는 이유: 소스 코드 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리가 다르기 때문이다. 전역 코드: 전역에 존재하는 소스코드, 전역에 정의된 함수, 클래스 등의 내부 코드는 포함 X, 전역 실행 컨텍스트 생성 함수 코드: 함수 내부에 존재하는 소스코드, 함수 내부에 중첩된 함수, 클래스 등의 내부 코드 포함 X, 함수 실행 컨텍스트 생성 eval 코드: 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드, eval 실행 컨텍스트 생성 모듈 코드: 모듈 내부에 존재하는 소스코드, 모듈 내부의 함수, 클래스 등의 내부 코드는 포함 X, 모듈 실행 컨텍스트 생성 소스 코드의 평가, 실행 JS 엔진은 평가와 실행 단계를 거쳐.. 2022. 6. 17.
[DeepDive] - 20장(strict mode), 21장(빌트인 객체) 필요 내용 정리 strict mode ES5부터 도입된 기능으로, JS 언어의 문법을 좀 더 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 JS 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 에러를 발생시킨다. 암묵적 전역: 선언하지 않은 변수를 참조할시, ReferenceError 발생 변수, 함수, 매개변수의 삭제: delete 연산자로 변수, 함수, 매개변수 삭제시 SyntaxError 발생 매개변수 이름 중복: 중복된 매개변수 이름 사용시 SyntaxError 발생 with 문의 사용: 전달된 객체를 스코프체인에 추가하지만, 성능과 가독성이 나쁘므로 사용하지 않는것을 권장 strict mode를 적용하기 위해서, 전역의 선두 혹은 함수 몸체의 선두에 use strict; text를 추가한다. // t.. 2022. 6. 14.
[DeepDive] - 17장(생성자 함수에 의한 객체 생성) 필요 내용 정리 생성자 함수 생성자 함수: new 연산자와 함께 호출하여 객체를 생성하는 함수 인스턴스: 생성자 함수를 통해 생성된 객체 생성자 함수에 의핸 객체 생성은 프로퍼티 구조가 동일한 객체 어려개를 간편하게 생성할 수 있다. 자바스크립트는 Object, String, Number, Boolean, Function, Array, Date 등의 빌트인 생성자 함수들을 제공하고 있다. // 생성자 함수 선언 const Person = function(name,gender){ this.name = name; this.gender = gender; } // 생성자 함수를 통한 객체(인스턴스) 생성 const person1 = new Person("wayne","male") // Person { // name: 'wayn.. 2022. 6. 9.

티스토리툴바