본문 바로가기
728x90

자바스크립트5

Leetcode 135 - Candy (Javascript) 1-pass 방식으로 풀기 https://leetcode.com/problems/candy/description/ 문제 난이도는 hard지만 기본 풀이법은 그다지 어렵지 않은 문제라고 생각햇다... 초기 풀이법(2-pass)1. 캔디 배열 1로 초기화 -> 무조건 1개는 받아야함2. 오른쪽으로 이동하면서 1차순회3. 다시 왼쪽으로 이동하면서 캔디 개수를 업데이트/** * @param {number[]} ratings * @return {number} */var candy = function(ratings) { let candies = Array(ratings.length).fill(1) for(let i = 0; i 0; i--) { if(ratings[i] a+b, 0)}; 근데 loop를 2번을 한다는.. 2025. 4. 22.
스크롤 이벤트 최적화 하기 : 쓰로틀링(Throttling), Intersection Observer 구동방식 스크롤 이벤트 개선해보자!!거의 3년전에 만든 사이트라 문제점이 아주 많다! 현재 문제는 스크롤이 이동할때마다 함수를 호출하고 있어 호출이 수백, 수천번이 일어난다단지 세번 스크롤을 내린것 뿐인데…지금이야 간단한 로직으로 스크롤이벤트를 구성하고 있으니 괜찮았지만조금이라도 계산하는 로직을 넣는 순간 굉장히 버벅거릴 것그럼 어떻게 최적화를 하느냐 대표적인 이벤트 최적화 방식인 쓰로틀링(Throttling)과 디바운싱(Debouncing)현재는 스크롤이벤트를 처리하고 있으므로이벤트가 끝나고 실행되는 디바운싱보다는 일정 간격으로 호출을 제한하는 쓰로틀링이 더 적합하다 쓰로틀링 구현은 매우쉽다!lodash를 사용하지 않는다면 간단한 프로젝트에서는 자바스크립트로 구현하는 것을 추천lodash가 은근 사이즈가 크다 .. 2025. 2. 13.
Javascript - nullish coalescing operator( 널 병합 연산자 ) ?? : null 또는 undefined를 평가 하고 싶을 때 사용 || : falsy 값을 평가하고 싶을 때 사용 const foo = null ?? 'default string'; console.log(foo); // Expected output: "default string" // null값이므로 오른쪽 표현식을 리턴함 const baz = 0 ?? 42; console.log(baz); // Expected output: 0 // 0은 falsy값으로 null 이나 undefined와 다르기때문에 42가 출력되지않음 const height = 0; let div_height = height || 10; console.log(div_height) // output: 10 // 0은 falsy 값이기.. 2023. 1. 22.
Javascript - Truthy & Falsy 자바스크립트는 타입이 굉장히 느슨한 언어이다. 그렇기 때문에 모든 값은 true , false로 형변환이 될 수 있는 값을 확인 할 수 있다 이것은 truty, falsy 값이라고 말한다. 빈 객체나 빈 배열을 종종 falsy값이라고 착각하는 경우가 있다. 빈 문자열은 falsy지만 빈 객체, 빈배열은 truthy 값이므로 주의하자 Truthy 값 true: Boolean 타입의 true {} : 빈객체 [] : 빈 배열 0과 -0을 제외한 숫자 (42, 3.14, -3.14...) 문자열("false") Infinity: 무한값 Date 객체 Truthy 값이 아닌 모든 값은 Falsy 값이다. Falsy 값 false: Boolean 타입의 false null undefined 0, -0, 0n : .. 2023. 1. 20.
javascript - 화살표 함수 nuxt.js 코드를 작성하다가 화살표 함수를 자주 사용하긴 하는데 일반 함수와 차이점을 크게 두지 않고 사용하는 것 같아 정리 해보려고한다. 사실 nuxt 3 composition api 에서는 this를 사용하지 않기 때문에 더욱더 신경을 안쓰고 작업을 하게 되는데 기본 자바스크립트를 항상 잊어버리면 안된다…프레임워크에 빠지지 말 것 화살표 함수 화살표 함수란 기존의 함수 표현방식인 function을 생략하여 화살표로만 표현이 가능한 함수로 보다 간략하게 작성이 가능하다. 하지만 가장 큰 차이점은 this의 유무이다. 일반함수는 함수가 호출될 때 this에 바인딩할 객체가 동적으로 결정된다 화살표함수는 함수를 선언할 때 this에 바인딩 되는 객체가 정적으로 결정된다 ⇒ 즉, 일반함수는 동적으로 th.. 2022. 11. 1.
728x90
반응형