[TIL] 멘토링과 자바스크립트 웹 개발 기본기 (with 무한 alert 원인)

오늘의 나는 무엇을 잘했을까?

1. 드디어 자바스크립트 웹개발 기본기를 다 들었다😂😂 자꾸 까먹어서 복습하느라 속도가 안났다. 특히 promise.. 하지만 이제는 완벽 이해!!

2. Week3 미션의 무한 alert 발생이 윈도우에서만 발생한다는 것을 알았다! 맥북에선 X.. 원인이 뭔지 모르겠지만 고질적인 문제인듯 하다. 멘토링의 결과, alert를 이런식으로 사용하지 않기..

오늘의 나는 무엇을 배웠을까?

자바스크립트 웹 개발 기본기 백과사전

• 특히 Promise와 anyc/await에 대해 완벽히 익혔다.

프로토타입 체인

💡 자바스크립트는 프로토타입 기반 언어입니다.

프로토타입이란?

즉, 자바스크립트는 프로토타입을 기반으로 상속을 구현합니다. 이는 클래스 기반 객체지향 프로그래밍 언어보다 더 효율적이며 강력한 객체지향 프로그래밍을 가능하게 합니다.

프로토타입에 모든 인스턴스가 공통적으로 사용하는 프로퍼티나 메서드를 구현해 두면 모든 인스턴스는 상속을 통해 부모 객체인 프로토타입의 자산을 공유하여 사용할 수 있습니다.

overriding 가능합니다.

• 배열 arr과 Array, 프로토타입의 관계 모식도
  

프로토타입 체인

자바스크립트가 특정 프로퍼티에 접근할 때 해당 객체에 프로퍼티가 없으면 [[Prototype]] 내부 슬롯의 참조를 따라 상위 프로토타입의 프로퍼티를 순차적으로 검색하는 현상입니다.

즉 인스턴스 객체의 key에 접근할 때, 해당 객체에게 key가 없다면 그 다음 상위 프로토타입(원형) 속성에서 key가 있는지 확인하고, 없다면 그것을 찾기위해 더 상위 프로토타입(부모)에서 찾습니다.

💡 Array의 원형은 Object 입니다.

• hasOwnProperty 메소드를 사용해서 어디서 온 건지 알 수 있다! 객체가 특정 프로퍼티를 가지고 있는지를 나타내는 불리언 값을 반환 객체가 특정 프로퍼티를 자기만의 직접적인 프로퍼티로서 소유하고 있는지를 판단하는데 사용된다. in 연산과는 다르게, 이 메소드는 객체의 프로토타입 체인을 확인하지는 않습니다.
  • overriding을 하면 자신만의 프로퍼티가 되기때문에 true

그렇다면 프로토타입 체인의 종착역은? null

상속 관점에서 자바스크립트의 유일한 생성자는 객체뿐입니다. 각각의 객체는 [[Prototype]]이라는 은닉(private) 속성을 가지는데 자신의 프로토타입이 되는 다른 객체를 가리킵니다. 그 객체의 프로토타입 또한 프로토타입을 가지고 있고 이것이 반복되다가, 결국 null을 프로토타입으로 가지는 오브젝트에서 끝납니다.

• null은 더 이상의 프로토타입이 없다고 정의되며, 프로토타입 체인의 종점 역할을 하는 것입니다.

생각해볼 것

Array.prototype.constructor === Array; // true
Array.prototype === [1,2,3].__proto__; // true
Array.prototype.name === [1,2,3].name; // true

출처s

모던 자바스크립트 Deep Dive 책

https://hanamon.kr/javascript-프로토타입과-프로토타입체인/

꼭 정독할 references

https://medium.com/@bluesh55/javascript-prototype-이해하기-f8e67c286b67

https://medium.com/@njel7799/prototype-chain-프로토타입-체인-81911be02b44

오늘의 나는 어떤 어려움이 있었을까?

1. Promise에 대한 예제

   fetch("<https://jsonplaceholder.typicode.commmmm/users>")
       .then((response) => response.text()) //①
       .then((result) => { 
           console.log(result);
           throw new Error('test'); // ②
       })
       .catch((error) => {console.log(error);});
   	//결과 - TypeError: Failed to fetch

   Q. fetch안의 url은 유효하지 않은 url이다. 이 코드의 동작 순서를 ①과 ②의 callback의 promise, then함수의 promise가 가지는 상태와 작업 실패 정보 등의 관점에서 설명하라

   이 코드를 보면서 왜 catch가 반환하는 promise가 fulfilled 상태에 undefined 정보를 가지는지 이해가 되지 않아서 팀원들과 이야기 했다.

   유효하지 않은 url로 request를 보냈을 때 fetch가 return 한 promise는 rejected 상태와 error라는 작업 실패 정보를 가진다.
   ①의 callback은 실행되지 않고 then이 return한 promise는 fetch가 return 한 promise 와 똑같은 상태와 작업정보를 가진다. 즉 ①의 then의 promise는 rejected 상태와 error라는 작업 실패 정보를 가진다.
   ②의 callback은 실행되지 않고 ②의 then의 promise는 직전 promise와 동일하게 rejected 상태와 error라는 작업 실패 정보를 가진다.
   따라서 catch문은 rejected 상태와 error라는 작업 실패 정보를 출력하는 것이다. 이때 catch문의 callback은 실행되었기 때문에 fulfilled 상태를 가지고 아무것도 반환하지 않는 callback이기 때문에 undefined를 정보로 가지는 것!

2. 강의가 살짝 밀려서 진도에 대한 압박이 장난아니다. 월요일 결석의 휴유증 ㅠㅠ (feat. 이사준비) 부지런히 수강해서 추가 공부를 할 예정이다! 이번 주말은 반납~😒

내일의 나는 무엇을 해야할까?

• 모던 자바스크립트 완강
• 데일리 미션 정리
• 알고리즘 1문제
• 객체 지향 자바스크립트 찍먹