본문 바로가기

Javascript

(14)
[Wasm] 웹어셈블리(c++) 오버헤드 테스트 Intro. c++가 특성상  자바스크립트보다 빠르나 웹 어셈블리의 경우, 컴파일된 bytecode를 가지고 wasm runTime에 중간 언어로 변환된 후 JIT 컴파일 되는 과정을 거친다. 물론 자바스크립트 또한 JIT 컴파일되고 그 과정에서 자잘한 최적화가 이루어진다. 그럼 어느 상황즈음 되어야 자바스크립트 코드에서 WASM으로 전환했을 때, 성능적 이득을 볼 수 있을까? 리서치를 해도 보통 그냥 "네이티브에 유사한 속도를 가집니다" 정도로만 끝내기에 이번 기회에 한번 테스트해보기로 했다. 따라서, 3가지 비교군에 대하여 Loop + Function call 이 2가지 항목에 대해 비교 분석을 해보았다. 비교군은 다음과 같다. Vanila JSWASM - c++ 17 (noopt)WASM - c++..
[javascript] 불변성(Immutability)을 위한 자료구조적 최적화 Intro. 함수형 프로그래밍을 접하면 아마 '불변성'이란 키워드에 대해서 듣게된다. 말 그대로, 원본 데이터에 대한 변이(Mutation) 과정을 진행하지 않겠다는 의미이다. 대신 변이 과정이 필요하다면, 원본 데이터를 복제 / 수정하여 사용한다. function square(data){ return data.map((d) => d ** 2); // data = [1,2,3] , return -> [1,4,9] } square([1,2,3]) Side Effect 방지 , 참조 투명성을 보장한다 etc.. 다 좋은데 매번 변이 과정이 필요할 때 마다 원본 데이터의 복제가 필요하다니, 메모리 관리 측면에선 정말 최악이란 생각이 든다. 원본 데이터의 크기가 크면 클 수록, 복제를 위한 메모리 & 시간 자원..
[Javascript] JS Engine (자바스크립트 엔진에 대하여) 왜 자바스크립트는 c++보다 느릴까? 자바스크립트와 c++을 비교했을 때, 일단 제 눈에 제일 띄는 부분은 다음과 같습니다. 타입 명시를 안해도 되는 것. int myInteger = 3; var myVariable = 3 타입 명시가 필요없는 이유는 자바스크립트 런타임 시, 알아서 타입을 추론하기 때문입니다. 이걸 동적 타이핑(Dynamic typing)이라 합니다. 이 피쳐는 개발자 입장에선 편할지 몰라도 컴파일러 입장에선 굉장히 부담스럽습니다. 다음 예시를 한번 볼까요? const call = (obj) => obj.x; 잉...? 이게 뭐가 문제지? 싶은데, 컴파일러 입장에서 봅시다. 사용자가 'call'을 호출 시, 컴파일러 입장에선 꽤나 난감합니다. 왜냐면 컴파일러 입장에서 'x'에 대한 정보..
[Javascript + Web] Event loop & Async (이벤트 루프 & 비동기) Intro. 제가 2017년, 처음에 자바스크립트를 접했을 때, 이전에 쓰던 c언어와는 달리, setTimeout을 통해 시간지연도 할 수 있고, http request 보내서 데이터를 가져올 수 도 있었으며, 애니메이션도 만들어 볼 수 있는 등, 이런 다양한 활용성에 매료된것 같습니다. 그렇게 잘 가지고 놀다가, 초심자의 자신감이 뿜뿜 차오를 때 쯤, 자바스크립트가 어떤식으로 동작하는지 묻는 질문에 아무말도 못하는 제 자신을 보고 다시 공부하기 시작했습니다. 그리고 이번 주제는 공부하면서 배운 것들 중 공유하면 상당히 유용할것같아 써봅니다. Javascript Runtime 먼저 자바스크립트는 어떤 구조를 가질까요? 다음과 같습니다. 생각보다 별 거 없죠? heap에서 메모리 할당이 일어나고, exec..
[Javascript] Generator (제너레이터) 개인적으로 공부하던 중 제너레이터로 굉장히 재밌는 일들이 가능한것을 발견하여, 공유해보자 글을 씁니다.(https://www.youtube.com/@jsconf_) Generator? Generator 객체는 generator function 으로부터 반환되며, 반복 가능한 프로토콜과 반복자 프로토콜을 모두 준수합니다. - MDN 1. generator function 말 그대로, generator 객체를 반환하는 함수 입니다. 다음과 같은 방식으로 선언합니다. function* myGeneratorFunc(){ yield value1; yield value2; ... //until the end.. } 2. generator object MDN정의에 맞게, iterable protocol 과 itera..
[Javascript] Symbol What is Symbol? 자바스크립트엔 총 7 가지 원시 타입이 존재합니다. (string, number ,boolean , null, undefined, bigint , symbol) 얼마없는 타입의 하나의 좌를 차지하는 주제에 좀처럼 안보이는 녀석이기도 합니다. (제 생각이지만) 실제로 토이 프로젝트 레벨 정도의 프로젝트면 크게 효용을 못느낄것 같습니다. Symbol is a built-in object whose constructor returns a symbol primitive — also called a Symbol value or just a Symbol — that's guaranteed to be unique.-MDN 쉽게 말해서, 유니크한 값을 보장합니다. Symbol을 선언하는 순..
[Javascript] Prototype (프로토타입) JavaScript는 흔히프로토타입 기반 언어(prototype-based language)라 불립니다.— 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미입니다. 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그 상위 프로토타입 객체도 마찬가지입니다. 이를프로토타입 체인(prototype chain)이라 부르며 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 하는 근간입니다. - MDN Why Prototype? 이전 글들에서 말했다시피, 자바스크립트는 오직 원시타입과 객체 타입밖에 존재 하지 않습니다. 그렇기에, 다른 언어들과 달리 inheritance(상속)을 이..
[Javascript] Closure (클로져) What is Closure? A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function's scope from an inner function - MDN 클로져란 개념이 일급함수로 인해 파생되기 때문에, 자바스크립트를 처음 접하는 개발자들 중 상당수가 이 개념을 낯설어 합니다. 사실 자연스럽게 사용하고 있지만, 인지 못하는걸 수 있습니다. MDN의 정의에 따르면, 클로져가 내부함수에서 외부함수로의 접근을..