TIL (15) 썸네일형 리스트형 Map은 언제 쓸까 - Object와 비교 [자바스크립트] Leetcode 문제를 풀면서 Map을 처음으로 써봤다. Two Sum, Hash Map | Leetcode [자바스크립트] 알고리즘과 자료구조를 공부하기 시작했다. 기존엔 알고리즘 문제를 풀 때 배운 언어를 적용하고 메소드들을 학습하는 데 치중했다면 앞으로는 알고리즘 기법이나 자료구조 등을 생각하면서 �� fennecfox-dev.tistory.com function twoSum(nums, target) { const container = new Map; for (let i = 0; i < nums.length; i++) { const complement = target - nums[i]; if (container.has(complement)) return [container.get(complement.. Closure의 양면성 ft. 재귀함수 [자바스크립트] 클로저. 함수를 생성할 때 주변 환경과 묶이는 것. 즉 클로저 덕분에 내부 함수가 외부 함수의 스코프에 접근할 수 있게 된다. Closures 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. In JavaScript, clos developer.mozilla.org 위 MDN 글과 아래 블로그 글 등에서 볼 수 있듯이 클로저를 잘 활용하면.. TypeError가 날 때 간단한 debugger 활용 방법 [자바스크립트] debugger 활용법을 한 가지 배워서 기억하려고 간단하게 기록. 원래 console.log()를 이용해서 코드가 잘못된 부분을 주로 찾았는데 피상적으로 예측만 할 수 있어서 대안으로 debugger를 더 많이 사용하려고 노력 중이다. debugger를 새로 배운 뒤에는 주로 함수 시작 부분에 debugger를 넣은 뒤 코드를 돌려보는 방식으로 활용했다. 그런데 코드에 에러가 있을 땐 에러코드로 튀어 버려서 문제를 찾기 어려울 때도 많았다. 가령 함수들로 이뤄진 배열을 다룰 때 array[0]으로 첫 번째 함수에 접근하려 하는데 자꾸 array[0] is not a function이라는 에러가 뜸. array[0]은 분명 함수인 것 같은데.. 이럴 때 array[0]를 건드리기 직전에 if (typeo.. _.flatten() ft. debugger | Lodash [자바스크립트] Lodash의 _.flatten() 써보기. 우선 _.flatten을 만들면서 재사용한 _.each()부터. _.each = function (collection, iterator) { if (Array.isArray(collection)) { for (let i = 0; i < collection.length; i++) { iterator(collection[i], i, collection); } } else if (collection && typeof collection === 'object') { for (const key in collection) { iterator(collection[key], key, collection); } } } _.some()도 사용했다. _.some = functio.. _.every() | Lodash [자바스크립트] _.reduce(collection, iterator, accumulator)를 사용해서 _.every() 써보기. _.every는 collection의 모든 요소가 특정 조건에 부합하는지 확인하는 함수. 일단 _.reduce는 아래처럼 써놨다. _.reduce = function (collection, iterator, accumulator) { if (accumulator !== undefined) { _.each(collection, function(item) { accumulator = iterator(accumulator, item); }); } else if (accumulator === undefined) { accumulator = collection[0]; for (i = 1; i < c.. Array-like Object 처리, Array.prototype.slice.call() Array.from() 등[자바스크립트] arguments와 관련한 내용을 검색하면 종종 눈에 띄는 Array.prototype.slice.call(arguments) 이 기나긴 메소드? 함수?가 어떻게 작동하는지 알아보려 한다. 1. Array-like Object 우선 array와 array-like object. array-like object는 배열과 특성이 비슷해서 length 값이 음수가 아니다. 하지만 constructor가 Array가 아니고 []을 통해 만들어지지도 않았다. 따라서 Array.prototype의 메소드들을 사용할 수 없다. 그래서 arguments나 NodeList를 처리할 때 불편하기도 하다. Array-like Objects in JavaScript | ShiftEleven My name is Adam. I'.. _.reduce _.contains | Lodash [자바스크립트] _.contains 간단 정리. _.contains 안에서 _.reduce를 썼기 때문에 먼저 정리. _.reduce = function(collection, iterator, accumulator) { if (collection && !Array.isArray(collection) && typeof(collection) === "object") { collection = Object.values(collection); } if (accumulator !== undefined) { _.each(collection, function(item) { accumulator = iterator(accumulator, item) }) } else { accumulator = collection[0]; for (le.. _.indexOf() | Lodash [자바스크립트] Lodash의 _.indexOf 간단 정리. _.indexOf = function(array, target) { var result = -1; _.each(array, function(item, index) { if (item === target && result === -1) { result = index; } }); return result; }; 일단 _.each는 _.each = function(collection, iterator) { if (Array.isArray(collection)) { for (let i = 0; i < collection.length; i++) { iterator(collection[i], i, collection); } } else { for (const key in.. addEventListener와 for, 이벤트리스너가 마지막 반복 결과값에만 붙는 문제 [자바스크립트] 카드퀴즈 만드는 중. 퀴즈의 선택지들을 찍어낸 뒤 각 선택지에 이벤트리스너를 붙이려 함. function printChoices(questionIndex) { for (let i = 0; i < data[questionIndex].choices.length; i++) { document.getElementById('choices').innerHTML += `${data[questionIndex].choices[i]}`; document.getElementById(`question${questionIndex}Choice${i}`).addEventListener('click', clickedChoice); } } 그런데 마지막 선택지만 이벤트리스너가 붙는 문제 발생. 검색해보니 똑같은 문제에 부딪혔던 사례 .. 틱택토 칸 나누기(grid, flex, table)와 가상요소(::before, ::after) [CSS] 틱택토 만드는 중. 작업 초반부에 배운 내용들(주로 CSS) 기록. 1. 칸 나누기 일단 틱택토를 할 3x3 칸이 필요함. 여러 방법 가능 1) Grid .board { border: 1px solid; display: grid; grid-gap: 5px; grid-template-columns: repeat(3, 1fr); } .cell { border: 1px solid; display: flex; } 가장 깔끔하게 칸을 나누는 방법인 듯. 2) Flex .board { display: flex; flex-wrap: wrap; justify-content: space-around; } .cell { flex: 0 0 32%; height: 32%; margin-top: 3px; margin-botto.. 이전 1 2 다음
