자바스크립트

💡 브라우저의 렌더링 과정용어 정리파싱(구문 분석)프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 실행하기 위해 텍스트 문서의 문자열을 토근으로 분해(어휘 분석)하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 일련의 과정을 말한다.일반적으로 파싱이 완료된 이후에는 파스 트리를 기반으로 중간 언어인 바이트 코드를 생성하고 실행한다.렌더링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 => 전역객체  ..

💡 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..

💡 14.1 변수의 생명 주기 🎈 14.1.1 지역 변수의 생명 주기 변수는 자신이 선언된 위치에서 생성되고 소멸한다. 전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같다. 하지만 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸한다. 즉, 지역변수의 생명 주기는 함수의 생명 주기와 일치한다. 지역변수가 함수보다 오래 생존하는 경우도 있다? ✅ 함수가 생성한 스코프는 렉시컬 환경이라 부르는 물리적인 실체가 있다. 따라서 변수는 자신이 등록된 스코프가 소멸될 때까지 유효하다. 누군가 참조하고 있으면 스코프는 소멸되지 않기에 변수도 소멸되지 않는다. ✅ 호이스팅은 변수 선언이 스코프의 선두로 끌어올려진 것처럼 동작하는 자바스크립트 고유의 특징을 말한다. 🎈 14.1.2 전역 변수의 생명 주기 ..

💡 13. 스코프 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위. 즉, 스코프는 식별자가 유효한 범위 렉시컬 환경 : 코드가 어디서 실행되며 주변에 어떤 코드가 있는지 실행 컨텍스트 : 렉시컬 환경을 구현한 것 만약 스코프라는 개념이 없다면 같은 이름을 갖는 변수는 충돌을 일으키므로 프로그램 전체에서 하나밖에 사용할 수 없다는 문제점이 발생한다. 쉽게 말하여, 스코프란 컴퓨터의 폴더(디렉터리) 같은 개념 📌 스코프의 종류 전역 스코프 : 코드의 가장 바깥 영역 지역 스코프 : 함수 몸체 내부 📌 스코프 체인 스코프가 함수의 중첩에 의해 계층적으로 구조를 갖는다는 것 실행 컨텍스트의 렉시컬 환경을 단방향으로 연결한 것 중첩 함수의 지역 스코프는 중첩 함수를 포함하는 외부 ..