[JavaScript] 재귀함수 vs 반복문
·
JavaScript
알고리즘 공부를 하다보면 재귀함수를 사용하는 경우도 있고, 반복문을 사용하는 경우도 있다. 사용하는 것에는 문제가 없지만 그 둘의 차이가 무엇일까? 재귀함수 vs 반복문 재귀함수는 자기 자신을 호출해는 함수이고, 반복문은 특정 수만큼 반복한다. 일반적으로 반복문이 실행 속도는 더 빠르다. 그 이유는 재귀함수의 경우 매개변수, 리턴값, 리턴 시 돌아가야 하는 위치 등의 정보가 스택에 저장되지만 반복문의 경우 그러한 오버헤드가 없다. 그렇다면 굳이 재귀함수를 사용하는 이유가 무엇일까? 재귀함수는 반복문에 비해서 속도가 느리다는 단점이 있으니, 전부 반복문을 사용해서 해결해도 된다. 하지만 그래도 재귀함수를 사용하는 사람이 있다. 그 이유는 뭘까? 그 이유는 알고리즘을 해결할 때 재귀 함수로 표현하면 더 자연..
[JavaScript] 배열에서 연속적인 숫자 뽑아내기
·
JavaScript
실생활에서 자주 접할 수 있는데, 비밀번호, 아이디, .... (자주..? 는 아닐지도)에서 패턴 반복을 막기 위해서 사용할 경우가 있다. 정규식을 사용하면 간단하게 해결할 수 있는 문제일 수 있지만, 만약 0 ~ 9까지만 숫자가 있는게 아닌 0 ~ 100000000000 이라면? ( 과장을 보탰다. 실제로 저기서 뽑는다면 엉청 오래걸릴지도...) 정규식으로 어썸하게 해결하는 정규식 굇수분들이 있을 수 있지만 본인은 못하기 때문에 반복문을 사용해서 해결하였다. function func(array, goal) { for(let i = 0; i < array.length; i ++) { let cnt = 1; let num = array[i]; while(true) if(array.includes(++num..
[JavaScript] 함수형 프로그래밍 - 함수형으로 전환하기_1
·
JavaScript
이번에는 명령형 코드를 함수형 코드로 전환하는 작업을 할 계획이다. 명령형 코드 작성 전환하기 전 명령형 코드를 먼저 작성하려고 한다. const user = [ { id: 1, name: "ID", age: 36 }, { id: 2, name: "BC", age: 48 }, { id: 3, name: "QW", age: 25 }, { id: 4, name: "RE", age: 32 }, { id: 5, name: "WD", age: 12 }, { id: 6, name: "AS", age: 10 }, { id: 7, name: "DD", age: 50 }, { id: 8, name: "SV", age: 23 }, ] 30세 이상인 user를 거른다. const temp_users = [] for(let ..
[JavaScript] 함수형 프로그래밍 - 개요
·
JavaScript
들어가며 함수형 프로그래밍에 대해서는 많이 알고있다. 일급 함수, 불변성, 순수 함수 ... 등등 하지만 막상 이것들을 사용하려고 하니 과연 실제로 적용은 어떻게 해야할까? 아니 내가 제대로 이해하고 적용할 수 있는가? 적용이 가능한가? 라는 생각들이 들었다. 결국 내가 함수형 프로그래밍을 정확하게 이해를 한 것이 맞는가? 에 대한 의문으로 이어졌다. 이론은 아는데 그것을 사용하지 못한다면 정말 공부한 것이 맞을까? 마침 인프런에 자바스크립트로 알아보는 함수형 프로그래밍이라는 무료 강의가 있어 이번에 공부해보려고 한다. 함수형 프로그래밍 정의 함수형 프로그래밍은 부수적인 효과를 배제하고, 조합성을 강조하는 프로그래밍이다. 부수 효과를 배제한다 => 순수 함수를 만든다. 조합성을 강조한다. => 모듈화 수..
[JavaScript] Event의 target과 currentTarget
·
JavaScript
Event 객체에는 Target과 currentTarget이 존재한다. const handleClick = (e) => { console.log(e.target); console.log(e.currentTarget); }; 버튼 target은 이벤트를 발생시킨 주체를 의미하고, currentTarget은 이벤트 핸들러를 가지고 있는 요소를 나타낸다. 필요에 따라 target 또는 currentTarget을 사용해서 이벤트 핸들링을 하면 된다.
nullish coalescing operator ( nullish 병합 연산자 : ?? )
·
JavaScript
nullish 병합 연산자 ?? 를 사용하면 조건식을 간단하게 처리할 수 있다. a ?? b 의 경우 a가 null이 아니고 undefined도 아니면 a 값을 return 그 외의 경우에는 b 값을 return 한다. x = (a !== null && a !== undefined) ? a : b 이 코드를 ?? 연산자를 사용해서 간단하게 처리가 가능하다. || 와 차이점 || 연산자의 경우에도 비슷한 처리가 가능하다. a ?? b 마찬가지로 a값이 있다면 a를, 없다면 b를 return 해준다. 그럼 차이점은 무엇일까? let height = 0; height = height || 100 // 100 height = height ?? 100 // 0 ||의 경우 0도 false에 해당하지만 ??의 경우..
[JavaScript] Vanilla JavaScript로 상태 관리 만들기!
·
JavaScript
상태 관리? 작은 프로젝트를 만들 때는 state를 정의하고 state를 바탕으로 필요한 컴포넌트를 랜더링 한다. 하지만 프로젝트의 규모가 커지면 부모 컴포넌트의 state가 필요한 자식 컴포넌트로 가는 깊이가 깊어질 수 있다. 그렇게 되면 필요없는 컴포넌트마저도 state가 거쳐가기 때문에 전체적인 코드가 복잡하게 된다. 그래서 나온 것이 상태 관리 시스템이다. 전역으로 상태를 관리하고 변화가 감지되면 상태를 가지고 있는 모든 컴포넌트에서 리 렌더링이 발생하는 방식이다. 만들기! 가장 일반적인 방법이 Pub-Sub 패턴으로 만드는 방식이 아닐까 싶다. 전반적인 틀을 Store라는 클래스를 만들고 해당 클래스의 state는 전역으로 관리되기 위해서 싱글톤으로 만들 것이다. 그리고 정의된 state를 각 ..
[JavaScript] ?? 문법
·
JavaScript
우리가 조건을 처리할 때 가장 먼저 생각하는 것이 if문과 switch문이다. const ifCase = true; if(ifCase) console.log("True"); const switchCase = true; switch(switchCase) { case true: console.log("True"); break; default: console.log("False"); } 여기서 좀 더 간단하게 사용하고 싶은 경우에는 삼항연산자를 사용한다. const case = true; console.log(case ? "True" : "False") 최근에 알게된 것이 하나 더 있는데, ?? 연산자이다. ( 정확한 명칭은 아직 모르는 .... ) const a = undefinded; console.log..