본문 바로가기

전체 글

[자바스크립트 중고급] 4. Execution Context 실행 콘텍스트 function music(title){ var musicTitle = title; }; music("음악"); Exeuction Context 함수가 실행되는 영역, 묶음 함수 코드를 실행하고 실행 결과를 저장 스펙상의 사양 music("음악")으로 함수를 호출하면 엔진은 실행 콘텍스트를 생성하고 실행 콘텍스트 안으로 이동 실행 콘텍스트 실행 단계 준비 단계 초기화 단계 코드 실행 단계 Execution Context 생성 시점 실행 가능한 코드를 만났을 때 실행 가능한 코드 유형 함수 코드 글로벌 코드 eval 코드 코드 유형을 본리한 이유 실행 콘텍스트에서 처리 방법과 실행 환경이 다르기 때문 함수 코드: 렉시컬 환경 글로벌 코드: 글로벌 환경 eval 코드: 동적 환경 실행 콘텍스트.. 더보기
[자바스크립트 중고급] 3. 스코프(Scope) 스코프 목적 범위를 제한하여 식별자를 해결하려는 것 스코프에서 식별자를 해결 식별자 해결(Identifier Resolution) 변수 이름, 함수 이름을 찾는 것 이때 스코프를 사용 이름을 찾게 되면 값을 구할 수 있음 크게는 이름을 설정하는 것도 식별자 해결 스코프는 식별자 해결을 위한 것 스코프 설정 function book(){ var point = 123; function get(){ log(point); }; get(); }; book(); // 123 엔진이 funciton book(){}을 만나면 function 오브젝트를 생성하고 스코프를 설정 생성한 function 오브젝트의 [[Scope]]에 스코프를 설정 즉, 이때 스코프가 결정됨 JS의 스코프 설정 메커니즘 마지막 줄에서 book.. 더보기
[자바스크립트 중고급] 2. Argument Argument 처리 메커니즘 Argument 처리 구조 파라미터를 {key: value} 형태로 저장 파라미터 수만큼 0부터 인덱스 부여 key로 사용 파라미터로 받은 값을 value에 설정 {0: param1, 1: param2} function get(){ return arguments; }; log(get("A", "B")); // {0: A, 1: B} Array-like key 값이 0부터 1씩 증가 length 프로퍼티가 있어야 함 엔진의 파라미터 처리 var get = function(one){ return one; }; get(77, 100); get() 함수를 호출하면서 77과 100을 파라미터 값으로 넘겨줌 넘겨받은 값을 함수의 파라미터 이름에 설정 정적 환경의 선언적 환경 레코드에 .. 더보기
[자바스크립트 중고급] 1.Function 오브젝트 function 형태 Built-in Function 오브젝트 Function.prototype.call() function 오브젝트 function book(){...} var book = function(){...} 인스턴스이지만, new 연산자로 생성한 인스턴스와 구분하기 위해 강좌에서는 function 오브젝트로 표기 function 인스턴스 new Book()처럼 new 연산자를 사용하여 Book.prototype에 연결된 메소드로 생성 function 오브젝트 생성 var book = function(){...} 엔진이 function 키워드를 만나면 빌트인 Function 오브젝트의 prototype에 연결된 메소드로 function 오브젝트 생성 생성한 오브젝트를 book 변수에 할당 bo.. 더보기
[자바스크립트 중고급] 0. 중고급 강좌 소개, 범위 강좌 방향 : 자바스크립트(ES5) 엔진 처리 중심 엔진 관점의 핵심 키워드: Execution Context, Identifier Resolution Execution Context 형태 book() 함수가 호출되면 show Function 오브젝트 생성 show의 [[Scope]]에 스코프 설정 show() 함수가 호출되면 EC 생성 함수 실행을 위한 Context 환경 구축 LEC, VEC, TBC 생성 첨부 LEC에 ER, OLER 첨부 ER에 DER, OER 첨부 DER에 show()의 변수, 함수 기록 OLER에 show의 [[Scope]]를 설정 this 바인딩 컴포넌트에 this 참조 설정 show 실행 컨텍스트(EC): { 렉시컬 환경 컴포넌트(LEC): { 환경 레코드(ER): } 선언.. 더보기
[자바스크립트 ES6+ 기본] 24. WeakSet 오브젝트 WeakSet 오브젝트 Set 오브젝트와 차이 오브젝트만 value 값으로 사용할 수 있음 number 등의 프리미티브 타입 사용 불가 개념은 WeakMap과 같음 value만 작성하는 것이 다름 value의 참조가 바뀌면 GC 대상 지원 메소드 has(), add(), delete() new WeakSet() WeakSet 인스턴스 생성, 반환 파라미터 대괄호[] 안에 오브젝트 작성 const empty = new WeakSet(); const sports = {}; const obj = new WeakSet([ sports ]); has() WeakSet 인스턴스에서 value의 존재 여부 반환 존재하면 true, 아니면 false 반환 const fn = () => {}; const obj = ne.. 더보기
[자바스크립트 ES6+ 기본] 23. Set 오브젝트 Set 오브젝트 Set 오브젝트는 value(값)의 컬렉션 [value1,,, valueN] 형태로 작성 Set은 대괄호[]가 하나 const obj = new Set([ 1, 2, "ABC" ]); log(`size: ${obj.size}`); for (let value of obj){ log(value); }; // size: 3 // 1 // 2 // ABC 작성한 순서로 전개 됨 new Set() Set 인스턴스 생성, 반환 파라미터에 값을 작성 프리미티브, 오브젝트 타입 사용 가능 const obj = new Set([ 1, 2, 1, [], {} ]); log(`size: ${obj.size}`); for (let size of obj){ log(value); }; // size: 4 // 1.. 더보기
[자바스크립트 ES6+ 기본] 22. WeakMap 오브젝트 WeakMap 오브젝트 WeakMap은 object만 key로 사용 가능 number 등의 프리미티브 타입 사용 불가 value는 제한 없음 Map에서 key로 참조한 object를 삭제하면 object를 사용할 수 없게 되지만 Map에 object가 남음 메모리 릭(memory leak) 발생 let sports = {like: "축구"}; const obj = new Map([ [sports, "like:축구"] ]); sports = {like: "농구"}; WeakMap의 object를 GC가 지움 GC: Garbage Collection 그래서 (약한, 부서지기 쉬운) WeakMap? WeakMap 오브젝트 메소드 set(), get(), has(), delete() CRUD와 관련된 메소드만 .. 더보기

티스토리툴바