미주알고주알

자바스크립트를 사용하면서 클래스를 사용할 일이 그렇게 많이 없었는데, stack, queue, array 에서 공통적인 개념을 모아 collection 이라 부르고, 이를 필요에 맞게 상속함으로써 클래스를 완성하는 연습을 해보았다. 1. Collection 이터레이터 객체에 내장되어 있는 메소드 및 프로퍼티를 만들어보았다. class Collection { #arr; constructor(...args) { this.#arr = Array.isArray(args[0]) ? args[0] : [...args]; } push(val) { this.#arr.push(val); } pop() { return this.#arr.pop(); } shift() { return this.#arr.shift(); } c..

객체는 primitive type 변수가 아닌 reference type 으로서 변수에 할당되는데, 값 자체보단 주소값을 참조하기 때문에 단순하게 변수를 옮겨 담는 것으론 새로운 객체로 메모리에 올라가진 않는다. 계속 동일한 주소의 데이터를 바라보고 있을 뿐, 이를 해결하기 위한 방법이 여러 개 있지만, 이번에는 재귀를 활용해 객체 안에 객체가 있다면 새로운 객체에 옮겨 담는 과정을 반복하는 함수를 만들어 볼 것이다. const copyArrayOrObject = arrobj => { const copyObj = Array.isArray(arrobj) ? [] : {}; for (let k in arrobj) { const tmpObj = arrobj[k]; if (typeof tmpObj === 'ob..

Javascript의 splice 메소드는 독특하게도 배열의 기존 요소를 "삭제", "교체", 그리고 새 요소를 "추가"하여 기존 배열의 내용을 변경하는 기능을 갖고 있다. 참 다재다능한 친구구만. 매개 변수에 대한 설명은 mdn 문서를 참고!!! https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice Array.prototype.splice() - JavaScript | MDN splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다. developer.mozilla.org 근데, 이런 splice 는 기존의 배열을 변경한다는 점에서 비순수 함..

배열의 메소드를 사용하는 일이 많은데, 다음의 네 메소드는 순수함수라기 보다.. 배열의 값 자체를 바꿔버리는 함수들이기 때문에 함수 실행의 시기 및 횟수에 따라 변경된 배열을 참조하게 된다. 이런 점에서 빈번하게 사용되는 push, pop, shift, unshift 메소드를 순수 함수로 바꿔 만들어 보기로 했다. 들어온 인자에 대해 결과를 리턴할 뿐이기 원래의 배열 값을 변경시키지 않는다. 구현에 사용한 배열의 filter 함수 및 새로운 객체 변화시키는 것은 기존 객체를 활용할 뿐이지, 변경시키지는 않기 때문이다. const push = (arr, ...args) => [...arr, ...args]; const pop = (arr, cnt = 1) => arr.filter((_, i) => i < ..

배열을 거꾸로 뒤집기 위해서 일반적으로 사용하는 방법은, const reverseArray = arr => { const ret = [] for (let i = arr.length; i > 0; i -= 1) { ret.push(arr[i]) } return ret; }; 또는 const reverseArray2 = arr => arr.map((a, i) => arr[arr.length - 1 - i]); 이렇게 배열 인덱스를 그 길이에서 맞춰 하나씩 줄여가는 방식을 사용해도 좋지만, 배열의 길이에 비례하게 순회해야 하기 때문에(복잡도가 O(n)), 이보다 더 좋은 방법을 생각해야 할 것 같다. const reverseArray3 = arr => { const maxIdx = arr.length - 1;..

올해를 시작할 때, 읽기 시작했던 다음 5책을 앞으로 리뷰해보고자 한다. 1. 자바스크립트로 하는 자료 구조와 알고리즘 - 개발이 전공이 아니다보니 알고리즘은 재쳐두고 작은 기능에만 몰두하는 날이 많았다. 더 깊이 있는 SW가 되기 위해서 읽기 시작했는데, 그때 공부하면서 배운 것, 느낀 것을 기록으로 옮겨볼 것이다. 2. 이펙티브 타입스크립트 - 간간히 타입 추론하는 방법을 배웠지만, 정통(?)으로 그 원리를 깨우치진 못했던 것 같다. 타입스크립트가 지향하는 바가 무엇이고, 어떻게 타입을 규정할 수 있는지 상세하게 기술되어 있는 책이다. 이 책은 모두가 추천했던 좋은 책이다! 역시 Oreilly 는 실패하지 않아.. 3. 코어 자바스크립트 - 자바스크립트를 공부하면서 장벽이라고 느껴질만한 개념 크게 5..

사용자가 검색을 하면, 검색 결과 배열이 `map`으로 출력되는 동시에, 검색 `input`의 값이 포함된 문자열은 파란색으로 표시가 되는 걸 볼 수 있다. 우선 검색 값에 관해선, `input`에 따라 결과 배열을 filter 하는 것으로 `indexOf` 메소드를 활용하면 간편하다. `filter`와 `indexOf`의 조화랄까? const onSearch = useCallback( debounce((e: ChangeEvent) => { setSearches(() => _searches.filter((ret: any) => ret.indexOf(e.target.value) > -1) ) }, 300), [_searches] ) 참고로 여기서 `input`값이 `onChange`될 때마다 실행될 함수인..

JavaScript의 `reduce` 함수는 배열의 모든 요소를 하나의 값으로 줄이는(reduce) 함수다. `reduce` 함수는 콜백 함수를 사용해 배열 요소를 하나의 값으로 줄여 반환합니다. mdn에서 다음과 같이 reduce 함수의 구문을 보여준다. array.reduce(callback[, initialValue]); 배열 요소 처리 함수 `callback`, 초기값(선택) `intialValue` 그리고 이 callback은 인자에 순서대로 `acc(누적값)`, `cur(현재 요소)`, `idx(인덱스)`를 갖는다. 요런 특징을 가진 `reduce` 함수를 배열의 prototype 메소드가 아닌 일반 함수로 만들어보자. const reduce = (arr, f, initialValue) => ..