📝 Javascript

💡 브라우저의 렌더링 과정용어 정리파싱(구문 분석)프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 실행하기 위해 텍스트 문서의 문자열을 토근으로 분해(어휘 분석)하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 일련의 과정을 말한다.일반적으로 파싱이 완료된 이후에는 파스 트리를 기반으로 중간 언어인 바이트 코드를 생성하고 실행한다.렌더링HTML, CSS, 자바스크립트로 작성된 문서를 파싱 하여 브라우저에 시각적으로 출력하는 것을 말한다.✨ 브라우저 렌더링 과정HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답 받는다브라우저의 렌더링 엔진은 HTML과 CSS를 파싱 하여 DOM과 CSSOM을 생성하고 이들을..

💡 ES6 함수의 추가 기능함수의 구분ES6 이전의 모든 함수는 일반함수, 생성자함수, 메서드 구분 없이 사용할 수 있었다.똑같은 함수를 호출하는 방식에 따라 다르게 사용했다사용 목적에 따라 명확한 구분이 없었음함수의 세가지 종류 (ES6)일반함수함수 선언문이나 함수 표현식으로 정의한 함수ES6이전의 함수와 차이가 없다✨ ES6 메서드✨ 화살표 함수 ✨ 메서드(ES6)메서드 축약 표현으로 정의된 함수ES6 사양에서 정의한 메서드는 인스턴스를 생성할 수 없다. (new랑 같이 못씀)자신을 바인딩한 객체를 가리키는 내부슬롯을 갖는다//ES6foo() {...}//ES6이전foo : function() {...} ES6이전에는 프로퍼티 값에 익명함수 표현식으로 할당했었는데, 그러면 안 됨 일반함수로 취급하게..

💡 클로저클로저란?클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 렉시컬 스코프(정적 스코프)자바스크립트 엔진은 함수를 어디에 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프(정적 스코프) 라 한다.상위 스코프에 대한 참조는 함수 정의가 평가 or실행되는 시점(함수 객체 생성)에 함수가 정의된 위치에 의해 결정된다.함수 선언문 → 호이스팅 때 결정(평가)함수 표현식 → 실행되어 함수 객체 생성될 때 (실행)결정 시기만 다를 뿐 상위 스코프는 정의된 위치에 따라 결정된다.스코프스코프의 실체는 실행컨텍스트의 렉시컬 환경이다스코프 체인외부 렉시컬 환경에 대한 참조를 통해 상위 렉시컬 환경과 연결된다. 함수 객체의 내부 슬롯 [[Environment..

💡 this 키워드this란?자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다.this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.this 바인딩은 **함수 호출 방식에 의해 동적으로 결정**된다. ✨ 함수 호출 방식과 this 바인딩함수가 어떻게 생겼든 간에 이 함수를 어떻게 호출하느냐에 따라 안에있는 this에 바인딩되는 값이 달라진다!!// foo 함수const foo = function(){ console.log(this) } 함수 호출 방식1. 일반 함수 호출 : this → 전역객체       1. 일반 함수로 호출된 모든 함수(중첩 함수, 콜백 함수 포함)// 일반 함수로 호출foo() // this => 전역객체  ..

본 내용에 들어가기 앞서 window 객체에 대해 간단히 알아봅시다. window는 Javascript core, DOM, BOM을 포함한 전역 객체이기 때문입니다. ✨1. Window 객체 Javascript의 최상위 객체이자 전역 객체이면서 모든 객체가 소속된 글로벌 객체이다. 객체화된 수많은 구성 요소들로 이루어져 있다. window 객체의 프로퍼티나 메소드는 window를 생략하고 바로 사용할 수 있다 window.alert("메시지") -> alert("메시지") 1-1. Window 객체 구조 ✨2. DOM(Document Object Model, 문서 객체 모델) 브라우저가 웹 문서를 이해할 수 있도록 구성된 것 html 태그를 동적으로 제어한다 html과 Javascript를 연결해주는 역..

💡 20.1 strict mode란? function foo() { x = 10; } foo(); console.log(x); // ? 전역 스코프에 x 변수 선언이 없어 ReferenceError가 발생할 것 같지만, 아무런 에러도 발생하지 않는다. 암묵적 전역 (Implicit Global) 자바스크립트 엔진은 암묵적으로 전역 객체에 x 프로퍼티를 동적 생성한다. 따라서 전역 변수처럼 사용할 수 있다. 암묵적 전역은 오류를 발생시킬 수 있기 때문에 반드시 var, let, const 키워드를 사용해야 한다. strict mode (엄격 모드) - ES5 부터 추가된 모드. - 자바스크립트 언어의 문법을 더 엄격하게 적용하여 오류를 발생시킬 가능성이 높다. - 자바스크립트 엔진의 최적화 작업에 문제를 ..

💡 18.1 일급 객체 1. 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다. 2. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다. 3. 함수의 매개변수에 전달할 수 있다. 4. 함수의 반환값으로 사용할 수 있다. 함수는 이를 모두 만족하는 일급객체! ⇒ 함수형 프로그래밍을 가능하게 함 함수형 프로그래밍 : 순수 + 보조 함수를 통해 Side effect을 최소화하여, 불변성을 지향 함수 또한 객체, 일반 객체와의 차이점은? 함수는 호출 가능, 객체는 호출불가능 함수 고유의 프로퍼티가 존재! 💡 18.2 함수 객체의 프로퍼티 함수의 모든 프로퍼티의 프로퍼티 어트리뷰트를 봅시다! function square(number) { return number * number; } console..

💡 17.1 Object 생성자 함수 생성자 함수(constructor) new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수 빈 객체 생성하여 반환 ⇒ 프로퍼티/메서드 추가 new Object() new String() new Number() new Date() (빌트인 생성자 함수 제공) const person = new Object(); person.name = 'Lee'; person.sayHello = function () { console.log('Hi! My name is ' + this.name); }; console.log(person); // {name: "Lee", sayHello: ƒ} person.sayHello(); // Hi! My name is Lee new Obje..

💡 16.1 내부 슬롯과 내부 메서드 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드다. 내부 슬롯과 내부 메서드는 ECMAScript 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 실제로 동작하지만 개발자가 직접 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 아니다. 단, 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공하기는 한다. ECMAScript 사양에 등장하는 이중 대괄호 ([[…]])로 감싼 이름들이 내부 슬롯과 내부 메서드다. const o = {}; // 내부 슬롯은 자바스크립트 엔진의 내부 로직이므로 직접 접근할 수 없다. o.[[Prototype]] // ..

해당 내용은 [모던 자바스크립트 Deep Dive] 도서의 내용을 정리한 글입니다. 💡 15.1 var 키워드로 선언한 변수의 문제점 ES5까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이었다. var 키워드로 선언된 변수는 아래 3가지 특징을 가진다. 15.1.1 변수 중복 선언 허용 : var 키워드로 선언한 변수는 중복 선언이 가능하다. var x = 1; var y = 1; var x = 100; // 초기화문이 있는 변수 선언문은 JS 엔진에 의해 var 키워드가 없는 것처럼 동작 var y; // 초기화문이 없으므로 무시 만약, 동일한 이름의 변수가 이미 선언되어 있는 것을 모르고 중복 선언하게 된다면 의도치 않게 먼저 선언된 변수의 값이 변경되는 부작용이 발생한다. 1..