모던JS딥따이브 독후감(1) - 19장 프로토타입까지

혹시나하고 foo, bar 가 뭔지 찾아보는 사람들을 위해 찾지말고 철수, 영희, 홍길동 같은 식별자나, 함수명 같은거라 생각할 것.

1장
: 문제해결 능력, 컴퓨팅사고에 대한 중점에 대해 이야기 하는 장이다. 언어란 뭔지, 재미를 붙여주기 위해 작가의 노력이 엿보인다. 세세한 개발 언어의 문법에 대해 설명해주어서 좋다.

2장
: 자바스크립트에 대한 역사를 익힌 좋은 시간이었다. 아. 정적언어(컴파일러언어), 동적언어(인터프리터언어) 둘 중 하나씩은 배워둬야하는데... 하고.. 정적언어 JAVA 얼른 해야지 생각 한 시간.

3장
: VSCODE를 통해 개발환경을 세팅하는 과정을 보여준다. 오 매우 좋은 자료였다. Node.js에 대해서 상세하게 이야기를 해주어서, 클라이언트 사이드 웹브라우저 API 와 HOST APi 같은 차이를 확인할 수 있고...점유율도 보여주고 실습해보면 좋다. 실습해보자. 여기는

4장
: 일반적인 변수에 대한 설명인데, 메모리 주소부 영역 및 사이즈를 할당하는 부분, 그걸 왜 하는지 이유까지 상세하다. 선언과 실행시점, 호이스팅에 대해 말한다. 할당은 기본

5장
: 선언이 아니라 표현하는 부분에 대해... 평가결과=값, 실행 스택이 다다른 경우에 대한 내용들. 리터럴이란 뭔지. 

6장
: 원시타입 6개와 심벌, 그리고 객체타입(객체, 함수, 배열) 들에 대한 내용이군. 문자(배)열이 변경 불가능하단것과 해당언어는 동적타이핑이라는걸 이야기 하는 시간.

49장
: 바벨과 웹팩은 꼭 실습 해봐야한다. 스터디 때문에 실습을 목적으로 먼저 49장을 미리 갔다왔다.
특히 책 설명이 잘 되어있어 폴리필과정에 대해 차근차근 잘 따라할 수 있었다. 다른 검색이나 이런거 필요없고, 그냥 VSCODE랑 하나하나 타이핑 해보면 된다. 버전도 현재와 호환 됨. 문제없음.

7장 : +_*/%== 수학시간, typeof 를 쓸 때 null을 체크하면 object를 넘겨준다는 것 같은 주의사항을 잘 숙지하고.

8장 : 블록,조건,반복 등등 일반적인 개발 문법. 레이블까지 써서 break 정말 자세하게 써져있다.

9장 : 장 이름이 특이하지... 타입변환과 단축 평가라니....
타입캐스팅(명시적)과 암묵적 변환을 다루고..
논리연산자를 통해 짧게 평가할 수 있는 부분을 다룸. (확실히 짧아지긴한데, 가독성은 언제나 잘 정리해야 함)

TL;DR 을 쓸껀데, 길어서 안 읽었다 보다, ... 길어서 안적었다로 이해해주시길...바라며.

10장
: 객체란, 객체란!!!!!! 오브젝트란!!! (함수, 배열, 정규표현식, 등등등등, 6개 + 심벌 을 제외한 모든 것), 프로퍼티를 조작할 수 있는 함수 친구를 메서드라 이름짓는것까지.. 와 이거 진짜 설명하는 책 몇 없는데...(자바의 정석에서 본 것 같은 느낌이 든다.) 아무튼 k, v 프로퍼티 집합체. [ 예제 10-15 ] 하단의 퀴즈 중요. TL;DR - 라고 썼지만 진짜 중요. (window.name) 

11장 : 음...원시값과 객체 비교한단다. 이뮤터블... 엉 원시 이뮤터블.... 뮤터블(뮤터블이란... 뭘까.... 뮤턴트, 뮤우뮤우.. 변경 가능한... 그래. 객체)
변수와 값 (4장, 5장 참고.) *문자열이 유사배열 객체 키워드. 콜바이벨류, 파이썬이 특이한(패스바이쉐어링.. 오오 몰랐어)
근데 콜바이벨류가 JS꺼 아니래.. 그럼 설명대로 콜바이어드레스? TL;DR V8 다이나믹 룩업대신 히든클래스 
-> engineering.linecorp.com/ko/blog/v8-hidden-class/

V8의 히든 클래스 이야기 - LINE ENGINEERING

복사비 절약 이야기.  꼭 다시 한번 볼 것. 진짜 V8... 
meetup.toast.com/posts/78

자바스크립트 엔진의 최적화 기법 (2) - Hidden class, Inline Caching : NHN Cloud Meetup

