본문 바로가기

자바스크립트84

[JavaScript] 함수형 프로그래밍 - 개요 들어가며 함수형 프로그래밍에 대해서는 많이 알고있다. 일급 함수, 불변성, 순수 함수 ... 등등 하지만 막상 이것들을 사용하려고 하니 과연 실제로 적용은 어떻게 해야할까? 아니 내가 제대로 이해하고 적용할 수 있는가? 적용이 가능한가? 라는 생각들이 들었다. 결국 내가 함수형 프로그래밍을 정확하게 이해를 한 것이 맞는가? 에 대한 의문으로 이어졌다. 이론은 아는데 그것을 사용하지 못한다면 정말 공부한 것이 맞을까? 마침 인프런에 자바스크립트로 알아보는 함수형 프로그래밍이라는 무료 강의가 있어 이번에 공부해보려고 한다. 함수형 프로그래밍 정의 함수형 프로그래밍은 부수적인 효과를 배제하고, 조합성을 강조하는 프로그래밍이다. 부수 효과를 배제한다 => 순수 함수를 만든다. 조합성을 강조한다. => 모듈화 수.. 2022. 11. 12.
nullish coalescing operator ( nullish 병합 연산자 : ?? ) 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에 해당하지만 ??의 경우.. 2022. 10. 24.
[JavaScript] Vanilla JavaScript로 상태 관리 만들기! 상태 관리? 작은 프로젝트를 만들 때는 state를 정의하고 state를 바탕으로 필요한 컴포넌트를 랜더링 한다. 하지만 프로젝트의 규모가 커지면 부모 컴포넌트의 state가 필요한 자식 컴포넌트로 가는 깊이가 깊어질 수 있다. 그렇게 되면 필요없는 컴포넌트마저도 state가 거쳐가기 때문에 전체적인 코드가 복잡하게 된다. 그래서 나온 것이 상태 관리 시스템이다. 전역으로 상태를 관리하고 변화가 감지되면 상태를 가지고 있는 모든 컴포넌트에서 리 렌더링이 발생하는 방식이다. 만들기! 가장 일반적인 방법이 Pub-Sub 패턴으로 만드는 방식이 아닐까 싶다. 전반적인 틀을 Store라는 클래스를 만들고 해당 클래스의 state는 전역으로 관리되기 위해서 싱글톤으로 만들 것이다. 그리고 정의된 state를 각 .. 2022. 10. 1.
[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.. 2022. 9. 22.
[알고리즘] 최단 경로 알고리즘 - JavaScript 최단 경로 알고리즘? 그래프에서 특정 정점에서 목적지까지 최단 경로를 구하는 알고리즘이다. 대표적인 최단 경로 알고리즘은 다음과 같다. DFS 다익스트라 벨만-포드 플로이드 와샬 목적에 따라 알고리즘을 선택할 수 있다. BFS, DFS 그래프의 간선 가중치가 모두 같을 때 적합하다. 2차원 배열로 구성된 지도에서 최단 거리를 찾아야 한다면 BFS, DFS로 푸는 경우가 많다. 다익스트라 알고리즘 그래프의 간선 가중치가 각각 다른 경우 적합하다. 우선 큐를 이용해서 만들 수 있으며, 시간 복잡도는 V가 정점의 수, E가 간선의 수라면 O(E log V) 이다. 작동 방법 1. 시작점을 제외한 모든 정점의 거리를 무한으로 설정한다. 시작은 0 2. 시작점을 선택한다. 3. 선택한 정점에서 갈 수 있는 정점의.. 2022. 9. 21.
[알고리즘] 큰 수 만들기 들어가며 그리디 - JavaScript를 먼저 공부한 다음 푼 문제입니다. 바로 풀리지 않거나 설명이 필요하다면 참고하는 것을 추천드립니다. 문제 설명 어떤 숫자에서 k개의 수를 제거했을 때 얻을 수 있는 가장 큰 숫자를 구하려 합니다. 예를 들어, 숫자 1924에서 수 두 개를 제거하면 [19, 12, 14, 92, 94, 24] 를 만들 수 있습니다. 이 중 가장 큰 숫자는 94 입니다. 문자열 형식으로 숫자 number와 제거할 수의 개수 k가 solution 함수의 매개변수로 주어집니다. number에서 k 개의 수를 제거했을 때 만들 수 있는 수 중 가장 큰 숫자를 문자열 형태로 return 하도록 solution 함수를 완성하세요. 제한조건 number는 2자리 이상, 1,000,000자리 이.. 2022. 9. 20.
[알고리즘] 그리디 - JavaScript 그리디? 매 선택에서 지금 순간 가장 최적인 답을 선택하는 알고리즘이다. A에서 F로 이동할 때 전체 코스트로만 본다면 D로 가는 것이 더 빠르다. 하지만 그리디를 적용한다면 A 의 시점으로만 봤을 때는 B로 가는 것이 더 빠르기 때문에 B로 이동하게 된다. 이처럼 현재 시점의 최적의 답은 선택하지만 이것이 최적의 결과를 보장하지는 않는다. 그리디의 특징 보통 최적의 결과를 구하는 알고리즘보다 빠른 경우가 많다. 크루스칼, 다익스트라 알고리즘 등에 사용된다. 직관적인 문제를 풀 때 적합하다. 사용되는 방식 동전 반환 문제로, 큰 단위인 지폐, 동전 순으로 거스름돈을 만들 때 사용한다. 1860원을 먼저 가장 큰 단위인 1000원짜리 지폐로, 그 후 500원, 100원, 50원, 10원 순으로 구하면 빠르.. 2022. 9. 19.
[JavaScript] 일반 함수 vs 화살표 함수 Array Function? 화살표 함수는 ES6에서 새롭게 추가되었다. function fun () { // 일반 함수 // ... } const arrFun = () => { // 화살표 함수 // ... } 화살표 함수 vs 일반 함수 1. this 여기서 바인딩이란 말이 많이 나올텐데, 바인딩이란 함수 호출과 실제 함수를 연결하는 방법이다. 동적 바인딩과 정적 바인딩으로 구분이 가능한데, 동적 바인딩은 실행 시간에 이루어지거나 실행 시간에 변경된다. 정적 바인딩은 실행 시간 전에 일어난다. 실행 시간에는 변하지 않는 상태로 유지된다. 일반 함수 자바스크립트에서 함수는 실행될 때마다 함수 내부에 this라는 객체가 추가된다. 일반 함수에서 this가 바인딩 되는 상황이 3가지가 있는데, 1. 함수 .. 2022. 9. 11.
[알고리즘] 2개 이하로 다른 비트 문제 설명 양의 정수 x에 대한 함수 f(x)를 다음과 같이 정의합니다. x보다 크고 x와 비트가 1~2개 다른 수들 중에서 제일 작은 수 예를 들어, f(2) = 3 입니다. 다음 표와 같이 2보다 큰 수들 중에서 비트가 다른 지점이 2개 이하이면서 제일 작은 수가 3이기 때문입니다. 수비트다른 비트의 개수 2 000...0010 3 000...0011 1 f(7) = 11 입니다. 다음 표와 같이 7보다 큰 수들 중에서 비트가 다른 지점이 2개 이하이면서 제일 작은 수가 11이기 때문입니다. 수비트다른 비트의 개수 7 000...0111 8 000...1000 4 9 000...1001 3 10 000...1010 3 11 000...1011 2 정수들이 담긴 배열 numbers가 매개변수로 주어집니.. 2022. 9. 7.
반응형

티스토리툴바