240511 리액트 스터디 : JavaScript 클래스 / 클로저

 

✓ Environment Record ⭐️

- Environment record

- Outer environment record

- Inner environment record

- https://blog.bitsrc.io/understanding-execution-context-and-execution-stack-in-javascript-1c9ea8642dd0

+ 실행 컨텍스트 -> 콜스택 -> 이벤트

 

 

✓ 스코프

- var : 함수 레벨 스코프

- let / const : 블록 레벨 스코프

 

✓ 클로저

- 지역 변수가 함수 종료 이후에도 살아있는 것

 

✓ 함수

- 자바스크립트에서 함수는 객체

- 자기 스코프에서 없는 값은 외부를 참조함

- 함수는 리턴값이 없으면 undefined

function hello() {
	let a = 1;
    function inner() {
    	console.log(++a);
    }
    inner();
}

const outer2 = outer(); // 2

inner environment record : { }

outer environment record : { a: 1, inner: f}

global environment record : { outer:f , outer2 undefined }

실행 컨텍스트

- 스코프 체이닝을 통해 inner -> outer -> global envrionment record 참조

- 여기서 const outer3 = outer() 를 생성하면 2가 계속 출력

- 3, 4로 증가시키면서 출력하고 싶으면 inner(); -> return inner(); 로 코드 변경

- outer2가 undefined가 아닌, inner() 펑션을 가지게 됨

- 그래서 스코프 체이닝을 통해 function outer / 변수 a가 죽어버리는게 아니고, 전역의 범위에서 변수 a를 가지고 있게 되므로 2, 3, 4로 증가되어 출력 

 

✓ Array 프로토타입

- 배열도 객체 중 하나

[1, 2, 3].forEach(() => { ... });

- forEach가 Array의 프로토타입이기 때문에 사용 가능

- Array의 상위 Object hasOwnProperty() 사용 가능

- cf) Object의 constructor에 정의된 keys() 같은 메서드는 Object만 사용 가능

 

✓ 원시값 프로토타입

10.toString();

- 원시값인 10이 어떻게 Number 객체의 프로토타입을 사용할 수 있는지

-> JavaScript 엔진이 숫자 리터럴을 일시적으로 Number 객체로 변환하여 toString()메서드 호출 : 박싱(Boxing)

-> 다시 "10"이라는 결과값을 문자열 원시값으로 반환

 

✓ 클래스 작동 방식

function user(_name, _age) {
	let._logged = true;
    
    return {
    	get name() { return _name },
        set name(v) { _name = v },
        getStatus() { return _logged ? 'login' : 'logout'
    }
}

const person = user('mimi', 20);
perosn.name(); // mimi

- 만약 class의 static 메서드 처럼 사용하고 싶다면 -> function 자체에 Object.getPrototypeOf(인스턴스)

- 자바스크립트에도 ES6개념부터 클래스라는 개념이 있으나, 진짜 클래스가 아니고 프로토타입 개념