일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- frontend roadmap study
- Frontend Roadmap
- 백준 node.js
- TypeScript 문법 소개
- KDT 프로그래머스
- 프로그래머스 K_Digital Training
- 개발자 특강
- 모던 자바스크립트 Deep Dive
- Vue3
- 우테캠 회고록
- 모던 javascript Deep Dive
- useEffect return
- K_Digital Training
- KDT 프로그래머스 데브코스 프론트엔드
- 투포인터알고리즘 js
- 모던 자바스크립트 TIL
- Vue3 Router
- 머쓱이
- react 프로젝트 리팩토링
- 모던 자바스크립트 딥다이브
- 프로그래머스 데브코스 프론트엔드
- react customHook 예시
- 프로그래머스 K_Digital Training 프론트엔드
- 프로그래머스 데브코스 프론트엔드 TIL
- useRef 지역 변수
- 프로그래머스 데브코스
- 백준 js
- 모던 자바스크립트 Deep Dive TIL
- 리팩토링 회고
- 인프런 자바스크립트 알고리즘 문제풀이
- Today
- Total
목록모던 자바스크립트 Deep Dive (39)
프론트엔드 개발자의 기록 공간
✍ 클래스는 프로토타입의 문법적 설탕인가? 자바스크립트는 프로토타입기반 객체지향 언어다. ES5에서는 클래스 없이도 다음과 같이 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수 있다. // ES5 생성자 함수 var Person = (function () { // 생성자 함수 function Person(name) { this.name = name; } // 프로토타입 메서드 Person.prototype.sayHi = function () { console.log('Hi! My name is ' + this.name); }; // 생성자 함수 반환 return Person; }()); // 인스턴스 생성 var me = new Person('Lee'); me.sayHi(); // Hi..
클로저는 자바스크립트 고유의 개념이 아니다. 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어 (하스켈, 리스프, 스칼라 등)에서 사용되는 중요한 특성이다. 따라서 ECMAScript 사양에 등장하지 않는다. MDN에서는 클로저에 대해 다음과 같이 정의하고 있다. 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프(정적 스코프)라 한다. 렉시컬 환경의 "외부 렉시컬 환경에 대한 참조"에 저장할 참조값, 즉 상위 스코프에 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경(위치)에 의해 결정된다. 이것이 바로 렉시컬 스코프다. 함수는 자신의 내부 슬롯 [[E..
✍ 소스코드의 타입 ECMAScript 사양은 소스코드(ECMAScript code)를 4가지 타입으로 구분한다. 4가지 타입의 소스코드는 실행 컨텍스트를 생성한다. 소스코드의 타입 설명 전역 코드 전역에 존재하는 소스코드를 말한다. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않는다. 함수 코드 함수 내부에 존재하는 소스코드를 말한다. 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함되지 않는다. eval 코드 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드를 말한다. 모듈 코드 모듈 내부에 존재하는 소스코드를 말한다. 모듈 내부의 함수, 클래스 등의 내부 코드는 포함되지 않는다. 전역 코드 전역 변수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성해야 한다...
✍ this 키워드 이전에 언급한것 처럼 객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조다. 동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조할 수 있다. this가 가리키는 값, 즉 this바인딩은 함수 호출 방식..
📖 학습 목차 20장_strict mode란? 21장_빌트인 객체 ✅ strict mode란? 일단 strict mode를 알아보기 전에 아래의 코드를 보자. function foo() { x = 10; } foo(); console.log(x); // 10 foo 함수 내에서 선언하지 않은 x변수에 값 10을 할당했다. 이때 자바스크립트 엔진은 x 변수가 어디에 선언되었는지 스코프 체인을 통해 검색하기 시작한다. 하지만 전역 스코프까지 x 변수의 선언이 존재하지 않기 때문에 ReferenceError를 발생시킬 것 같지만 자바스크립트 엔진은 암묵적으로 전역 객체에 x 프로퍼티를 동적 생성한다. 이때 x는 전역 변수처럼 사용할 수 있다. 이러한 현상을 암묵적 전역이라 한다. 암묵적 전역은 변수가 아니다...
자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어이다. 자바스크립트는 객체 기반의 프로그래밍 언어이며 자바스크립트를 이루고 있는 거의 "모든 것"이 객체다. 원시타입을 제외한 나머지 값들(함수, 배열, 정규 표현식 등)은 모두 객체이다. ✍ 객체지향 프로그래밍 객체지향 프로그래밍은 객체의 상태를 나타내는 데이터와 상태 데이터를 조작할 수 있는 동작을 하나의 논리적인 단위로 묶어 생각한다. 따라서 객체는 상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료구조라고 할 수 있다. 이때 객체의 상태 데이터를 프로퍼티, 동작을 메서드라 부른다. const circle = { radius: 5, // 상태 데이터를 나타내는 프로퍼티 // 동작을..