bloomCode

이번에 우아한 테크 자바스크립트 메모리 관리 부분에 대해 영상을 보고 정리를 하게 되었다. 우아한 테크: https://www.youtube.com/watch?v=1BoJZqxFYfQ MDN 사이트 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Memory_management 메모리 생명 주기 메모리 할당 변수, 함수 객체 등을 만들 때 메모리를 할당 메모리 사용 변수를 읽거나 할당된 메모리를 사용 메모리 해제 더 이상 필요가 없어지면 메모리에서 해제 다른 C언어와 같은 저수준에 언어에서는 동적으로 메모리를 관리하지만 자바스크립트에서는 엔진이 모두 처리해 줌! (개발자가 직접 메모리 관리 불가!) 힙과 스택 원시값 : number, boolean, st..

실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있는 핵심 개념이라고 한다 실행 컨텍 컨텍스트는 4가지 타입으로 구분된다. 1.전역코드 전역 변수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성해야 하며 var 키워드로 선언된 전역 변수와 함수 선언문으로 정의된 전역 함수를 전역 객체의 프로퍼티와 메서드로 바인딩하고 참조하기 위해 전역 객체와 연결되어야 한다. 전역 코드가 평가되면 전역 실행 컨텍스트가 생성된다. 2.함수 코드 함수 코드는 지역 스코프를 생성하고 지역 변수, 매개변수, arguments 객체를 관리해야 한다. 그리고 생성한 지역 스코프를 전역 스코프에서 시작하는 스코프 체인의 일원으로 연결해야 하며 이를 위해 함수 코드가 평가되면 함수 실행 컨텍스트가 생성된다. 3. eval 코드 e..

모듈이란 애플리케이션을 구성하는 개별적 요소로서 재상용 가능한 코드조각을 말한다! 모듈은 단지 파일 하나에 불과하며. 스크립트 하나는 모듈 하나이다. 일반적으로 모듈은 기능을 기준으로 파일 단위로 분리하며 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 한다. 자신만의 파일 스코프를 갖기 때문에 모듈에 있는 객체는 기본적으로 바공개 상태며 캡슐화되어 다른 모듈에서 접근할 수 없다. 즉, 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재한다. 캡슐화:객체의 속성(data fields)과 행위(메서드, methods)를 하나로 묶고, 실제 구현 내용 일부를 외부에 감추어 은닉한다. 애플리케이션과 분리되어 개별적으로 존재만 한다면 모듈은 재사용이 불가능하므로 존재의 의미가 없어지는데 공개가 필요..

ES6부터 도입된 제네레이터는 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수! 제네레이터와 일반 함수의 차이점은? 제네레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도한다. 일반 함수는 호출하면 제어권이 함수에게 넘어가고 함수 코드를 일괄 실행한다. 함수 호출자는 함수를 호출한 이우 함수 실행은 제어할 수 없음! 하지만 제네레이터 함수는 함수 실행을 함수 호출자가 제어할 수 있다. 함수 시행을 일시 중지 시키거나 재개시킬 수 있으며 함수의 제어권을 함수가 독점하는 것이 아니라 함수 호출자에게 양도 yeild 할 수 있음! 제네레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다. 일반 함수는 매개변수를 통해 함수 외부에서 값을 주입받고 함수 코드를 실행하여 ..

scroll, resize, input , mousemove 같은 이벤트는 짧은 시간 간격으로 연속해서 발생한다. 이러한 이벤트에 바인딩한 이벤트 핸들러는 과도하게 호출되어 성능에 문제를 일으킬 수 있다고 한다. 그래서 이러한 과도한 이벤트 핸들러의 호출을 방지하는 프로그래밍 기법이 디바운스와 스로틀이다. 디바운스 사용자가 텍스트 입력 필드에 값을 입력할 때마다 연속해서 input 이벤트가 발생한다. 입력한 값을 서버에 보내는 Ajax 요청을 수행하게 되면 사용자가 입력을 하고 있는 와중에 서버로 전송될 수 있다. 사용자가 input에 텍스트를 일정시간 입력하지 않았다면 입력이 완료되었다는 것으로 간주하는 debounce함수이다 실제 text를 치다가 일정시간 입력하지 않으니 div태그로 내가 입력한 텍..

