전체 글
-
25 클래스모던 자바스크립트 딥 다이브 독학 2023. 10. 27. 08:10
클래스는 생성자 함수보다 엄격하며 생성자 함수에서 제공하지 않는 기능도 제공한다. 클래스는 new 연산자 없이 호출하면 에러 발생, 생성자 함수는 new 연산자 없이 호출하면 일반 함수로서 호출됨 클래스는 상속을 지원하는 extends, super 키워드 제공 클래스는 호이스팅이 발생하지 않는 것처럼 동작 클래스 내의 모든 코드는 암묵적으로 strict mode 적용됨, 해제 불가능 클래스는 열거되지 않는다. 클래스 정의 //클래스 선언문(파스칼 케이스) class Person {} //익명 클래스 표현식 const Person = class {}; //기명 클래스 표현식 const Person = class MyClass {}; 클래스를 표현식으로 정의할 수 있다 → 일급 객체 무명의 리터럴로 생성 가..
-
24 클로저모던 자바스크립트 딥 다이브 독학 2023. 10. 25. 07:50
const x = 1; function outerFunc() { const x = 10; innerFunc(); } function innerFunc() { console.log(x); // 1 } //innerFunc가 어디서 호출되었는지는 중요하지 않다. //함수를 어디에 정의했는지에 따라 상위 스코프가 결정된다. //렉시컬 스코프(정적 스코프) outerFunc(); const x = 1; function foo() { const x = 10; bar(); } function bar() { console.log(x); } foo(); // 1 bar(); // 1 렉시컬 환경의 외부 렉시컬 환경에 대한 참조에 저장할 참조값(상위 스코프에 대한 참조)은 함수 정의가 평가되는 시점에 함수가 정의된 환경..
-
23 실행 컨텍스트모던 자바스크립트 딥 다이브 독학 2023. 10. 20. 07:47
자바스크립트의 동작 원리를 담고 있는 핵심 개념 소스코드의 타입 전역 코드 - 전역에 존재하는 소스코드 함수 코드 - 함수 내부에 존재하는 소스코드(함수 내부에 중첩된 함수, 클래스 등은 미포함) eval 코드 - 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드 모듈 코드 - 모듈 내부에 존재하는 소스코드(모듈 내부 함수, 클래스 등은 미포함) 소스코드의 평가와 실행 자바스크립트 엔진은 소스코드를 소스코드의 평가와 소스코드의 실행 과정으로 나누어 처리한다. 소스코드 평가 과정: 실행 컨텍스트를 생성, 변수, 함수 등의 선언문만 먼저 실행, 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프에 등록 소스코드 실행: 런타임 시작. 소스코드 실행에 필요한 정보, 변수나 함수..
-
22 this모던 자바스크립트 딥 다이브 독학 2023. 10. 19. 07:45
동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다! 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다! this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. 바인딩이란? 식별자와 값을 연결하는 과정 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. 함수가 호출되는 방식에 따라 this 바인딩이 동적으로 결정된다. // 전역에서 this는 전역 객체 window를 가리킨다. console.log(this); // window function square() { // 일반 함수 내부에서 thi..
-
21 빌트인 객체모던 자바스크립트 딥 다이브 독학 2023. 10. 18. 07:27
자바스크립트 객체의 분류 표준 빌트인 객체 호스트 객체 사용자 정의 객체 표준 빌트인 객체 Object, String, Number, Boolean, Symbol, Date, Math, RegExp, Array, Map/Set, Function, Promise 등 40여 개의 표준 빌트인 객체를 제공한다. Math, Reflect, JSON(정적 메서드만 제공)을 제외한 표준 빌트인 객체는 모두 인스턴스를 생성할 수 있는 생성자 함수 객체다. → 프로토타입 메서드와 정적 메서드(인스턴스 없이 호출 가능한 빌트인 정적 메서드)를 제공 const numObj = new Number(1.5); // Number 생성자 함수에 의한 Number 객체 생성 console.log(numObj.toFixed()); ..
-
20 Strict Mode모던 자바스크립트 딥 다이브 독학 2023. 10. 17. 07:34
function foo() { x = 10; } foo(); console.log(x); // 10 암묵적 전역: 전역 스코프에도 x 변수의 선언이 존재하지 않기 때문에 ReferenceError를 발생시킬 것 같지만 자바스크립트 엔진은 암묵적으로 전역 객체에 x 프로퍼티를 동적으로 생성한다. 이 때 전역 객체의 x 프로퍼티를 마치 전역 변수처럼 사용할 수 있다. → 키워드를 사용하여 변수를 선언한 다음 사용해야 한다. 잠재적인 오류를 발생시키기 어려운 개발 환경을 만들기 위해 ES5부터 strict mode가 추가되었다. 'use strict'; // 전역의 선두 또는 함수 몸체의 선두에 추가한다. 전역의 선두에 적용하는 것은 바람직하지 않다. 함수 단위로 적용하는 것도 바람직하지 않다...
-
19 프로토타입모던 자바스크립트 딥 다이브 독학 2023. 10. 16. 13:03
프로토타입을 부모의 유전자라고 생각하면 이해가 쉽다! 자바스크립트는 클래스 기반 객체지향 프로그래밍 언어보다 더 강력하고 효율적인 객체지향 프로그래밍 능력을 지닌 프로토타입 기반의 객체지향 프로그래밍 언어다. 객체지향 프로그래밍 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임 객체: 속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합적 자료구조 객체지향 프로그래밍: 독립적인 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임 프로퍼티: 상태 데이터 메서드: 동작 상속과 프로토타입 자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거한다. 내용이 동일한 메서드를 상속을 통해 공유하여 사용하게 되므로 재사용이란 관점에서 유용하다. 프로토타입 객체 프로토타입을 상속받은 하..
-
18 함수와 일급 객체모던 자바스크립트 딥 다이브 독학 2023. 10. 15. 10:13
일급 객체의 조건 자바스크립트의 함수(함수를 객체와 동일하게 사용할 수 있다는 의미) 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환값으로 사용할 수 있다. 함수 객체의 프로퍼티 arguments, caller, length, name, prototype 프로퍼티는 모두 함수 객체의 데이터 프로퍼티이다. (일반 객체에는 없는 함수 객체 고유의 프로퍼티) __proto__ 는 접근자 프로퍼티이며 함수 객체 고유의 프로퍼티가 아니라 Object.prototype 객체의 프로퍼티를 상속받은 것이다. (모든 객체가 사용할 수 있다) arguments 객체: 매개변수 개수를 확정할 수 없는 가변..