int+int 인지 알면 좋고, 아님 slow case.. 그래 이래서 성능 이야기가... hotspot (대용량 스트리밍 반복처리 == 자바) 언어 특성이니... 아...
그래서 Adaptive JIT Compilation 등장이구나 꼬리재귀 처리라던가 저기서 변환하는거일지도. 요즘 웹의 대응하기 위해 히든클래스도 이런 문제 해결을 위해 나왔구나... 그래서 히든클래스 -> 인라인캐싱 ...음음... 근데 인라인캐싱은 읽어봐도 어셈블리 부분이 나에겐 당장 안 와닿네 넘어가야징..

아무튼 11장도 중요하다. 할당 시 메모리 참조하는 콜바이 레퍼런스에 대한 설명도 하고 있다. 근데 JS는 역시 조금 다르지? 한단계 더 값의 주소가 있으니. (값에 의한 전달 == 콜바이벨류 , 참조에 의한 전달 == 콜바이 레퍼런스) 재 요약은, ←객체님이 콜바레인데, 실제로 다른 언어랑은 다름.

12장 
: 함수~ 블랙박스. 슈뢰딩거 냥이 박스. 왜 함수 배워야 하는지 알려주네. 5.6절 표현식인 문과 표현식이 아닌 문. 암묵적 식별자 법칙. 나도 보통은 기명식은 안쓰고. 대부분 익명함수 리터럴 이름 색략해서 식별자에 연결. 표현식의 호이스팅은 변수선언이 선언되어 undefiend로 초기화 후 실행에서 평가 되는구나. 다시 읽으니 알겠네.. 어찌됐건 호이스팅은 발생한다. 콜바레 짭이긴 해도.
함수 선언의 차이가 있는데, TL;DR (선.표아.문 표=표문 쉽게 외우기위한 꼼수, 식;이면 식캬; 값을; 뱉어야지; -ㅁ-;;;;;... undefined 니까 너희는 문이다. 식;시익;) 이론으로 구분하니 와닿네. 음... 그래서 표현을 빌리면 표현식이 변수 호이스팅이구나. 와 이걸 한글로 정리가 되는거네 내가 어리석었다. 12-30은 러스트랑 다르네. 타입스크립트 이야기를 했다. 좋지 타입스크립트. 178쪽 하단내용은 12-41을 말하는 내용임. 팩토리얼 구현시 자신이 쓴 함수가 식별자라고 소개하는 부분이 재밌네. 별게 다 재밌네. 부수효과 없는걸 순수함수라고 하는구나 오.. 이런것도 이름이 있었어... 비순수함수 외부상태 의존 및 변경을 하는... 오오...

13-15장 여긴, 같이 봐야하는 친구라서 묶었다.
:뒤에 22~24장 볼 때 필요한 친구들이다. 스코프 체인, 전역변수(var) 문제, 그래서 그 해법인 let, const 나온 걸 다룬다. 식별자라는 네이밍 이야기도 감명깊군. JS특징 함수레벨스코프도 있고, 렉시컬(정적) 스코프 설명도 있어 좋네...(어디서 정의했는지에 따라 상위 스콥이 결정되는 호출위치는 관계 없는 JS의 GOD특징. 동적언어에서 빌드 된 정적언어마냥 환경을 제공하는... 스코프 내부에서 식별자를 컨트롤 하는 스토어가 되는... ...는 틀릴 수 있으니 지적 환영) 모듈 클로저, 중복선언 허용 등 각종 고질적인 문제점을 다루고 있다.
음... 이거랑 이 위에 12장 모르면 뒤에가서 큰일남.

16장
:프로퍼티 어트리뷰트 - 이름 겁나 거창함. 둘다 소유물, 속성 이런 뜻이라 (가지고있는..) 그런가 프로토타입 내부슬롯에 대해 알하야 한다고 명언들 던짐. 아무튼 "프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트라는걸 기본값으로 정의한" TL;DR
...값, 내부 상태에는 쓸 수 있는, 줄줄히 나열 가능한... 설정 가능한... 뭔가 만들면 이 친구들에 대한 정보가 주렁주렁 달려있으니, 이걸 보려면 뭐가 필요한데 그건 책 사서 보자. get set 접근자도 친구도 있네 여기도 줄줄이랑 설정있고. 커스텀 플퍼티's 추가, 제한 정보도 있군.

console.log(person.getOwnPropertyDescriptor(Object.prototype, '__proto__'));

안전한 코딩을 꿈꾸는가? 그 길은 이장에 일단 있을지도

