미주알고주알

자바스크립트를 사용하면서 클래스를 사용할 일이 그렇게 많이 없었는데, 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;..

사용자가 검색을 하면, 검색 결과 배열이 `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) => ..

시작점과 끝점 그리고 간격에 따라 그 배열을 출력할 수 있는 함수를 만들어보자. 가령, `range(1,5)` 면 `[1,2,3,4,5]`를, `range(1,5,2)`면 `[1,3,5]`, `range(1,5,-1)`면 `[5,4,3,2,1]` 를 출력하는 `range`함수 말이다. 가장 먼저, 범주가 만들어지지 않을 조건에 대해선 빈 배열값을 반환한다. 그 다음 start, end, step이 비어있을 경우에 대해 (조건에 따라) 초기값을 할당한다. 이때 step 값에 따라 배열을 순회하는 방향이 달라짐을 반영한다. (`until`) 이런 논리를 다음과 같은 코드로 옮겨보자. if문을 사용하지 않고 삼항연사자를 써봤는데, 뭔가 더 읽기 어렵게 느껴지는 건 기분 탓일까? const range = (st..