😎 reduce는 그냥 더하기 셔틀이 아니다. https://www.zerocho.com/category/JavaScript/post/5acafb05f24445001b8d796d https://www.zerocho.com/category/JavaScript/post/5acafb05f24445001b8d796d www.zerocho.com 이 글이 아주 감명 깊었다. 대부분의 배열 메서드는 약간의 수고를 들이면 reduce로 동일하게 구현해낼 수 있다. 즉 모든 배열 고차 함수들의 부모는 reduce나 다름없다.. 사실 reduce는 대부분 배열합계 구하기 셔틀로 사용하곤한다. 나 역시도 reduce를 가장 많이 사용하는 곳은 더하기 셔틀이다.. 하지만 reduce는 그 자유도가 높은 만큼 활용도 역시 아..
😎이터러블과 이터레이터 이터러블 프로토콜 이터레이터 프로토콜 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다. 이것도 프로퍼티다 보니 일반 객체도 이터러블처럼 동작시키기 위해 Symbol.iterator 를 직접 프로퍼티키로 사용해서 이터러블을 만들어줄수도있다. 이터러블의 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다고 했다 이터레이터는 다음과 같은 특징을 갖는다. for of문을 사용할 수 있다. next() 메서드를 가지고 있다. next()메서드는 호출하면 이터러블을 순회하면서 value와 done 프로퍼티를 가지고있는 이터레이터 리절트 객체를 반환해준다. 이 규약을 이터레이터 프로토콜이라고 하고 이터..
function hello () { hi = 0 console.log(hi) } hello() // 0 console.log(hi) //0 function hello () { hi = 0 console.log(hi) } console.log(hi) // ReferenceError: hi is not defined hello() 😎먼저 function execute context에서 var,let,const등의 키워드를 사용하지 않고 냅다 값을 할당해주는 경우 값을 할당받은 무언가는.. Glboal스코프를 가집니다. 즉 함수 스코프마저 초월한 무언가가 되어 전역 변수로 동작하게된다는 뜻입니다. 그것을 알고 다시 위 예제를 보겠습니다. 어째서 호출한 다음에 전역에서 console.log()를 찍어보면 정상적..
😎Shallow copy, Deep copy라고도한다. 쉽게 설명하면 얕은 복사는 depth 1까지만 복사를 수행해주는 것 깊은 복사는 depth 2이상도 잘 복사해주는 것입니다. 얕은 복사는 쉽게 수행할 수 있지만. 깊은 복사는 꽤 많은 에러핸들링을 곁들인 재귀코드를 작성해야 정상적으로 수행할 수 있습니다. 물론 그런 귀찮은 점 때문에 lodash , immer 등 깊은 복사를 도와주는 수많은 라이브러리가 존재합니다. 하지만 이번에는 어떤 방식으로 deep copy가 되는지 한번 코드로 작성해보는 시간을 가지겠습니다. 😎얕은 복사하기 아주 간단합니다. 얕은 복사는 매우 자주 사용하게되고.. 우리도 쉽게 접근할 수 있습니다. 객체에는 Object.assign() 배열에는 slice(),map(),filt..
😎 프로토타입은 강력하다. https://xionwcfm.tistory.com/134 요약 정리는 못 참지 않을까요? (5) 프로토타입 ⚡객체지향 프로그래밍에서 객체는 뭐라고 생각하세요? 객체지향 프로그래밍에서 객체는 상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료구조라고 생각합니다. 객체의 상태 xionwcfm.tistory.com 예전에 이미 프로토타입을 한번 정리해두었지만.. 거의 까맣게 기억이 리셋되었기도 하고 제대로 이해하지 못한 상태에서 그렇구나..하면서 옮겨 적은 내용이 대부분이었습니다. 따라서 이전 클로저와 마찬가지로 프로토타입이 무엇인가라는 질문을 받았을 때 당황하지 않는 사람이 되는 방법을 적어보고자 합니다. 프로토타입은 말그대로의 의미를 가지는데 위키백과에서는 원래의 ..
😎V8엔진은 어떻게.. https://evan-moon.github.io/2019/06/28/v8-analysis/ V8 엔진은 어떻게 내 코드를 실행하는 걸까? 이번 포스팅에서는 구글의 V8 엔진이 어떤 방식으로 자바스크립트를 해석하고 실행하는지 살펴 보는지에 대해 포스팅하려고 한다. 은 로 작성되었지만 필자의 메인 언어가 이 아니기도 하고, 워 evan-moon.github.io 똑똑한 분의 포스팅을 읽고 대체 자바스크립트 코드는 어떻게 실행될 수 있는지가 너무 궁금해졌습니다. 물론 대부분의 이유는 저 포스트에서 잘 설명해주시고 있어서 저는 열심히 이해만 하면 되었습니다만.. 역시 이해하는 것도 쉽지가 않네요 😎 간단하게 갑시다 간단하게 1. 자바스크립트 코드는 v8엔진에 의해 추상구문트리(AST)로..
😎 자바스크립트에는 모듈이 있습니다. 그리고 모듈은 마치 아무것도 모르는 나도 개고수가 된 것 같은 기분을 느끼게 해주죠! 리액트의 hooks를 불러올때도 모듈 문법을 사용하고 리액트에서 완성한 컴포넌트를 내보내기해서 상위 컴포넌트에서 사용하기도하고.. 또 애초에 리액트를 import해오기도하고... express() 서버를 사용하기도하고.. 모듈없으면 코드 어케 짜냐? 😎 허접인 나도 로컬환경에선 모듈메이커? 모듈을 만들고 내보내는 방법은 꽤나 다양하다. 하지만 방법이 다양한거지 쓰는게 어렵다곤 하지 않았다. 정말 간단한 문법 하나만으로도 내가 원하는 코드를 export할 수 있고 또 그 코드를 import해올 수 있다. 이번엔 그 방법에 대해서 다뤄보고자 합니다. 😎그전에 모듈은 뭘까요 모던 자바스크..
😎 addEventListner의 사용법 addEventListener(type, listener, options) MDN에 따르면 이벤트리스너는 이런식으로 사용합니다. 이벤트의 타입을 첫인자로 주고 콜백함수를 두번째 인자로 주는거죠! 근데 제가 항상 귀찮았던 부분은 저 type값을 모른다는겁니다. type값은 문자열 형태로 전달해야하고 소문자로 이루어져있습니다. 'click' 요소에 마우스를 클릭했을 경우 'dbclick' 요소에 마우스를 더블 클릭 'mouseover' 요소 위로 마우스를 움직였을 때 'mouseout' 요소 바깥으로 마우스를 움직였을때 'mousedown' 마우스를 누르고있을 때 'mouseup' 눌렀던 마우스 버튼을 뗄 때 'contextmenu' 마우스 오른쪽버튼 눌렀을때 'k..