17-18장 여기도... 같이 봐야하는 친구라서 묶었다.
: 생성자 -ㅅ-)..... 즉, 생성하는놈이지... 아주 다양한걸 만들 수 있도록 미리 만들어두었다. 대부분의 빌트인 생성자 함수 객체나, 날짜, 정규식 등등... 왜 이걸 쓰느냐, 객체 인스턴스 (TL;DR 이하생략 책사서보자.) 음... 너무 좋은 내용이라. 설명 진짜 잘해뒀네... 코뿔소 책이 수면제면 이건 다시보니 선녀네.
아니 생성자는 디스 암묵적으로 바인딩해주면서 클래스는 왜 엄격모드라며 바인딩 안해주냐... 리액트하면서 클래스 보다가 할 때 식겁했잖아...
나중에 뒷장 클래스가면 이유 써 있겠지? 함수이기위한 환경, 일반적인파라메터, 호출, 생성자 등등.... 음... 거의 뭐 사골 곰탕 급으로 우려내주시네. 애로우펑션의 특수성 등등. 상당한 고부가가치의 알짜배기 생성자 사용법들을 알려주고있고, 이친구가 생성자로 어야하는데 함수호출로 new 연산자없이 호출 된 걸 막아서 확인해서 해주는 친구도 갈쳐주시고. (스코프세이프생성자패턴 IE 대응도 만들어주시고...) 일급객체에 대해서도 설명 해 주시고... 감격이었다. 역시 짱짱 1급 객체야. arguments(es3) -> rest parameter(es6)

19장 
: 대망의 프로토타입장. - JS는 객체(Object)기반(Oriented) 프로그래밍(Programming : OOP) 언어라 JS를 이루고 있는 거의 "모든 것"이 객체다. 라는 명언으로 시작한다. 객체의 릴레이션쉽이 역시 포인트 일 것 같다. 전체적인 설명도 차분하다. 이번장이 젤 중요하기 때문일지도 모르겠다. OOP부터 설명하는걸로봐서 그런 기분이 들었다. 🙏상속(인허뤼턴스)를 위하여🙏 __proto__ 가 ㅇㅇㅇㅇ프로퍼티 라는 것, ㅇㅇㅇㅇㅇ 내부 ㅇㅇ에 접근할 수 있는것 등 도 좋은 내용.

순환참조 만들면 안되니까 단방향 링크드 리스트까진 좋았는데, obj 객체가 종점이라서 Object.__proto__ 상속을 받을 수 없다는 표현이 잘 안와닿으며, 뭘 써야 안전한지. 19.11절까지 모르니 음... 이걸로 대체하자.

안전하지 않은 이유 (1)

 

안전하지 않은 이유 (2)

일단 위 아래는 4번 라인의 주석 차이.

__porto__ 그리고 prototype 서로... 떼 놓을 수 없는 관계....최근에 생긴 삼각관계 setPrototypeOf(타겟Obj, 가져올대상Prototype) <- 이거 설명 빼먹으신듯ㅋ...  274page 좀 중요하네. 번호 잘못 쓴 줄 알았는데 의도가 보였다.
Ordinary Object ... 아주 평범하고 일상적인 보통의 객체를 생성해서 프로토 타입을 연결한다라... 해당장은 정말 앞뒤로 왔다갔다하면서 봐야하네, 뒤까지 안보면 뭔가 이상하다 뭔가 빠졌는데, 하는 경우 다음장을 넘기면 있다.

아참, 도저히 이해가 안되면 19.6절부터 세네번 왔다갔다해서 넘기며 보고, 코드 따라서 타이핑 해 보고 난 후, 19장 처음부터 보는것도 좋다.

const Animal = (function() {
    function Animal(name) {
        this.name = name
    }
    Animal.prototype.sayHello = function () {
        console.log(`야옹이 ${this.name}`)
    }
    return Animal
})();
const neko = new Animal('Nabi')
neko.sayHello()
neko.sayHello = function (){
    console.log(`멍멍?한다? ${this.name}`)
}
neko.sayHello()

섀도잉.. 지난 프로젝트 lint 버릇들어서 ; 자꾸 없네

냥냥

 

아 이래서 클래스 나왔구나. 그렇군... 옛날 사람들 대단해.. 진짜 요즘 한 3-4년 대격변이었네. 우오ㅏ 예제 19-51 직접상속ㅋㅋㅋㅋㅋ직접구현ㅋㅋㅋㅋㅋㅋ 아 ㅋㅋㅋ 1955 랑 비교해 보면 그냥 기절ㅠㅠ

// let obj = Object.create(null)
// let obj = {}
obj.a = 1
console.log(Object.getPrototypeOf(obj) === null)
console.log(obj.hasOwnProperty('a'))
//console.log(Object.prototype.hasOwnProperty('a'))

 

아무튼 스태틱하게 객체가 가지는 것도 만들 수 있다는걸 보여주고... 간단하겐 그 객체의 프로토타입 체인에 속하지 않은 친구들이라 연결해서 상속받아 호출할 수 없다는것. 이뮤터블만 ㅇㅇ(책사서 읽자)가능하다는것 등등. 좋은 장이였다.