Jerry

이 글은 인프런, Javascript 핵심 개념 알아보기 - JS Flow, 정재남 강의를 수강하면서 정리한 내용입니다. 오늘 프로토타입에 대해서 알아보자! 오늘도 프로토타입을 정복하러 가보자! 💪😎💪😎💪😎💪😎💪😎💪😎💪😎 0. prototype, constuctor, __propto__ 이번 프로토타입 정리 글에서 제목에 보이는 키워드가 자주 등장하니 인사 정도 해봐도 좋을 것 같습니다. 먼저! 아래 이미지가 무엇이냐면... 바로 이것입니다! 우리가 평소에 사용하는 생성자 함수를 가지고 설명을 시작해보겠습니다. 생성자 함수를 new 연산자를 통해서 인스턴스를 만들었을 때, 그 인스턴스에는 constructor의 prototype이라고 하는 프로퍼티의 내용이 __proto__ 프로퍼티로 참조를 전달하게 됩..

참고로, 이 글은 인프런, Javascript 핵심 개념 알아보기 - JS Flow, 정재남 강의를 보고서 정리한 내용입니다. 오늘 클로저에 대해서 알아보자! 오늘도 클로저를 정복하러 가보자! 💪😎💪😎💪😎💪😎💪😎💪😎💪😎 CLOUSURE의 단어 의미: 닫힘 / 폐쇄 / 완결성 단어의 의미만 보고 이게 무엇인지 유츄하기 어렵다! MDN에서는 A closure is the combination of a function and the lexical environment within which that function was declared. 함수 X 그 함수가 선언될 당시 X 두 개가 만났을 때 새로운 현상 이 나타나는 것!? = 실행 콘텍스트 A의 내부에서 함수 B가 콤비가 되어 무언가를 한다!! A clos..

참고로, 이 글은 인프런, Javascript 핵심 개념 알아보기 - JS Flow, 정재남 강의를 보고서 정리한 내용입니다. 오늘 콜백 함수에 대해서 알아보자! 오늘도 콜백 함수를 정복하러 가보자! 💪😎💪😎💪😎💪😎💪😎💪😎💪😎 키워드 의미 살펴보기 Callback function의 단어로 분리해서 해석해보면 아래와 같이 해석할 수 있을 것 같다. call back function: 호출해서 돌려줄 함수 콜백 함수의 뉘앙스 살펴보기 A: 이 함수를 호출해서 그 결과를 나한테 알려줘. B: 걱정마. 내가 알아서 처리하고 알려줄게. 대화를 보게 되면, 함수를 넘기고자 하는 대상에게 제어권을 맡기는 걸 인지할 수 있다. 이와 같은 제어권에는 여러가지가 있다. 0. 실행 시점 setInterval은 콜백 함수를 ..

참고로, 이 글은 인프런, Javascript 핵심 개념 알아보기 - JS Flow, 정재남 강의를 보고서 정리한 내용입니다. 지난 시간에 실행 콘텍스트에 대해 이야기를 하였다. (실행 콘텍스트 글 보기) 실행 콘텍스트에 대한 내용을 보았다면, 아래 이미지가 생소하진 않을 것이다. (만약, 못 보신 분들이라면 실행 콘텍스트 글을 보고 이 글을 보시는걸 권장드립니다 ) this라는 개념이 자바스크립트를 처음 접할 때부터 복잡하고 어려운 개념이었다.. 이번 시간을 통해 this를 뿌셔보도록 하자!!! crushing 'this' !! 지난 시간에 아래 내용 중 ThisBinding에 대해서는 이야기하지 않았는데 이번 시간에 다룰 것이다. ThisBiding은 어디서 한다? 실행 콘텍스트가 활성화될 때 THI..

인프런, Javascript 핵심 개념 알아보기 - JS Flow, 정재남 👆👆👆 몇 년 전(?) 패키지로 결제한 강의를 지금 와서 제대로 써먹는다 ㅎㅎ 이번 내용은 원래 이 강의를 중심으로 해서 정리하려고 했지만 여하튼 다행인 게(?) 오늘 몸이 메롱이라 하루 종일 누워만 있었는데 뭐라도 하고 해서 조금이나마 마음의 평안(?)이... 🤥🤥🤥🤥 오늘 캡쳐가 조금 있는데 나름 성의를 담아(?) 캡처하여 올렸으니 참고해주시고 아무튼 우리 모두 몸건강, 정신건강 챙기십다!! 키워드 의미를 뜯어보자! Execution은 실행이란 뜻이다. Context은 맥락/환경/상황이란 뜻이다. 이 중에서 Context의 영어적 뉘앙스를 살펴보자! 그중 환경이란 뜻의 건축적 의미를 살펴보자! [건축]에서 환경이란 의미는 '특..

이번엔 이벤트 루프(event loop)를 정리해 보려고 한다. 이벤트 루프를 모르면 자바스크립트 알고 있는 것이 아니라고 하는 이야기를 들었는데 그만큼 이벤트 루프가 자바스크립트에서 자치하는 역할이 크다는 것을 의미하는 것 같다. 이 글을 정리하면서 여러 레퍼런스와 유튜브 영상을 참조하였는데 알고 있는 선에서 최대한 이벤트 루프에 대해서 이야기해보겠다. 아마 이벤트 루프에 대한 개념을 한 번만 보고 이해하기는 힘들 가능성이 높다. 하지만, 여러 번 보면 볼수록 익숙해지고 익숙해지면 더 이해하기가 수월해지지 않을까 생각해본다. 필자 역시 그랬다.ㅎ 먼저, MDN에서 말하는 이벤트 루프를 뭐라고 이야기할까? JavaScript has a concurrency model based on an event lo..

어제 async await에 대해 정리해보았다. (관련 포스트) 오늘은 async를 사용할 경우, 예외 처리하는 법은 어떻게 하는지 알아볼 것이다! 준비됐나?? 시작해보자! 자 저번 글에 이야기 했지만 큰 그림을 위해서 + 복습 차원에서 아는 코드를 예시로 먼저 보도록 하겠다. #1의 result값과 #2의 result값은 무엇일까? 조금이라도 생각해보고 휠을 내려보자! #1 async function myAsyncFunction() { return 'done'; } const result = myAsyncFunction(); console.log(result); #2 function myPromiseFun() { return new Promise((resolve, reject) => { resolve(..

오늘은 자바스크립트 기본 개념 중 하나인 원시 값에 대해 알아보자! MDN에서 자바스크립트 원시값에 대한 정의를 찾아보았다. JavaScript에서 원시 값(primitive, 또는 원시 자료형)이란 객체가 아니면서 메서드도 가지지 않는 데이터입니다. 원시 값에는 6종류, string, number, bigint, boolean, undefined, symbol이 존재합니다. 겉보기엔 원시 값처럼 보이는 null도 있지만, 사실 모든 Object, 모든 구조화된 자료형은 프로토타입 체인에 따라 null의 자손입니다. '자바스크립트에서 원시 값은 객체가 아니면서 메서드도 가지 않는 데이터'라고 하는데 무슨 말일까? 아마 객체가 아니라고 하는 것은 모든 원시 값은 불변성을 지니고 있기 때문일 것이다. - 원..