함수를 명시적으로 호출하면 함수가 즉시 실행된다. 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용한다. 이를 호출 스케줄링 이라 부른다 자바스크립트는 타이머를 생성할 수 있는 함수 setTimeout과 setInterval 타이머를 제거할 수 있는 함수 clearTimeout 과 clearInterval을 제공한다. 타이머 함수는 ECMAScript 사양에 정의된 빌트인 함수가 아니라고 한다. ECMAScript란? JavaScript의 표준 사양을 정의하는 국제 표준화 기구인 Ecma International에서 관리하는 스크립트 언어 규격 브라우저 환경과 Node.js환경에서 모두 전역 객체의 메서드로서 타이머 함수를 제공한다. 즉, 타..

브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킨다. 브라우저에서는 마우스 이동 키보드 입력 클릭 등을 감지하여 특정 타입의 이벤트를 발생시킨다고 한다. 애플리케이션이 특정 타입 이벤트에 대해 어떤 동작을 하고 싶다면 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려 호출을 위임한다. 이때 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러라 하고 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라고 부른다. 사용자가 브라우저에서 클릭을 언제 할지, 키보드 입력을 언제할지 모르기 때문에 개발자가 함수를 호출하는 것이 아닌 브라우저에게 함수 호출을 위임하는 것이다. 위 코드에는 btn, onClick이라는 프로퍼티에 함수를 할당했다. Window, Document.HT..

정규 표현식이란 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어이다. 정규 표현식은 문자열을 대상으로 패턴 매칭 기능을 제공한다. 패턴 매칭 기능이란 특정 패턴과 일치하는 문자열을 검색하거나 추출또는 치환할 수 있는 기능을 말한다. 정규표현식을 사용하면 반복문과 조건문 없이 패턴을 정의하고 테스트하는 것으로 간단하게 체크할 수 있다. 다만 정규 표현식은 주석이나 공백을 허용하지 않고 여러 가지 기호를 혼합하여 사용하기 때문에 가독성이 좋지 않다. 정규 표현식 객체(RegExp 객체)를 생성하기 위해서는 정규 표현식과 리터럴 RegExp 생성자 함수를 사용할 수 있다. 정규표현식객체에도 메서드를 사용할 수 있다. RegExp.prototype.exec 인수로 전달받은 문자열에 대해 정..

Number 객체는 생성자 함수 객체다. new연산자와 함께 호출하여 Number 인스턴스를 생성할 수 있다. number 생성자 함수에 인수를 전달하지 않고 new연산자와 함꼐 호출하면 [[NumberData]] 내부 슬롯에 0을 할당한 Number 래퍼 객체를 생성한다. Number 생성자 함수의 인수로 숫자가 아닌 값을 전달하면 인수를 숫자로 강제 변환한 후 [[NumberData]] 내부 슬롯에 할당한 Number객체를 생성한다. 인수로 숫자로 변환할 수 없다면 NaN을 [[NumberData]] 내부 슬롯에 할당한 Number 래퍼 객체를 생성한다. new 연산자를 사용하지 않고 Number 생성자 함수를 호출하면 Number 인스턴스가 아닌 숫자를 반환한다. Number.isFinite 정적메..

고차 함수는 인수로 전달받거나 함수를 반환하는 함수를 말함. 자바스크립트의 함수는 일급 객체이므로 함수를 값처럼 인수로 전달할 수 있으면 반환할 수도 있다. 외부 상태의 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍에 기반을 두고 있다. 함수형 프로그래밍은 순수 함수와 보조 함수의 조합으로 통해 로직 내에 존재하는 조건문과 반복문을 제거하여 복잡성을 해결하고 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임이다. 순수 함수를 통해 부수효과를 최대한 억제하여 오류를 피하고 프로그램의 안정성을 높이려는 노력의 일환이다. Array.prototype.sort 배열의 요소를 정렬한다. 원본 배열을 직접 변경하여 정렬된 배열을 반환한다. 숫자 요소를 정렬할때는 정렬 순서를 정의하..