개발공작소
728x90
[JS] javascript: find함수와 filter함수 어떤 경우에 어떤 걸 사용할까?
FrontEnd/JavaScript 2024. 1. 28. 01:15

결론 우선 결론을 적어둘테니, 샘플코드 안볼 사람은 아래 3개만 기억하자. 1. 배열을 리턴받아야 하는 상황(리턴값이 여러개인 경우)에는 Filter함수를 사용한다. 2. 단일 데이터를 리턴 받아야 하는 상황(리턴값이 1개인 경우)에는 Find함수를 사용한다. 3. 단 대용량 데이터가 아닌 경우에는 Filter, Find 함수간의 성능 차이는 거의 없다. 오히려 Filter가 빠르다. (웹브라우저 엔진이나 성능에 따라 결과값은 바뀔 수 있다.) 4. 개발시 실데이터로 양쪽의 함수를 테스트 해보고 성능이 빠른 쪽을 사용하도록 한다.(중요!!!) Find함수와 Filter함수는 어떻게 다를까? Find함수과 Filter함수 양쪽 다 Array를 지원하는 javascript 내장함수로 조건에 맞는 값을 리턴해..

[JS] javascript에서 로직 실행시간을 측정하는 방법 ( feat. console.time 함수 사용 )
FrontEnd/JavaScript 2024. 1. 27. 23:12

javascript에서 로직의 수행시간을 측정하는 방법 console.time, console.timeEnd()함수를 사용하는 방법 정적 console.time()메서드는 작업에 소요되는 시간을 추적하는 데 사용할 수 있는 타이머를 시작합니다. 각 타이머에 고유한 이름을 지정하고 특정 페이지에서 최대 10,000개의 타이머를 실행할 수 있습니다. 동일한 이름으로 호출하면 console.timeEnd()브라우저는 타이머가 시작된 이후 경과된 시간을 밀리초 단위로 출력합니다. -MDN 기본문법 console.time() //...로직 //...로직 //...로직 console.timeEnd() //console.time()을 시작점으로 해서 console.timeEnd()까지의 시간을 출력해줌 샘플코드 co..

[JS] javascript에서 IIFE(Immediately Invoked Function Expression)패턴이란?
FrontEnd/JavaScript 2024. 1. 22. 12:57

IIFE패턴에 대해 정리하게 된 계기 프로젝트에 프리티어를 적용하는데, 이상한 구문을 발견... 처음에는 프리티어가 제대로 작동하지 않는다고 생각했다.. 하지만 나중에 이게 IIFE패턴이고 프리티어는 정상적으로 작동하고 있다는 것을 알게 되었다. 관련 내용은 아래 링크 참조 [Prettier] 프리티어 사용시 IIFE패턴 앞에 세미콜론(;)이 붙는 현상에 대한 이야기 [Prettier] 프리티어 사용시 IIFE패턴 앞에 세미콜론(;)이 붙는 현상에 대한 이야기 VSCODE에 Prettier를 설치해서 코드 스타일을 통일하고 있는데, 이해가 되지 않는 일이 있었다. 세미콜론 사용여부를 false로 설정해두었는데도 특정코드 앞에 세미콜론(;)이 계속 붙는 것이었다. 문 bongra.tistory.com II..

article thumbnail
[JS] 원시타입(primitive) VS 참조타입(reference)의 차이점 (2) ( 참조타입 복사 )
카테고리 없음 2024. 1. 19. 19:46

저번에 정리에 이은 2번째.. 글이 길어져서 참조타입에 대해 정리 못한게 있어 짧게 정리하려 한다. 다음과 같은 코드가 있다고 생각해보자. 샘플코드1 let user = { name: "john", }; const changeUser = (user_copy) => { user_copy.name = 'bome' console.log(user.name) // 결과값: "bome" console.log(user_copy.name) // 결과값: "bome" }; changeUser(user); 샘플코드2 let user = { name: "john", }; const changeUser = (user_copy) => { user_copy = { name: "bome", }; console.log(user.na..

article thumbnail
[JS] 원시타입(primitive) VS 참조타입(reference)의 차이점 (1)
FrontEnd/JavaScript 2024. 1. 19. 14:03

javascript에는 2가지의 데이터 타입이 있는데 원시타입(primitive)과 참조타입(reference)이다. 데이터타입이라고 하면 문자열(String)이나 정수(Number), 배열(Array), 객체(Obejct)와 같은 친구들이 떠오를텐데 여기서의 원시타입과 참조타입은 위의 친구들의 조금 더 상위(?)개념이라고 이해하면 편할 거 같다. 원시타입(primitive) VS 참조타입(reference)의 종류 원시타입에는 Number, Bigint, String, Boolean, Null, Symbol, Undefined 이렇게 7종류가 있고 참조타입에는 Object, Array, Function, Date 등이 있다. - MDN 참조 각 타입들에 대해서는 따로 설명하지 않고 원시타입과 참조타입이..

[JS] 자바스크립트의 콜백(Callback)함수에 대한 개념 및 샘플코드를 통해 이해해보자.
FrontEnd/JavaScript 2023. 5. 21. 20:56

가끔 콜백함수가 뭔지 헷갈려 하는 사람이 많기도 하고, 나도 개발을 할때는 자주 쓰는데 설명하라고 하면 헷갈릴 때가 있어 정리해본다. 콜백(Callback) 함수란? 콜백 함수는 다른 함수에 인수로 전달된 다음 외부 함수 내에서 호출되어 일종의 루틴이나 작업을 완료하는 함수입니다. -MDN- 위는 MDN에서 설명하고 있는 콜백함수인데, 저 빨갛게 표시한 게 콜백함수의 전부이다. 요약하자면 정의 : 콜백함수란 함수에 파라메터로서 함수가 들어가는 것을 의미한다. 용도 : 콜백함수는 함수내에서 일종의 루틴이나 작업을 위해 사용된다. 이렇게만 보면 잘 이해가 되지 않지만, 알게 모르게 쓴 적이 많을 것이다. 샘플코드랑 실제 어떤 경우에 자주 쓰이는지 코드로 확인해보자. 콜백(Callback) 함수 샘플코드 샘플..

728x90