Programming Language/🟨 Javascript (Core) 검색 결과

해당 글 15건

generator의 yield*로 for...of 대체하기

flatten을 lazy evaluation으로 만들기 위해 아래와 같은 함수를 작성했습니다. depth를 2 이상 가진 배열을 돌리면, 완전히 flatten되지 않습니다. 우선 위 함수 내부에 for...of 문이 중첩되어 들어가는 것이 가독성이 좋지 않게 보이므로 yield *를 활용하여 가볍게 만들겠습니다. // iterable 안의 값도 iterable이면 펼쳐내는 작업. 단, depth가 1인 경우만 됨 const faltten = function* (iter) { for (const val of iter) { if (isIterable(val)) { for (const inner of val) { yield inner; } } else { yield val; } } }; console.log(..
Programming Language/🟨 Javascript (Core) 2021. 6. 14. 23:40

__proto__ vs prototype

__proto__는 (이 글)에 정리해두었다. 그런데 prototype은 또 무엇일까? Remember that __proto__ means an object’s prototype. The prototype property and the new operator are a whole different topic - just javascript, dan abramov 실은, __proto__와 prototype은 다른 것이긴 하지만 그렇다면 완전 멀리 있는 것도 아니다. prototype은 객체를 찍어내는 원형이라고 생각하면 된다. new Number,() new String(), new Array(), new Function()... 등으로 Object를 생성할 수 있는 것은 이것들의 prototype(원..
Programming Language/🟨 Javascript (Core) 2021. 6. 10. 01:25

javascript 모듈 시스템 : CJS, AMD, UMD, ESM

모듈 시스템은 뭐고 왜 필요하게 되었는가? 패키지를 쓰다보면, 다양한 방식의 모듈 빌드 방식이 있습니다. 대표적으로 제가 애용하는 fuze 검색 라이브러리는 아래와 같이 다양한 방식으로 빌드되었다고 문서에서 알려주고 있습니다. 우선, js를 쓰다보면 require문을 쓰는 것인 commonJS고, import문을 쓰는 것이 ESM이라고 알게됩니다. 그러나 근본적으로 이러한 모듈 시스템이 왜 필요하게 되었는지에 대해서는 묻어두고 사용하다가 이번에 패키지를 개발할 일이 생겨서 공부할 필요성을 느끼게 되었습니다. (1) 브라우저는 모듈을 몰랐었다. (es6 이후는 ESM은 안다) 일단 html/css/js에서 javascript를 node와 같은 서버 사이드에서처럼 모듈화 해서 사용하려고 하면 에러가 발생하는..
Programming Language/🟨 Javascript (Core) 2021. 5. 30. 04:01

iteration : iterable(순회할 수 있는 객체)와 iterator(순환체)

for...of 이건 되고 이건 왜 안됨? iterable, iterator에 대해 직접적으로 공부하면 감이 잘 안 옵니다. 우선, javascript의 여러 for문을 살펴보도록합시다. 고전적 for문과 es6 이상부터 가능해진 for...of 와 for... in은 비슷해보이지만 차이가 존재합니다. 간단하게 정리하자면, 고전적 for문 : length 측정 후 하나씩 looping for...in : 객체를 순회합니다. for...of : iterable을 looping. (한국어판에서는 '순회 가능한 객체'라고 번역해놨는데 오히려 더 헷갈림. 이터러블이라고 부르자) const arr = [1, 2, 3]; // 고전적인 for문. length에 의존하여 index를 올리는 방식 for (let i ..
Programming Language/🟨 Javascript (Core) 2021. 5. 23. 00:53

Reflect, Proxy (1) : Reflective 프로그래밍을 위한 표준 내장 객체들

Reflect? reflecting이란 코드가 구동시(런타임) 자기 자신을 검사, 수정할 수 있는 능력을 말한다. 위키피디아에서 확인해보면, 언어별 reflect 방법을 소개한 것을 확인할 수 있다. Reflect라는 영단어의 본래 의미를 생각해본다면, "자기 자신을 반추하다" 정도로 이해할 수 있을 것 같다. reflection programming is the ability of a process to examine, introspect, and modify its own structure and behavior.[ 출처 : https://en.wikipedia.org/wiki/Reflective_programming vanilla javascript에서도 Reflect는 기본 내장 객체로 존재한다...
Programming Language/🟨 Javascript (Core) 2021. 4. 16. 00:35

TS로 살펴보는 Promise + Promise.all 병렬처리

https://darrengwon.tistory.com/279 Promise 일반에 대한 내용은 위 포스트에서 이미 다뤘습니다. 여기서는 조금 더 자세하게 Promise를 다룰 것이며, TS를 사용할 예정입니다. 일반적으로 Promise를 타이핑할 때는 Promise의 형태로 값을 넘겨주면 됩니다. Dart에서 봤던 Future와 같습니다. 프로미스가 반환하는 결과의 타입을 T에 적어주시면 되겠습니다. import { readFile } from "fs"; const readFilePromise = (filename: string): Promise => new Promise((resolve, reject) => { readFile(filename, (err, buffer) => { if (err) rej..
Programming Language/🟨 Javascript (Core) 2020. 8. 25. 19:48

Symbol 타입의 변수

앞서 원시형 데이터 타입에 Symbol이란 것이 존재한다는 것을 확인을 해보았지만 이것이 무엇인지 알아보지는 않았습니다. 심볼형에 대해서 알아봅시다. 심볼은 유일한 식별자를 만드는데 사용됩니다. 대개 다수의 객체중 특정한 하나를 식별하는 키에 심볼을 사용합니다. 자바스크립트는 객체 프로퍼티 키로 오직 문자형과 심볼형만을 허용합니다. 아래 예시는 숫자형, 불린형도 키로 쓸 수 있는 것처럼 보이지만 사실은 자동 형변환을 통해 전부 String 형으로 변환된 것입니다. const obj1 = { age: 100 }; const obj2 = { 3: 100 }; const obj3 = { true: 100 }; console.log(typeof Object.keys(obj1)[0]); // string cons..
Programming Language/🟨 Javascript (Core) 2020. 7. 15. 16:57

javascript의 가비지 컬렉션

가비지 컬렉션 ko.javascript.info 자바스크립트 엔진은 끊임없이 가비지 컬렉트를 하여 메모리를 여유있게 유지하려고 합니다. 그 기준은 '도달할 수 있는가?' 입니다. let test = { name: "da" }; // {name: "da"} 객체는 연결된 곳이 없다. => 도달 불가 => 가비지 컬렉팅됨 test = {}; 모든 가비지 컬렉션은 특정한 알고리즘에 따라 카비지 컬렉팅을 합니다. v8 자바스크립트 엔진은 'mark-and-sweep’이라 불리는 가비지 컬렉션 기본 알고리즘으로 움직입니다. 가비지 컬렉터는 루트(root) 정보를 수집하고 이를 ‘mark(기억)’ 합니다. 루트가 참조하고 있는 모든 객체를 방문하고 이것들을 ‘mark’ 합니다. mark 된 모든 객체에 방문하고 그..
Programming Language/🟨 Javascript (Core) 2020. 5. 27. 17:43

콜백 함수와 비동기제어

⚡ 콜백함수 콜백 함수는 다른 코드의 인자로 넘겨주는 함수입니다. 콜백 함수를 넘겨받은 코드는 적절한 시점에 콜백 함수를 실행합니다. 굳이 콜백 함수라고 말해서 어렵게 느껴질 수도 있지만 그냥 특정한 시점이나 이벤트에 반응해서 실행하는 함수를 말합니다. 콜백이라고 이름 붙인 이유는 callback 즉, 특정 이벤트나 시점에 자신을 불러달라고 하는 데에서 왔습니다. 그러니까 어렵게 생각하지 맙시다. 콜백 함수는 그냥 함수입니다. setTimeout(() => console.log("test"), 3000)) el.addEventListener("click", () => setCount(count + 1)) 콜백 함수가 중요한 이유는 위와 같이 setTimeout, setInterval과 같이 대놓고 콜백 ..
Programming Language/🟨 Javascript (Core) 2020. 4. 17. 22:02

this(2) : 명시적으로 this를 바인딩하기

앞서 살펴본 this의 규칙을 깨고 this에 다른 대상을 바인딩할 수도 있습니다. call, apply, bind 메서드를 주로 사용하지만, 이러한 메서드를 사용하기보다 (가능하다면) 화살표 함수를 이용하는 것이 더 깔끔합니다. 일단 무엇이 있는지만 알아두도록 합시다. 요새 화살표 함수가 일반 함수를 대체할 수 없다는 것을 통감하고 있습니다. 때에 따라 적절한 방식의 함수를 사용합시다. ㅜㅜ * 함수에 call, apply, bind와 같은 메서드를 정의한 적이 없음에도 사용할 수 있는 이유는 이 메서드들이 prototype에 정의된 메서드들이기 때문입니다. 프로토타입에 대해서는 이후에 다루도록 하겠습니다. call 메서드 call 메서드는 호출하는 함수의 첫 인자를 this로 바인딩합니다. 이후의 인..
Programming Language/🟨 Javascript (Core) 2020. 4. 15. 20:37