JavaScript
-
JavaScript 함수형 프로그래밍 (Functional Programming)JavaScript 2021. 5. 15. 19:21
@ 업데이트 중... @ 대부분의 코드 결과는 codesandbox에서 작성한 코드의 결과를 적습니다. 참고하세요 함수형 프로그래밍(Functional Programming)이란? - 외부에서 관찰 가능한 부수효과가 제거된 불편 프로그램을 작성하기 위해 순수함수를 선언적으로 평가하는 것 함수형 프로그래밍 특징 - 선언적 (명령형이 아니다) - 부수효과가 없다. (순수 함수) - 상태 변이를 최소화한다. - 불변성 - 참조 투명성 부수 효과(side effect)가 발생하는 경우 - 전역범위에서 변수, 속성, 자료구조를 변경 - this 사용 - 사용자 입력을 처리 - 함수의 원래 인수 값을 변경 - 예외를 일으킨 해당 함수가 예외를 붙잡지 않고 그대로 예외를 던짐 - 화면 또는 로그 파일에 출력 - HT..
-
JavaScript 디자인 패턴JavaScript 2021. 5. 12. 22:11
@ 업데이트 중... @ 이 글은 최하단에 위치해있는 References를 참고하여 작성된 글입니다. @ chat: 도서 때문인지는 모르겠지만 정말 배우기 거부감 드는 책이다... 이 글 작성하는 것도 매우 거부감 들고... Note) UML (통합 모델링 언어, Unified Modeling Language): 객체 관련 표준화 기구인 OMG(Object Management Group)가 개발한 컴퓨터 시스템을 기술하는 표준화된 언어이다. UML은 사용자 상호작용 다이어그램, 시퀀스 다이어그램과 상태 머신을 생성할 수 있는 어휘를 포함함 Part 1. GoF에 소개된 패턴 생성 1) 추상 팩토리(Abstrarct Factory) 예를 들어, 어떤 왕국이 있을 때 왕은 나라를 지배하고 있다. 왕의 영향력..
-
함수 호출 방법JavaScript 2021. 4. 25. 00:48
자바스크립트에서는 여러 방법으로 함수 호출이 가능합니다. // 이런 함수가 있다고 할 때 const A = (data) => { console.log(data) } // 대부분 이렇게 호출할 겁니다 A(1); // 이 외의 방법도 있으니 알아봅시다. 1] `(백틱)을 사용하는 방법 (Tagged Template Literal) Template Literal은 단순히 문자열에서만 변수를 나타내기 위해 사용하는 것이 아니라 함수에서도 적용이 가능합니다. const C = (value) => { console.log(value) } // C(1) >>> 1 // => C`1` >>> "1" // 완전히 같게 하려면 매개변수를 다르게 해야 합니다. const C = (str, value) => { console..
-
JavaScript Garbage CollectorJavaScript 2021. 1. 7. 14:00
1] 메모리의 생명주기 메모리의 생명주기는 크게 할당, 사용, 해제로 구분할 수 있다. 1. 변수를 사용하기 위해서 메모리를 할당받는다. 2. 메모리를 사용한다. 3. 변수 등의 사용이 끝나면 메모리를 해제한다. 3번에서 메모리를 하지 않으면 메모리 누수가 일어나 컴퓨터가 메모리가 부족하다며 멈추거나 할 수 있다. 자바스크립트에서는 메모리를 할당받고 사용하는 것까진 있지만 메모리를 해제하는 API는 없다. 그래서 사용되는 것이 Garbage Collector(GC)라는 것이다. 2] Garbage Collector란? Garbage Collector 라는 것은 브라우저(자바스크립트 엔진: 자바스크립트 코드를 실행하는 프로그램 혹은 인터프리터)에서 자동적으로 메모리를 관리하기 위해서 동작되는 것이다. C,..
-
Map, SetJavaScript 2021. 1. 6. 18:27
1] Map Map은 객체와 유사하지만 객체는 key를 문자열로 저장하고 map은 다양한 자료형 그대로 저장한다는 차이점이 있다. 또한 객체와는 다르게 입력 순서가 유지된다. const map = new Map() map.set(true, 1) console.log(map.size) // 1 console.log(map.has(true)) // true console.log(map.has('key')) // false console.log(map.get(true)) // 1 // method(arguments) => return Type map.get(key): key에 해당하는 value map.set(key, value) => key와 value를 추가 map.delete(key) => key에 해당..
-
브라우저 동작 원리와 Progressive Render, Built-in 객체JavaScript 2021. 1. 6. 17:18
1] 브라우저 동작 원리 브라우저는 사용자 인터페이스, 브라우저 엔진, 렌더링엔진, JavaScript 엔진, 통신, 웹 저장소 등으로 구분된다. 먼저 클라이언트가 브라우저를 통해 서버에 웹 페이지 접근을 요청하면 서버는 웹 페이지를 응답해준다 이 때 html, css, js 파일을 전송받고 이를 표현하는데, 1) HTML 구문 분석기가 HTML을 분석한다. 분석된 HTML은 DOM Tree를 생성하게 된다. script 태그를 만나는 즉시 구문 분석을 중단하고 자바스크립트 엔진에게 제어 권한을 넘긴다. 2) 자바스크립트 엔진은 script 태그에 정의된 자바스크립트 내용을 분석하고 이를 실행한 뒤에 HTML 구문 분석기에게 다시 제어권한을 넘긴다 3) 스타일 태그나 스타일이 정의된 곳에 CSS 구문 분..
-
1급시민, Lexical Scope, 실행컨텍스트, Closure, this, apply, call, bindJavaScript 2021. 1. 6. 15:25
JavaScript에서 중요한 개념들에 포함되는 1급시민, Lexical Scope, 실행컨텍스트, Closure, this에 대해서 핵심만 간단하게 정리해보려 한다 1] 1급시민 JavaScript에서 1급 시민의 조건은 1. 변수에 담을 수 있으며 2. 반환할 수 있다 3. 인자로 전달할 수 있다. 함수도 변수에 담을 수 있고 반환할 수 있으며 함수 자체를 인자로 전달할 수 있으므로 함수도 1급 시민임과 동시에 1급함수라고 부른다 객체 같은 경우 1급 시민의 조건을 만족함과 동시에 객체이므로 1급 객체라고 부르며 이외에도 모든 자료형은 1급 시민의 조건을 만족한다 // 원시타입 function AnyFunc(a) { console.log(a) return a } const anyFunc = AnyFu..
-
JavaScript - 자료구조 (이중연결리스트)JavaScript 2021. 1. 2. 17:48
오늘은 이중 연결 리스트 (Double Linked List)에 대해 알아보겠습니다. 파이썬에 있는 것을 스스로 JavaScript로 옮겼습니다. 연결 리스트란? 기존 C++과 같이 메모리를 관리해줘야 하는 언어에서 배열은 사용할 공간이 늘어날 일을 대비해 미리 공간을 할당했어야 했습니다. 그러한 단점을 극복하고자 연결 리스트라는 자료구조가 탄생합니다. 일반 연결 리스트는 사람이 허리에 끈을 묶고 기차놀이를 하는 것이라 생각하시면 됩니다. 앞 사람이 가는 방향으로만 갈 수 있고 사람이 추가되면 뒤쪽에만 추가되듯이요 A → B 용어) 노드: 데이터 + 주소로 이루어진 데이터 저장 단위 포인터: 주소와 같은 말인데 이 데이터 다음에 어떤 노드가 오는지 가리키는 주소입니다 장점) 미리 공간을 할당하지 않아도 ..
-
JavaScript - 자료구조 (큐, 스택)JavaScript 2021. 1. 2. 17:47
JavaScript에서는 Queue와 Stack은 매우 간단합니다. Queue란? FIFO(First In, First Out)정책을 사용하는 자료구조 → 즉 먼저 들어간 자료가 먼저 나온다는 뜻 예) 놀이기구를 타기 위해 줄을 서는 상황 (먼저 탄 사람이 먼저 놀이기구에서 내리겠죠?) 실제 활용) JavaScript에서 jQuery의 이벤트 처리 방식이 큐와 비슷하다는 것으로 알고 있습니다. Queue에서 데이터를 넣을 때는 enqueue(인큐)라고 말하고 데이터를 빼올 때는 dequeue(디큐)라고 말합니다. Stack이란? LIFO (Last In First Out)정책을 사용하는 자료구조 → 나중에 들어간 자료가 먼저 나온다는 뜻 예) 책을 쌓아놓았다가 맨 아래의 책을 꺼내야하는 상황 (물론 맨 ..
-
JavaScript - Array 메서드 정리JavaScript 2021. 1. 2. 17:46
(계속 추가 중) 자바스크립트에는 무수히 많은 메서드가 있습니다. 그 중에 Array에 대해 알아봅시다. 편의상 세미콜론(;)은 붙이지 않겠습니다. MDN문서 페이지의 좌측에서 모든 메서드를 볼 수 있습니다. deprecated (엄지손가락이 아래로 향하고 있는 모양) = 머지 않아 사라지는 기능이므로 가급적 사용하지 않는 것이 좋습니다. 1) Array.length 배열의 길이를 반환합니다. const a = [1, 2, 3] console.log(a.length) // 3 2) Array.isArray(배열) 배열인지 아닌지를 판별하고 배열이면 True, 배열이 아니면 False를 반환합니다. const a = [1] const b = 1 console.log(Array.isArray(a)) // t..
-
새롭게 도입된 ES2021 문법JavaScript 2021. 1. 1. 20:44
새롭게 도입되었다기보다는 현재 Stage 4에 올라간 4가지 문법들을 소개해보고자 한다. 꽤나 흥미로운 문법들이 많다. 기존 문법으로 사용했을 때보다 코드량이 줄어들 수 있게 해준다거나 새로운 기능이 등장했다거나 기존 문법의 불편함을 해소해줄만한 문법들이 등장하였다. 1. String.prototype.replaceAll 기존에 있었던 replace에서 모든 문자열을 바꿔주려면 다음과 같이 적용했어야 했다. 또한 replace는 global flag를 붙여주지 않으면 첫번째로 찾은 녀석만 바꿔주었다. const str = 'abcabcabc' console.log(str.replace(/a/g, '*')) // *bc*bc*bc 그러나 ES2021에 등장한 replaceAll은 정규표현식이 필요없이 자동..