annyhpk.log

Javascript

JS 함수형 프로그래밍 _map, _filter 함수 만들어보기

1. 함수형 프로그래밍이란? 자료 처리를 수학적 함수의 계산으로 취급하고 상태와 가변 데이터를 멀리하는 프로그래밍 패러다임의 하나이다. 명령형 프로그래밍에서는 상태를 바꾸는 것을 강조하는 것과는 달리, 함수형 프로그래밍은 함수의 응용이 강조된다. 다형성을 높이고 부수 효과를 최소화 하는 순수 함수를 만들어 모듈화 수준을 높이는 프로그래밍 패러다임 순수 함수 : 부수효과가 없는 함수 즉, 어떤 함수에 동일한 인자를 주었을 때 항상 같은 값을 리턴하는 함수. 외부의 상태를 변경하지 않는 함수. ※ 함수형 프로그래밍은 계산량이 많을수록 더 나은 성능을 보여준다. 2. each 함수 만들기 map함수와 filter함수의 매개변수로 iterable list(data)와 콜백 함수를 받아서 각 요소별로 실행해줄 함..

Javascript

webWorker 맛보기

webWorker란? 웹 워커(Web worker)는 스크립트 연산을 웹 어플리케이션의 주 실행 스레드와 분리된 별도의 백그라운드 스레드에서 실행할 수 있는 기술입니다. 웹 워커를 통해 무거운 작업을 분리된 스레드에서 처리하면 주 스레드(보통 UI 스레드)가 멈추거나 느려지지 않고 동작할 수 있습니다 index.html run worker.js function sleep(delay) { let start = new Date().getTime(); while (new Date().getTime() < start + delay); } self.addEventListener('message', function(e) { console.log(e.data); // 일해라 워커! sleep(3000); // 3초가..

Javascript

리스트에 이벤트를 효율적으로 등록해보자!>

기존의 코드 - 각 태그를 선택하여 각각 이벤트를 주입해준다. 1 2 3 4 5 6 개선된 코드 - 태그에 이벤트를 주입하고 클릭한 이벤트가 이라면 내부로직을 동작시킨다. e.currentTartget : 이벤트 발생 시작 요소 ( 이벤트 핸들러가 부착된 요소) e.target : 이벤트 전파 최하단 요소 1 2 3 4 5 6

Javascript

일급 객체와 고차 함수

일급객체와 고차함수 일급객체란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 변수에 대입하거나 함수의 인자로 전달되거나 리턴할 수도 있는 연산을 지원하는 객체이다. const func1 = function(n) { // 함수 변수 할당 return n + n; } const func2 = (n) => { // arrow 함수 변수 할당 return n + n; } 고차 함수는 다른 함수를 인자로 받거나 다른 함수를 리턴하는 함수를 말한다. 이 때 다른 함수를 인자로 전달되는 함수를 콜백 함수라고 한다. 그리고 함수를 리턴하는 함수를 고안해 낸 학자 이름을 딴 커리 함수라고 한다. function double(n) { return n * n; } function func(f,..

Javascript

addEventListener 와 onclick

결론 부터 말하자면 addEventListener가 더 나은 방식입니다. addEventListener를 사용하세요. 두 개의 메소드는 아래와 같이 사용합니다. document.querySelector('.btn').onclick = () => { alert('click!'); } document.quertSelector('.btn').addEventListener('click', () => { alert('click!'); ), false); 1. 여러 이벤트 overwrite onclick는 한번에 하나의 이벤트만 할당할 수 있습니다. 그에 반해 addEventListener는 여러개의 이벤트를 overwrite할 수 있습니다. 아래의 예시를 봅시다. let eventHandler1 = () => {..

Javascript

Promise - 프로미스

Promise는 JavaScirpt에서 비동기 작업을 위한 중요한 구성 요소입니다. 그리고 Promise를 이해하고 배우고 응용하기가 쉽지 않다고 생각할 수 있습니다. 걱정하지 마세요. Promise는 대다수의 많은 웹 개발자들에게도 어려운 부분입니다. 자바스크립트에서 Promise는 무엇인가? Promise는 자바스크립트의 특별한 객체입니다. Promise는 비동기 작업이 성공적으로 완료된 후 값을 생성하거나 time out, network error 등으로 인해 성공적으로 완료되지 않은 경우는 오류를 생성합니다. 성공 => 값(성공된), 오류 => 오류 값 성공적으로 작업을 완료하면 resolve 함수 호출을 가르키고 에러가 발생하면 reject 함수호출을 합니다. 다음과 같이 Promise 생성자를..

Javascript

reducer - 리듀서

대표적으로 Redux라는 라이브러리는 리듀서를 이용하여 대규모 웹 어플리케이션의 상태관리를 합니다. 그러나 리듀서 함수는 개별적인 데이터 구조의 상태를 변경하는 데도 사용할 수 있습니다. const add = (acc, cur) => acc + cur // 리듀서 함수 [1,2,3,4,5].reducer(add) // => 15 // 리듀서를 실행 시키는 방법 우리가 만든 리듀서 add() 함수는 두개의 인자인 acc(accumulator : 누적값) 와 cur(current value : 현재값)이 있습니다. Array.Reduce() 메서드는 리듀서를 실행하고 배열의 반복이 완료된 후 acc(accumulator : 누적값)를 return합니다. acc(accumulator : 누적값)는 선택적으로 ..

Javascript

[js] 자바스크립트 Value

배열 1. 자바스크립트의 배열은 어떤 타입의 값을 가질 수 있다. var arr = [ 1, "2", [3], {4:4}, 0.5 ] 2. 배열의 크기를 정하지 않아도 되고, 원하는 값을 추가하면 된다. var arr[5] = "hello js" var arr[6] = 1234 3. 구멍난 배열을 조심하라. a[0] = 0 a[2] = 2 a.length // 3 a.[1] // undefined 4. 프로퍼티 키 표현식으로 추가할 수 있다. 단 length가 증가하지 않는다. a["hello"] = "hello" a.length // 3 5. 키로 넣는 문자열이 10진수 숫자 타입으로 바뀌면서 숫자 키를 사용한 것 같다. ※주의※ a["7"] = 777 a.length // 8 유사 배열 자바스크립트에..