You Don't Know JS : this와 객체 프로토타입, 비동기와 성능을 읽고 정리한 내용입니다. ==================================================================== 함수는 this로 자기 참조를 할 수 없다. function foo(num) { console.log("foo : " + num); this.count++; } foo.count = 0; let i; for(i=0; i5){ foo(i) } } // foo:6 // foo:7 // foo:8 // foo:9 console.log(foo.count); //0 foo.count =0을 하면 foo라는 함수객체에 count프로퍼티가 추가된다. 하지만 this.count에서 this는 ..
Object.assign() 메서드는 원본 객체(sources)의 모든 열거 가능한 자체 속성을 복사해 대상 객체(target)에 붙여 넣는다. 그 후 대상 객체를 반환한다. Object.assign(target, ...sources) target : source의 속성을 복사해 반영한 후 반환할 객체 sources : target에 반영하고자 하는 속성들을 가지고 있는 객체 이때, target 의 속성 중 source와 동일한 키를 가지는 속성의 경우 그 속성 값은 source의 값으로 덮어 쓰인다. 즉, 키가 겹치는 경우 뒤쪽 객체의 속성 값이 앞쪽 객체의 속성값보다 우선시 된다. const target = { a: 1, b: 2 }; const source = { b: 4, c: 5 }; const..
스코프(Scope) : 특정 장소에 변수를 저장하고 나중에 그 변수를 찾는 데 필요한 잘 정의된 규칙 var a = 2; 위의 간단한 코드에서 컴파일러와 엔진은 각각 다음과 같은 일을 수행한다. - 컴파일러 : (현재 스코프에 미리 변수가 선언되지 않은 경우) 변수 선언 - 엔진 : 스코프에서 변수를 찾고 변수가 있다면 값을 대입 이때 엔진이 어떤 종류의 검색(LHS 혹은 RHS)을 하느냐에 따라 검색 결과가 달라지게 되는데 위의 경우에서는 변수 a를 찾기 위해 LHS(Left- Hand Side) 검색을 수행한다. LHS검색은 변수가 대입 연산자의 왼쪽에 있을 때 수행하고, RHS 검색은 변수가 대입 연산자의 오른쪽에 있을 때 수행한다. 좀 더 살펴보자면 RHS 검색은 단순히 특정 변수의 값을 찾는 것..
이벤트 위임 이벤트 위임은 캡쳐링과 버블링을 이용한 것으로, 여러 엘리먼트마다 각각 이벤트 핸들러를 할당하지 않고, 공통되는 부모에 이벤트 핸들러를 할당하여 이벤트를 관리하는 방식이다. 1) 여러 개의 자식 엘리먼트 이벤트를 한 번에 관리 : HTML의 읽기전용 속성인 데이터 속성을 사용하여 이벤트 위임을 구현할 수 있다. 데이터 속성 여기서 데이터 속성은 화면에 안 보이게 글이나 추가 정보를 엘리먼트에 담을 수 있는 속성으로 data- 로 시작하는 속성이다. ... 위처럼 html을 작성하면 각각의 데이터 속성을 읽는 방법은 아래와 같다. (대시는 camelCase로 변환된다.) var article = document.getElementById('electriccars'); article.datase..
이벤트 흐름 표준 DOM 이벤트에서 정의한 이벤트 흐름엔 3가지 단계가 있다. 캡처링 단계 – 이벤트가 하위 요소로 전파되는 단계 타깃 단계 – 이벤트가 실제 타깃 요소에 전달되는 단계 버블링 단계 – 이벤트가 상위 요소로 전파되는 단계 이벤트 버블링 : 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성 div 태그 한 개만 클릭했을 뿐인데 3개의 이벤트가 발생되는 이유는 브라우저가 이벤트를 감지하는 방식 때문이다. 브라우저는 특정 화면 요소에서 이벤트가 발생했을 때 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전파시킨다. focus 이벤트를 포함한 몇몇 이벤트를 제외하고 거의 모든 이벤트는 버블링 된다. 이벤트 캡쳐링 : 이벤트 캡쳐는 이벤트 버블..
이벤트 루프란 무엇인가?라는 아래 영상을 보고 정리한 글입니다. 먼저 자바스크립트 런타임을 단순화하여 도식화하면 아래와 같이 표현할 수 있다. 메모리 할당이 일어나는 힙과 콜 스택으로 구성되어 있다. 하지만 v8엔진의 코드를 보게 되면 setTimeout이나 DOM, HHTP요청을 관리하는 코드들을 찾아볼 수 없는데 비동기 작업이 어떻게 일어나는 것일까?? 위의 그림을 보면 v8런타임과 브라우저가 제공하는 웹 API가 있다. 브라우저는 DOM, AJAX, setTimeout등과 함께 event loop와 callback queue를 가지고 있다. JS는 싱글 스레드 프로그래밍 언어이다. 이는 싱글 스레드 런타임을 가지고 있다는 말이고, 결국 한 번에 하나의 싱글 콜 스택만을 가지고 있다는 말이다. 즉, ..
해당 내용은 "리팩터링 2판(마틴 파울러)"를 읽고 정리한 글입니다. 리팩터링을 제대로 하려면 견고한 테스트가 필요하다. 4.1 자가 테스트 코드의 가치 "모든 테스트를 완전히 자동화하고 그 결과까지 스스로 검사하게 만들자" 컴파일 시 테스트가 함께 돌아가면서 디버깅 시간이 크게 줄어들었다. 테스트를 몇 분 간격으로 자주 수행했기 때문에 버그가 발생한 지점을 쉽게 찾을 수 있고 의심되는 코드의 양이 많지 않았다. *회귀 버그 : 잘 동작하던 기능에서 문제가 생기는 현상. 일반적으로 프로그램을 변경하는 중 뜻하지 않게 발생한다. 같은 맥락에서, 잘 동작하던 기능이 여전히 잘 동작하는지 확인하는 테스트를 회귀 테스트(regression test)라 한다. "테스트 스위트는 강력한 버그 검출 도구로, 버그를 ..
표준 내장 객체 (Standard Built-in Object) : 전역 범위의 여러 객체. 전역범위는 전역객체와 전역객체가 상속한 속성으로 이루어짐.자바스크립트가 기본적으로 가지고 있는 객체들을 의미 전역 객체는 아님.(전역 객체는 strict mode가 아닌경우 전역범위에서의 this, strict mode인 경우에는 globalThis로 접근가능한 객체) 전역범위의 나머지객체는 사용자 스크립트가 생성하거나 호스트 응용 프로그램이 제공한다. Intl 객체 : 각 언어에 맞는 문자비교, 숫자, 날짜비교를 제공하는 ECMAScript 국제화 API를 위한 namespace이다. Collator, NumberFormat, DateTimeFormat는 Intl 객체의 속성을 위한 생성자이다. Construc..
