JavaScript Complete Grandmaster 2022

JavaScript Grandmaster 2025 for Serious Learners, Complete Guide Beginner to ExpertO’Reilly Online Learning

Chapter 10 : Objects

JS 객체는 클래스 없이도 생성 가능
객체 생성 4가지 방법
- Object literal
  - {} 안에 생성하면 끝
  - 콤마로 name:value 쌍들 구분
- Object constructor
  - 객체 정의 후 new 로 호출
- Object.create()
  - 잘 사용 안하나?
- ES2015 class
  - 프로토타입 상속 어려워서 도입?
  - 2015 ES6 에 클래스 도입됬지만, 사실을 클래스 키워드에 감싸진 프로토타입 사용중 (syntatic sugar)
  - new 로 생성될때마다, 안에 함수가 여러개 생성되기에 (메모리 낭비), 해결위해 prototype 이용하기
Object literal 와 Object constructor 차이는?
- Object constructor 는 한번 정의 후 객체 여러개 생성가능
- Object constructor 은 arg를 넘길 수 있는 반면, Object literal 은 직접 받는 함수 사용해야함. 아래 코드.
객체 모델
- writable
  - re-assign 가능한지
- enumerable
  - for-in loop 로 볼수있는지
- configurable
  - 삭제될수있는지
- [[속성]] 는 Object.getOwnPropertyDescriptor 로 접근가능

Chapter 11 : Advanced Section - Building a Custom Polyfill

Polyfill - 브라우저에서 JS 기능을 지원하지 않을때 기능을 커스텀 추가하는것

Chapter 14 : Functions

함수 종류 2가지
- 결과는 동일
- 언제 생성되는지만 차이남
  - Expresssion 방식이 늦게 생성됨

// Declarations 
funciton sayHi(name){
    return 'Hi ${name}';
}

// Expresssion (anonymous 함수로 알려짐)
let sayHi = funciton (name){ 
    return 'Hi ${name}';
}

IIFE (즉시실행함수) - 함수 한번만 생성하고 싶을때

Arrow Syntax (화살표 함수) - ES6 에 나옴

arg가 1개일때는 괄호 안써도됨

let sayBye = name => {console.log(`${name} bye`)};
sayBye("yoochul");

매겨 변수 없을때는 둘중 하나 사용

let sayBye = _ => {console.log('bye')};
let sayBye = () => {console.log('bye')};
sayBye();

expression 넘길때는 {} 생략 가능
```
let add = (num1, num2) => num1 + num2;
```

this 바인딩 문제 해결

function Person(){
    this.name = "yoochul";
    this.display = setInterval(function show(){
        console.log(this.name); // yoochul 출력 안됨
    }, 1000)
}


function Person(){
    this.name = "yoochul";
    this.display = setInterval(() => {
        console.log(this.name) // yoochul 출력 잘됨
    }, 1000)
}

Chapter 13 : Prototypes

__proto__ 와 protype는 다른 것
- (링크) prototype 함수 객체의 프로퍼티이고, __proto__는 객체의 내부 프로퍼티이며 그 객체의 __proto__ 을 가리키고 있다.
모든 생성된 객체는 __proto__가 있다.
prototype은 함수만이 가지고 있다/

var anyFunction = {} // 
console.log(anyFunction.__proto__);
// 결과: {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}constructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ ...}

anyFunction의 __proto__는 Object.prototype이다. 이 말은 또한, Object는 함수이다.

// num.__proto__ 는 Number이다.
var nums = 10
console.log(nums.__proto__ == Number.prototype); // true

var nums = [1,2,3]
console.log(nums.__proto__ == Array.prototype); // true

var anyFunc = function(){}
console.log(anyFunc.__proto__ == Function.prototype); //

Chapter 15 : JavaScript - THIS, Execution Context and Lexical Environments

실행 컨택스트 종류 (다른것도 있는데, 2개가 중요)
- 전역 실행 컨택스트
  - 함수 안에 들어있지않은 코드가 해당
  - 프로그램에 1개만 존재
- 함수 실행 컨택스트
  - 함수마다 컨택스트 존재
  - 함수 선언을 읽을때는 생성 x, 함수 호출된 순간부터 생성됨
Lexical Environment
- (본문) block, function, script를 실행하기 앞서 생성되는 특별한 객체로, 실행할 스코프 범위 안에 있는 변수와 함수를 프로퍼티로 저장하는 객체다. 즉, 우리가 소스 코드를 실행하면서 참조가 필요한 변수의 값을 이 Lexical Environment 라는 객체에서 식별자 이름을 키로 찾는다고 보면 된다.
- Lexical Scope 랑 차이는?
  - 함수를 어디서 호출하는지가 아니라, 어디에 선언하였는지에 따라 결정되는 것이 렉시컬 스코프.
THIS
- "this" 는 실행 컨택스트에 의해 결정된다.
- 객체에서 사용될때, 가장 가까운 부모 객체로 설정된다.
- new 를 사용해 객체 생성시, 새로 생성된 객체를 가리킨다.
- 화살표 함수는 this를 바인딩하지 않는다.
- call/bind/apply를 통해 this가 무엇을 가리키게 할지 명시할수있다