학습 내용 정리/javascript (41) 썸네일형 리스트형 javascript 버블 정렬 1. line4 : for문을 이용해 배열의 길이만큼 순회한다. 2. line6 : 배열의 길이 -1 -i 의 이전, 즉 1~4만큼 돌려서 불필요한 순회를 제거한다. 1번째 회전 : 5번 회전 > 5번째 숫자가 정해짐. 2번째 회전 : 4번 회존 > 5번째 숫자가 정해졌기 때문에 1~4 회전 > 4번째 숫자 정해짐 . . . 4번째 회전 3. line 8~ 10 : temp라는 변수에 저장하기 전의 값을 담고 서로 값을 바꾸어 줌. 4. line 13 : temp에 단 한 번도 값이 저장되지 않았다는 것은 모두 순서대로 라는 것이므로 반복문을 종료. 참고 자료 : https://im-developer.tistory.com/133 this 전역 공간 this = 전역 객체 런타임 환경에 따라 this는 window(브라우저 환경) 또는 global(node 환경)을 가리킨다. 메서드 내부 this = 자신을 호출한 객체 객체.메서드명(); 에서 객체를 가리킨다. 함수 내부 this = 전역 객체 메서드 내부의 함수도 예외는 없다. 화살표 함수 this 바인딩 과정 자체가 없다! 생성자 함수 내부 this = 미래에 생성할 인스턴스 콜백함수에 별도로 this를 지정한 경우 this = 그 대상 ex) addEventListener 참고 자료 : 스파르타 코딩클럽 자바스크립트 입문, 모던 자바스크립트 딥 다이브 실행 컨텍스트와 클로저 실행 컨텍스트 소스코드를 실행하는데 필요한 환경을 제공하고 코드의 실행결과를 실제로 관리하는 영역 식별자(변수, 함수, 클래스 등의 이름) 를 등록하고 관리하는 스코프와 코드 실행순서 관리를 구현한 내부 매커니즘 실행 순서는 실행 컨텍스트 스택으로 관리한다. 실행 컨텍스트 스택 - 코드의 평가와 실행 클로저 외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩함수는 이미 생명주기가 종료한 외부함수의 변수를 참조할 수 있다. 이러한 중첩함수를 클로저라고 부른다. 예제 ) const x = 1; function outer(){ const x = 10; const inner = function(){console.log(x);} return inner; } const innerFunc = outer(); in.. 브라우저의 렌더링 과정 렌더링 Rendering HTML, CSS, JS로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것 - 파싱 (parsing) : 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 첵스츠 문서의 문자열을 토큰으로 분해하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 일련의 과정. ( 일반적으로 파싱이 완료된 이후에는 파스트리를 기반으로 중간 언어인 바이트 코드를 생성하고 실행한다. ) 1. HTML, CSS, JS 등 렌더링에 필요한 리소스 요청과 서버로부터의 응답 2. 서버로부터 응답된 HTML과 CSS 파싱 > DOM, CSSOM 생성 > 결합하여 렌더 트리 생성 3. 서버로부터 응답된 JS를 파싱 > AST 생성 > 바이트 .. 호이스팅 호이스팅 자바스크립트 엔진은 소스코드를 실행하는 런타임 이전에 소스코드의 평가 과정을 거치면서 소스 코드를 실행하기 위한 준비를 한다. 소스코드 평가 과정에서 모든 선언문(변수 선언문, 함수 선언문 등)을 찾아내 먼저 실행한다. 이 특징을 호이스팅이라고 한다. 평과 과정이 끝나면 모든 선언문을 제외한 소스코드를 한 줄씩 순차적으로 실행한다. - 함수 호이스팅 함수 선언문 : 호이스팅 가능 함수 표현식 : 호이스팅 불가 (함수 표현식 = 함수 객체를 변수에 할당한 것, 즉 할당이기 때문에 런타인 시점에서 동작) * 함수 선언문은 함수 객체 생성이고 변수 선언문은 변수에 값을 할당하는 것이기 때문에 호이스팅이 일어날 때 함수 선언문은 함수 객체를 실행할 수 있지만 변수 선언문은 변수의 실행 시점이 아닌데 호.. 가비지 콜렉터와 매니지드 언어 Garbage Collector (가비지 콜렉터) 애플리케이션이 할당한 메모리 공간을 주기적으로 검사하여 더 이상 사용되지 않는 메모리를 해제 하는 기능 더 이상 사용되지 않는 메모리 = 어떤 식별자도 참조하지 않는 메모리 공간 자바스크립트 = 가비지 콜렉터를 내장하고 있는 매니지드 언어 * 가비지 콜렉터를 통해 메모리 누수를 방지한다. Managed Language (매니지드 언어) - 매니지드 언어 : 개발자의 직접적인 메모리 제어 허용 X > 개발자가 신경쓸 것이 적어져 생산성 확보, 성능 손실 감수 - 언 매니지드 언어 : 메모리 제어를 개발자가 주도 참고 자료 : 모던 자바스크립트 딥 다이브 javascript Error Handling 1. try-catch 2. throw 개발자가 고의적으로 에러 발생시킨다 3. finally 에러가 발생했는지 여부와 관계없이 언제든 실행 Promise Promise Promise는 비동기 처리에 대해, 처리가 끝나면 알려달라는 ‘약속' resolve (성공) / reject (실패) 둘 중 하나가 실행되기 전까지는 다음(then), 오류(catch)로 넘어가지 않는다. 비동기작업이 완료될 때 resolve/reject 호출 new Promise(function (resolve) { setTimeout(function () { var name = '에스프레소'; console.log(name); resolve(name); }, 500); }).then(function (prevName) { return new Promise(function (resolve) { setTimeout(function () { var name = prevName + ', 아메.. 이전 1 2 3 4 5 6 다음
