JavaScript/theory

[자바스크립트] sort함수는 왜 숫자를 이상하게 정렬할까?

이상한 자바스크립트의 sort 자바스크립트 개발자라면, 당연히 알고있는 이상함이다. 그래서 "자바스크립트 숫자 정렬"과 같은 키워드로 인터넷을 검색해보면, // 오름차순 정렬을 하고 싶으세요? arr.sort((a,b)=>a-b); // 내림차순 정렬을 하고 싶으세요? arr.sort((a,b)=>b-a); 이렇게 딱 답이 나와있다. 우리는 평소처럼 숫자 정렬에서는 a-b는 오름차순, b-a는 내림차순이구나! 하고 써먹고 끝낸다. 이것만 알아도 사실 전혀 문제는 없다. 그러나 한번쯤은 이유도 궁금해해보자. 꽤나 배울 것이 많다. 이번 포스팅에서는, 왜 저렇게 이상한 함수를 넣어줘야 하는지를 함께 알아보도록 하자. Sort의 근원지 MDN를 탐색하자. Array.prototype.sort() - JavaS..

[Array] 일반적인 배열과 자바스크립트의 배열 알아보기

배열(Array) 먼저 배열에 대해 가볍게 알아본다. 배열은 동일한 크기의 메모리 공간을 연속적으로 나열한 구조다. 동일한 크기여야 하므로 하나의 통일된 타입의 요소들이, 연속적으로 인접해있는 형태를 보인다. 위처럼 "데이터가 연속으로 인접한 배열"을 밀집배열(dense array)라고 한다. 밀집배열의 경우, 인덱스를 이용해 한번의 연산으로 접근이 가능하다. 연산 횟수가 1회이므로, O(1)의 시간복잡도를 보인다. 배열의 단점 인덱스(찾으려는 데이터의 위치)를 모르면 선형탐색을 해야한다. - 선형탐색은 O(n) 시간복잡도. 배열 마지막 요소가 아닌 위치에 추가/삭제 시 배열 요소들의 연속적인 이동이 필요하다. - 삽입과 삭제에서 O(1) ~ O(N)의 시간복잡도. tmi) 왜 장점과 단점들을 따지는가?..

엄격모드. "use strict"

엄격모드(strict mode)란? ES5(ES2009)에서 추가된 스펙으로, 암묵적인 느슨한 모드"sloppy mode"를 해제하고, 자바스크립트 문법을 보다 엄격히 적용하는 방법이다. 느슨한 모드에서는 오류를 발생시킬 확률이 높거나, 최적화에 문제를 일으킬 수 있는 작업들을 유발할 수 있으며 이를 엄격모드로 전환함으로써 몇가지 실수에 대해서 명시적인 오류를 발생시키게 된다. 엄격모드 코드 런타임에서는 몇가지 변화가 생기는데, 1. 기존에는 무시되던 몇가지 에러들을 던진다. 2. JavaScript 엔진 최적화를 방해하는 실수들을 바로잡는다. 3. ECMAScript의 다음 버전들에서 정의될 문법을 금지한다. 그래서 핵심은? 평소 자바스크립트는 너무 관대하게 동작하니, 조금 빡빡하게 보면서 잠재적 오류..

이벤트 위임, 버블링, 캡쳐링 (Event Delegation, bubbling, capturing)

이벤트 위임 유사한 노드들을 다뤄야 할 때 노드마다 핸들러를 할당하지 않고, 공통 조상에 이벤트 핸들러를 할당하여 여러 노드들을 한꺼번에 다루는 방법이다. 요약하면, 이벤트를 효율적으로 다루는 방법이다. 이벤트가 전파되는 특징(캡처링과 버블링)을 이용하면 이벤트 위임을 구현할 수 있다. 이벤트 위임을 배우기에 앞서, 먼저 노드마다 직접 핸들러를 할당하는 경우를 살펴보자. 1 2 3 4 5 지금은 나름대로 querySelectorAll + forEach를 통해 그럴싸한 코드를 작성해뒀는데, 여기서 add 버튼을 통해 li태그가 추가되거나, li태그에 delete 버튼을 생성해 삭제버튼을 도입했다고 하자. 새로운 li태그 추가시에 해당 태그에도 이벤트핸들러를 부여해야 하며, 기존 li태그 삭제시에 해당 태그..

[함수형] 커링 Currying을 배워보자.

함수형 시리즈 [함수형] 클로저 Closure에 대해 알아보자. 클로저 클로저란, 내부 함수가 함수가 참조하고 있는 주변 환경에 접근할 수 있는 것을 의미한다. MDN에서는, 클로저는 독립적인 (자유) 변수를 가리키는 함수이다. 클로저 안에 정의된 함수는 만 gobae.tistory.com 이전 클로저 포스팅에 이어 이번에는 커링이다. 커링? 사진 속 연산을 이해할 수 있는가? 이해할 수 있다면 이 포스팅은 스킵하면 된다. 커링(Currying)은 함수형 프로그래밍에서 등장하는 필수 개념이다. 쉽게 말하면, '함수를 반환하는 함수'이다. 커링이 왜 사용될까? 함수의 재활용을 위해서 원하는 함수들을 조합해서 사용할 수 있다. 하나 이상의 인수의 함수를, 하나의 인수를 받는 함수로 축소할 수 있다. 그래서 ..

[자바스크립트] 마이크로 태스크 큐의 비동기 작업 처리와 렌더링 시점을 알아보자.

이전 글 [자바스크립트] 마이크로 태스크 큐 이전 글 [자바스크립트] 프로미스를 이용한 비동기 작업 병렬 처리 이전 글 [자바스크립트] 프로미스 객체 이전 글 [자바스크립트] 비동기로 데이터 가져오기, 콜백 헬 이전 포스팅 [자바스크립 gobae.tistory.com 이전에 비동기 포스팅에서 알아본 마이크로 태스크 큐에 대해 좀 더 탐색하는 포스팅이다. 이전 글을 요약하면 "비동기 작업에도 우선순위가 있다. 비동기 작업은 마이크로 태스크 큐 혹은 매크로 태스크 큐(=일반적으로 말하는 태스크 큐)에 담기는데, 마이크로 태스크 큐에 있는 태스크가 태스크 큐에 있는 태스크보다 우선순위를 가진다. 그래서 이벤트 루프가 마이크로 태스크 큐에 담긴 태스크를 먼저 콜스택에 옮겨서 자바스크립트 엔진이 실행할 수 있도록..